diff options
author | somrat <monnaf37@gmail.com> | 2019-10-20 07:32:14 +0300 |
---|---|---|
committer | somrat <monnaf37@gmail.com> | 2019-10-20 07:32:14 +0300 |
commit | 58465f6ee1a783f0512fd5e78d960ccd7b8a2f61 (patch) | |
tree | ba10564ad78141c113b66284a4e06839cfe21d4f /assets |
initialize template
Diffstat (limited to 'assets')
-rw-r--r-- | assets/js/script.js | 92 | ||||
-rw-r--r-- | assets/scss/_buttons.scss | 98 | ||||
-rw-r--r-- | assets/scss/_common.scss | 210 | ||||
-rw-r--r-- | assets/scss/_mixins.scss | 29 | ||||
-rw-r--r-- | assets/scss/_typography.scss | 49 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 15 | ||||
-rw-r--r-- | assets/scss/style.scss | 24 | ||||
-rw-r--r-- | assets/scss/templates/_homepage.scss | 353 | ||||
-rw-r--r-- | assets/scss/templates/_navigation.scss | 167 |
9 files changed, 1037 insertions, 0 deletions
diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..0b0aae2 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,92 @@ +(function ($) { + 'use strict'; + + // Preloader js + $(window).on('load', function () { + $('.preloader').fadeOut(100); + }); + + // navigation + $(window).scroll(function () { + if ($('.navigation').offset().top > 1) { + $('.navigation').addClass('nav-bg'); + } else { + $('.navigation').removeClass('nav-bg'); + } + }); + + + // video modal popup + var $videoSrc; + $('.video-modal').click(function () { + $videoSrc = $(this).data("src"); + }); + $('#videoModal').on('shown.bs.modal', function (e) { + $("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"); + }) + $('#videoModal').on('hide.bs.modal', function (e) { + $("#video").attr('src', $videoSrc); + }) + $('#videoModal2').on('shown.bs.modal', function (e) { + $("#video2").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"); + }) + $('#videoModal2').on('hide.bs.modal', function (e) { + $("#video2").attr('src', $videoSrc); + }) + + + // testimonial slider + $('.testimonial-slider').slick({ + dots: false, + infinite: true, + speed: 300, + slidesToShow: 3, + slidesToScroll: 1, + arrows: true, + prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'ti-arrow-left\'></i></button>', + nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'ti-arrow-right\'></i></button>', + autoplay: true, + responsive: [{ + breakpoint: 1024, + settings: { + slidesToShow: 3 + } + }, + { + breakpoint: 600, + settings: { + slidesToShow: 2 + } + }, + { + breakpoint: 401, + settings: { + slidesToShow: 1 + } + } + ] + }); + + + // product Slider + $('.product-slider').slick({ + autoplay: false, + infinite: true, + arrows: false, + dots: true, + customPaging: function (slider, i) { + var image = $(slider.$slides[i]).data('image'); + return '<img class="img-fluid" src="' + image + '" alt="product-img">'; + } + }); + + + // Accordions + $('.collapse').on('shown.bs.collapse', function () { + $(this).parent().find('.ti-plus').removeClass('ti-plus').addClass('ti-minus'); + }).on('hidden.bs.collapse', function () { + $(this).parent().find('.ti-minus').removeClass('ti-minus').addClass('ti-plus'); + }); + + +})(jQuery);
\ No newline at end of file diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss new file mode 100644 index 0000000..9f4b011 --- /dev/null +++ b/assets/scss/_buttons.scss @@ -0,0 +1,98 @@ +/* Button style */ +.btn { + font-size: 14px; + font-family: $primary-font; + text-transform: capitalize; + padding: 13px 40px; + border-radius: 35px; + font-weight: 500; + border: 1px solid; + position: relative; + z-index: 1; + transition: .2s ease; + + &:hover, + &:active, + &:focus { + outline: 0; + box-shadow: 0 8px 10px rgba(33,33,33,.2) !important; + } +} + +.btn-sm{ + padding: 10px 30px; +} + +.btn-primary { + background: $primary-gradient; + color: $white; + border-color: $primary-color; + + &:active, + &:hover, + &.focus, + &.active { + background: $primary-gradient !important; + border-color: $primary-color !important; + } +} + +.btn-outline-primary { + background: transparent; + color: $text-color; + border-color: $primary-color; + transition: none; + + &:active, + &:hover, + &.focus, + &.active { + background: $primary-gradient !important; + border-color: $primary-color !important; + color: $white; + } +} + + +.btn-light { + background: $white; + color: $text-color; + border-color: $white; + + &:active, + &:hover, + &.focus, + &.active { + background: $white !important; + border-color: $white !important; + } +} + + +.btn-play{ + height: 50px; + width: 50px; + padding: 0; + line-height: 50px; + display: inline-block; + border-radius: 50%; + text-align: center; + color: $white; +} + +.btn-play-lg{ + height: 70px; + width: 70px; + padding: 0; + line-height: 70px; + display: inline-block; + border-radius: 50%; + text-align: center; + color: $white; + font-size: 30px; + box-shadow: 0 0 0 20px rgba($color: $white, $alpha: .5); + transition: .2s ease; + &:hover{ + box-shadow: 0 0 0 25px rgba($color: $white, $alpha: .5); + } +}
\ No newline at end of file diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss new file mode 100644 index 0000000..3ff9a0d --- /dev/null +++ b/assets/scss/_common.scss @@ -0,0 +1,210 @@ +body { + background-color: $body-color; + overflow-x: hidden; +} + +::selection { + background: lighten($color: $primary-color, $amount: 10); + color: $white; +} + +/* preloader */ + +.preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + z-index: 99999; + display: flex; + align-items: center; + justify-content: center; +} + +a, +a:hover, +a:focus { + text-decoration: none; +} + +a, +button, +select { + cursor: pointer; + transition: .2s ease; + + &:focus { + outline: 0; + } +} + +a:hover { + color: $primary-color; +} + +.slick-slide { + outline: 0; +} + +.section { + padding-top: 100px; + padding-bottom: 100px; + + &-sm { + padding-top: 50px; + padding-bottom: 50px; + } +} + +.bg-cover { + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.border-primary { + border-color: $border-color !important; +} + +/* overlay */ + +.overlay { + position: relative; + + &::before { + position: absolute; + content: ''; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: $black; + opacity: .5; + } +} + +.outline-0 { + outline: 0 !important; +} + +.d-unset { + display: unset !important; +} + +.bg-primary { + background: $primary-color !important; +} + +.bg-gradient { + background: $primary-gradient !important; +} + +.hover-shadow { + transition: .2s ease; + + &:hover { + box-shadow: 0 8px 10px rgba(33, 33, 33, .2) !important; + } +} + +.text-primary { + color: $primary-color !important; +} + +.text-color { + color: $text-color; +} + +.mb-10 { + margin-bottom: 10px !important; +} + +.mb-20 { + margin-bottom: 20px !important; +} + +.mb-30 { + margin-bottom: 30px !important; +} + +.mb-40 { + margin-bottom: 40px !important; +} + +.mb-50 { + margin-bottom: 50px !important; +} + +.mb-60 { + margin-bottom: 60px !important; +} + +.mb-70 { + margin-bottom: 70px !important; +} + +.mb-80 { + margin-bottom: 80px !important; +} + +.mb-90 { + margin-bottom: 90px !important; +} + +.mb-100 { + margin-bottom: 100px !important; +} + +.zindex-1 { + z-index: 1; +} + +.top-100 { + top: 100px; +} + +.overflow-hidden { + overflow: hidden; +} + +.font-weight-medium { + font-weight: 500 !important; +} + +.border-primary { + border-color: $primary-color !important; +} + +/* form control */ +.form-control { + height: 50px; + border: 1px solid $primary-color; +} + +textarea.form-control { + height: 100px; +} + +.badge-primary { + background: $primary-color; +} + +/* nav-tab */ +.nav-tabs { + margin-bottom: 20px; + .nav-item { + margin-right: 10px; + + .nav-link { + border: 0; + padding: 10px 0; + color: $text-color; + font-weight: 500; + &.active{ + color: $primary-color; + } + } + } +}
\ No newline at end of file diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..f925e77 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,29 @@ +@mixin mobile-xs{ + @media(max-width:400px){ + @content; + } +} +@mixin mobile{ + @media(max-width:575px){ + @content; + } +} +@mixin tablet{ + @media(max-width:767px){ + @content; + } +} +@mixin desktop{ + @media(max-width:991px){ + @content; + } +} +@mixin desktop-lg{ + @media(max-width:1200px){ + @content; + } +} + +@mixin size($size){ + width: $size; height: $size; +}
\ No newline at end of file diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss new file mode 100644 index 0000000..2bf5a37 --- /dev/null +++ b/assets/scss/_typography.scss @@ -0,0 +1,49 @@ +/* typography */ +@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap'); + +body { + line-height: 1.4; + font-family: $primary-font; + -webkit-font-smoothing: antialiased; + font-size: 15px; + color: $text-color; +} + +p, .paragraph { + font-weight: 400; + color: $text-color; + font-size: 15px; + line-height: 1.7; + font-family: $primary-font; +} + +h1,h2,h3,h4,h5,h6 { + color: $text-color-dark; + font-family: $primary-font; + font-weight: 400; + line-height: 1.2; +} + +h1, .h1{ + font-size: 48px; +} + +h2, .h2{ + font-size: 42px; +} + +h3, .h3{ + font-size: 26px; +} + +h4, .h4{ + font-size: 20px; +} + +h5, .h5{ + font-size: 18px; +} + +h6, .h6{ + font-size: 14px; +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..42b5f3b --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,15 @@ +// Color Variables +$primary-color: #5AB51E; +$text-color: #333333; +$text-color-dark: #222222; +$body-color: #fff; +$border-color: #D1D1D1; +$black: #000; +$white: #fff; +$light: rgb(223, 223, 223); + +$primary-gradient: linear-gradient( 27deg, rgb(89,181,30) 0%, rgb(149,210,57) 100%); + +// Font Variables +$primary-font: 'Quicksand', sans-serif; +$icon-font: 'themify';
\ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..a97efdf --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1,24 @@ +/*!------------------------------------------------------------------ +[MAIN STYLESHEET] + +PROJECT: Project Name +VERSION: Versoin Number +-------------------------------------------------------------------*/ + +/*------------------------------------------------------------------ +[TABLE OF CONTENTS] +-------------------------------------------------------------------*/ + +@import 'variables'; + +@import 'mixins'; + +@import 'typography'; + +@import 'buttons'; + +@import 'common'; + +@import 'templates/navigation'; + +@import 'templates/homepage';
\ No newline at end of file diff --git a/assets/scss/templates/_homepage.scss b/assets/scss/templates/_homepage.scss new file mode 100644 index 0000000..e0c3dfb --- /dev/null +++ b/assets/scss/templates/_homepage.scss @@ -0,0 +1,353 @@ +.overlay-image { + position: absolute; + left: 0; + right: 0; + height: 100%; + width: 100%; +} + +.cta-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + + @include tablet { + display: none; + } +} + +.img-border { + position: relative; + display: inline-block; + + &::before { + position: absolute; + content: ""; + height: 100%; + width: 100%; + border: 1px solid $primary-color; + top: 5%; + left: 5%; + border-radius: inherit; + z-index: -1; + } +} + +.content-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +/* testimonial */ +.testimonial-slider { + margin-bottom: 80px; + + .slick-slide { + margin-top: 80px; + } +} + +.client-img { + height: 100px; + width: 100px; + border-radius: 50%; + border: 1px solid $primary-color; + margin: -70px auto 20px; +} + +/* rating */ +.rating { + + &.five { + li { + i { + color: #f9aa1f; + } + } + } + + &.four { + li { + &:not(:last-child) { + i { + color: #f9aa1f; + } + } + } + } + + &.three { + li { + i { + color: #f9aa1f; + } + + &:last-child { + i { + color: $text-color; + } + } + + &:nth-child(4) { + i { + color: $text-color; + } + } + } + } + + &.two { + li { + &:first-child { + i { + color: #f9aa1f; + } + } + + &:nth-child(2) { + i { + color: #f9aa1f; + } + } + } + } + + &.one { + li { + &:first-child { + i { + color: #f9aa1f; + } + } + } + } +} + +/* /rating */ + +.slick-arrow { + position: absolute; + z-index: 1; + border: 0; + transition: all linear .2s; + background: transparent; + bottom: -50px; + + &.prevArrow { + left: calc(50% - 50px); + } + + &.nextArrow { + right: calc(50% - 50px); + } +} + +.quoted { + position: relative; + padding: 0 10px; + + &::before { + position: absolute; + font-family: $icon-font; + content: "\e67f"; + left: -10px; + top: -5px; + } + + &::after { + position: absolute; + font-family: $icon-font; + content: "\e67e"; + right: -10px; + top: -5px; + } +} + +/* google map */ +#map_canvas { + height: 450px; +} + +/* blog */ +.pagination { + justify-content: center; + + .page-item { + .page-link { + display: inline-block; + width: 40px; + height: 40px; + border-radius: 100%; + border: 1px solid $border-color; + text-align: center; + margin-right: 6px; + font-weight: 700; + color: $primary-color; + + &:hover { + background: $primary-color; + color: $white; + } + } + + &:first-child, + &:last-child { + .page-link { + border-radius: 50%; + } + } + + &.active { + .page-link { + background: $primary-color; + color: $white; + border-color: $primary-color; + } + } + } +} + +/* content style */ +.content { + * { + margin-bottom: 20px; + } + + a { + text-decoration: underline; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: 10px; + } + + ol { + padding-left: 20px; + } + + ul { + padding-left: 0; + + li { + position: relative; + padding-left: 20px; + margin-bottom: 10px; + list-style-type: none; + + &::before { + position: absolute; + content: "\e65d"; + font-family: $icon-font; + font-size: 14px; + left: 0; + top: 1px; + color: $primary-color; + transition: .3s ease; + } + } + } + + table { + text-align: left; + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + border: 1px solid #dee2e6; + + th, + td { + padding: .75rem; + vertical-align: top; + border: 1px solid #dee2e6 + } + + thead { + background: darken($color: $light, $amount: 2); + } + + tbody { + background: $light; + + td { + text-align: left !important; + } + } + } + + + blockquote { + border-left: 1px solid $primary-color; + padding: 20px; + + p { + margin-bottom: 0; + color: $text-color; + font-style: italic; + font-size: 22px; + font-weight: 500; + } + } + + pre { + padding: 10px 20px; + background: $light; + } +} + +/* snipcart */ +.snip-layout .snip-layout__main-container { + top: 100px; +} + +.snip-header__title { + color: $white; +} + +/* rating widget */ +.rw-ui-report{ + z-index: 9 !important; +} + +/* product sinngle page */ + +.product-slider { + .slick-list{ + border: 1px solid $primary-color; + margin-bottom: 10px; + border-radius: 5px; + } + .slick-dots { + margin-top: 10px; + padding-left: 0; + display: flex; + + li { + list-style-type: none; + border: 1px solid $primary-color; + margin: 10px; + border-radius: 5px; + padding: 10px; + cursor: pointer; + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + img { + height: auto; + max-width: 100%; + } + } + } +}
\ No newline at end of file diff --git a/assets/scss/templates/_navigation.scss b/assets/scss/templates/_navigation.scss new file mode 100644 index 0000000..b397f1a --- /dev/null +++ b/assets/scss/templates/_navigation.scss @@ -0,0 +1,167 @@ +.navigation { + transition: .3s ease; + background: $white; + z-index: 9999; + @include desktop { + border-bottom: 1px solid $border-color; + .navbar{ + padding: 10px 0; + } + } +} + +.nav-bg { + border-bottom: 1px solid $border-color; + + .navbar { + padding: 10px 0; + } +} + +.navbar { + padding: 25px 0; + transition: .3s ease; + + .dropdown { + &:hover { + .dropdown-menu { + visibility: visible; + opacity: 1; + transform: scaleX(1); + } + } + + &-menu { + box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); + padding: 15px; + border: 0; + top: 50px; + left: -10px; + border-radius: 0; + display: block; + visibility: hidden; + transition: .3s ease; + opacity: 0; + transform: scale(.95); + background: $white; + + @include desktop { + display: none; + opacity: 1; + visibility: visible; + transform: scale(1); + transform-origin: unset; + } + + &.show { + visibility: hidden; + + @include desktop { + visibility: visible; + display: block; + } + } + } + + &-item { + color: $text-color; + transition: .2s ease; + padding: 10px; + + &:hover { + color: $primary-color; + background: transparent; + } + } + } +} + +.nav-item { + margin: 0; + + .nav-link { + text-transform: capitalize; + font-size: 18px; + } +} + +.navbar-light .navbar-nav .nav-link { + color: $text-color; + + &:hover { + color: $primary-color; + } +} + +.navbar-expand-lg .navbar-nav .nav-link { + padding: 20px; +} + + +/* search */ +.search-btn { + border: 0; + background: transparent; + color: $white; +} + +.search-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + z-index: 2; + visibility: hidden; + transition: .2s ease; + opacity: 0; + + &.open { + visibility: visible; + opacity: 1; + } +} + +.search-box { + height: 100%; + width: 100%; + border: 0; + background: $white; + font-size: 20px; + padding: 0; + + &:focus { + box-shadow: none !important; + } +} + +.search-close { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + border: 0; + background: transparent; + page-break-after: 10px; + font-size: 20px; +} + +/* cart */ +.cart { + background: transparent; + border: 0; + position: relative; + + @include desktop { + position: absolute; + top: 23px; + right: 50px; + } + + .badge { + position: absolute; + top: -5px; + border-radius: 50%; + right: -10px; + } +}
\ No newline at end of file |