This commit is contained in:
ave 2019-02-18 11:43:07 +03:00
commit dc2bc9c1a7
No known key found for this signature in database
GPG key ID: 09356ABAA42C842B
236 changed files with 57278 additions and 0 deletions

900
scss/_blog.scss Normal file
View file

@ -0,0 +1,900 @@
/* Home latest Blog Area css
============================================================================================ */
.latest_news_area{
}
.latest_news_inner{
}
.l_news_item{
background: #f9f9ff;
padding: 60px 30px;
border-radius: 5px;
@include transition;
.date{
background: #ffffff;
color: $pfont;
border: 1px solid #dddddd;
padding: 0px 18px;
display: inline-block;
line-height: 28px;
border-radius: 3px;
margin-bottom: 22px;
}
h4{
font-size: 20px;
font-family: $open;
font-weight: 600;
text-transform: uppercase;
color: $dip;
line-height: 30px;
margin-bottom: 15px;
}
p{
margin-bottom: 22px;
}
.post_view{
a{
font-size: 14px;
font-family: $rob;
font-weight: normal;
color: #aaaaaa;
margin-right: 20px;
i{
padding-right: 6px;
}
}
}
&:hover{
background: #fff;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
.date{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
color: #fff;
border-color: #f9f9ff;
}
h4{
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #bc2bff), color-stop(0.15, #bc2bff), color-stop(0.3, #7249fb), color-stop(0.45, #7249fb), color-stop(0.6, #7249fb),color-stop(0.75, #7249fb), color-stop(0.9, #7249fb), color-stop(1, #7249fb) );
background-image: gradient( linear, left top, right top, color-stop(0, #bc2bff), color-stop(0.15, #bc2bff), color-stop(0.3, #7249fb), color-stop(0.45, #7249fb), color-stop(0.6, #7249fb),color-stop(0.75, #7249fb), color-stop(0.9, #7249fb), color-stop(1, #7249fb) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
}
/* End Home latest Blog Area css
============================================================================================ */
/* Causes Area css
============================================================================================ */
.causes_area{
}
.causes_slider{
.owl-dots{
text-align: center;
margin-top: 80px;
.owl-dot{
height: 14px;
width: 14px;
background: #eeeeee;
display: inline-block;
margin-right: 7px;
&:last-child{
margin-right: 0px;
}
&.active{
background: $baseColor;
}
}
}
}
.causes_item{
background: #fff;
.causes_img{
position: relative;
.c_parcent{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
height: 3px;
background: rgba(255, 255, 255, .5);
span{
width: 70%;
height: 3px;
background: $baseColor;
position: absolute;
left: 0px;
bottom: 0px;
&:before{
content: "75%";
position: absolute;
right: -10px;
bottom: 0px;
background: $baseColor;
color: #fff;
padding: 0px 5px;
}
}
}
}
.causes_text{
padding: 30px 35px 40px 30px;
h4{
color: $dip;
font-family: $rob;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
cursor: pointer;
&:hover{
color: $baseColor;
}
}
p{
font-size: 14px;
line-height: 24px;
color: $pfont;
font-weight: 300;
margin-bottom: 0px;
}
}
.causes_bottom{
a{
width: 50%;
border: 1px solid $baseColor;
text-align: center;
float: left;
line-height: 50px;
background: $baseColor;
color: #fff;
font-family: $rob;
font-size: 14px;
font-weight: 500;
& + a{
border-color: #eeeeee;
background: #fff;
font-size: 14px;
color: $dip;
}
}
}
}
/* End Causes Area css
============================================================================================ */
/*================= latest_blog_area css =============*/
.latest_blog_area{
background: #f9f9ff;
}
.single-recent-blog-post{
margin-bottom: 30px;
.thumb{
overflow: hidden;
img{
transition: all 0.7s linear;
}
}
.details{
padding-top: 30px;
.sec_h4{
line-height: 24px;
padding: 10px 0px 13px;
transition: all 0.3s linear;
&:hover{
color: $pfont;
}
}
}
.date{
font-size: 14px;
line-height: 24px;
font-weight: 400;
}
&:hover{
img{
transform: scale(1.23) rotate(10deg);
}
}
}
.tags{
.tag_btn{
font-size: 12px;
font-weight: 500;
line-height: 20px;
border: 1px solid #eeeeee;
display: inline-block;
padding: 1px 18px;
text-align: center;
color: $dip;
&:before{
background: $baseColor;
}
& + .tag_btn{
margin-left: 2px;
}
}
}
/*========= blog_categorie_area css ===========*/
.blog_categorie_area{
padding-top: 80px;
padding-bottom: 80px;
}
.categories_post{
position: relative;
text-align: center;
cursor: pointer;
img{
max-width: 100%;
}
.categories_details{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: rgba(34, 34, 34, 0.80);
color: #fff;
transition: all 0.3s linear;
display: flex;
align-items: center;
justify-content: center;
h5{
margin-bottom: 0px;
font-size: 18px;
line-height: 26px;
text-transform: uppercase;
color: #fff;
position: relative;
// &:before{
// content: "";
// height: 1px;
// width: 100%;
// background: #fff;
// position: absolute;
// bottom: 0px;
// left: 0px;
// }
}
p{
font-weight: 300;
font-size: 14px;
line-height: 26px;
margin-bottom: 0px;
}
.border_line{
margin: 10px 0px;
background: #fff;
width: 100%;
height: 1px;
}
}
&:hover{
.categories_details{
background-image: -moz-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -webkit-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -ms-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-color: transparent;
}
}
}
/*============ blog_left_sidebar css ==============*/
.blog_area{
}
.blog_left_sidebar{
}
.blog_item{
margin-bottom: 40px;
}
.blog_info{
padding-top: 30px;
.post_tag{
padding-bottom: 20px;
a{
font: 300 14px/21px $rob;
color: $dip;
&:hover{
color: $pfont;
}
&.active{
color: $baseColor;
}
}
}
.blog_meta{
li{
a{
font: 300 14px/20px $rob;
color: #777777;
vertical-align: middle;
padding-bottom: 12px;
display: inline-block;
i{
color: $dip;
font-size: 16px;
font-weight: 600;
padding-left: 15px;
line-height: 20px;
vertical-align: middle;
}
&:hover{
color: $baseColor;
}
}
}
}
}
.blog_post{
img{
max-width: 100%;
}
}
.blog_details{
padding-top: 20px;
h2{
font-size: 24px;
line-height: 36px;
color: $dip;
font-weight: 600;
transition: all 0.3s linear;
&:hover{
color: $baseColor;
}
}
p{
margin-bottom: 26px;
}
}
.view_btn{
font-size: 14px;
line-height: 36px;
display: inline-block;
color: $dip;
font-weight: 500;
padding: 0px 30px;
background: #fff;
}
.blog_right_sidebar{
border: 1px solid #eeeeee;
background: #fafaff;
padding: 30px;
.widget_title{
font-size: 18px;
line-height: 25px;
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
text-align: center;
color: #fff;
padding: 8px 0px;
margin-bottom: 30px;
}
.search_widget{
.input-group{
.form-control{
font-size: 14px;
line-height: 29px;
border: 0px;
width: 100%;
font-weight: 300;
color: #fff;
padding-left: 20px;
border-radius: 45px;
z-index: 0;
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
@include placeholder{
color: #fff;
}
&:focus{
box-shadow: none;
}
}
.btn-default{
position: absolute;
right: 20px;;
background: transparent;
border: 0px;
box-shadow: none;
font-size: 14px;
color: #fff;
padding: 0px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
}
}
.author_widget{
text-align: center;
h4{
font-size: 18px;
line-height: 20px;
color: $dip;
margin-bottom: 5px;
margin-top: 30px;
}
p{
margin-bottom: 0px;
}
.social_icon{
padding: 7px 0px 15px;
a{
font-size: 14px;
color: $dip;
transition: all 0.2s linear;
& + a{
margin-left: 20px;
}
&:hover{
color: $baseColor;
}
}
}
}
.popular_post_widget{
.post_item{
.media-body{
justify-content: center;
align-self: center;
padding-left: 20px;
h3{
font-size: 14px;
line-height: 20px;
color: $dip;
margin-bottom: 4px;
transition: all 0.3s linear;
&:hover{
color: $baseColor;
}
}
p{
font-size:12px;
line-height: 21px;
margin-bottom: 0px;
}
}
& + .post_item{
margin-top: 20px;
}
}
}
.post_category_widget{
.cat-list{
li{
border-bottom: 2px dotted #eee;
transition: all 0.3s ease 0s;
padding-bottom: 12px;
a{
font-size: 14px;
line-height: 20px;
color: #777;
p{
margin-bottom: 0px;
}
}
& + li{
padding-top: 15px;
}
&:hover{
border-color: $baseColor;
a{
color: $baseColor;
}
}
}
}
}
.newsletter_widget{
text-align: center;
p{
}
.form-group{
margin-bottom: 8px;
}
.input-group-prepend {
margin-right: -1px;
}
.input-group-text {
background: #fff;
border-radius: 0px;
vertical-align: top;
font-size: 12px;
line-height: 36px;
padding: 0px 0px 0px 15px;
border: 1px solid #eeeeee;
border-right: 0px;
}
.form-control{
font-size: 12px;
line-height: 24px;
color: #cccccc;
border: 1px solid #eeeeee;
border-left: 0px;
border-radius: 0px;
@include placeholder{
color: #cccccc;
}
&:focus{
outline: none;
box-shadow: none;
}
}
.bbtns{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
color: #fff;
font-size: 12px;
line-height: 38px;
display: inline-block;
font-weight: 500;
padding: 0px 24px 0px 24px;
border-radius: 0;
}
.text-bottom{
font-size: 12px;
}
}
.tag_cloud_widget{
ul{
li{
display: inline-block;
a{
display: inline-block;
border: 1px solid #eee;
background: #fff;
padding: 0px 13px;
margin-bottom: 8px;
transition: all 0.3s ease 0s;
color: $dip;
font-size: 12px;
&:hover{
background-image: -moz-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -webkit-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -ms-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
color: #fff;
}
}
}
}
}
.br{
width: 100%;
height: 1px;
background: rgb(238, 238, 238);
margin: 30px 0px;
}
}
.blog-pagination {
padding-top: 25px;
padding-bottom: 95px;
.page-link {
border-radius: 0;
}
.page-item {
border: none;
}
}
.page-link {
background: transparent;
font-weight: 400;
}
.blog-pagination .page-item.active .page-link {
background-color: $baseColor;
border-color: transparent;
color:#fff;
}
.blog-pagination .page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #8a8a8a;
border: none;
}
.blog-pagination .page-link .lnr {
font-weight: 600;
}
.blog-pagination .page-item:last-child .page-link,
.blog-pagination .page-item:first-child .page-link {
border-radius: 0;
}
.blog-pagination .page-link:hover {
color: #fff;
text-decoration: none;
background-color: $baseColor;
border-color: #eee;
}
/*============ Start Blog Single Styles =============*/
.single-post-area {
.social-links {
padding-top: 10px;
li {
display: inline-block;
margin-bottom: 10px;
a {
color: #cccccc;
padding: 7px;
font-size: 14px;
transition: all 0.2s linear;
&:hover {
color: $dip;
}
}
}
}
.blog_details{
padding-top: 26px;
p{
margin-bottom: 10px;
}
}
.quotes {
margin-top: 20px;
margin-bottom: 30px;
padding: 24px 35px 24px 30px;
background-color: rgb(255, 255, 255);
box-shadow: -20.84px 21.58px 30px 0px rgba(176, 176, 176, 0.1);
font-size: 14px;
line-height: 24px;
color: #777;
font-style: italic;
}
.arrow {
position: absolute;
.lnr {
font-size: 20px;
font-weight: 600;
}
}
.thumb {
.overlay-bg {
background: rgba(#000, .8);
}
}
.navigation-area {
border-top: 1px solid #eee;
padding-top: 30px;
margin-top: 60px;
p{
margin-bottom: 0px;
}
h4{
font-size: 18px;
line-height: 25px;
color: $dip;
}
.nav-left {
text-align: left;
.thumb {
margin-right: 20px;
background: #000;
img {
@include transition();
}
}
.lnr {
margin-left: 20px;
opacity: 0;
@include transition();
}
&:hover {
.lnr {
opacity: 1;
}
.thumb {
img {
opacity: .5;
}
}
}
@media(max-width:767px) {
margin-bottom: 30px;
}
}
.nav-right {
text-align: right;
.thumb {
margin-left: 20px;
background: #000;
img {
@include transition();
}
}
.lnr {
margin-right: 20px;
opacity: 0;
@include transition();
}
&:hover {
.lnr {
opacity: 1;
}
.thumb {
img {
opacity: .5;
}
}
}
}
}
.sidebar-widgets{
@media(max-width:991px){
padding-bottom:0px;
}
}
}
.comments-area {
background:#fafaff;
border: 1px solid #eee;
padding: 50px 30px;
margin-top: 50px;
@media(max-width: 414px) {
padding: 50px 8px;
}
h4 {
text-align: center;
margin-bottom: 50px;
color: $dip;
font-size: 18px;
}
h5 {
font-size: 16px;
margin-bottom: 0px;
}
a {
color: $dip;
}
.comment-list {
padding-bottom: 48px;
&:last-child {
padding-bottom: 0px;
}
&.left-padding {
padding-left: 25px;
}
@media(max-width:413px) {
.single-comment {
h5 {
font-size: 12px;
}
.date {
font-size: 11px;
}
.comment {
font-size: 10px;
}
}
}
}
.thumb {
margin-right: 20px;
}
.date {
font-size: 13px;
color: #cccccc;
margin-bottom: 13px;
}
.comment {
color: #777777;
margin-bottom: 0px;
}
.btn-reply {
background-color: #fff;
color: $dip;
border:1px solid #eee;
padding: 2px 18px;
font-size: 12px;
display: block;
font-weight:600;
@include transition();
&:hover {
background-color: $baseColor;
color: #fff;
}
}
}
.comment-form {
background:#fafaff;
text-align: center;
border: 1px solid #eee;
padding: 47px 30px 43px;
margin-top: 50px;
margin-bottom: 40px;
h4 {
text-align: center;
margin-bottom: 50px;
font-size: 18px;
line-height: 22px;
color: $dip;
}
.name {
padding-left: 0px;
@media(max-width: 767px) {
padding-right: 0px;
margin-bottom: 1rem;
}
}
.email {
padding-right: 0px;
@media(max-width: 991px) {
padding-left: 0px;
}
}
.form-control {
padding: 8px 20px;
background: #fff;
border: none;
border-radius: 0px;
width: 100%;
font-size: 14px;
color: #777777;
border: 1px solid transparent;
&:focus {
box-shadow: none;
border: 1px solid #eee;
}
}
textarea{
&.form-control{
height: 140px;
resize: none;
}
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 13px;
color: #777;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 13px;
color: #777;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 13px;
color: #777;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 13px;
color: #777;
}
}
/*============ End Blog Single Styles =============*/

143
scss/_button.scss Normal file
View file

@ -0,0 +1,143 @@
/* Main Button Area css
============================================================================================ */
.main_btn{
padding: 0px 45px;
background-image: linear-gradient(to right, #bc2bff 0%, #7249fb 51%, #bc2bff 100%);
background-size: 200% auto;
z-index: 2;
display: inline-block;
transition: all 400ms linear;
text-align: center;
color: #fff;
font-size: 13px;
font-weight: 600;
font-family: $open;
line-height: 50px;
border-radius: 5px;
box-shadow: 0px 10px 30px 0px rgba(115, 73, 251, 0.3);
&:hover{
background-position: right center;
color: #fff;
}
}
.main_btn2{
display: inline-block;
background: #f9f9ff;
padding: 0px 45px;
color: $dip;
font-family: $open;
font-size: 13px;
font-weight: 600;
line-height: 48px;
border-radius: 5px;
outline: none !important;
box-shadow: none !important;
text-align: center;
border: 1px solid #dddddd;
cursor: pointer;
transition: color 0ms linear;
&:hover{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
box-shadow: 0px 10px 30px 0px rgba(115, 73, 251, 0.3);
color: #fff;
}
}
.submit_btn{
width: auto;
display: inline-block;
background-image: linear-gradient(to right, #bc2bff 0%, #7249fb 51%, #bc2bff 100%);
background-size: 200% auto;
padding: 0px 50px;
color: #fff;
font-family: $rob;
font-size: 13px;
font-weight: 500;
line-height: 50px;
border-radius: 5px;
outline: none !important;
box-shadow: none !important;
text-align: center;
cursor: pointer;
@include transition;
&:hover{
background-position: right center;
color: #fff;
}
}
.white_btn{
display: inline-block;
background: #f9f9ff;
padding: 0px 50px;
color: $dip;
font-family: $rob;
font-size: 12px;
font-weight: 500;
line-height: 50px;
border-radius: 0px;
outline: none !important;
box-shadow: none !important;
text-align: center;
cursor: pointer;
@include transition;
&:hover{
background: $baseColor;
color: #fff;
}
}
.banner_btn{
padding: 0px 45px;
line-height: 50px;
background: #fff;
color: $dip;
display: inline-block;
border-radius: 5px;
font-size: 13px;
font-family: $open;
font-weight: 600;
@include transition;
&:hover{
color: $dip;
box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);
}
}
.white_bg_btn{
background: #fff;
display: inline-block;
color: $dip;
line-height: 40px;
padding: 0px 28px;
font-size: 14px;
font-family: $rob;
font-weight: 500;
text-transform: uppercase;
@include transition;
border: none;
&:hover{
background: $baseColor;
color: #fff;
}
}
.blog_btn{
border: 1px solid #eeeeee;
background: #f9f9ff;
padding: 0px 32px;
font-size: 13px;
font-weight: 500;
font-family: $rob;
border-radius: 5px;
color: $dip;
line-height: 34px;
display: inline-block;
&:hover{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
border-color: #fff;
color: #fff;
}
}
/* End Main Button Area css
============================================================================================ */

197
scss/_contact.scss Normal file
View file

@ -0,0 +1,197 @@
/* Reservation Form Area css
============================================================================================ */
.reservation_form_area{
.res_form_inner{
max-width: 555px;
margin: auto;
box-shadow: 0px 10px 30px 0px rgba(153, 153, 153, 0.1);
padding: 75px 50px;
position: relative;
&:before{
content: "";
background: url(../img/contact-shap-1.png);
position: absolute;
left: -125px;
height: 421px;
width: 98px;
top: 50%;
transform: translateY(-50%);
}
&:after{
content: "";
background: url(../img/contact-shap-2.png);
position: absolute;
right: -125px;
height: 421px;
width: 98px;
top: 50%;
transform: translateY(-50%);
}
}
}
.reservation_form{
.form-group{
input{
height: 40px;
border-radius: 0px;
border: 1px solid #eeeeee;
outline: none;
box-shadow: none;
padding: 0px 15px;
font-size: 13px;
font-family: $rob;
font-weight: 300;
color: #999999;
@include placeholder{
font-size: 13px;
font-family: $rob;
font-weight: 300;
color: #999999;
}
}
.res_select{
height: 40px;
border: 1px solid #eeeeee;
border-radius: 0px;
width: 100%;
padding: 0px 15px;
line-height: 36px;
.current{
font-size: 13px;
font-family: $rob;
font-weight: 300;
color: #999999;
}
&:after{
content: "\e874";
font-family: 'Linearicons-Free';
color: #cccccc;
transform: rotate(0deg);
border: none;
margin-top: -17px;
font-size: 13px;
right: 22px;
}
}
&:last-child{
text-align: center;
}
}
}
/* End Reservation Form Area css
============================================================================================ */
/*============== contact_area css ================*/
.contact_area{}
.mapBox{
height: 420px;
margin-bottom: 80px;
}
.contact_info{
.info_item{
position: relative;
padding-left: 45px;
i{
position: absolute;
left: 0;
top: 0;
font-size: 20px;
line-height: 24px;
color: $baseColor;
font-weight: 600;
}
h6{
font-size: 16px;
line-height: 24px;
color: $rob;
font-weight: bold;
margin-bottom: 0px;
color: $dip;
a{
color: $dip;
}
}
p{
font-size: 14px;
line-height: 24px;
padding: 2px 0px;
}
}
}
.contact_form{
.form-group{
margin-bottom: 10px;
.form-control{
font-size: 13px;
line-height: 26px;
color: #999;
border: 1px solid #eeeeee;
font-family: $rob;
border-radius: 0px;
padding-left: 20px;
&:focus{
box-shadow: none;
outline: none;
}
@include placeholder{
color: #999;
}
}
textarea{
resize: none;
&.form-control{
height: 140px;
}
}
}
.submit_btn{
margin-top: 20px;
cursor: pointer;
}
}
/* Contact Success and error Area css
============================================================================================ */
.modal-message{
.modal-dialog{
position: absolute;
top: 36%;
left: 50%;
transform: translateX(-50%) translateY(-50%) !important;
margin: 0px;
max-width: 500px;
width: 100%;
.modal-content{
.modal-header{
text-align: center;
display: block;
border-bottom: none;
padding-top: 50px;
padding-bottom: 50px;
.close{
position: absolute;
right: -15px;
top: -15px;
padding: 0px;
color: #fff;
opacity: 1;
cursor: pointer;
}
h2{
display: block;
text-align: center;
color: $baseColor;
padding-bottom: 10px;
font-family: $rob;
}
p{
display: block;
}
}
}
}
}
/* End Contact Success and error Area css
============================================================================================ */

1441
scss/_elements.scss Normal file

File diff suppressed because it is too large Load diff

151
scss/_feature.scss Normal file
View file

@ -0,0 +1,151 @@
/* Feature Area css
============================================================================================ */
.feature_area{
}
.feature_inner{}
.feature_item{
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
padding: 50px 30px;
border-radius: 5px;
img{
margin-bottom: 35px;
}
h4{
color: $dip;
font-size: 20px;
font-family: $open;
font-weight: 600;
margin-bottom: 15px;
}
p{
margin-bottom: 0px;
}
}
/* End Feature Area css
============================================================================================ */
/* End Feature Area css
============================================================================================ */
.interior_area{
background: #f9faff;
padding-top: 65px;
padding-bottom: 65px;
&.interior_two{
background: #fff;
}
}
.interior_inner{
.col-lg-5{
vertical-align: middle;
align-self: center;
}
.interior_text{
h4{
color: $dip;
font-family: $open;
font-weight: 600;
line-height: 45px;
font-size: 36px;
margin-bottom: 30px;
}
p{
margin-bottom: 40px;
}
}
}
/* End Feature Area css
============================================================================================ */
/* Download App Area css
============================================================================================ */
.download_app_area{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
}
.app_inner{
max-width: 780px;
margin: auto;
text-align: center;
h2{
color: #fff;
font-size: 36px;
font-family: $open;
font-weight: 600;
margin-bottom: 18px;
}
p{
color: #fff;
margin-bottom: 40px;
}
}
.app_btn_area{
.app_btn{
display: inline-block;
border: 1px solid #eeeeee;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 30px;
padding-right: 30px;
border-radius: 5px;
margin-right: 16px;
@inlcude transition;
&:hover{
background: #fff;
box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);
.media{
.d-flex{
i{
background: -webkit-linear-gradient(left, #bb2bff, #7349fb);
background: linear-gradient(left, #bb2bff, #7349fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.media-body{
h4{
color: $dip;
}
p{
color: $dip;
}
}
}
}
}
.media{
text-align: left;
.d-flex{
vertical-align: middle;
align-self: center;
padding-right: 22px;
i{
font-size: 40px;
color: #fff;
}
}
.media-body{
vertical-align: middle;
align-self: center;
color: #fff;
h4{
margin-bottom: 0px;
color: #fff;
font-size: 24px;
font-family: $open;
font-weight: 600;
@include transition;
}
p{
margin-bottom: 0px;
font-size: 14px;
font-family: $rob;
font-weight: normal;
@include transition;
}
}
}
}
/* End Download App Area css
============================================================================================ */

156
scss/_footer.scss Normal file
View file

@ -0,0 +1,156 @@
/*============== footer-area css ===============*/
.footer-area{
background: $dip;
}
.single-footer-widget{
p{
margin-bottom: 0px;
}
.instafeed{
margin-left: -5px;
margin-right: -5px;
li{
margin: 5px;
}
}
.subscribe_form{
padding-top: 25px;
}
.input-group{
display: block !important;
}
input{
max-width: 100%;
width: 100%;
border: 1px solid #333333;
font-size: 13px;
line-height: 40px;
padding-right: 110px;
height: 40px;
color: #999999;
border-radius: 20px;
background: #fff;
padding-left: 20px;
@include placeholder{
color: #999999;
}
&:focus{
outline: none;
}
}
.sub-btn{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
color: #fff;
font-weight: 500;
line-height: 38px;
font-size: 12px;
padding: 0px 38px;
display: inline-block;
cursor: pointer;
position: absolute;
top: 0px;
right: -26px;
border-radius: 20px;
@include transition;
outline: none !important;
box-shadow: none !important;
}
}
.ab_wd{
p{
max-width: 230px;
}
}
.contact_wd{
margin-right: -15px;
p{
margin-bottom: 15px;
}
a{
display: block;
color: $baseColor;
font-size: 24px;
font-family: $rob;
font-weight: 500;
margin-bottom: 10px;
& + a{
margin-bottom: 0px;
}
}
}
.tp_widgets{
.list{
li{
margin-bottom: 12px;
a{
color: #fff;
font-size: 14px;
font-weight: 300;
font-family: $rob;
}
&:last-child{
margin-bottom: 0px;
}
}
}
}
.news_widgets{
p{
color: #fff;
opacity: .6;
}
}
.footer_title{
font-size: 20px;
line-height: 24px;
font-weight: 600;
font-family: $open;
color: #fff;
margin-bottom: 28px;
text-transform: uppercase;
}
.border_line{
width: 100%;
height: 1px;
background: #333333;
margin-top: 30px;
}
.footer-bottom{
padding-top: 85px;
.footer-text{
color: #fff;
opacity: .6;
i{
color: $baseColor;
opacity: 1;
}
a{
color: $baseColor;
opacity: 1;
}
}
.footer-social{
text-align: right;
a{
font-size: 14px;
line-height: 30px;
color: #fff;
margin-left: 6px;
transition: all 0.3s linear;
background: #111111;
height: 30px;
width: 30px;
text-align: center;
display: inline-block;
@include transition;
&:hover{
color: #fff;
background-image: -moz-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -webkit-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -ms-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
}
}
}
}

186
scss/_header.scss Normal file
View file

@ -0,0 +1,186 @@
//header_area css
.header_area{
position: absolute;
width: 100%;
top: 0;
left:0;
z-index: 99;
transition: background 0.4s, all 0.3s linear;
.navbar{
background: transparent;
padding: 0px;
border: 0px;
border-radius: 0px;
.nav{
.nav-item{
margin-right: 45px;
.nav-link{
font: 600 12px/100px $open;
text-transform: uppercase;
color: #fff;
padding: 0px;
display: inline-block;
&:after{
display: none;
}
}
// &:hover, &.active{
// .nav-link{
// color: $baseColor;
// }
// }
&.submenu{
position: relative;
ul{
border: none;
padding: 0px;
border-radius: 0px;
box-shadow: none;
margin: 0px;
background: #fff;
@media (min-width: 992px){
position: absolute;
top: 120%;
left: 0px;
min-width: 200px;
text-align: left;
opacity: 0;
transition: all 300ms ease-in;
visibility: hidden;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
box-shadow: 0px 10px 30px 0px rgba(115, 73, 251, 0.3);
}
&:before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
transition: all 400ms linear;
}
.nav-item{
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #ededed;
margin-left: 0px;
transition: all 0.4s linear;
.nav-link{
line-height: 45px;
color: $dip;
padding: 0px 30px;
transition: all 150ms linear;
display: block;
margin-right: 0px;
}
&:last-child{
border-bottom: none;
}
&:hover{
.nav-link{
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
color: #fff;
}
}
}
}
&:hover{
ul{
@media (min-width: 992px){
visibility: visible;
opacity: 1;
top: 100%;
}
.nav-item{
margin-top: 0px;
}
}
}
}
&:last-child{
margin-right: 0px;
}
}
}
.search{
font-size: 12px;
line-height: 60px;
display: inline-block;
color: $dip;
margin-left: 80px;
i{
font-weight: 600;
}
}
}
&.navbar_fixed{
.main_menu{
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background-image: -moz-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(188,43,255) 0%, rgb(114,73,251) 100%);
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
.navbar{
.nav{
.nav-item{
.nav-link{
line-height: 70px;
}
}
}
}
}
}
}
.top_menu{
background: #ec9d5f;
.float-left{
a{
line-height: 40px;
display: inline-block;
color: #fff;
font-family: $rob;
text-transform: uppercase;
font-size: 12px;
margin-right: 50px;
@include transition;
&:last-child{
margin-right: 0px;
}
&:hover{
color: $baseColor;
}
}
}
.float-right{
.pur_btn{
background: $baseColor;
color: #fff;
font-family: $rob;
line-height: 40px;
display: block;
padding: 0px 40px;
font-weight: 500;
font-size: 12px;
}
}
}

100
scss/_predefine.scss Normal file
View file

@ -0,0 +1,100 @@
.list{
list-style: none;
margin: 0px;
padding: 0px;
}
a{
text-decoration:none;
transition: all 0.3s ease-in-out;
&:hover, &:focus{
text-decoration:none;
outline: none;
}
}
.row.m0{
margin: 0px;
}
body{
line-height: 24px;
font-size: 14px;
font-family: $rob;
font-weight: normal;
color: $pfont;
}
h1, h2, h3, h4, h5, h6{
font-family: $open;
font-weight: 600;
}
button:focus{
outline: none;
box-shadow: none;
}
.p_120{
padding-top: 120px;
padding-bottom: 120px;
}
.pad_top{
padding-top: 120px;
}
.mt-25{
margin-top: 25px;
}
.p0{
padding-left: 0px;
padding-right: 0px;
}
.container{
@media(min-width:1200px){
max-width: 1170px;
}
}
@media(min-width: 1620px){
.box_1620{
max-width: 1650px;
margin: auto;
}
}
/* Main Title Area css
============================================================================================ */
.main_title{
text-align: center;
margin-bottom: 75px;
h2{
font-family: $open;
font-size: 36px;
color: $dip;
font-weight: 600;
margin-bottom: 15px;
}
p{
font-size: 14px;
font-family: $rob;
line-height: 24px;
color: $pfont;
margin-bottom: 0px;
max-width: 570px;
font-weight: normal;
margin: auto;
}
&.white{
h2{
color: #fff;
}
p{
color: #fff;
opacity: .6;
}
}
}
/* End Main Title Area css
============================================================================================ */

57
scss/_price.scss Normal file
View file

@ -0,0 +1,57 @@
/* Price Area css
============================================================================================ */
.price_area{
background: #f9f9ff;
}
.price_item_inner{
}
.price_item{
background: #fff;
.price_head{
overflow: hidden;
border-bottom: 1px solid #eeeeee;
padding: 40px;
h3{
color: $dip;
font-size: 20px;
font-family: $open;
margin-bottom: 5px;
}
h2{
color: $dip;
margin-bottom: 0px;
font-weight: bold;
font-size: 36px;
font-family: $rob;
}
p{
margin-bottom: 0px;
}
}
.price_body{
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
.list{
li{
margin-bottom: 10px;
a{
font-size: 14px;
font-family: $rob;
font-weight: normal;
color: $pfont;
}
&:last-child{
margin-bottom: 0px;
}
}
}
}
.price_footer{
text-align: center;
padding-bottom: 40px;
}
}
/* End Price Area css
============================================================================================ */

94
scss/_testimonials.scss Normal file
View file

@ -0,0 +1,94 @@
/* Testimonials Area css
============================================================================================ */
.testimonials_area{
background: #f9f9ff;
position: relative;
.owl-prev, .owl-next{
position: absolute;
right: 150px;
background: #fff;
font-size: 24px;
color: #c1c1c1;
padding-left: 10px;
padding-right: 10px;
@include transition;
cursor: pointer;
box-shadow: -14.142px 14.142px 20px 0px rgba(157, 157, 157, 0.2);
&:hover{
color: $dip;
}
}
.owl-prev{
bottom: 50%;
padding-top: 15px;
padding-bottom: 10px;
&:before{
content: "";
width: 28px;
background: #e8e8e8;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
height: 1px;
}
}
.owl-next{
top: 50%;
padding-top: 10px;
padding-bottom: 15px;
}
}
.testi_slider{
margin-top: -30px;
margin-bottom: -30px;
}
.testi_item{
padding: 30px 0px;
.media{
border-radius: 10px;
padding: 40px;
background: #fff;
@include transition;
.d-flex{
padding-right: 25px;
}
.media-body{
p{
margin-bottom: 20px;
}
h4{
color: $dip;
font-family: $rob;
font-weight: 500;
font-size: 20px;
@include transition;
}
h5{
margin-bottom: 0px;
font-size: 14px;
color: $pfont;
font-weight: normal;
font-family: $rob;
}
}
}
&:hover{
.media{
box-shadow: 0px 10px 30px 0px rgba(157, 157, 157, 0.2);
background: #fff;
border-color: #fff;
.media-body{
h4{
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #bc2bff), color-stop(0.15, #bc2bff), color-stop(0.3, #7249fb), color-stop(0.45, #7249fb), color-stop(0.6, #7249fb),color-stop(0.75, #7249fb), color-stop(0.9, #7249fb), color-stop(1, #7249fb) );
background-image: gradient( linear, left top, right top, color-stop(0, #bc2bff), color-stop(0.15, #bc2bff), color-stop(0.3, #7249fb), color-stop(0.45, #7249fb), color-stop(0.6, #7249fb),color-stop(0.75, #7249fb), color-stop(0.9, #7249fb), color-stop(1, #7249fb) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
}
}
}
/* End Testimonials Area css
============================================================================================ */

31
scss/_variables.scss Normal file
View file

@ -0,0 +1,31 @@
/*font Variables*/
$rob: 'Roboto', sans-serif;
$open: 'Open Sans', sans-serif;
/*Color Variables*/
$baseColor: #6247ea;
$dip: #222222;
$pfont: #777777;
/*=================== fonts ====================*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto:300,300i,400,500,700');
// Mixins
@mixin transition($property: all, $duration: 300ms, $animate: linear, $delay:0s){
transition: $property $duration $animate $delay;
}
// Placeholder Mixins
@mixin placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

51
scss/_video.scss Normal file
View file

@ -0,0 +1,51 @@
/* Video Area css
============================================================================================ */
.video_area{
position: relative;
text-align: center;
margin-top: 65px;
margin-bottom: 35px;
a{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
/* End Video Area css
============================================================================================ */

156
scss/breadcrumb.scss Normal file
View file

@ -0,0 +1,156 @@
/* Home Banner Area css
============================================================================================ */
.home_banner_area{
z-index: 1;
background: url(../img/banner/home-banner.jpg) no-repeat scroll center center;
background-size: cover;
.banner_inner{
overflow: hidden;
width: 100%;
padding: 170px 0px 140px 0px;
.banner_content{
color: #fff;
.col-lg-9{
vertical-align: middle;
align-self: center;
}
h2{
font-size: 60px;
font-weight: bold;
font-family: $open;
margin-bottom: 15px;
margin-top: -30px;
}
p{
color: #fff;
font-family: $rob;
font-weight: 300;
max-width: 450px;
margin-bottom: 40px;
font-size: 14px;
}
.banner_map_img{
text-align: right;
}
.banner_btn{
}
}
}
}
.blog_banner{
min-height: 780px;
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: 0px;
.banner_inner{
background: #04091e;
position: relative;
overflow: hidden;
width: 100%;
min-height: 780px;
z-index: 1;
.overlay{
background: url(../img/banner/banner-2.jpg) no-repeat scroll center center;
opacity: .5;
height: 125%;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: -1;
}
.blog_b_text{
max-width: 700px;
margin: auto;
color: #fff;
margin-top: 40px;
h2{
font-size: 60px;
font-weight: 500;
font-family: $rob;
line-height: 66px;
margin-bottom: 15px;
}
p{
font-size: 16px;
margin-bottom: 35px;
}
.white_bg_btn{
line-height: 42px;
padding: 0px 45px;
}
}
}
}
.banner_box{
max-width: 1620px;
margin: auto;
}
.banner_area{
position: relative;
z-index: 1;
min-height: 400px;
background-image: -moz-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -webkit-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
background-image: -ms-linear-gradient( 0deg, rgba(188,43,255,.8) 0%, rgba(114,73,251,.8) 100%);
.banner_inner{
position: relative;
overflow: hidden;
width: 100%;
min-height: 400px;
z-index: 1;
// .overlay{
// background: url(../img/banner/banner.jpg) no-repeat scroll center center;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// height: 125%;
// bottom: 0;
// z-index: -1;
// opacity: 1;
// }
.banner_content{
margin-top: 85px;
h2{
color: #fff;
font-size: 48px;
font-family: $rob;
margin-bottom: 0px;
font-weight: 500;
}
.page_link{
a{
font-size: 14px;
color: #fff;
font-family: $rob;
margin-right: 32px;
position: relative;
text-transform: uppercase;
&:before{
content: "\f0da";
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
right: -25px;
top: 50%;
transform: translateY(-50%);
}
&:last-child{
margin-right: 0px;
&:before{
display: none;
}
}
}
}
}
}
}
/* End Home Banner Area css
============================================================================================ */

98
scss/style.scss Normal file
View file

@ -0,0 +1,98 @@
/*----------------------------------------------------
@File: Default Styles
@Author: Rocky Ahmed
@URL: http://wethemez.com
Author E-mail: rockybd1995@gmail.com
This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
---------------------------------------------------- */
/*=====================================================================
@Template Name: HostHub Construction
@Author: Rocky Ahmed
@Developed By: Rocky Ahmed
@Developer URL: http://rocky.wethemez.com
Author E-mail: rockybd1995@gmail.com
@Default Styles
Table of Content:
01/ Variables
02/ predefin
03/ header
04/ button
05/ banner
06/ breadcrumb
07/ about
08/ team
09/ project
10/ price
11/ team
12/ blog
13/ video
14/ features
15/ career
16/ contact
17/ footer
=====================================================================*/
/*----------------------------------------------------*/
@import "variables";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "predefine";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "header";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "breadcrumb";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "blog";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "contact";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "elements";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "button";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "feature";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "video";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "price";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "testimonials";
/*---------------------------------------------------- */
/*----------------------------------------------------*/
@import "footer";
/*---------------------------------------------------- */