diff options
Diffstat (limited to 'src/main/resources/static/scss')
25 files changed, 5566 insertions, 0 deletions
diff --git a/src/main/resources/static/scss/_about.scss b/src/main/resources/static/scss/_about.scss new file mode 100644 index 0000000..4a3622d --- /dev/null +++ b/src/main/resources/static/scss/_about.scss @@ -0,0 +1,103 @@ +.about_area{ + padding-top: 150px; + padding-bottom: 150px; + background: #FDF9F6; + @media #{$mobile_device} { + padding-top: 40px; + padding-bottom: 40px; + } + @media #{$tablet_device} { + padding-top: 80px; + padding-bottom: 80px; + } + @media #{$mid_device} { + padding-top: 100px; + padding-bottom: 100px; + } + .section_title{ + p{ + color: #575757; + } + } + .about_info{ + padding-left: 68px; + @media #{$mobile_device}{ + padding-left: 0; + } + @media #{$tablet_device}{ + padding-left: 0; + } + .opening_hour{ + font-family: $font1; + font-size: 30px; + font-weight: 400; + color: #252219; + margin-bottom: 55px; + margin-top: 37px; + span{ + font-family: $font2; + color: #252219; + font-size: 20px; + margin-left: 6px; + display: inline-block; + @media #{$mobile_device} { + margin-left: 0; + } + } + } + } + .about_thumbs{ + position: relative; + @include justify-content(flex-end); + @media #{$tablet_device} { + // display: block !important; + @include justify-content(flex-start); + margin-top: 30px; + } + @media #{$mobile_device} { + margin-bottom: 30px; + } + img{ + width: 100%; + } + .large_img_1{ + padding-right: 156px; + @media #{$mobile_device} { + padding-right: 40px; + } + @media #{$tablet_device} { + padding-right: 0px; + } + @media #{$mid_device} { + padding-right: 100px; + } + } + .small_img_1{ + position: absolute; + right: 0; + bottom: 0; + border-top: 15px solid #ffffff; + border-left: 15px solid #ffffff; + top: 80px; + @media #{$mobile_device} { + position: absolute; + right: 0; + bottom: 0; + border-top: 15px solid + #ffffff; + border-left: 15px solid + #ffffff; + top: auto; + width: 50%; + height: 60%; + } + @media #{$tablet_device}{ + bottom: -30px; + } + img{ + width: 100%; + height: 100%; + } + } + } +} diff --git a/src/main/resources/static/scss/_blog.scss b/src/main/resources/static/scss/_blog.scss new file mode 100644 index 0000000..1792c7a --- /dev/null +++ b/src/main/resources/static/scss/_blog.scss @@ -0,0 +1,1501 @@ +/* Start Blog Area css +============================================================================================ */ + +.latest-blog-area { + .area-heading { + margin-bottom: 70px; + } +} +.blog_area{ + a{ + color: $font_1 !important; + text-decoration: none; + @include transform_time(.5s); + &:hover, :hover{ + background: -webkit-linear-gradient( 131deg, $btn_bg 0%, $btn_bg 99%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-decoration: none; + @include transform_time(.5s); + } + } +} + +.single-blog { + overflow: hidden; + margin-bottom: 30px; + + &:hover { + box-shadow: 0px 10px 20px 0px rgba(42, 34, 123, 0.1); + } + + .thumb { + overflow: hidden; + position: relative; + + &:after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #000; + opacity: 0; + @include transform_time(.5s); + } + } + + h4 { + // @include transform_time(.5s); + border-bottom: 1px solid #dfdfdf; + padding-bottom: 34px; + margin-bottom: 25px; + } + + a { + // color: $dip; + font-size: 20px; + font-weight: 600; + + &:hover { + // // color: $baseColor; + } + } + + .date { + color: #666666; + text-align: left; + display: inline-block; + font-size: 13px; + font-weight: 300; + } + + .tag { + // color: $baseColor; + text-align: left; + display: inline-block; + float: left; + font-size: 13px; + font-weight: 300; + margin-right: 22px; + position: relative; + + &:after { + content: ''; + position: absolute; + width: 1px; + height: 10px; + background: #acacac; + right: -12px; + top: 7px; + + } + + @media(max-width:1199px) { + margin-right: 8px; + + &:after { + display: none; + } + } + } + + .likes { + margin-right: 16px; + } + + @media(max-width:800px) { + margin-bottom: 30px; + } + + .single-blog-content { + padding: 30px; + + .meta-bottom { + p { + font-size: 13px; + font-weight: 300; + } + + i { + color: $border_color; + font-size: 13px; + margin-right: 7px; + } + } + + @media(max-width:1199px) { + padding: 15px; + } + } + + &:hover { + .thumb { + &:after { + opacity: .7; + @include transform_time(.5s); + } + } + } + + @media(max-width:1199px) { + h4 { + transition: all 300ms linear 0s; + border-bottom: 1px solid #dfdfdf; + padding-bottom: 14px; + margin-bottom: 12px; + + a { + font-size: 18px; + } + } + } + +} + +.full_image.single-blog { + position: relative; + + .single-blog-content { + position: absolute; + left: 35px; + bottom: 0; + opacity: 0; + visibility: hidden; + @include transform_time(.5s); + + .meta-bottom { + p { + // color: $white_color; + } + } + + @media (min-width: 992px) { + bottom: 100px; + } + } + + h4 { + @include transform_time(.5s); + border-bottom: none; + padding-bottom: 5px; + } + + a { + // color: $white_color; + font-size: 20px; + font-weight: 600; + + &:hover { + // color: $baseColor; + } + } + + .date { + color: #fff; + } + + &:hover { + .single-blog-content { + opacity: 1; + visibility: visible; + @include transform_time(.5s); + } + } + +} + +/* End Blog Area css +============================================================================================ */ + + + +/* Latest Blog Area css +============================================================================================ */ +.latest_blog_area {} + +.latest_blog_inner {} + +.l_blog_item { + .l_blog_img {} + + .l_blog_text { + .date { + margin-top: 24px; + margin-bottom: 15px; + + a { + // color: $pfont; + font-size: 12px; + } + } + + h4 { + font-size: 18px; + // color: $title-color; + border-bottom: 1px solid #eeeeee; + margin-bottom: 0px; + padding-bottom: 20px; + @include transform_time(.5s); + + &:hover { + // // color: $baseColor; + } + } + + p { + margin-bottom: 0px; + padding-top: 20px; + } + } +} + +/* End 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: $title-color; + position: absolute; + left: 0px; + bottom: 0px; + + &:before { + content: "75%"; + position: absolute; + right: -10px; + bottom: 0px; + // background: $title-color; + color: #fff; + padding: 0px 5px; + } + } + } + } + + .causes_text { + padding: 30px 35px 40px 30px; + + h4 { + // color: $title-color; + // font-family: $rob; + font-size: 18px; + font-weight: 600; + margin-bottom: 15px; + cursor: pointer; + + &:hover { + // // color: $title-color; + } + } + + p { + font-size: 14px; + line-height: 24px; + // color: $pfont; + font-weight: 300; + margin-bottom: 0px; + } + } + + .causes_bottom { + a { + width: 50%; + border: 1px solid; + text-align: center; + float: left; + line-height: 50px; + // background: $title-color; + color: #fff; + // font-family: $rob; + font-size: 14px; + font-weight: 500; + + &+a { + border-color: #eeeeee; + background: #fff; + font-size: 14px; + // color: $title-color; + } + } + } +} + +/* 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: $title-color; + &:before { + // background: $title-color; + } + + &+.tag_btn { + margin-left: 2px; + } + } +} + +/*========= blog_categorie_area css ===========*/ +.blog_categorie_area { + padding-top: 30px; + padding-bottom: 30px; + // background: $lightGray; + + @media(min-width: 900px) { + padding-top: 80px; + padding-bottom: 80px; + } + + @media(min-width: 1100px) { + padding-top: 120px; + padding-bottom: 120px; + } +} + +.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.75); + 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: rgba(222, 99, 32, 0.85); + } + } +} + + + +/*============ blog_left_sidebar css ==============*/ +.blog_area { + // background: $lightGray; +} + +.blog_left_sidebar {} + +.blog_item { + margin-bottom: 50px; +} + +.blog_details { + padding: 30px 0 20px 10px; + box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3); + + @media(min-width: 768px) { + padding: 60px 30px 35px 35px; + } + + p { + margin-bottom: 30px; + } + + a { + color: $heading_color2; + + &:hover { + color: $btn_bg; + } + } + + h2 { + font-size: 18px; + font-weight: 600; + margin-bottom: 8px; + + @media(min-width: 768px) { + font-size: 24px; + margin-bottom: 15px; + } + } +} + +.blog-info-link { + + li { + float: left; + font-size: 14px; + + a { + color: #999999; + } + + i, + span { + font-size: 13px; + margin-right: 5px; + } + + &::after { + content: "|"; + padding-left: 10px; + padding-right: 10px; + } + + &:last-child::after { + display: none; + } + } + + &::after { + content: ""; + display: block; + clear: both; + display: table; + } +} + +.blog_item_img { + position: relative; + + .blog_item_date { + position: absolute; + bottom: -10px; + left: 10px; + display: block; + color: $white_color; + background-color: $btn_bg; + padding: 8px 15px; + border-radius: 5px; + + @media(min-width: 768px) { + bottom: -20px; + left: 40px; + padding: 13px 30px; + } + + h3 { + font-size: 22px; + font-weight: 600; + color: $white_color; + margin-bottom: 0; + line-height: 1.2; + + @media(min-width: 768px) { + font-size: 30px; + } + } + + p { + font-size: 18px; + margin-bottom: 0; + color: $white_color; + + @media(min-width: 768px) { + font-size: 18px; + } + } + } +} + + + + +.blog_right_sidebar { + + // border: 1px solid #eeeeee; + // background: #fafaff; + // padding: 30px; + .widget_title { + font-size: 20px; + margin-bottom: 40px; + // color: $title-color; + + &::after { + content: ""; + display: block; + padding-top: 15px; + border-bottom: 1px solid #f0e9ff; + } + } + + .single_sidebar_widget { + background: #fbf9ff; + padding: 30px; + margin-bottom: 30px; + .btn_1{ + margin-top: 0px; + } + } + + + .search_widget { + + .form-control { + height: 50px; + border-color: #f0e9ff; + font-size: 13px; + color: #999999; + padding-left: 20px; + border-radius: 0; + border-right: 0; + + &::placeholder { + color: #999999; + } + + &:focus { + border-color: #f0e9ff; + outline: 0; + box-shadow: none; + } + } + + .input-group { + + button { + background: $white_color; + border-left: 0; + border: 1px solid #f0e9ff; + padding: 4px 15px; + border-left: 0; + + i, + span { + font-size: 14px; + color: #999999; + } + } + } + + } + + .newsletter_widget { + + .form-control { + height: 50px; + border-color: #f0e9ff; + font-size: 13px; + color: #999999; + padding-left: 20px; + border-radius: 0; + // border-right: 0; + + &::placeholder { + color: #999999; + } + + &:focus { + border-color: #f0e9ff; + outline: 0; + box-shadow: none; + } + } + + .input-group { + + button { + background: $white_color; + border-left: 0; + border: 1px solid #f0e9ff; + padding: 4px 15px; + border-left: 0; + + i, + span { + font-size: 14px; + color: #999999; + } + } + } + + } + + + .post_category_widget { + .cat-list { + li { + border-bottom: 1px solid #f0e9ff; + transition: all 0.3s ease 0s; + padding-bottom: 12px; + + &:last-child { + border-bottom: 0; + } + + a { + font-size: 14px; + line-height: 20px; + color: #888888; + + p { + margin-bottom: 0px; + } + } + + &+li { + padding-top: 15px; + } + + &:hover { + + // border-// color: $title-color; + a { + // // color: $baseColor; + } + } + } + } + } + + .popular_post_widget { + .post_item { + .media-body { + justify-content: center; + align-self: center; + padding-left: 20px; + + h3 { + font-size: 16px; + line-height: 20px; + margin-bottom: 6px; + transition: all 0.3s linear; + + } + + a { + + // color: $title_color; + &:hover { + color: $white_color; + } + + } + + p { + font-size: 14px; + line-height: 21px; + margin-bottom: 0px; + } + } + + &+.post_item { + margin-top: 20px; + } + } + } + + .tag_cloud_widget { + ul { + li { + display: inline-block; + + a { + display: inline-block; + border: 1px solid #eeeeee; + background: #fff; + padding: 4px 20px; + margin-bottom: 8px; + margin-right: 3px; + transition: all 0.3s ease 0s; + color: #888888; + font-size: 13px; + + &:hover { + background: $btn_bg; + color: #fff !important; + -webkit-text-fill-color: #fff; + text-decoration: none; + -webkit-transition: 0.5s; + transition: 0.5s; + } + } + } + } + } + + .instagram_feeds { + + .instagram_row { + display: flex; + margin-right: -6px; + margin-left: -6px; + + + li { + width: 33.33%; + float: left; + padding-right: 6px; + padding-left: 6px; + margin-bottom: 15px; + } + } + } + + + + + + + + // .author_widget{ + // text-align: center; + // h4{ + // font-size: 18px; + // line-height: 20px; + // // color: $title-color; + // margin-bottom: 5px; + // margin-top: 30px; + // } + // p{ + // margin-bottom: 0px; + // } + // .social_icon{ + // padding: 7px 0px 15px; + // a{ + // font-size: 14px; + // // color: $title-color; + // transition: all 0.2s linear; + // & + a{ + // margin-left: 20px; + // } + // &:hover{ + // // color: $title-color; + // } + // } + // } + // } + + + // .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; + + // i{ + // color: #cccccc; + // } + // } + // .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: $title-color; + // 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; + // } + // } + + .br { + width: 100%; + height: 1px; + background: rgb(238, 238, 238); + margin: 30px 0px; + } +} + + +// .page-link { +// background: transparent; +// font-weight: 400; +// } + +// .blog-pagination .page-item.active .page-link { +// background-// color: $title-color; +// border-color: transparent; +// color:#fff; +// } + + +.blog-pagination { + margin-top: 80px; +} + +.blog-pagination .page-link { + font-size: 14px; + position: relative; + display: block; + padding: 0; + text-align: center; + // padding: 0.5rem 0.75rem; + margin-left: -1px; + line-height: 45px; + width: 45px; + height: 45px; + border-radius: 0 !important; + color: #8a8a8a; + border: 1px solid #f0e9ff; + margin-right: 10px; + + + i, + span { + font-size: 13px; + } + + &:hover { + // background-color: $baseColor; + // color: $white_color; + } +} + +.blog-pagination .page-item.active { + .page-link { + background-color: #fbf9ff; + border-color: #f0e9ff; + color: #888888; + } +} + +.blog-pagination .page-item:last-child .page-link { + margin-right: 0; +} + +// .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: $title-color; +// border-color: #eee; +// } + + + +/*============ Start Blog Single Styles =============*/ + +.single-post-area { + .blog_details { + box-shadow: none; + padding: 0; + } + + .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: $title-color; + } + } + } + } + + .blog_details { + padding-top: 26px; + + p { + margin-bottom: 20px; + font-size: 15px; + } + + h2 { + // color: $title-color; + } + } + + .quote-wrapper { + background: rgba(130, 139, 178, 0.1); + padding: 15px; + line-height: 1.733; + color: #888888; + font-style: italic; + margin-top: 25px; + margin-bottom: 25px; + + @media(min-width: 768px) { + padding: 30px; + } + } + + .quotes { + background: $white_color; + padding: 15px 15px 15px 20px; + border-left: 2px solid; + + @media(min-width: 768px) { + padding: 25px 25px 25px 30px; + } + } + + .arrow { + position: absolute; + + .lnr { + font-size: 20px; + font-weight: 600; + } + } + + .thumb { + .overlay-bg { + background: rgba(#000, .8); + } + } + + .navigation-top { + padding-top: 15px; + border-top: 1px solid #f0e9ff; + + p { + margin-bottom: 0; + } + + .like-info { + font-size: 14px; + + i, + span { + font-size: 16px; + margin-right: 5px; + } + } + + .comment-count { + font-size: 14px; + + i, + span { + font-size: 16px; + margin-right: 5px; + } + } + + .social-icons { + + li { + display: inline-block; + margin-right: 15px; + + &:last-child { + margin: 0; + } + + i, + span { + font-size: 14px; + color: #999999; + } + + &:hover { + + i, + span { + // // color: $baseColor; + } + } + } + } + } + + + .blog-author { + padding: 40px 30px; + background: #fbf9ff; + margin-top: 50px; + + @media(max-width: 600px) { + padding: 20px 8px; + } + + img { + width: 90px; + height: 90px; + border-radius: 50%; + margin-right: 30px; + + @media(max-width: 600px) { + margin-right: 15px; + width: 45px; + height: 45px; + } + } + + a { + display: inline-block; + + // color: $title-color; + &:hover { + color: $btn_bg; + } + } + + p { + margin-bottom: 0; + font-size: 15px; + } + + h4 { + font-size: 16px; + } + } + + + + .navigation-area { + border-bottom: 1px solid #eee; + padding-bottom: 30px; + margin-top: 55px; + + p { + margin-bottom: 0px; + } + + h4 { + font-size: 18px; + line-height: 25px; + // color: $title-color; + } + + .nav-left { + text-align: left; + + .thumb { + margin-right: 20px; + background: #000; + + img { + @include transform_time(.5s); + } + } + + .lnr { + margin-left: 20px; + opacity: 0; + @include transform_time(.5s); + } + + &: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 transform_time(.5s); + } + } + + .lnr { + margin-right: 20px; + opacity: 0; + @include transform_time(.5s); + } + + &:hover { + .lnr { + opacity: 1; + } + + .thumb { + img { + opacity: .5; + } + } + } + } + } + + .sidebar-widgets { + @media(max-width: 991px) { + padding-bottom: 0px; + } + } +} + +.comments-area { + background: transparent; + // border: 1px solid #eee; + border-top: 1px solid #eee; + padding: 45px 0; + margin-top: 50px; + + @media(max-width: 414px) { + padding: 50px 8px; + } + + h4 { + // text-align: center; + margin-bottom: 35px; + // color: $title-color; + font-size: 18px; + } + + h5 { + font-size: 16px; + margin-bottom: 0px; + } + + a { + // color: $title-color; + } + + .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; + + img { + width: 70px; + border-radius: 50%; + } + } + + .date { + font-size: 14px; + color: #999999; + margin-bottom: 0; + margin-left: 20px; + } + + .comment { + margin-bottom: 10px; + color: #777777; + font-size: 15px; + } + + .btn-reply { + background-color: transparent; + color: #888888; + // border:1px solid #eee; + padding: 5px 18px; + font-size: 14px; + display: block; + font-weight: 400; + // @include transform_time(.5s); + // &:hover { + // background-// color: $title-color; + // color: #fff; + // font-weight: 700; + // } + } +} + +.comment-form { + // background:#fafaff; + // text-align: center; + border-top: 1px solid #eee; + padding-top: 45px; + margin-top: 50px; + margin-bottom: 20px; + + .form-group { + margin-bottom: 30px; + } + + h4 { + // text-align: center; + margin-bottom: 40px; + font-size: 18px; + line-height: 22px; + // color: $title-color; + } + + .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 { + border: 1px solid #f0e9ff; + border-radius: 5px; + height: 48px; + padding-left: 18px; + font-size: 13px; + background: transparent; + + &:focus { + outline: 0; + box-shadow: none; + } + + &::placeholder { + font-weight: 300; + color: #999999; + } + + &::placeholder { + color: #777777; + } + } + + textarea { + padding-top: 18px; + border-radius: 12px; + height: 100% !important; + } + + ::-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 =============*/
\ No newline at end of file diff --git a/src/main/resources/static/scss/_blog_part.scss b/src/main/resources/static/scss/_blog_part.scss new file mode 100644 index 0000000..3bbd612 --- /dev/null +++ b/src/main/resources/static/scss/_blog_part.scss @@ -0,0 +1,176 @@ +/**************** blog part css start ****************/ +.blog_part{ + margin-bottom: 140px; + @media #{$small_mobile}{ + margin-bottom: 0px; + padding: 0px 0px 70px; + } + @media #{$large_mobile}{ + margin-bottom: 0px; + padding: 0px 0px 70px; + } + @media #{$tab_device}{ + margin-bottom: 0px; + padding: 0px 0px 70px; + } + @media #{$medium_device}{ + + } + .blog_right_sidebar .widget_title { + font-size: 20px; + margin-bottom: 40px; + font-style: inherit !important; + } + .single-home-blog{ + @media #{$small_mobile}{ + margin-bottom: 140px; + margin-top: 20px; + } + @media #{$large_mobile}{ + margin-bottom: 140px; + margin-top: 20px; + } + @media #{$tab_device}{ + margin-bottom: 140px; + margin-top: 20px; + } + @media #{$medium_device}{ + + } + .card-img-top{ + border-radius: 0px; + } + .card{ + border: 0px solid transparent; + border-radius: 0px; + background-color: transparent; + position: relative; + .card-body{ + padding: 25px 10px 29px 40px; + background-color: $white_color; + position: absolute; + left: 20px; + bottom: -140px; + box-shadow: -7.552px 9.326px 20px 0px rgba(1, 84, 85, 0.1); + border-radius: 10px; + @media #{$small_mobile}{ + padding: 15px; + left: 10px; + bottom: -140px; + } + @media #{$large_mobile}{ + padding: 15px; + left: 10px; + bottom: -140px; + } + @media #{$tab_device}{ + + } + @media #{$medium_device}{ + padding: 20px; + } + a{ + color: $btn_bg; + text-transform: uppercase; + @include transform_time(0.8s); + &:hover{ + background: -webkit-linear-gradient( 131deg, #ff7e5f 0%, #feb47b 99%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + } + .dot{ + position: relative; + padding-left: 20px; + &:after{ + position: absolute; + content: ""; + width: 10px; + height: 10px; + top: 5px; + left: 0; + background-color: $btn_bg; + border-radius: 50%; + } + } + span{ + color: $font_4; + margin-bottom: 10px; + display: inline-block; + margin-top: 10px; + @media #{$small_mobile}{ + margin-bottom: 5px; + margin-top: 5px; + } + @media #{$large_mobile}{ + margin-bottom: 5px; + margin-top: 5px; + } + @media #{$tab_device}{ + margin-bottom: 5px; + margin-top: 5px; + } + @media #{$medium_device}{ + margin-bottom: 5px; + margin-top: 5px; + } + } + h5{ + font-weight: 600; + line-height: 1.5; + font-size: 20px; + @include transform_time(0.8s); + text-transform: capitalize; + margin-bottom: 22px; + @media #{$small_mobile}{ + margin-bottom: 10px; + } + @media #{$large_mobile}{ + margin-bottom: 10px; + font-size: 16px; + } + @media #{$tab_device}{ + margin-bottom: 10px; + } + @media #{$medium_device}{ + margin-bottom: 10px; + font-size: 18px; + } + &:hover{ + @include transform_time(0.8s); + background: -webkit-linear-gradient( 131deg, #feb47b 0%, #ff7e5f 99%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-animation: 1s; + } + + } + ul{ + li{ + display: inline-block; + color: $font_4; + margin-right: 14px; + @media #{$small_mobile}{ + margin-right: 10px; + } + @media #{$large_mobile}{ + margin-right: 10px; + } + @media #{$tab_device}{ + margin-right: 10px; + } + @media #{$medium_device}{ + margin-right: 10px; + } + span{ + margin-right: 10px; + font-size: 12px; + } + } + } + } + } +} + +
\ No newline at end of file diff --git a/src/main/resources/static/scss/_bradcam.scss b/src/main/resources/static/scss/_bradcam.scss new file mode 100644 index 0000000..e859c64 --- /dev/null +++ b/src/main/resources/static/scss/_bradcam.scss @@ -0,0 +1,217 @@ +.breadcam_bg{ + background-image: url(../../static/img/banner/bradcam.png); +} +.breadcam_bg_1{ + background-image: url(../../static/img/banner/bradcam2.png); +} +.breadcam_bg_2{ + background-image: url(../../static/img/banner/bradcam3.png); +} +.bradcam_area{ + background-size: cover; + background-position: center center; + padding: 187px 0 115px 0; + @media #{$mobile_device} { + padding: 150px 0; + } + @media #{$tablet_device} { + padding: 150px 0; + } + h3{ + font-size: 65px; + color: #fff; + font-weight: 400; + margin-bottom: 0; + text-transform: capitalize; + @media #{$mobile_device} { + font-size: 30px; + } + @media #{$tablet_device} { + font-size: 40px; + } + } +} + +.popup_box{ + // position: absolute; + // left: 50%; + // top: 50%; + // transform: translate(-50%,-50%); + background: #fff; + display: inline-block; + z-index: 9; + width: 681px; + padding: 60px 40px; + @media #{$mobile_device} { + width: 320px; + padding: 45px 30px; + } + @media #{$large_mobile} { + width: 420px !important; + padding: 45px 30px; + } + + h3{ + text-align: center; + font-size: 22px; + color: #1F1F1F; + margin-bottom: 46px; + } + .boxed-btn3{ + width: 100%; + text-transform: capitalize; + } + .nice-select { + -webkit-tap-highlight-color: transparent; + background-color: #fff; + /* border-radius: 5px; */ + border: solid 1px #E2E2E2; + box-sizing: border-box; + clear: both; + cursor: pointer; + display: block; + float: left; + font-family: $font2; + font-weight: normal; + width: 100% !important; + /* height: 42px; */ + line-height: 50px; + outline: none; + padding-left: 18px; + padding-right: 30px; + position: relative; + text-align: left !important; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; + width: auto; + border-radius: 0; + margin-bottom: 30px; + height: 50px !important; + font-size: 16px; + font-weight: 400; + color: #919191; + &::after { + content: "\f0d7"; + display: block; + height: 5px; + margin-top: -5px; + pointer-events: none; + position: absolute; + right: 17px; + top: 3px; + transition: all 0.15s ease-in-out; + width: 5px; + font-family: fontawesome; + color: #919191; + font-size: 15px; + } + &.open .list { + opacity: 1; + pointer-events: auto; + -webkit-transform: scale(1) translateY(0); + -ms-transform: scale(1) translateY(0); + transform: scale(1) translateY(0); + height: 200px; + overflow-y: scroll; + } + &.list { + height: 200px; + overflow-y: scroll; + } + } +} +#test-form { + display: inline-block; + margin: auto; + text-align: center; + position: absolute; + left: 50%; + top: 50%; + @include transform (translate(-50%,-50%)); + @media #{$mobile_device}{ + top: 0; + left: 0; + width: 100%; + height: 100%; + @include transform (none); + } + .mfp-close-btn-in .mfp-close { + color: #333; + display: none !important; + } + button{ + &.mfp-close{ + display: none !important; + @media #{$mobile_device} { + display: block !important; + position: absolute; + left: 0; + right: 0; + margin: auto; + } + } + } + button.mfp-close { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; + padding: 0; + z-index: 1046; + box-shadow: none; + touch-action: manipulation; + width: 40px; + height: 40px; + background: #4A3600; + text-align: center; + line-height: 20px; + position: absolute; + right: 0; + border-bottom-right-radius: 20px; + border-bottom-left-radius: 20px; + position: absolute; + right: -6px; + color: #fff !important; + } +} + +.mfp-bg { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1042; + overflow: hidden; + position: fixed; + background: #4A3600; + opacity: 0.6; +} + +.gj-picker.gj-picker-md.datepicker.gj-unselectable { + @media #{$mobile_device} { + // width: 320px; + // left: 0 !important; + } + +} +.gj-picker.gj-picker-md.timepicker { + @media #{$mobile_device} { + width: 310px; + left: 6px !important; + } + +} +.gj-picker.gj-picker-md.datepicker.gj-unselectable { + @media #{$mobile_device} { + width: 320px; + left: 0 !important; + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_btn.scss b/src/main/resources/static/scss/_btn.scss new file mode 100644 index 0000000..0c28672 --- /dev/null +++ b/src/main/resources/static/scss/_btn.scss @@ -0,0 +1,103 @@ +.boxed-btn { + background: #fff; + color: $theme-color4; + display: inline-block; + padding: 18px 44px; + font-family: $font2; + font-size: 14px; + font-weight: 400; + border: 0; + border: 1px solid $theme-color4; + letter-spacing: 3px; + // width: 180px; + text-align: center; + color: $theme-color4 !important; + text-transform: uppercase; + cursor: pointer; + &:hover{ + background: $theme-color4; + color: #fff !important; + border: 1px solid $theme-color4; + } + &:focus{ + outline: none; + } + &.large-width{ + width: 220px; + } +} +.boxed-btn3 { + background: $btn_bg; + font-size: 16px; + font-weight: 400; + border: 1px solid transparent ; + color: #fff; + padding: 19px 43px 23px 43px; + font-family: $font2; + display: inline-block; + line-height: 1; + &:hover{ + background: transparent; + color: $btn_bg; + border: 1px solid $btn_bg; + } + &:focus{ + outline: none; + } +} +.boxed-btn2 { + background: transparent; + color: #fff; + display: inline-block; + padding: 18px 24px; + font-family: $font2; + font-size: 14px; + font-weight: 400; + border: 0; + border: 1px solid #fff; + letter-spacing: 2px; + text-transform: uppercase; + &:hover{ + background: #fff; + color: #131313 !important; + } + &:focus{ + outline: none; + } +} +.line-button{ + color: #919191; + font-size: 16px; + font-weight: 400; + display: inline-block; + position: relative; + padding-right: 5px; + padding-bottom: 2px; + &::before{ + position: absolute; + content: ""; + background: #919191; + width: 100%; + height: 1px; + bottom: 0; + left: 0; + } + &:hover{ + color: #009DFF; + } + &:hover::before{ + background: #009DFF; + } +} +.book_now{ + display: inline-block; + font-size: 14px; + color: #009DFF; + border: 1px solid #009DFF; + text-transform: capitalize; + padding: 10px 25px; + &:hover{ + background: #009DFF; + color: #fff; + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_contact.scss b/src/main/resources/static/scss/_contact.scss new file mode 100644 index 0000000..f85809c --- /dev/null +++ b/src/main/resources/static/scss/_contact.scss @@ -0,0 +1,153 @@ +/*=================== contact banner start ====================*/ + +.dropdown .dropdown-menu { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -ms-transition: all 0.3s; + -o-transition: all 0.3s; + transition: all 0.3s; +} +.contact-info{ + margin-bottom: 25px; + + &__icon{ + margin-right: 20px; + + i,span{ + color: #8f9195; + font-size: 27px; + } + } + + .media-body{ + + h3{ + font-size: 16px; + margin-bottom: 0; + font-size: 16px; + color: #2a2a2a; + a{ + &:hover{ + color: $theme-color2; + } + } + } + + p{ + color: #8a8a8a; + } + } +} +/*=================== contact banner end ====================*/ + + +/*=================== contact form start ====================*/ +.contact-title{ + font-size: 27px; + font-weight: 600; + margin-bottom: 20px; +} + +.form-contact{ + + label{ + font-size: 14px; + } + + .form-group{ + margin-bottom: 30px; + } + + .form-control{ + border: 1px solid #e5e6e9; + border-radius: 0px; + height: 48px; + padding-left: 18px; + font-size: 13px; + background: transparent; + + &:focus{ + outline: 0; + box-shadow: none; + } + + &::placeholder{ + font-weight: 300; + color: #999999; + } + } + + textarea{ + border-radius: 0px; + height: 100% !important; + } + + // button{ + // border: 0; + // } +} + +/*=================== contact form end ====================*/ + +/* 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; + padding-bottom: 10px; + } + p { + display: block; + } + } + } + } +} +.contact-section{ + padding: 130px 0 100px; + @media #{$tab}{ + padding: 70px 0 40px; + } + @media #{$medium_device}{ + padding: 80px 0 50px; + } + .btn_2{ + background-color:#191d34; + padding: 18px 60px; + border-radius: 50px; + margin-top: 0; + &:hover{ + background-color: $theme-color2; + + } + } +} + + diff --git a/src/main/resources/static/scss/_cutter_master.scss b/src/main/resources/static/scss/_cutter_master.scss new file mode 100644 index 0000000..c45b6f8 --- /dev/null +++ b/src/main/resources/static/scss/_cutter_master.scss @@ -0,0 +1,140 @@ +.cutter_muster{ + padding-top: 134px; + padding-bottom: 130px; + @media #{$mobile_device}{ + padding-top: 60px; + padding-bottom: 60px; + } + @media #{$tablet_device}{ + padding-top: 80px; + padding-bottom: 80px; + } + .single_master{ + margin-bottom: 20px; + .thumb{ + position: relative; + z-index: 2; + + img{ + width: 100%; + } + .social_link{ + position: absolute; + left: 0; + right: 0; + text-align: center; + bottom: 0; + padding: 30px 0; + @include transform(translateY(-40px)); + @include transition(.3s) ; + opacity: 0; + a{ + margin: 0 10px; + font-size: 20px; + color: #fff; + &:hover{ + color: #BC9321; + } + } + } + } + .master_name{ + h3{ + font-size: 20px; + font-family: $font1; + color: #4A3600; + font-weight: 400; + margin-top: 25px; + margin-bottom: 0; + } + p{ + font-size: 14px; + margin-bottom: 0; + color: #919191; + } + } + &:hover{ + .social_link{ + @include transform(translateY(0px)); + opacity: 1; + } + } + } +} + +.find_bg_1{ + background-image: url(../../static/img/team/img.png); +} +.find_us_area{ + .single_find{ + padding-bottom: 10px; + } + .find_info{ + background: #BC9321; + padding: 70px 0 60px 80px; + @media #{$mobile_device}{ + padding: 20px; + } + .find_info_title{ + font-size: 42px; + font-weight: 400; + position: relative; + color: #fff; + padding-bottom: 20px; + margin-bottom: 55px; + @media #{$mobile_device}{ + font-size: 25px; + + } + &::before{ + position: absolute; + content: ""; + background: #fff; + width: 100px; + height: 2px; + left: 0; + bottom: 0; + } + } + background: #BC9321; + .single_find{ + i{ + font-size: 30px; + color: #fff; + } + .find_text{ + padding-left: 20px; + h3{ + font-size: 16px; + color: #000; + font-weight: 400; + } + p{ + color: #fff; + font-size: 18px; + font-weight: 400; + @media #{$mobile_device}{ + font-size: 15px; + } + } + } + } + } + .book_btn{ + margin-top: 34px; + a{ + background: transparent; + font-size: 16px; + font-weight: 400; + border: 1px solid #fff; + color: #fff; + padding: 14px 20px; + display: inline-block; + &:hover{ + background: #fff; + color: #000 !important; + border: 1px solid #fff; + } + } + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_elements.scss b/src/main/resources/static/scss/_elements.scss new file mode 100644 index 0000000..8a945bb --- /dev/null +++ b/src/main/resources/static/scss/_elements.scss @@ -0,0 +1,1101 @@ +$default: #f9f9ff; +$primary: $theme-color2; +$success: #4cd3e3; +$info: #38a4ff; +$warning: #f4e700; +$danger: #f44a40; +$link: #f9f9ff; +$disable: (#222222, .3); +$primary-color: #7c32ff; +$primary-color1: #c738d8; +$title-color: #415094; +$text-color: #828bb2; +$white: #fff; +$offwhite: #f9f9ff; +$black: #000; +// Mixins +@mixin transition($args: all 0.3s ease 0s) { + -webkit-transition: $args; + -moz-transition: $args; + -o-transition: $args; + transition: $args; +} + +@mixin transition-duration($args1, $args2) { + -webkit-transition-duration: $args1, $args2; + -moz-transition-duration: $args1, $args2; + -o-transition-duration: $args1, $args2; + transition-duration: $args1, $args2; +} + +@mixin transition-delay($args1, $args2) { + -webkit-transition-delay: $args1, $args2; + -moz-transition-delay: $args1, $args2; + -o-transition-delay: $args1, $args2; + transition-delay: $args1, $args2; +} + +@mixin transition-property($args1, $args2) { + -webkit-transition-property: $args1, $args2; + -moz-transition-property: $args1, $args2; + -o-transition-property: $args1, $args2; + transition-property: $args1, $args2; +} + +@mixin filter($filter-type, $filter-amount) { + -webkit-filter: $filter-type+unquote("(#{$filter-amount})"); + -moz-filter: $filter-type+unquote("(#{$filter-amount})"); + -ms-filter: $filter-type+unquote("(#{$filter-amount})"); + -o-filter: $filter-type+unquote("(#{$filter-amount})"); + filter: $filter-type+unquote("(#{$filter-amount})"); +} + +@mixin gradient($deg, $args1,$args2){ + background: -webkit-linear-gradient($deg, $args1, $args2); + background: -moz-linear-gradient($deg, $args1, $args2); + background: -o-linear-gradient($deg, $args1, $args2); + background: -ms-linear-gradient($deg, $args1, $args2); + background: linear-gradient($deg, $args1, $args2); +} + +@mixin transform($transform) { + -webkit-transform: $transform; + -moz-transform: $transform; + -ms-transform: $transform; + -o-transform: $transform; + transform: $transform; +} + +@mixin animation($args) { + -webkit-animation: $args; + -moz-animation: $args; + -o-animation: $args; + animation: $args; +} +.sample-text-area { + background: $white; + padding: 100px 0 70px 0; +} + +.text-heading { + margin-bottom: 30px; + font-size: 24px; +} + +b, +sup, +sub, +u, +del { + color: $primary; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 16px; +} + +h6 { + font-size: 14px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.2em; +} + +.typography { + h1, + h2, + h3, + h4, + h5, + h6 { + color: $text-color; + } +} + +.button-area { + .border-top-generic { + padding: 70px 15px; + border-top: 1px dotted #eee; + } + background: $white; +} + +.button-group-area { + .genric-btn { + margin-right: 10px; + margin-top: 10px; + &:last-child { + margin-right: 0; + } + } +} + +.genric-btn { + display: inline-block; + outline: none; + line-height: 40px; + padding: 0 30px; + font-size: .8em; + text-align: center; + text-decoration: none; + font-weight: 500; + cursor: pointer; + @include transition(); + &:focus { + outline: none; + } + &.e-large { + padding: 0 40px; + line-height: 50px; + } + &.large { + line-height: 45px; + } + &.medium { + line-height: 30px; + } + &.small { + line-height: 25px; + } + &.radius { + border-radius: 3px; + } + &.circle { + border-radius: 20px; + } + &.arrow { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + span { + margin-left: 10px; + } + } + &.default { + color: $title-color; + background: $default; + border: 1px solid transparent; + &:hover { + border: 1px solid $default; + background: $white; + } + } + &.default-border { + border: 1px solid $default; + background: $white; + &:hover { + color: $title-color; + background: $default; + border: 1px solid transparent; + } + } + &.primary { + color: $white; + background: $primary; + border: 1px solid transparent; + &:hover { + color: $primary; + border: 1px solid $primary; + background: $white; + } + } + &.primary-border { + color: $primary; + border: 1px solid $primary; + background: $white; + &:hover { + color: $white; + background: $primary; + border: 1px solid transparent; + } + } + &.success { + color: $white; + background: $success; + border: 1px solid transparent; + &:hover { + color: $success; + border: 1px solid $success; + background: $white; + } + } + &.success-border { + color: $success; + border: 1px solid $success; + background: $white; + &:hover { + color: $white; + background: $success; + border: 1px solid transparent; + } + } + &.info { + color: $white; + background: $info; + border: 1px solid transparent; + &:hover { + color: $info; + border: 1px solid $info; + background: $white; + } + } + &.info-border { + color: $info; + border: 1px solid $info; + background: $white; + &:hover { + color: $white; + background: $info; + border: 1px solid transparent; + } + } + &.warning { + color: $white; + background: $warning; + border: 1px solid transparent; + &:hover { + color: $warning; + border: 1px solid $warning; + background: $white; + } + } + &.warning-border { + color: $warning; + border: 1px solid $warning; + background: $white; + &:hover { + color: $white; + background: $warning; + border: 1px solid transparent; + } + } + &.danger { + color: $white; + background: $danger; + border: 1px solid transparent; + &:hover { + color: $danger; + border: 1px solid $danger; + background: $white; + } + } + &.danger-border { + color: $danger; + border: 1px solid $danger; + background: $white; + &:hover { + color: $white; + background: $danger; + border: 1px solid transparent; + } + } + &.link { + color: $title-color; + background: $link; + text-decoration: underline; + border: 1px solid transparent; + &:hover { + color: $title-color; + border: 1px solid $link; + background: $white; + } + } + &.link-border { + color: $title-color; + border: 1px solid $link; + background: $white; + text-decoration: underline; + &:hover { + color: $title-color; + background: $link; + border: 1px solid transparent; + } + } + &.disable { + color: $disable; + background: $link; + border: 1px solid transparent; + cursor: not-allowed; + } +} + +.generic-blockquote { + padding: 30px 50px 30px 30px; + background: #f9f9ff; + border-left: 2px solid $primary; +} + +.progress-table-wrap { + overflow-x: scroll; +} + +.progress-table { + background: #f9f9ff; + padding: 15px 0px 30px 0px; + min-width: 800px; + .serial { + width: 11.83%; + padding-left: 30px; + } + .country { + width: 28.07%; + } + .visit { + width: 19.74%; + } + .percentage { + width: 40.36%; + padding-right: 50px; + } + .table-head { + display: flex; + .serial, + .country, + .visit, + .percentage { + color: $title-color; + line-height: 40px; + text-transform: uppercase; + font-weight: 500; + } + } + .table-row { + padding: 15px 0; + border-top: 1px solid #edf3fd; + display: flex; + .serial, + .country, + .visit, + .percentage { + display: flex; + align-items: center; + } + .country { + img { + margin-right: 15px; + } + } + .percentage { + .progress { + width: 80%; + border-radius: 0px; + background: transparent; + .progress-bar { + height: 5px; + line-height: 5px; + &.color-1 { + background-color: #6382e6; + } + &.color-2 { + background-color: #e66686; + } + &.color-3 { + background-color: #f09359; + } + &.color-4 { + background-color: #73fbaf; + } + &.color-5 { + background-color: #73fbaf; + } + &.color-6 { + background-color: #6382e6; + } + &.color-7 { + background-color: #a367e7; + } + &.color-8 { + background-color: #e66686; + } + } + } + } + } +} + +.single-gallery-image { + margin-top: 30px; + background-repeat: no-repeat !important; + background-position: center center !important; + background-size: cover !important; + height: 200px; +} + +.list-style { + width: 14px; + height: 14px; +} + +.unordered-list { + li { + position: relative; + padding-left: 30px; + line-height: 1.82em !important; + &:before { + content: ""; + position: absolute; + width: 14px; + height: 14px; + border: 3px solid $primary; + background: $white; + top: 4px; + left: 0; + border-radius: 50%; + } + } +} + +.ordered-list { + margin-left: 30px; + li { + list-style-type: decimal-leading-zero; + color: $primary; + font-weight: 500; + line-height: 1.82em !important; + span { + font-weight: 300; + color: $text-color; + } + } +} + +.ordered-list-alpha { + li { + margin-left: 30px; + list-style-type: lower-alpha; + color: $primary; + font-weight: 500; + line-height: 1.82em !important; + span { + font-weight: 300; + color: $text-color; + } + } +} + +.ordered-list-roman { + li { + margin-left: 30px; + list-style-type: lower-roman; + color: $primary; + font-weight: 500; + line-height: 1.82em !important; + span { + font-weight: 300; + color: $text-color; + } + } +} + +.single-input { + display: block; + width: 100%; + line-height: 40px; + border: none; + outline: none; + background: #f9f9ff; + padding: 0 20px; + &:focus { + outline: none; + } +} + +.input-group-icon { + position: relative; + .icon { + position: absolute; + left: 20px; + top: 0; + line-height: 40px; + i { + color: #797979; + } + z-index: 3; + } + .single-input { + padding-left: 45px; + } +} + +.single-textarea { + display: block; + width: 100%; + line-height: 40px; + border: none; + outline: none; + background: #f9f9ff; + padding: 0 20px; + height: 100px; + resize: none; + &:focus { + outline: none; + } +} + +.single-input-primary { + display: block; + width: 100%; + line-height: 40px; + border: 1px solid transparent; + outline: none; + background: #f9f9ff; + padding: 0 20px; + &:focus { + outline: none; + border: 1px solid $primary; + } +} + +.single-input-accent { + display: block; + width: 100%; + line-height: 40px; + border: 1px solid transparent; + outline: none; + background: #f9f9ff; + padding: 0 20px; + &:focus { + outline: none; + border: 1px solid #eb6b55; + } +} + +.single-input-secondary { + display: block; + width: 100%; + line-height: 40px; + border: 1px solid transparent; + outline: none; + background: #f9f9ff; + padding: 0 20px; + &:focus { + outline: none; + border: 1px solid #f09359; + } +} + +.default-switch { + width: 35px; + height: 17px; + border-radius: 8.5px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + +label { + position: absolute; + top: 1px; + left: 1px; + width: 15px; + height: 15px; + border-radius: 50%; + background: $primary; + @include transition (all .2s); + box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2); + cursor: pointer; + } + &:checked { + +label { + left: 19px; + } + } + } +} + +.primary-switch { + width: 35px; + height: 17px; + border-radius: 8.5px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + &:before { + content: ""; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background: transparent; + border-radius: 8.5px; + cursor: pointer; + @include transition (all .2s); + } + &:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + width: 15px; + height: 15px; + border-radius: 50%; + background: $white; + @include transition (all .2s); + box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2); + cursor: pointer; + } + } + &:checked { + +label { + &:after { + left: 19px; + } + &:before { + background: $primary; + } + } + } + } +} + +.confirm-switch { + width: 35px; + height: 17px; + border-radius: 8.5px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + &:before { + content: ""; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background: transparent; + border-radius: 8.5px; + @include transition (all .2s); + cursor: pointer; + } + &:after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + width: 15px; + height: 15px; + border-radius: 50%; + background: $white; + @include transition (all .2s); + box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2); + cursor: pointer; + } + } + &:checked { + +label { + &:after { + left: 19px; + } + &:before { + background: $success; + } + } + } + } +} + +.primary-checkbox { + width: 16px; + height: 16px; + border-radius: 3px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 3px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:checked { + +label { + background: url(../../static/img/elements/primary-check.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.confirm-checkbox { + width: 16px; + height: 16px; + border-radius: 3px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 3px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:checked { + +label { + background: url(../../static/img/elements/success-check.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.disabled-checkbox { + width: 16px; + height: 16px; + border-radius: 3px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 3px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:disabled { + cursor: not-allowed; + z-index: 3; + } + &:checked { + +label { + background: url(../../static/img/elements/disabled-check.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.primary-radio { + width: 16px; + height: 16px; + border-radius: 8px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 8px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:checked { + +label { + background: url(../../static/img/elements/primary-radio.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.confirm-radio { + width: 16px; + height: 16px; + border-radius: 8px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 8px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:checked { + +label { + background: url(../../static/img/elements/success-radio.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.disabled-radio { + width: 16px; + height: 16px; + border-radius: 8px; + background: #f9f9ff; + position: relative; + cursor: pointer; + input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + +label { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 8px; + cursor: pointer; + border: 1px solid #f1f1f1; + } + &:disabled { + cursor: not-allowed; + z-index: 3; + } + &:checked { + +label { + background: url(../../static/img/elements/disabled-radio.png) no-repeat center center/cover; + border: none; + } + } + } +} + +.default-select { + height: 40px; + .nice-select { + border: none; + border-radius: 0px; + height: 40px; + background: #f9f9ff; + padding-left: 20px; + padding-right: 40px; + .list { + margin-top: 0; + border: none; + border-radius: 0px; + box-shadow: none; + width: 100%; + padding: 10px 0 10px 0px; + .option { + font-weight: 300; + @include transition(); + line-height: 28px; + min-height: 28px; + font-size: 12px; + padding-left: 20px; + &.selected { + color: $primary; + background: transparent; + } + &:hover { + color: $primary; + background: transparent; + } + } + } + } + .current { + margin-right: 50px; + font-weight: 300; + } + .nice-select::after { + right: 20px; + } +} + +.form-select { + height: 40px; + width: 100%; + .nice-select { + border: none; + border-radius: 0px; + height: 40px; + background: #f9f9ff; + padding-left: 45px; + padding-right: 40px; + width: 100%; + .list { + margin-top: 0; + border: none; + border-radius: 0px; + box-shadow: none; + width: 100%; + padding: 10px 0 10px 0px; + .option { + font-weight: 300; + @include transition(); + line-height: 28px; + min-height: 28px; + font-size: 12px; + padding-left: 45px; + &.selected { + color: $primary; + background: transparent; + } + &:hover { + color: $primary; + background: transparent; + } + } + } + } + .current { + margin-right: 50px; + font-weight: 300; + } + .nice-select::after { + right: 20px; + } +} +.mt-10 { + margin-top: 10px; +} +.section-top-border { + padding: 50px 0; + border-top: 1px dotted #eee; +} +.mb-30 { + margin-bottom: 30px; +} +.mt-30 { + margin-top: 30px; +} +.switch-wrap { + margin-bottom: 10px; +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_extend.scss b/src/main/resources/static/scss/_extend.scss new file mode 100644 index 0000000..b5734a7 --- /dev/null +++ b/src/main/resources/static/scss/_extend.scss @@ -0,0 +1,19 @@ +.flex-center-start{ + display: -webkit-box; +display: -ms-flexbox; +display: flex; +-webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +-webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; +} + +%overlay{ + background-image: -moz-linear-gradient( 170deg, rgba(34,34,34,0) 0%, rgb(0,0,0) 100%); + background-image: -webkit-linear-gradient( 170deg, rgba(34,34,34,0) 0%, rgb(0,0,0) 100%); + background-image: -ms-linear-gradient( 170deg, rgba(34,34,34,0) 0%, rgb(0,0,0) 100%); + } + +
\ No newline at end of file diff --git a/src/main/resources/static/scss/_footer.scss b/src/main/resources/static/scss/_footer.scss new file mode 100644 index 0000000..a98676c --- /dev/null +++ b/src/main/resources/static/scss/_footer.scss @@ -0,0 +1,234 @@ +.footer{ + background-repeat: no-repeat; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + background: #0d0e0f; + position: relative; + z-index: 0; + .footer_top{ + padding-top: 130px; + padding-bottom: 110px; + @media #{$mobile_device} { + padding-top: 60px; + padding-bottom: 30px; + } + .footer_widget{ + .address_text{ + font-size: 16px; + font-weight: 400; + color: #959595; + } + @media #{$mobile_device} { + margin-bottom: 30px; + } + @media #{$tablet_device} { + margin-bottom: 30px; + } + .links { + position: relative; + top: -14px; + &.double_links{ + li{ + width: 50%; + float: left; + } + } + } + .footer_title{ + font-size: 18px; + font-weight: 400; + color: #fff; + text-transform: capitalize; + margin-bottom: 38px; + font-family: $font1; + position: relative; + margin-top: 20px; + @media #{$mobile_device} { + margin-bottom: 20px; + } + } + .footer_logo{ + font-size: 22px; + font-weight: 400; + color: #fff; + text-transform: capitalize; + margin-bottom: 35px; + @media #{$mobile_device} { + margin-bottom: 20px; + } + } + p { + + color: #AAB1B7; + font-size: 14px; + font-weight: 400; + line-height: 26px; + color: #AAB1B7; + a{ + color: #AAB1B7; + &:hover{ + color: $btn-bg; + } + } + + } + p.footer_text{ + font-size: 16px; + color: #B2B2B2; + margin-bottom: 23px; + font-weight: 400; + line-height: 26px; + a.domain{ + color: #B2B2B2; + font-weight: 400; + &:hover{ + color: $btn-bg; + border-bottom: 1px solid $btn-bg + } + } + &.doanar{ + a{ + font-weight: 500; + color: #B2B2B2; + + &:hover{ + color: $btn-bg; + border-bottom: 1px solid $btn-bg + } + &.first{ + margin-bottom: 10px; + } + } + + } + } + ul{ + li{ + color: #ACACAC; + font-size: 16px; + line-height: 40px; + a{ + color: #959595; + font-weight: 400; + font-family: $font2; + &:hover{ + color: $btn-bg; + } + } + } + } + .newsletter_form{ + position: relative; + margin-bottom: 20px; + input{ + width: 100%; + height: 50px; + background: #F5FBFF; + padding-left: 20px; + font-size: 15px; + color: #000; + border: none; + border: 1px solid #E8E8E8; + border-radius: 30px; + font-family: $font2; + padding-right: 120px; + &::placeholder{ + font-size: 15px; + color: #AAB1B7; + } + &:focus{ + outline: none; + } + } + button{ + position: absolute; + top: 0; + right: 0; + height: 40px; + border: none; + font-size: 14px; + color: #fff; + background: $btn-bg; + padding: 10px; + padding: 0 22px; + cursor: pointer; + border-radius: 30px; + top: 5px; + right: 5px; + font-size: 14px; + font-weight: 500; + font-family: $font2; + } + } + .newsletter_text{ + font-size: 14px; + color: #AAB1B7; + line-height: 26px; + font-family: $font2; + } + .instagram_feed{ + margin: -7.5px -7.5px 0 -7.5px; + .single_insta{ + width: 33.33%; + float: left; + padding: 7.5px; + + overflow: hidden; + img{ + width: 100%; + @include border-radius(5px); + } + } + } + } + } + .copy-right_text{ + padding-bottom: 32px; + .copy_right{ + font-size: 15px; + color: #888888; + margin-bottom: 0; + font-weight: 400; + @media #{$mobile_device} { + font-size: 15px; + } + a{ + color: $btn-bg; + } + } + } + .socail_links{ + margin-top: 26px; + @media #{$mobile_device} { + margin-top: 20px; + } + ul{ + li{ + display: inline-block; + + a{ + font-size: 15px; + color: #C3B2F0; + width: 30px; + // height: 40px; + display: inline-block; + text-align: center; + background: transparent; + // @include border-radius(50%); + // line-height: 40px !important; + margin-right: 7px; + color: #FFFFFF; + line-height: 40px !important; + // border: 1px solid #E8E8E8; + color: #E8E8E8; + &:hover{ + color: $btn-bg !important; + border-color: transparent; + } + } + } + } + + } +} diff --git a/src/main/resources/static/scss/_gallery.scss b/src/main/resources/static/scss/_gallery.scss new file mode 100644 index 0000000..e5a241f --- /dev/null +++ b/src/main/resources/static/scss/_gallery.scss @@ -0,0 +1,253 @@ +.gallery_area{ + padding-bottom: 150px; + padding-top: 120px; + &.minus-padding{ + padding-top: 0; + margin-top: -16px; + } + @media #{$mobile_device}{ + padding-top: 60px; + padding-bottom: 60px; + } + .single_gallery{ + overflow: hidden; + .thumb{ + position: relative; + overflow: hidden; + img{ + width: 100%; + @include transform(scaleX(1)); + @include transition(.5s); + } + .image_hover{ + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(188, 147, 33, .50); + transform: translateX(-40%); + opacity: 0; + @include transition(.5s); + a{ + position: absolute; + top: 44%; + left: 50%; + @include transform(translate(-50%)); + font-size: 35px; + color: #fff; + } + } + } + &:hover{ + .image_hover{ + transform: translateX(0%); + opacity: 1; + } + img{ + width: 100%; + @include transform(scaleX(1.2)); + } + } + } +} + +.video_area{ + background: #FFFBF0; + .video_info{ + padding: 200px 0; + padding-left: 400px; + @media #{$tablet_device} { + padding: 100px 60px; + padding-left: 60px; + } + @media #{$mid_device} { + padding: 0px 0px; + padding-left: 60px; + } + @media #{$large_device} { + padding: 0px 0px; + padding-left: 60px; + } + + @media #{$mobile_device} { + padding: 60px 0; + padding-right: 0px; + padding-left: 0px; + padding-left: 15px; + padding-right: 15px; + } + .about_info{ + + } + .about_info{ + padding-left: 0; + @media #{$mobile_device} { + padding-right: 0; + } + p{ + font-size: 16px; + line-height: 28px; + font-size: 16px; + line-height: 28px; + margin-top: 0; + margin-bottom: 47px; + @media #{$mid_device}{ + padding-right: 30px; + } + br{ + @media #{$mid_device} { + display: none; + + } + + } + } + a{ + @media #{$mobile_device} { + margin-bottom: 30px; + } + } + } + } + .video_thumb{ + + .video_thumb_inner{ + position: relative; + img{ + width: 100%; + } + a{ + width: 94px; + height: 94px; + background: #fff; + @include border-radius(50%); + display: inline-block; + font-size: 22px; + color: $theme-color4; + line-height: 94px; + text-align: center; + top: 50%; + left: 0; + right: 0; + margin: auto; + @include transform(translateY(-50%)); + position: absolute; + &::before { + position: absolute; + top: 0; + right: 0; + // background: red; + content: ""; + border-radius: 50%; + left: 0; + bottom: 0; + box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); + transform: scale(1); + animation: pulse 2s infinite; + box-shadow: 0 0 0 rgba(204,169,44, 0.4); + } + } + } + + } +} +.pulse:hover { + animation: none; +} + +@keyframes pulse { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); + box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); + } + 100% { + -moz-box-shadow: 0 0 0 30px rgba(204,169,44, 0); + box-shadow: 0 0 0 30px rgba(204,169,44, 0); + } +} + + + + + + + + + + + +#test-form{ + .white-popup-block{ + .popup_inner{ + .gj-datepicker{ + span{ + color: red; + } + } + } + input{ + width: 100%; + height: 50px; + } + } +} + +.gj-datepicker input { + width: 100%; + height: 50px; + border: 1px solid #ddd; + padding: 17px; + font-size: 12px; + color: #919191; + margin-bottom: 20px; +} +.gj-datepicker-md [role="right-icon"] { + position: absolute; + right: 0px; + top: 0px; + font-size: 14px; + color: #919191; + margin-right: 15px; + top: 16px; +} +.gj-picker-md { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: .04em; + line-height: 1; + color: rgba(0,0,0,.87); + padding: 10px; + padding: 20px; + border: 1px solid #E0E0E0; +} +#timepicker { + width: 100%; + height: 50px; + border: 1px solid #ddd; + padding: 20px; + text-transform: capitalize; + color: #919191; +} +.gj-timepicker.gj-timepicker-md.gj-unselectable i { + top: 16px; + right: 12px; + font-size: 18px; + color: #919191; +} +.popup_inner input { + width: 100%; + height: 50px; + margin-bottom: 30px; + color: #000; + padding: 18px; + border: 1px solid #ddd; + &:focus{ + outline: none; + } + &::placeholder{ + color: #919191; + font-size: 16px; + } +} diff --git a/src/main/resources/static/scss/_header.scss b/src/main/resources/static/scss/_header.scss new file mode 100644 index 0000000..3488dad --- /dev/null +++ b/src/main/resources/static/scss/_header.scss @@ -0,0 +1,229 @@ +.header-area{ + position: absolute; + left: 0; + right: 0; + width: 100%; + top: 0; + z-index: 9; + @media #{$mobile_device} { + padding-top: 0; + } + @media #{$tablet_device} { + padding-top: 0; + } + .main-header-area{ + // padding: 0 150px; + @media #{$mobile_device} { + padding: 10px 10px; + } + @media #{$tablet_device} { + padding: 10px 10px; + } + .logo-img{ + @media #{$mobile_device} { + // padding-left: 20px; + text-align: left; + } + @media #{$tablet_device} { + // padding-left: 20px; + text-align: left; + } + @media #{$mid_device} { + // padding-left: 20px; + text-align: left; + } + img{ + @media #{$mobile_device} { + // padding-left: 20px; + width: 70px; + } + @media #{$tablet_device} { + // padding-left: 20px; + width: 70px; + } + + } + } + .book_room{ + @include flexbox(); + @include align-items(center); + @include justify-content(flex-end); + .socail_links{ + ul{ + li{ + display: inline-block; + + a{ + color: #A8A7A0; + margin: 0 10px; + font-size: 15px; + &:hover{ + color: #fff; + } + } + } + } + } + .book_btn{ + a{ + background: $btn_bg; + font-size: 16px; + font-weight: 400; + border: 1px solid transparent ; + color: #fff; + padding: 19px 43px 23px 43px; + font-family: $font2; + display: inline-block; + line-height: 1; + &:hover{ + background: transparent; + color: $btn_bg; + border: 1px solid $btn_bg; + } + } + } + } + .main-menu{ + text-align: center; + ul{ + li{ + display: inline-block; + position: relative; + margin-right: 45px; + @media #{$mid_device} { + margin-right: 30px; + } + @media #{$large_device} { + margin-right: 45px; + } + a{ + color: #fff; + font-size: 16px; + text-transform: capitalize; + font-weight: 400; + display: inline-block; + padding: 39px 0px 39px 0px; + font-family: $font2; + position: relative; + text-transform:capitalize; + + @media #{$mid_device} { + // padding: 41px 0px 10px 0px; + font-size: 15px; + } + @media #{$large_device} { + // padding: 41px 0px 10px 0px; + font-size: 15px; + } + i{ + font-size: 9px; + @media #{$mobile_device}{ + display: none !important; + } + @media #{$tablet_device}{ + display: none !important;; + } + } + // &::before { + // position: absolute; + // content: ""; + // background: #BC9321; + // width: 100%; + // height: 2px; + // bottom: 0; + // left: 0; + // opacity: 0; + // transform: scaleX(0); + // @include transition(.3s); + // } + // &:hover::before{ + // opacity: 1; + // transform: scaleX(1); + // } + &.active{ + // &::before{ + // opacity: 1; + // transform: scaleX(1); + // } + } + &:hover{ + color: #fff; + } + } + .submenu { + position: absolute; + left: 0; + top: 140%; + background: #fff; + width: 200px; + z-index: 2; + box-shadow: 0 0 10px rgba(0,0,0,.02); + opacity: 0; + visibility: hidden; + text-align: left; + @include transition(.6s); + li{ + display: block; + a{ + padding: 10px 15px; + position: inherit; + @include transition(.3s); + display: block; + color: #000; + &::before{ + display: none; + } + } + &:hover a{ + color: #000; + } + } + } + &:hover > .submenu{ + opacity: 1; + visibility: visible; + top: 100%; + } + &:hover > a::before{ + opacity: 1; + transform: scaleX(1); + } + &:first-child a { + padding-left: 0; + } + } + } + } + &.sticky { + box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); + position: fixed; + width: 100%; + top: -70px; + left: 0; + right: 0; + z-index: 999; + 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); + background: #000;; + @media #{$mobile_device} { + padding: 10px 10px; + } + @media #{$tablet_device} { + padding: 10px 10px; + } + @media #{$mid_device} { + padding: 10px 20px; + } + @media #{$large_device} { + padding: 10px 20px + } + .main-menu{ + padding: 0; + } + } + + } + +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_make_apointment.scss b/src/main/resources/static/scss/_make_apointment.scss new file mode 100644 index 0000000..9d7b3f5 --- /dev/null +++ b/src/main/resources/static/scss/_make_apointment.scss @@ -0,0 +1,79 @@ +.make_apppointment_area{ + padding-top: 150px; + padding-bottom: 120px; + background: #fdf9f6; + @media #{$mobile_device} { + padding-top: 60px; + padding-bottom: 30px; + } + .appoint_ment_form{ + margin-bottom: 30px; + form{ + .single_field{ + margin-bottom: 32px; + input,textarea{ + width: 100%; + border: 0; + padding-bottom: 3px; + border-bottom: 1px solid #c1c1c1; + padding-left: 10px; + height: 50px; + font-family: $font2; + color: #000; + background: transparent ; + &::placeholder{ + color: #96989a; + font-weight: 400; + font-family: $font2; + } + &:focus{ + outline: none; + } + } + textarea{ + resize: none; + margin-top: 41px; + padding: 11px 20px 14px 10px; + } + &:last-child{ + margin-bottom: 0; + } + } + + button{ + transition: .3s; + cursor: pointer; + } + p{ + margin-top: 17px; + margin-bottom: 40px; + font-size: 16px; + font-weight: 400; + color: #464444; + line-height: 30px; + } + } + } + + // appointMent_info + .appointMent_info{ + .single_appontment{ + margin-bottom: 36px; + h4{ + font-size: 18px; + color: #4a4948; + font-weight: 400; + } + p{ + font-size: 16px; + line-height: 30px; + color: #7f7f7f; + font-weight: 400; + margin-bottom: 0; + span{ + flex: 50% 0 0; + } + } + } + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_mixins.scss b/src/main/resources/static/scss/_mixins.scss new file mode 100644 index 0000000..4b2f01a --- /dev/null +++ b/src/main/resources/static/scss/_mixins.scss @@ -0,0 +1,134 @@ +// opacity +@mixin opacity($opacity) { + opacity: $opacity; + $opacity-ie: $opacity * 100; + filter: alpha(opacity=$opacity-ie); //IE8 + } +// transition +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + transition: $args; +}// transition +@mixin border-radius($man) { + -webkit-border-radius: $man; + -moz-border-radius: $man; + border-radius: $man; +} + + +// Flexbox display +@mixin flexbox() { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +// justify-content +@mixin justify-content($justify) { + -webkit-justify-content: $justify; + -moz-justify-content: $justify; + -ms-justify-content: $justify; + justify-content: $justify; + -ms-flex-pack: $justify; +} + +// align-content +@mixin align-content($align) { + -webkit-align-content: $align; + -moz-align-content: $align; + -ms-align-content: $align; + align-content: $align; +} + +// Cross-axis Alignment +@mixin align-items($align) { + -webkit-align-items: $align; + -moz-align-items: $align; + -ms-align-items: $align; + align-items: $align; +} + + +// transform +// Browser Prefixes +@mixin transform($transforms) { + -webkit-transform: $transforms; + -moz-transform: $transforms; + -ms-transform: $transforms; + transform: $transforms; +} +// Translate +@mixin translate ($x, $y) { + @include transform(translate($x, $y)); +} +// TranslateY +@mixin translateY ($y) { + @include transform(translateY($y)); + } +// TranslateY +@mixin translateX ($x) { + @include transform(translateX($x)); + } + + +// Box shadows +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + + + +@mixin background($imgpath,$position: center,$size: cover,$repeat: no-repeat) { + background: { + image: url($imgpath); + position: $position; + repeat: $repeat; + size: $size; + } +} +@mixin transform_time($total_time) { + -webkit-transition: $total_time; + transition: $total_time; +} +@mixin placeholder { +&.placeholder { + @content; +} +&:-moz-placeholder { + @content; +} +&::-moz-placeholder { + @content; +} +&::-webkit-input-placeholder { + @content; +} +} +@mixin transition($args: all 0.6s ease 0s) { +-webkit-transition: $args; +-moz-transition: $args; +-o-transition: $args; +transition: $args; +} + +@mixin keyframes ($animation-name) { +@-webkit-keyframes #{$animation-name} { + @content; +} +@-moz-keyframes #{$animation-name} { + @content; +} +@-o-keyframes #{$animation-name} { + @content; +} +@keyframes #{$animation-name} { + @content; +} +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_prising.scss b/src/main/resources/static/scss/_prising.scss new file mode 100644 index 0000000..1afa33f --- /dev/null +++ b/src/main/resources/static/scss/_prising.scss @@ -0,0 +1,139 @@ +.prising_area{ + position: relative; + background: #fdf9f6; + padding-top: 144px; + padding-bottom: 100px; + z-index: 0; + &::after{ + position: absolute; + left: 0; + top: 0; + content: ''; + background-image: url(../../static/img/banner/prise_bg.png); + height: 100%; + width: 100%; + opacity: .04; + z-index: -1; + } + .prise_title{ + h4{ + font-size: 25px; + color: #eb592d; + margin-bottom: 35px; + } + } + .single_service{ + margin-bottom: 50px; + .service_inner{ + .thumb{ + img{ + width: 60px; + height: 60px; + @include border-radius(50%); + overflow: hidden; + } + } + } + .hair_style_info{ + padding-left: 20px; + .prise{ + margin-bottom: 5px; + position: relative; + &::before{ + position: absolute; + height: 1px; + content: ''; + border-bottom: 1px dashed#d7d4d1; + bottom: 7px; + left: 29%; + right: 12%; + } + span{ + font-size: 16px; + color: #222222; + font-family: $font1; + } + } + p{ + font-size: 16px; + color: #7f7f7f; + font-weight: 400; + margin-bottom: 0; + } + } + } + .prising_active{ + @media #{$mobile_device}{ + display: block !important; + } + .single_prising{ + overflow: hidden; + -webkit-box-flex: 45%; + -ms-flex: 45% 0 0px; + flex: 45% 0 0; + @media #{$mobile_device}{ + -webkit-box-flex: 100%; + -ms-flex: 100% 0 0px; + flex: 100% 0 0; + } + .service_inner{ + // flex: 10% 0 0; + float: left; + overflow: hidden; + } + .hair_style_info{ + // flex: 90% 0 0; + overflow: hidden; + } + } + } + + + .owl-carousel .owl-nav div.owl-next { + left: auto; + right: 0; + } + .owl-carousel .owl-nav div.owl-prev { + left: auto; + right: 54px; + } + .owl-carousel .owl-nav div { + left: 0; + background: #000; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; + @include border-radius(4px); + border: 1px solid #ddc4c4; + background: #fff; + font-size: 14px; + color: #f39b80 !important; + left: auto; + top: -96px; + right: 10px; + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + } + .owl-carousel .owl-nav div { + color: #7E8D9A; + &:hover{ + background: #F91842; + border-color: #eb592d; + color: #fff !important; + } + } + .owl-carousel .owl-nav div.owl-prev i { + + position: relative; + right: 1px; + top: -1px; + } + .owl-carousel .owl-nav div.owl-next i { + + position: relative; + right: 0; + top: -1px; + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_reset.scss b/src/main/resources/static/scss/_reset.scss new file mode 100644 index 0000000..7b52e70 --- /dev/null +++ b/src/main/resources/static/scss/_reset.scss @@ -0,0 +1,261 @@ +@import 'mixins.scss'; +@import 'varriable'; +/* 1. Theme default css */ +body { + font-family: $font2; + font-weight: normal; + font-style: normal; + +} + +.img { + max-width: 100%; + @include transition(.3s); +} +a, +.button { +@include transition(.3s); +} +a:focus, +.button:focus,button:focus { + text-decoration: none; + outline: none; +} +a:focus{ + text-decoration: none; +} +a:focus, +a:hover, +.portfolio-cat a:hover, +.footer -menu li a:hover { + text-decoration: none; +} +a, +button { + color: #1F1F1F; + outline: medium none; +} +h1,h2,h3,h4,h5{ + font-family: $font1; + color: #1F1F1F; +} +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + color: inherit; +} + +ul { + margin: 0px; + padding: 0px; +} +li { + list-style: none +} +p { + font-size: 16px; + font-weight:300; + line-height: 28px; + color: #727272; + margin-bottom: 13px; + font-family: $font2; +} + +label { + color: #7e7e7e; + cursor: pointer; + font-size: 14px; + font-weight: 400; +} +*::-moz-selection { + background: #444; + color: #fff; + text-shadow: none; +} +::-moz-selection { + background: #444; + color: #fff; + text-shadow: none; +} +::selection { + background: #444; + color: #fff; + text-shadow: none; +} +*::-webkit-input-placeholder { + color: #cccccc; + font-size: 14px; + opacity: 1; +} +*:-ms-input-placeholder { + color: #cccccc; + font-size: 14px; + opacity: 1; +} +*::-ms-input-placeholder { + color: #cccccc; + font-size: 14px; + opacity: 1; +} +*::placeholder { + color: #cccccc; + font-size: 14px; + opacity: 1; +} + +h3{ + font-size: 24px; +} + +.mb-65{ + margin-bottom: 67px; +} +// default-bg-color +.black-bg{ + background: #020c26 !important; +} + +.white-bg{ + background: #ffffff; +} +.gray-bg{ + background: #f5f5f5; +} + +// background-image +.bg-img-1{ + background-image: url(../../static/img/slider/slider-img-1.jpg); +} +.bg-img-2{ + background-image: url(../../static/img/background-img/bg-img-2.jpg); +} +.cta-bg-1{ + background-image: url(../../static/img/background-img/bg-img-3.jpg); + +} + +.overlay{ + position: relative; + z-index: 0; +} +.overlay::before{ + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + @extend %overlay; +} + +.overlay2{ + position: relative; + z-index: 0; +} +.overlay2::before{ + position: absolute; + content: ""; + background-color: #2E2200; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.5; +} + +.section-padding{ + padding-top: 120px; + padding-bottom: 120px; +} +.pt-120{ + padding-top: 120px; +} + +/* button style */ +.owl-carousel { + .owl-nav div { + background: transparent; + height: 54px; + left: 0px; + line-height: 54px; + // opacity: 0; + position: absolute; + text-align: center; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + // visibility: hidden; + width: 54px; + font-size: 25px; + color: #fff; + background-color: rgba(255, 255, 255,255); + border-radius: 50%; + left: 50px; + font-size: 18px; + line-height: 54px; + left: -26px; + font-size: 18px; + line-height: 54px; + color: #000; + } + .owl-nav{ + div{ + &.owl-next{ + // left: 86px; + // right: auto; + left: auto; + right: -30px; + i{ + position: relative; + right: 0; + top: 1px; + } + } + &.owl-prev{ + i{ + position: relative; + right: 1px; + top: 0px; + } + } + } + } + &:hover{ + .owl-nav{ + div{ + opacity: 1; + visibility: visible; + &:hover{ + color: #fff; + background: $theme-color4; + } + } + } + } +} + +.mb-20px{ + margin-bottom: 20px; +} +.mb-90{ + margin-bottom: 90px; + @media #{$mobile_device}{ + margin-bottom: 30px; + } + @media #{$tablet_device}{ + margin-bottom: 45px; + } +} + + + +
\ No newline at end of file diff --git a/src/main/resources/static/scss/_responsive.scss b/src/main/resources/static/scss/_responsive.scss new file mode 100644 index 0000000..7e6bff3 --- /dev/null +++ b/src/main/resources/static/scss/_responsive.scss @@ -0,0 +1,15 @@ +/* Normal desktop :1200px. */ +$large_device:'(min-width: 1200px) and (max-width: 1500px)'; + +/* Normal desktop :992px. */ +$mid_device:'(min-width: 992px) and (max-width: 1200px)'; + +/* Tablet desktop :768px. */ +$tablet_device:'(min-width: 768px) and (max-width: 991px)'; + +/* small mobile :320px. */ +$mobile_device:'(max-width: 767px)'; + +/* Large Mobile :480px. */ +$large_mobile:'only screen and (min-width: 480px) and (max-width: 767px)'; + diff --git a/src/main/resources/static/scss/_section_title.scss b/src/main/resources/static/scss/_section_title.scss new file mode 100644 index 0000000..4f8186d --- /dev/null +++ b/src/main/resources/static/scss/_section_title.scss @@ -0,0 +1,131 @@ +.section_title{ + h3{ + font-size: 50px; + font-weight: 400; + line-height: 51px; + color: $theme-color2; + font-family: $font1; + margin-bottom: 21px; + @media #{$mobile_device} { + font-size: 27px; + line-height: 33px; + } + @media #{$tablet_device} { + font-size: 32px; + line-height: 40px; + } + @media #{$mid_device} { + font-size: 33px; + line-height: 40px; + } + br{ + @media #{$mobile_device} { + display: none; + } + } + } + p{ + font-size: 16px; + line-height: 32px; + color: #7f7f7f; + font-weight: 400; + } +} +.mb-100{ + margin-bottom: 100px; + @media #{$mobile_device} { + margin-bottom: 40px; + } +} +.section_title2{ + i{ + font-size: 45px; + color: #BC9321; + display: block; + } + h3{ + font-size: 42px; + font-weight: 400; + line-height: 52px; + color: $theme-color4; + position: relative; + padding-bottom: 30px; + margin-top: 10px; + &::before{ + position: absolute; + content: ""; + width: 80px; + height: 1px; + background: #BC9321; + bottom: 0; + left: 50%; + margin-left: -40px; + } + + @media #{$mobile_device} { + font-size: 30px; + line-height: 36px; + } + @media #{$tablet_device} { + font-size: 36px; + line-height: 42px; + } + br{ + @media #{$mobile_device} { + display: none; + } + } + } +} +.section_title3 h3 { + font-size: 60px; + color: #FFFFFF; + font-weight: 900; + text-transform: capitalize; + @media #{$mobile_device}{ + font-size: 30px; + } + @media #{$tablet_device}{ + font-size: 35px; + } +} +.section_title3.padding_plus{ + padding-top: 115px; + padding-bottom: 50px; + @media #{$mobile_device} { + padding-top: 60px; + padding-bottom: 30px; + } + @media #{$tablet_device} { + padding-top: 80px; + padding-bottom: 40px; + } +} +.mb-55{ + margin-bottom: 53px; + @media #{$mobile_device} { + margin-bottom: 30px; + } + @media #{$tablet_device} { + margin-bottom: 40px; + } +} +.mb-40{ + margin-bottom: 40px; + @media #{$mobile_device} { + margin-bottom: 30px; + } +} + +.pl-68{ + padding-left: 68px; + @media #{$mobile_device} { + padding-left: 0; + } + @media #{$tablet_device} { + padding-left: 0; + } + @media #{$mid_device} { + padding-left: 0; + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_service.scss b/src/main/resources/static/scss/_service.scss new file mode 100644 index 0000000..354e1b6 --- /dev/null +++ b/src/main/resources/static/scss/_service.scss @@ -0,0 +1,76 @@ +.service_area{ + padding-top: 150px; + padding-bottom: 120px; + @media #{$mobile_device} { + padding-top: 60px; + padding-bottom: 30px; + } + .single_service{ + .service_thumb{ + overflow: hidden; + img{ + width: 100%; + @include transition(.3s); + @include transform(scale(1)); + } + } + .service_content{ + position: relative; + padding: 64px 60px; + border: 1px solid #ffd1af; + border-top: none; + margin-bottom: 30px; + @media #{$mobile_device}{ + padding: 40px 30px 30px 30px; + } + @media #{$mid_device}{ + padding: 40px 30px 30px 30px; + } + .icon{ + width: 55px; + height: 55px; + @include border-radius(50%); + @include box-shadow(0px 0px 46px 0px rgba(0, 0, 0, 0.28)); + color: #eb592d; + text-align: center; + line-height:55px; + position: absolute; + left: 50%; + transform: translateX(-50%); + margin-top: -25px; + z-index: 0; + background:#fff; + top: 0; + font-size: 25px; + @include transition(.3s); + } + h3{ + font-size: 25px; + font-weight: 400; + color: #141419; + } + p{ + font-size: 16px; + line-height: 32px; + color: #575757; + font-weight: 400; + margin-bottom: 0; + } + } + &:hover{ + .service_thumb{ + img{ + @include transform(scale(1.1)); + } + } + .service_content{ + .icon{ + @include box-shadow(0px 0px 50px 0px rgba(0, 0, 0, 0.30)); + } + } + + } + } +} + +
\ No newline at end of file diff --git a/src/main/resources/static/scss/_slick-nav.scss b/src/main/resources/static/scss/_slick-nav.scss new file mode 100644 index 0000000..854cc69 --- /dev/null +++ b/src/main/resources/static/scss/_slick-nav.scss @@ -0,0 +1,105 @@ + + +// slick-nav +.mobile_menu{ + @media #{$mobile_device} { + position: absolute; + right: 0px; + width: 100%; + z-index: 9; + } +} +.slicknav_menu{ + .slicknav_nav { + background: #fff; + float: right; + margin-top: 0; + padding: 0; + width: 95%; + padding: 0; + border-radius: 0px; + margin-top: 5px; + position: absolute; + left: 0; + right: 0; + margin: auto; + top: 11px; + a{ + &:hover{ + background: transparent; + color: #4A3600; + } + &.active{ + color: #4A3600; + } + i{ + @media #{$mobile_device} { + display: none; + } + @media #{$tablet_device} { + display: none; + } + } + } + .slicknav_btn { + background-color: transparent; + cursor: pointer; + margin-bottom: 10px; + margin-top: -40px; + position: relative; + z-index: 99; + border: 1px solid #ddd; + top: 3px; + right: 5px; + top: -32px; + .slicknav_icon{ + margin-right: 6px; + margin-top: 3px; + position: relative; + padding-bottom: 3px; + top: -11px; + right: -5px; + } + } + } + @media #{$mobile_device} { + margin-right: 0px; + } +} + + +// slick-nav +.slicknav_nav .slicknav_arrow { + float: right; + font-size: 22px; + position: relative; + top: -9px; +} +.slicknav_btn { + background-color: transparent; + cursor: pointer; + margin-bottom: 10px; + position: relative; + z-index: 99; + border: none; + border-radius: 3px; + top: 5px; + padding: 5px; + right: 5px; + margin-top: -5px; + top: -31px; +} +.slicknav_btn { + background-color: transparent; + cursor: pointer; + margin-bottom: 10px; + position: relative; + z-index: 99; + border: none; + border-radius: 3px; + top: 5px; + padding: 5px; + right: 0; + margin-top: -5px; + top: -26px; +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_slider.scss b/src/main/resources/static/scss/_slider.scss new file mode 100644 index 0000000..67a96ad --- /dev/null +++ b/src/main/resources/static/scss/_slider.scss @@ -0,0 +1,83 @@ +.slider_bg_1{ + background-image: url(../../static/img/banner/banner.png); +} +.slider_bg_2{ + background-image: url(../../static/img/banner/banner2.png); +} +.slider_bg_3{ + background-image: url(../../static/img/banner/banner3.png); +} +.slider_area{ + .single_slider{ + height: 900px; + background-size: cover; + background-repeat: no-repeat; + + @media #{$mobile_device} { + height: 600px; + } + @media #{$tablet_device} { + height: 600px; + } + .slider_text{ + h3{ + color: #ffffff; + font-family: $font1; + font-size: 65px; + font-weight: 900; + margin-bottom: 4px; + line-height: 75px; + @media #{$mobile_device} { + font-size: 33px; + line-height: 40px; + } + @media #{$tablet_device} { + font-size: 30px; + line-height: 46px; + } + @media #{$mid_device} { + font-size: 35px; + line-height: 45px; + } + } + p{ + font-size: 16px; + font-weight: 400; + color: #ffffff; + margin-bottom: 0; + margin-top: 0; + line-height: 26px; + display: inline-block; + position: relative; + margin-bottom: 41px; + margin-top: 22px; + @media #{$mid_device} { + font-size: 16px; + } + @media #{$mobile_device} { + font-size: 16px; + } + } + } + } + + .owl-dots { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 25px; + .owl-dot { + width: 10px; + height: 10px; + background: #000; + border-radius: 50%; + display: inline-block; + background-color: rgba(252, 229, 207,.2); + margin: 0 6px; + &.active{ + background: #fff; + } + } + } +} +
\ No newline at end of file diff --git a/src/main/resources/static/scss/_team.scss b/src/main/resources/static/scss/_team.scss new file mode 100644 index 0000000..fa914e6 --- /dev/null +++ b/src/main/resources/static/scss/_team.scss @@ -0,0 +1,46 @@ +.team_area{ + padding-bottom: 120px; + padding-top: 150px; + @media #{$mobile_device} { + padding-top: 60px; + padding-bottom: 30px; + } + .single_team_member{ + @media #{$tablet_device} { + margin-bottom: 30px; + } + .team_thumb{ + overflow: hidden; + img{ + width: 100%; + @include transform(scale(1)); + @include transition(.3s); + } + } + .member_info{ + background: #fdf9f6; + padding: 36px 0 35px 0; + h3{ + font-size: 25px; + font-weight: 400; + color: #222222; + margin-bottom: 0; + margin-bottom: 6px; + } + p{ + font-size: 18px; + font-weight: 400; + font-family: $font2; + color: #eb592d; + margin-bottom: 0; + } + } + &:hover{ + .team_thumb{ + img{ + @include transform(scale(1.1)); + } + } + } + } +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_testmonial.scss b/src/main/resources/static/scss/_testmonial.scss new file mode 100644 index 0000000..21b1fea --- /dev/null +++ b/src/main/resources/static/scss/_testmonial.scss @@ -0,0 +1,160 @@ + +.testimonial_area{ + // background-image: url(../img/banner/testmonial.png); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + position: relative; + padding: 0px 0 144px 0; + background: #fff; + @media #{$mobile_device} { + padding:0 0 50px 0; + } + .single_testmonial{ + p{ + color: #7f7f7f; + font-weight: 400; + font-size: 18px; + line-height: 32px; + margin-bottom: 40px; + font-family: $font2; + font-style: italic; + br{ + @media (min-width: 320px) and (max-width: 991px) { + display: none; + } + } + + } + .testmonial_author{ + .thumb{ + width: 60px; + height: 60px; + @include border-radius(50%); + margin: auto; + margin: auto auto 21px auto; + } + h3{ + color: #8c8c8c; + font-size: 16px; + font-weight: 400; + font-family: $font1; + } + } + } + .owl-carousel .owl-item img { + display: inline-block; + width: auto; + } + .owl-carousel .owl-nav div.owl-next { + left: auto; + right: 98px; + } + .owl-carousel .owl-nav div { + left: 0; + background: #000; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; + @include border-radius(4px); + border: 1px solid #ddc4c4; + background: #fff; + font-size: 14px; + color: #f39b80 !important; + left: 98px; + top: 20%; + -webkit-transform: translateY(-80%); + -ms-transform: translateY(-80%); + transform: translateY(-80%); + } + .owl-carousel .owl-nav div { + color: #7E8D9A; + &:hover{ + background: #F91842; + border-color: #eb592d; + color: #fff !important; + } + } + .owl-carousel .owl-nav div.owl-prev i { + + position: relative; + right: 1px; + top: -1px; + } + .owl-carousel .owl-nav div.owl-next i { + + position: relative; + right: 0; + top: -1px; + } +} + +// Information_area +.Information_area{ + background-image: url(../../static/img/banner/info_banner.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + padding: 162px 0; + @media #{$mobile_device} { + padding: 100px 0; + } + .info_text{ + h3{ + font-size: 46px; + font-weight: 300; + color: #fff; + margin-bottom: 0; + @media #{$mobile_device} { + font-size: 30px; + } + } + p{ + font-size: 15px; + font-weight: 400; + color: #E8E8E8; + margin: 25px 0; + } + a.boxed-btn3{ + padding: 14px 40px; + } + } +} + + +// newsletter +.newsletter_form{ + position: relative; + margin-bottom: 20px; + input{ + width: 100%; + height: 45px; + background: #fff; + padding-left: 20px; + font-size: 16px; + color: #000; + border: none; + &::placeholder{ + font-size: 16px; + color: #919191; + } + } + button{ + position: absolute; + top: 0; + right: 0; + height: 100%; + border: none; + font-size: 14px; + color: #fff; + background: #A70000; + padding: 10px; + padding: 0 22px; + cursor: pointer; + } +} +.newsletter_text{ + font-size: 16px; + color: #BABABA; +}
\ No newline at end of file diff --git a/src/main/resources/static/scss/_varriable.scss b/src/main/resources/static/scss/_varriable.scss new file mode 100644 index 0000000..b36e7ab --- /dev/null +++ b/src/main/resources/static/scss/_varriable.scss @@ -0,0 +1,49 @@ +@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Yeseva+One&display=swap'); + +// fonts +$font1: 'Yeseva One', cursive; +$font2: 'Lato', sans-serif; +// fonts-size + +$heading-color:#020c26; +$gray-color: #bebebe; +$gray-color-2: #bdbdbd; + +$theme-color: #020c26; +$theme-color2: #222222; +$theme-color3: #BC9321; +$theme-color4: #EB592D; + +$gray-color3:#5c5c5c; +$white_color:#fff; + + + +$font_1: #666666; +$font_2: #646464; +$font_3: #7f7f7f; +$font_4: #8a8a8a; +$font_5: #999999; +$font_6: #666666; +$font_7: #5c5c5c; +$border_color: #fdcb9e; +$footer_bg: #303030; +$sidebar_bg: #fbf9ff; + +$medium_device : 'only screen and (min-width: 992px) and (max-width: 1200px)'; +$tab_device:'only screen and (min-width: 768px) and (max-width: 991px)'; +$large_mobile: 'only screen and (min-width: 576px) and (max-width: 767px)'; +$tab:'(max-width: 991px)'; +$small_mobile:'(max-width: 576px)'; +$xs_mobile:'(max-width: 420px)'; +$sm_mobile:'only screen and (min-width: 421px) and (max-width: 575px)'; +$big_screen:'only screen and (min-width: 1200px) and (max-width: 1440px)'; +$extra_big_screen: 'only screen and (min-width: 1200px) and (max-width: 3640px)'; + +// ,,,,,,,,,,, +$btn_bg: #eb592d; +$btn_hover: #f5790b; +$section_bg: #f7f7f7; +$section_bg_1: #454545; +$heading_color: #191d34; +$heading_color2: #ff8b23;
\ No newline at end of file diff --git a/src/main/resources/static/scss/style.scss b/src/main/resources/static/scss/style.scss new file mode 100644 index 0000000..6a06ff1 --- /dev/null +++ b/src/main/resources/static/scss/style.scss @@ -0,0 +1,59 @@ + +@import 'varriable.scss'; +@import 'mixins.scss'; +@import 'extend'; +@import 'responsive.scss'; +@import 'reset'; +@import 'btn'; +@import 'section_title'; +@import 'slick-nav.scss'; + + + +// header +@import 'header'; + +// slider +@import 'slider'; + +// about +@import 'about'; + +// prising +@import 'prising'; + +// service +@import 'service'; + +// _team +@import 'team'; + +// make_apointment +@import 'make_apointment'; + +// _team +@import '_testmonial'; + +// _team +@import '_gallery'; + +// about +@import 'footer'; + +@import 'bradcam'; + +// other pages default + +// contact +@import 'contact'; + +// elements +@import 'elements.scss'; + +// blog +@import 'blog'; + + +// blog part +@import 'blog_part'; + |