diff --git a/resources/theme/js/back-top.js b/resources/theme/js/back-top.js new file mode 100644 index 0000000..c04c36f --- /dev/null +++ b/resources/theme/js/back-top.js @@ -0,0 +1,11 @@ +// back to top btn +$('.backtop-btn').click(function(){ + $('html, body').animate({ scrollTop: 0 }, 'slow'); + return false; +}); + +/* pre loader */ +$(window).on('load', function () { + $('#preloader').delay(350).fadeOut('slow'); + $('body').delay(350).css({ 'overflow': 'visible' }); +}) diff --git a/resources/theme/scss/_blog.scss b/resources/theme/scss/_blog.scss new file mode 100644 index 0000000..3c52e59 --- /dev/null +++ b/resources/theme/scss/_blog.scss @@ -0,0 +1,119 @@ +#blog-hero { + .bg-blog-head { + border-radius: $border; + } + + img { + display: block; + width: 100%; + height: auto; + } + + .lead { + text-align: justify; + } +} + +.blog-h-box { + border-radius: $border; +} + +#blog-start { + img { + border-radius: $border; + } +} + +.hashtags { + .tags { + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; + + li { + float: right; + } + } + + .tag { + background: #eee; + border-radius: 3px 0 0 3px; + color: #999; + display: inline-block; + height: 26px; + line-height: 26px; + padding: 0 20px 0 23px; + position: relative; + margin: 0 10px 10px 0; + text-decoration: none; + -webkit-transition: color 0.2s; + + &::before { + background: #fff; + border-radius: 10px; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); + content: ''; + height: 6px; + right: 10px; + position: absolute; + width: 6px; + top: 10px; + } + + &::after { + background: #fff; + border-bottom: 13px solid transparent; + border-right: 10px solid #eee; + border-top: 13px solid transparent; + content: ''; + position: absolute; + left: 0; + top: 0; + } + + &:hover { + background-color: $txt-hover; + color: white; + + &::after { + border-right-color: $txt-hover; + } + } + } +} + + +.blog-card-btn { + align-items: center; + background-color: transparent; + color: $txt-hover; + cursor: pointer; + display: flex; + font-family: Vazirmatn, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 1.5; + text-decoration: none; + text-transform: uppercase; + outline: 0; + border: 0; + padding: 1rem; + + &:before { + background-color: $txt-hover; + content: ""; + display: inline-block; + height: 1px; + margin-left: 10px; + transition: all .42s cubic-bezier(.25, .8, .25, 1); + width: 0; + } + + &:hover { + &:before { + background-color: $txt-hover; + width: 2rem; + } + } +} \ No newline at end of file diff --git a/resources/theme/scss/_blogs.scss b/resources/theme/scss/_blogs.scss new file mode 100644 index 0000000..44c8ffb --- /dev/null +++ b/resources/theme/scss/_blogs.scss @@ -0,0 +1,331 @@ +// #hero-banners + +#hero-banners { + img { + display: block; + width: 100%; + height: auto; + } + + .ban-box { + padding: 1px; + overflow: hidden; + position: relative; + + .ban-title { + position: absolute; + z-index: 50; + color: black; + text-shadow: 2px 2px 2px white; + background-color: #facf9d70; + bottom: 17%; + font-size: 16px; + font-weight: bolder; + } + + h6 { + position: absolute; + bottom: 1px; + right: 10px; + color: dodgerblue; + font-size: 12px; + } + + img { + width: 100%; + height: 100%; + + &:hover { + transition: 666ms; + transform: scale(105%); + } + } + + span { + position: absolute; + top: 1px; + right: 1px; + background-color: $txt-hover; + color: whitesmoke; + font-size: 14px; + padding: 2px 4px 2px 4px; + } + } +} + +// #hero-banners + +// #blogs +#blogs { + .blogs-box { + width: 100%; + + .blogs-img-title { + font-size: 13px; + font-weight: lighter; + } + + img { + width: 100%; + display: block; + height: 95%; + border-radius: $border; + box-shadow: 1px 2px 3px $bg2; + } + } + + .blogs-text { + .blogs-title { + font-size: 18px; + font-weight: bolder; + margin-top: 9px; + } + + .blogs-date { + font-size: 12px; + color: $bg2; + } + + .blogs-paragraph { + text-align: justify; + font-size: 14px; + padding-top: 4px; + } + } +} + +.pagination-pos { + display: flex; + align-items: center; + justify-content: center; +} + +#blog-start { + p { + text-align: justify; + } + + .text { + font-size: 0.8rem; + text-align: left; + width: 100%; + color: black; + font-weight: bold; + margin-bottom: 3px; + } + + .input { + border-radius: 8px; + padding: 7px 16px; + box-shadow: rgba(77, 79, 82, 0.2) 0 8px 24px; + border: 2px solid rgb(184, 180, 180); + font-size: 0.8rem; + outline: none; + width: 100%; + margin-top: 13px; + transition: 0.5s ease; + } + + .input:hover { + box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px; + border-color: rgb(138, 175, 255); + } + + .input:focus { + border: 2px solid rgb(57, 120, 255); + box-shadow: rgba(133, 130, 130, 0.1) 0 4px 12px; + transform: scale(0.99); + } + + .input::placeholder { + font-size: 13px; + font-weight: 600; + } + + .button { + padding: 6px 15px; + text-align: center; + color: rgb(95, 87, 87); + cursor: pointer; + background-color: white; + border-radius: 6px; + border: none; + transition: 0.5s; + width: 50%; + display: block; + margin: 9px auto; + font-size: 13px; + box-shadow: rgba(104, 100, 100, 0.1) 0 4px 6px -1px, rgba(49, 42, 42, 0.06) 0px 2px 4px -1px; + } + + .button:hover { + border-radius: 7px; + background-color: rgb(243, 242, 242); + border-color: rgb(236, 232, 232); + } +} + +#sticky-bar { + .social-media { + * { + &:focus { + outline: none !important; + -webkit-tap-highlight-color: transparent; + } + + &:active { + outline: none !important; + -webkit-tap-highlight-color: transparent; + } + } + + + .wrapper { + display: inline-flex; + list-style: none; + + .icon { + position: relative; + background: #ffffff; + border-radius: 50%; + padding: 15px; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); + + &:hover { + .tooltip { + top: -36px; + opacity: 1; + visibility: visible; + pointer-events: auto; + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); + } + + span { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); + } + } + } + + .tooltip { + position: absolute; + top: 0; + font-size: 14px; + background: #ffffff; + color: #ffffff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + + &::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background: #ffffff; + bottom: -3px; + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + } + + .facebook { + &:hover { + background: #1877F2; + color: #ffffff; + + .tooltip { + background: #1877F2; + color: #ffffff; + + &::before { + background: #1877F2; + color: #ffffff; + } + } + } + } + + .twitter { + &:hover { + background: #1DA1F2; + color: #ffffff; + + .tooltip { + background: #1DA1F2; + color: #ffffff; + + &::before { + background: #1DA1F2; + color: #ffffff; + } + } + } + } + + .instagram { + &:hover { + background: #E4405F; + color: #ffffff; + + .tooltip { + background: #E4405F; + color: #ffffff; + + &::before { + background: #E4405F; + color: #ffffff; + } + } + } + } + + .github { + &:hover { + background: #333333; + color: #ffffff; + + .tooltip { + background: #333333; + color: #ffffff; + + &::before { + background: #333333; + color: #ffffff; + } + } + } + } + + .youtube { + &:hover { + background: #CD201F; + color: #ffffff; + + .tooltip { + background: #CD201F; + color: #ffffff; + + &::before { + background: #CD201F; + color: #ffffff; + } + } + } + } + } + } +} diff --git a/resources/theme/scss/_colors.scss b/resources/theme/scss/_colors.scss new file mode 100644 index 0000000..bf10c7c --- /dev/null +++ b/resources/theme/scss/_colors.scss @@ -0,0 +1,12 @@ +// main colors +$bg1: #ffffff; +$bg2: #f6f6f6; + +// text colors +$txt-title: #707070; +$txt-para: #b7b7b7; +//$txt-hover: #d60644; + +// palette 2 +$txt-hover:#b87947; +$brown-2:#facf9d; \ No newline at end of file diff --git a/resources/theme/scss/_fonts.scss b/resources/theme/scss/_fonts.scss new file mode 100644 index 0000000..f6cfd52 --- /dev/null +++ b/resources/theme/scss/_fonts.scss @@ -0,0 +1,11 @@ +// font sizes +$fs-title: 16px; +$fs-paragraph: 12px; +$box-title: 15px; +$box-price: 20px; + +$fs-title-mob: 13px; +$fs-paragraph-mob: 10px; + +//border radius +$border:30px; \ No newline at end of file diff --git a/resources/theme/scss/_footer.scss b/resources/theme/scss/_footer.scss new file mode 100644 index 0000000..ad55806 --- /dev/null +++ b/resources/theme/scss/_footer.scss @@ -0,0 +1,262 @@ + +.back-top-btn { + + .backtop-btn { + display: block; + margin: auto; + } + + .backtop-btn { + outline: 0; + border: 0; + display: flex; + flex-direction: column; + width: 100%; + max-width: 140px; + height: 50px; + border-radius: 0.5em; + box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35); + overflow: hidden; + transition: 0.6s cubic-bezier(.16, 1, .3, 1); + + div { + transform: translateY(0px); + width: 100%; + transition: 0.6s cubic-bezier(.16, 1, .3, 1); + + span { + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + padding: 0.75em 1.125em; + } + + &:nth-child(1) { + background-color: #1e90ff; + } + + &:nth-child(2) { + background-color: #21dc62; + } + } + + &:hover { + box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35); + + div { + transform: translateY(-50px); + } + } + + p { + font-size: 17px; + font-weight: bold; + color: #ffffff; + } + + &:active { + transform: scale(0.95); + } + } +} + +.top-footer { + background-color: $bg1; + + .top-footer-title { + h4 { + font-size: $fs-title; + color: $txt-title; + } + + p { + font-size: $fs-paragraph; + color: $txt-para; + } + } +} + +.footer { + background-color: $bg1; + + ul { + list-style: none; + + a { + color: $txt-para; + + &:hover { + color: $txt-hover; + + } + } + } + + .container-inp { + display: flex; + justify-content: center; + align-items: center; + height: 35px; + direction: ltr; + } + + .input { + max-width: 190px; + height: 100%; + outline: none; + font-size: 14px; + font-weight: 500; + background-color: $bg2; + caret-color: #f7f7f8; + color: black; + padding: 7px 10px; + border: 2px solid transparent; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + margin-right: 1px; + transition: all .2s ease; + + &:hover { + border: 2px solid rgba(255, 255, 255, 0.16); + } + + &:focus { + border: 2px solid $txt-hover; + background-color: $bg1; + } + } + + .search__btn { + border: none; + cursor: pointer; + background-color: $bg2; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + height: 100%; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + background-color: $txt-hover; + } + } + + .footer-mail { + p { + text-align: center; + color: $txt-para; + font-size: $fs-paragraph; + } + } + .validity{ + p{ + color: $txt-para; + font-size: $box-title; + text-align: justify; + } + img{ + display: block; + margin: auto; + height: auto; + } + } + .social-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + } + + $social-button-size: 64px; + $social-button-icon-size: 0.4; + $social-button-background: #fff; + $social-button-active-color: black; + $social-button-transition-time: 0.3s; + + $social-button-colors: ( + 'mail': #0072c6, + 'facebook': #3b5999, + 'telegram': #0077b5, + 'github': #6e5494, + 'codepen': #212121, + 'whatsapp': #25D366, + 'snapchat': #eec900, + 'twitter': #55acee, + 'instagram': #e4405f, + 'youtube': #c12127, + ); + + .social-button { + position: relative; + display: flex; + justify-content: center; + align-items: center; + outline: none; + width: $social-button-size; + height: $social-button-size; + text-decoration: none; + border-radius: 100%; + background: $social-button-background; + text-align: center; + + &::after { + content: ''; + position: absolute; + top: -1px; + left: 50%; + display: block; + width: 0; + height: 0; + border-radius: 100%; + transition: $social-button-transition-time; + } + + &:focus, + &:hover { + color: $social-button-active-color; + + &::after { + width: calc(100% + 2px); + height: calc(100% + 2px); + margin-left: calc(-50% - 1px); + } + } + + i, + svg { + position: relative; + z-index: 1; + transition: $social-button-transition-time; + } + + i { + font-size: $social-button-size * $social-button-icon-size; + } + + svg { + height: percentage($social-button-icon-size); + width: percentage($social-button-icon-size); + } + + @each $name, $color in $social-button-colors { + &--#{$name} { + color: $color; + + &::after { + background: $color; + } + } + } + } + +} + +.footer-terms{ + p{ + font-size: $fs-paragraph; + color: $txt-para; + } +} diff --git a/resources/theme/scss/_index.scss b/resources/theme/scss/_index.scss new file mode 100644 index 0000000..b92e99c --- /dev/null +++ b/resources/theme/scss/_index.scss @@ -0,0 +1,462 @@ +@import "mega-menu"; + +body { + background-color: $bg2; + + img { + border-radius: $border; + } + + a { + text-decoration: none; + color: $txt-title; + } +} + + +.box-main { + del { + display: block; + text-align: center; + color: #666666; + font-size: 12px; + } + + span { + display: block; + text-align: center; + color: dodgerblue; + } + + background-color: white; + border-radius: $border; + + h4 { + font-size: 14px; + text-align: center; + } +} + +// hero slider +#head-slider { + .carousel-inner { + border-radius: $border; + + } + + img { + width: 100%; + height: auto; + } +} + + +// banners section +.banners { + img { + width: 100%; + height: auto; + } +} + +// services +.head-services { + .serv-box { + padding: 10px; + + h4 { + font-size: $fs-title; + } + + span { + font-size: $fs-paragraph; + } + } +} + +// slider +.slider-title { + h5 { + font-size: $box-price; + + &:before { + content: '|'; + color: $txt-hover; + } + } +} + +.slider { + background-color: $bg1; + padding: 35px 0 35px 0; + border-radius: 30px; + + .main-content { + position: relative; + + .owl-theme { + .owl-dots { + display: none; + } + + .custom-nav { + position: absolute; + top: 20%; + left: 0; + right: 0; + + .owl-prev, .owl-next { + position: absolute; + height: 100px; + color: inherit; + background: none; + border: none; + z-index: 100; + + i { + font-size: 2.5rem; + color: #cecece; + } + } + + .owl-prev { + left: 0; + } + + .owl-next { + right: 0; + } + } + } + } + + a { + text-align: center; + } + + .slider-box { + width: 100%; + border: 1px solid $txt-para; + border-radius: 50px; + position: relative; + + &:hover { + border: 1px solid $txt-title; + box-shadow: 1px 1px 5px #70707020; + } + + img { + width: 110px; + height: 110px; + display: block; + margin: auto; + } + + h5 { + font-size: $fs-title; + padding-top: 15px; + color: black; + } + + del { + font-size: 10px; + font-weight: 200; + padding: 5px; + + &:after { + content: ' تومان'; + } + } + + h6 { + padding: 5px; + + &:after { + content: ' تومان'; + } + } + + .sale-off { + width: 50px; + height: 50px; + position: absolute; + top: 2px; + left: -5px; + } + } +} + +// offer mid banner +.offer-mid-banner { + img { + width: 100%; + height: auto; + transition: 333ms; + + &:hover { + transform: scale(102%); + } + } +} + +.back-top-btn { + + .backtop-btn { + display: block; + margin: auto; + } + + .backtop-btn { + outline: 0; + border: 0; + display: flex; + flex-direction: column; + width: 100%; + max-width: 140px; + height: 50px; + border-radius: 0.5em; + box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35); + overflow: hidden; + transition: 0.6s cubic-bezier(.16, 1, .3, 1); + + div { + transform: translateY(0px); + width: 100%; + transition: 0.6s cubic-bezier(.16, 1, .3, 1); + + span { + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + padding: 0.75em 1.125em; + } + + &:nth-child(1) { + background-color: #1e90ff; + } + + &:nth-child(2) { + background-color: #21dc62; + } + } + + &:hover { + box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35); + + div { + transform: translateY(-50px); + } + } + + p { + font-size: 17px; + font-weight: bold; + color: #ffffff; + } + + &:active { + transform: scale(0.95); + } + } +} + +.top-footer { + background-color: $bg1; + + .top-footer-title { + h4 { + font-size: $fs-title; + color: $txt-title; + } + + p { + font-size: $fs-paragraph; + color: $txt-para; + } + } +} + +.footer { + background-color: $bg1; + + ul { + list-style: none; + + a { + color: $txt-para; + + &:hover { + color: $txt-hover; + + } + } + } + + .container-inp { + display: flex; + justify-content: center; + align-items: center; + height: 35px; + direction: ltr; + } + + .input { + max-width: 190px; + height: 100%; + outline: none; + font-size: 14px; + font-weight: 500; + background-color: $bg2; + caret-color: #f7f7f8; + color: black; + padding: 7px 10px; + border: 2px solid transparent; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + margin-right: 1px; + transition: all .2s ease; + + &:hover { + border: 2px solid rgba(255, 255, 255, 0.16); + } + + &:focus { + border: 2px solid $txt-hover; + background-color: $bg1; + } + } + + .search__btn { + border: none; + cursor: pointer; + background-color: $bg2; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + height: 100%; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + background-color: $txt-hover; + } + } + + .footer-mail { + p { + text-align: center; + color: $txt-para; + font-size: $fs-paragraph; + } + } + .validity{ + p{ + color: $txt-para; + font-size: $box-title; + text-align: justify; + } + img{ + display: block; + margin: auto; + height: auto; + } + } + .social-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + } + + $social-button-size: 64px; + $social-button-icon-size: 0.4; + $social-button-background: #fff; + $social-button-active-color: #fff; + $social-button-transition-time: 0.3s; + + $social-button-colors: ( + 'mail': #0072c6, + 'facebook': #3b5999, + 'linkedin': #0077b5, + 'github': #6e5494, + 'codepen': #212121, + 'steam': #7da10e, + 'snapchat': #eec900, + 'twitter': #55acee, + 'instagram': #e4405f, + 'npmjs': #c12127, + ); + + .social-button { + position: relative; + display: flex; + justify-content: center; + align-items: center; + outline: none; + width: $social-button-size; + height: $social-button-size; + text-decoration: none; + border-radius: 100%; + background: $social-button-background; + text-align: center; + + &::after { + content: ''; + position: absolute; + top: -1px; + left: 50%; + display: block; + width: 0; + height: 0; + border-radius: 100%; + transition: $social-button-transition-time; + } + + &:focus, + &:hover { + color: $social-button-active-color; + + &::after { + width: calc(100% + 2px); + height: calc(100% + 2px); + margin-left: calc(-50% - 1px); + } + } + + i, + svg { + position: relative; + z-index: 1; + transition: $social-button-transition-time; + } + + i { + font-size: $social-button-size * $social-button-icon-size; + } + + svg { + height: percentage($social-button-icon-size); + width: percentage($social-button-icon-size); + } + + @each $name, $color in $social-button-colors { + &--#{$name} { + color: $color; + + &::after { + background: $color; + } + } + } + } + +} + +.footer-terms{ + p{ + font-size: $fs-paragraph; + color: $txt-para; + } +} \ No newline at end of file diff --git a/resources/theme/scss/_links.scss b/resources/theme/scss/_links.scss new file mode 100644 index 0000000..467ef14 --- /dev/null +++ b/resources/theme/scss/_links.scss @@ -0,0 +1,15 @@ +//bootstrap +@import "bootstrap/dist/css/bootstrap.rtl.min.css"; +//fontawesome +@import "@fortawesome/fontawesome-free/css/all.min.css"; +//vazirmatn +@import "vazirmatn/Vazirmatn-font-face.css"; +@import "vazirmatn/Vazirmatn-Variable-font-face.css"; +//owl carousel +@import "owl.carousel/dist/assets/owl.carousel.min.css"; +@import "owl.carousel/dist/assets/owl.theme.default.min.css"; +//xzoom +@import "xzoom/dist/xzoom.min.css"; + +// laravel +@import "../../sass/card"; diff --git a/resources/theme/scss/_mega-menu.scss b/resources/theme/scss/_mega-menu.scss new file mode 100644 index 0000000..8f4c810 --- /dev/null +++ b/resources/theme/scss/_mega-menu.scss @@ -0,0 +1,321 @@ + +.up-nav{ + width: 100%; + height: 85px; + background-color: $bg2; + img{ + width: 110px; + height: 85px; + display: block; + margin: auto; + } +} + + +.blog-card-btn { + align-items: center; + background-color: transparent; + color: $txt-hover; + cursor: pointer; + display: flex; + font-family: Vazirmatn, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 1.5; + text-decoration: none; + text-transform: uppercase; + outline: 0; + border: 0; + padding: 1rem; + + &:before { + background-color: $txt-hover; + content: ""; + display: inline-block; + height: 1px; + margin-left: 10px; + transition: all .42s cubic-bezier(.25, .8, .25, 1); + width: 0; + } + + &:hover { + &:before { + background-color: $txt-hover; + width: 2rem; + } + } +} + +#top { + background: $bg2; +} + +#main-nav { + opacity: .65; + transition: 900ms; + align-items: center; + position: relative; + z-index: 9; + + + [class^='ri'] { + font-size: 20px; + } + + + #nav-menu { + transition: 700ms; + opacity: 0; + pointer-events: none; + position: absolute; + background: #ffffff; + color: black; + box-shadow: 0 0 3px gray; + + right: 0; + left: 0; + top: 100%; + width: 100%; + + ul { + list-style: none; + padding: 0; + position: relative; + margin: 0; + + + li { + text-align: start; + padding: 10px 20px; + color: #666; + border-bottom: 1px solid #eeeeee; + transition: 300ms; + + + .sub-item { + background: #ffffff; + z-index: 9; + transition: 600ms; + transform: scaleX(0); + transform-origin: right; + position: absolute; + top: 0; + right: 100%; + bottom: 0; + border-top: 1px $txt-hover solid; + width: 333%; + box-shadow: -1px 1px 3px gray; + overflow: hidden; + + h3 { + font-size: 17px; + padding: .5em; + border-bottom: 1px $txt-hover solid; + width: 50%; + } + + .grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + + img { + max-height: 90%; + object-fit: cover; + } + + ul { + display: block; + position: static; + + li { + padding: 5px; + border-bottom: 0; + padding-right: 15px; + + .fa { + margin-left: 10px; + color: $txt-hover; + margin-top: 2px; + } + } + } + } + } + + &:hover { + color: black; + background: #eeeeee; + + .sub-item { + transform: scaleX(1); + } + } + + .ri-arrow-drop-left-line { + float: left; + margin-top: -3px; + } + } + } + + } + + &:hover { + opacity: 1; + color: white; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + #nav-menu { + pointer-events: auto; + opacity: 1; + } + } +} + +//service +#service { + .col-lg-3 { + background-color: $bg1; + } +} + +//service + + +// banners +#banners { + .banner-top { + img { + width: 100%; + height: auto; + border-radius: $border; + } + } + + .banner-down { + .daily-offer { + border-radius: $border; + background-color: $bg1; + height: 100%; + user-select: none; + + .title { + h2 { + font-size: 23px; + padding: 14px; + border-bottom: 1px solid #f1f1f1; + position: relative; + + &:after { + content: ''; + background: #4dd0e1; + height: 2px; + width: 20%; + bottom: 0; + right: 0; + position: absolute; + } + } + } + } + } + + .logos { + background-color: $bg1; + border-radius: $border; + + .col-6 { + border: 1px solid $bg2; + transition: 333ms; + + &:hover { + filter: invert(10%); + } + } + } + + .new-offers { + .new-off { + border-radius: $border; + background-color: $bg2; + height: 100%; + + .title { + h2 { + font-size: 23px; + padding: 14px; + border-bottom: 1px solid #f1f1f1; + position: relative; + + &:after { + content: ''; + background: #4dd0e1; + height: 2px; + width: 20%; + bottom: 0; + right: 0; + position: absolute; + } + } + } + } + } +} + +// banners + +// offer slider + +// offer slider + +.daily-offer { + .offer-slider { + direction: ltr; + + .daily-sell { + img { + width: 300px; + height: 300px; + display: block; + margin: auto; + } + } + } +} + +.new-offers{ + .new-slider{ + + .newest-items { + img{ + width: 100px; + height: 100px; + } + .about-titr{ + color: $bg2; + font-weight: 200; + } + .row{ + height: 100%; + + .col-6 { + border: 1px solid gray; + border-radius: 15px; + padding: 7px; + + } + } + } + } +} + +//header +#header { + .nav-logo { + width: 100px; + height: auto; + } +} + +//header diff --git a/resources/theme/scss/_product.scss b/resources/theme/scss/_product.scss new file mode 100644 index 0000000..98e4334 --- /dev/null +++ b/resources/theme/scss/_product.scss @@ -0,0 +1,520 @@ +nav#single { + a { + color: #000; + text-decoration: none; + } + + .name { + color: #9f9f9f; + font-size: .9rem; + } +} + +#product-info { + background-color: $bg2; + + .product { + border-radius: $border $border 0 0; + border: 1px solid #ddd; + background-color: #fff; + box-shadow: 0 5px 15px #ddd; + &:hover{ + border: 1px solid $txt-title; + } + + .name { + p { + display: flex; + justify-content: space-between; + align-items: center; + font-size: .9rem; + } + } + + .rating { + span { + color: #9f9f9f; + font-size: .8rem; + } + + .rate-area { + float: left; + border-style: none; + } + + .rate-area:not(:checked) > input { + position: absolute; + top: -9999px; + clip: rect(0, 0, 0, 0); + } + + .rate-area:not(:checked) > label { + float: right; + width: .9rem; + overflow: hidden; + white-space: nowrap; + cursor: pointer; + font-size: 1.3rem; + color: lightgrey; + } + + .rate-area:not(:checked) > label:before { + content: "★"; + } + + .rate-area > input:checked ~ label { + color: gold; + } + + .rate-area:not(:checked) > label:hover, + .rate-area:not(:checked) > label:hover ~ label { + color: gold; + } + + .rate-area > input:checked + label:hover, + .rate-area > input:checked + label:hover ~ label, + .rate-area > input:checked ~ label:hover, + .rate-area > input:checked ~ label:hover ~ label, + .rate-area > label:hover ~ input:checked ~ label { + color: gold; + } + + } + + .cat-tag { + display: flex; + justify-content: space-between; + font-size: .8rem; + color: #656565; + + a { + text-decoration-style: dotted; + color: #656565; + } + } + + .chose-color { + display: flex; + align-items: center; + + span { + margin: 0 10px; + } + + label { + margin: 0 3px; + opacity: .5; + transition: 150ms; + + &.active { + opacity: 1; + position: relative; + + &:before { + content: "\f00c"; + font-family: "FontAwesome"; + line-height: 25px; + position: absolute; + right: 0; + bottom: 0; + left: 0; + top: 0; + text-align: center; + margin: 0 auto; + font-size: 1.5rem; + color: #fff; + } + } + } + + input[type=radio] { + display: none; + } + + .blue { + width: 25px; + height: 25px; + background-color: #651fff; + border-radius: 50%; + } + + .red { + width: 25px; + height: 25px; + background-color: red; + border-radius: 50%; + } + + .purple { + width: 25px; + height: 25px; + background-color: purple; + border-radius: 50%; + } + } + + .detail { + ul { + list-style: none; + color: #9f9f9f; + + li { + margin-top: 3px; + + span { + color: #9f9f9f; + font-size: .8rem; + display: inline-block; + user-select: none; + + &:before { + content: ''; + width: 4px; + height: 4px; + background-color: #9f9f9f; + display: inline-block; + margin-left: 5px; + border-radius: 50%; + } + } + + color: #616161; + font-size: .9rem; + } + } + } + + .add-to-card { + form { + background-color: #f5f5f5; + border-radius: 8px; + + p { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #ddd; + padding: 10px 0; + font-size: .9rem; + + .price { + color: red; + } + } + + label { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 20px; + } + + // counter + .numberstyle-qty input, + .numberstyle-qty .qty-btn { + position: relative; + display: block; + float: left; + height: 30px; + padding: 0; + margin: 0; + border: 0; + text-align: center; + line-height: 30px; + outline: 0; + box-shadow: initial; + } + + .numberstyle-qty .qty-btn { + width: 30px; + font-size: 18px; + cursor: pointer; + z-index: 2; + user-select: none; + transition: all 250ms ease; + background-color: #fff; + } + + .numberstyle-qty .qty-btn.disabled { + cursor: default; + color: rgba(#000, 0.5); + } + + .numberstyle-qty input { + width: 40px; + border-left: 0; + border-right: 0; + color: #000; + font-size: 1.2rem; + font-weight: 600; + z-index: 1; + } + + .numberstyle-qty input:focus { + outline: 0; + box-shadow: initial; + } + + .numberstyle-qty input[type=number]::-webkit-inner-spin-button, + .numberstyle-qty input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + .numberstyle-qty input[type=number] { + -moz-appearance: textfield; + } + + /* + * More from me link 🔥 + */ + .more { + position: absolute; + bottom: 15px; + right: 15px; + padding: 7px 21px; + border-radius: 8px; + color: #000; + background-color: rgba(0, 0, 0, .2); + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + text-decoration: none; + overflow: hidden; + z-index: 1; + animation: reveal 5000ms cubic-bezier(.87, -.41, .19, 1.44); + + &::before { + display: block; + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + max-width: 20%; + height: 100%; + border-radius: 8px; + background-color: rgba(0, 0, 0, 0); + transition: max-width 0ms ease 250ms, + background-color 250ms ease; + transform: translate(-50%, -50%); + z-index: -1; + } + + &:hover { + &::before { + max-width: 100%; + background-color: rgba(0, 0, 0, 0.6); + transition: all 250ms ease; + } + } + } + + @keyframes reveal { + 0%, 90% { + bottom: -30px; + } + 100% { + bottom: 15px; + } + } + } + } + + .p-quest { + font-size: .9rem; + color: #9f9f9f; + } + + .options { + padding: 0; + margin: 0; + + li { + display: inline-block; + + a { + text-decoration: none; + width: 60px; + height: 60px; + background: #f5f5f5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-align: center; + padding: 4px; + font-size: .7rem; + float: right; + border-radius: 8px; + transition: 0.2s; + color: #737373; + font-weight: 500; + + &:hover { + background-color: #fb6262; + color: #fff; + } + + .fa, .fa-solid { + font-size: 1.2rem; + } + + span { + display: block; + } + } + } + } + + #main-img { + img { + border-radius: 0; + &.xzoom { + + width: 400px; + margin-bottom: 15px; + } + + box-shadow: initial; + } + + .owl-nav { + position: absolute; + top: calc(50% + 30px / 2); + display: flex; + align-items: flex-end; + height: 0; + width: 100%; + justify-content: space-between; + padding: 0; + margin: 0; + + button { + width: 30px; + height: 30px; + font-size: 1.5rem; + background-color: #651fff; + } + } + + width: 400px !important; + } + } + + .product-feature { + border-radius: 0 0 8px 8px; + border: 1px solid #ddd; + border-top: 0; + box-shadow: 0 5px 15px #ddd; + + background-color: #fff; + + ul { + display: flex; + justify-content: space-around; + align-items: center; + text-align: center; + list-style: none; + margin: 0; + padding: 10px 0; + + li { + font-size: .9rem; + color: #9f9f9f; + display: inline-block; + + p { + display: inline-block; + } + + img { + width: 30px; + filter: grayscale(1); + } + } + } + } +} + +.xzoom-source { + box-shadow: initial !important; +} + +.xzoom-preview { + box-shadow: initial !important; +} + + +@media (max-width: 1000px) { + #product-info { + padding: 0 !important; + + .product { + border-radius: 0; + + .options { + padding: 0; + margin: 0; + + li { + display: inline-block; + + a { + width: 40px; + height: 40px; + + .fa, .fa-solid { + font-size: .9rem; + } + + span { + display: block; + + &:last-child { + display: none; + } + } + } + } + } + + #main-img { + width: 300px !important; + margin: 0 auto; + + img { + &.xzoom { + width: 300px; + margin: 0 auto; + } + + box-shadow: initial; + + } + + .owl-nav { + display: none; + } + } + } + + .product-feature { + + ul { + flex-direction: column; + padding: 0; + + li { + font-size: .9rem; + color: #9f9f9f; + background-color: #f5f5f5; + width: 100%; + padding-bottom: 15px; + padding-top: 15px; + margin: 8px 0; + } + } + } + } +} \ No newline at end of file diff --git a/resources/theme/scss/_products.scss b/resources/theme/scss/_products.scss new file mode 100644 index 0000000..04e1be1 --- /dev/null +++ b/resources/theme/scss/_products.scss @@ -0,0 +1,388 @@ +.breadcrumb-bg { + background-color: $bg2; + padding: 10px; + + .breadcrumb { + --bs-breadcrumb-margin-bottom: 0rem; + } +} + +#product-cat-show { + background-color: $bg1; + + .cat-box { + + .col { + border: 1px solid $bg2; + margin: 8px; + padding: 8px; + transition: 666ms; + border-radius: 50%; + + &:hover { + background-color: $bg2; + transform: rotate(2deg); + border: 1px solid $txt-title; + } + + h6 { + padding-top: 5px; + } + } + + img { + width: 60px; + height: 60px; + } + } +} + +#products { + background-color: $bg1; + + //button + .button { + display: block; + margin: auto; + --width: 160px; + --height: 35px; + --tooltip-height: 35px; + --tooltip-width: 90px; + --gap-between-tooltip-to-button: 18px; + --tooltip-color: #fff; + width: var(--width); + height: var(--height); + background: $txt-hover; + position: relative; + text-align: center; + border-radius: 0.45em; + font-family: Vazirmatn, serif; + transition: background 0.3s; + cursor: pointer; + //&::before { + // position: absolute; + // content: attr(data-tooltip); + // width: var(--tooltip-width); + // height: var(--tooltip-height); + // background-color: #555; + // font-size: 0.9rem; + // color: #fff; + // border-radius: .25em; + // line-height: var(--tooltip-height); + // bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px); + // left: calc(50% - var(--tooltip-width) / 2); + // opacity: 0; + // visibility: hidden; + // transition: all 0.5s; + //} + //&::after { + // position: absolute; + // content: ''; + // width: 0; + // height: 0; + // border: 10px solid transparent; + // border-top-color: #555; + // left: calc(50% - 10px); + // bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px); + // opacity: 0; + // visibility: hidden; + // transition: all 0.5s; + //} + &:hover { + background: #222; + + .text { + top: -100%; + } + + .icon { + top: 0; + } + + &:before { + opacity: 1; + visibility: visible; + bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); + } + + &:after { + opacity: 1; + visibility: visible; + bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); + } + } + } + + .text { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + left: 0; + color: #fff; + top: 0; + transition: top 0.5s; + } + + .button-wrapper { + overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + left: 0; + color: #fff; + } + + .icon { + overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + left: 0; + color: #fff; + transition: top 0.5s; + top: 100%; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 24px; + height: 24px; + } + } + + //button finish + + .bg-tertiary { + background-color: $bg2; + border-radius: $border; + } + + //.pro-box{ + //.box{ + // position: relative; + // margin:30px; + // background-color: $box-bg; + // padding:15px; + // border: 0.2px solid $body-bg2; + // border-radius: $border-box; + // box-shadow: 1px 1px 3px $body-bg2; + // transition: 222ms; + // height: 450px; + // &:hover{ + // box-shadow: 2px 2px 3px $body-bg2; + // } + // .pro-img{ + // max-width: 180px; + // height: auto; + // display: block; + // margin: auto; + // } + // h4{ + // font-weight: 200; + // color: black; + // } + // h6{ + // margin-top: 15px; + // color: black; + // } + // p{ + // font-weight: 100; + // font-size: 14px; + // } + // .offer{ + // width: 55px; + // height: 55px; + // position: absolute; + // top: 0; + // right: 0; + // span{ + // color: #ff5b00; + // } + // } + // .add-to{ + // font-size: 22px; + // background-color: $body-bg; + // padding: 15px; + // border-radius: 50%; + // transition: 666ms; + // &:hover{ + // background-color: $primary; + // color: white; + // transform: rotate(7deg); + // } + // } + // .price{ + // h4{ + // + // &:after{ + // content: ' تومان'; + // } + // } + // h6{ + // color: #666666; + // &:after{ + // content: ' تومان'; + // } + // } + // } + //} + .product-cards { + text-align: center; + + .card { + border-radius: 40px; + + &:hover { + border: 1px solid $txt-title; + + .card-footer { + border-top: 1px solid $txt-title; + } + } + } + + .card-title { + font-weight: 200; + color: black; + } + + .card-brand { + margin-top: 15px; + color: black; + } + + .card-text { + font-weight: 100; + font-size: 14px; + } + + .card-img { + display: block; + margin: auto; + width: 50%; + height: auto; + } + } + + .card-footer { + padding: 15px; + + .cta { + border: none; + background: none; + + span { + padding-bottom: 7px; + font-size: 14px; + padding-left: 15px; + text-transform: uppercase; + } + + svg { + transform: translateX(-8px); + transition: all 0.3s ease; + } + + &:hover { + svg { + transform: translateX(0); + } + + .hover-underline-animation { + &:after { + transform: scaleX(1); + transform-origin: bottom left; + } + } + } + + &:active { + svg { + transform: scale(0.9); + } + } + } + + .hover-underline-animation { + position: relative; + color: black; + padding-bottom: 20px; + + &:after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + right: 0; + background-color: #000000; + transform-origin: bottom left; + transition: transform 0.25s ease-out; + } + } + + } + + .offer { + width: 55px; + height: 55px; + position: absolute; + top: 0; + right: 0; + + span { + color: #ff5b00; + } + } + + .price { + h4 { + font-size: 18px; + + &:after { + content: ' تومان'; + } + } + + del { + color: #666666; + font-weight: lighter; + font-size: 15px; + + &:after { + content: ' تومان'; + } + } + } + + .pro-paragraph { + border: 1px solid $bg2; + padding: 50px; + margin: 20px; + background: $bg2; + border: $border; + + h5 { + color: black; + font-size: 17px; + } + + p { + text-align: justify; + } + } +} + +.pagination-pos { + display: flex; + align-items: center; + justify-content: center; +} + + diff --git a/resources/theme/scss/_responsive.scss b/resources/theme/scss/_responsive.scss new file mode 100644 index 0000000..32d7c75 --- /dev/null +++ b/resources/theme/scss/_responsive.scss @@ -0,0 +1,37 @@ +// 576 - 768 - 1024 Responsive + +// Mobile 576px +@media screen and (max-width: 576px) { + +} + +// Tablet 768 +@media screen and (max-width: 768px) { + +} + +// PC 1024 +@media screen and (max-width: 1024px) { + .head-services{ + .serv-box{ + padding: 10px; + h4{ + font-size: $fs-title-mob ; + } + span{ + font-size: $fs-paragraph-mob; + } + } + } +} + + + + + + + + + + + diff --git a/resources/views/website/component/footer.blade.php b/resources/views/website/component/footer.blade.php index 02b5ea1..218dae8 100644 --- a/resources/views/website/component/footer.blade.php +++ b/resources/views/website/component/footer.blade.php @@ -1,91 +1,189 @@ - - + + + + +
+

+ {{\App\Helpers\getSetting('copyright')}} + © {{date('Y')}} +

+
+ + @yield('js-content') diff --git a/resources/views/website/component/header.blade.php b/resources/views/website/component/header.blade.php index 3f5fee6..af5b875 100644 --- a/resources/views/website/component/header.blade.php +++ b/resources/views/website/component/header.blade.php @@ -19,125 +19,108 @@ - -@if(trim(\App\Helpers\getSetting('soc_wp')) != '') - - + + + + + +
+ -@include('website.component.navbar')