diff --git a/src/images/VR-control-icon.png b/src/images/VR-control-icon.png new file mode 100644 index 00000000..6b9cc897 Binary files /dev/null and b/src/images/VR-control-icon.png differ diff --git a/src/images/back-icon.svg b/src/images/back-icon.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/back-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/button-play-video.svg b/src/images/button-play-video.svg new file mode 100644 index 00000000..7758430d --- /dev/null +++ b/src/images/button-play-video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/circle.png b/src/images/circle.png new file mode 100644 index 00000000..1fb05a46 Binary files /dev/null and b/src/images/circle.png differ diff --git a/src/images/close-icon-hover.svg b/src/images/close-icon-hover.svg new file mode 100644 index 00000000..b5e21280 --- /dev/null +++ b/src/images/close-icon-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/close-icon.svg b/src/images/close-icon.svg new file mode 100644 index 00000000..596131ca --- /dev/null +++ b/src/images/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/compatibility-icon.png b/src/images/compatibility-icon.png new file mode 100644 index 00000000..279c0173 Binary files /dev/null and b/src/images/compatibility-icon.png differ diff --git a/src/images/dots.png b/src/images/dots.png new file mode 100644 index 00000000..698afd75 Binary files /dev/null and b/src/images/dots.png differ diff --git a/src/images/dropdown-hover-icon.svg b/src/images/dropdown-hover-icon.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/dropdown-hover-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/dropdown-icon.svg b/src/images/dropdown-icon.svg new file mode 100644 index 00000000..a750c32e --- /dev/null +++ b/src/images/dropdown-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/education-icon.svg b/src/images/education-icon.svg new file mode 100644 index 00000000..890e94ae --- /dev/null +++ b/src/images/education-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/facebook-icon.svg b/src/images/facebook-icon.svg new file mode 100644 index 00000000..94093dc8 --- /dev/null +++ b/src/images/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 00000000..a4259452 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/fitness-icon.svg b/src/images/fitness-icon.svg new file mode 100644 index 00000000..6c42bb40 --- /dev/null +++ b/src/images/fitness-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/half-ellipse.svg b/src/images/half-ellipse.svg new file mode 100644 index 00000000..86595c33 --- /dev/null +++ b/src/images/half-ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header-bg-tablet.png b/src/images/header-bg-tablet.png new file mode 100644 index 00000000..1d8f89ed Binary files /dev/null and b/src/images/header-bg-tablet.png differ diff --git a/src/images/header-photo.png b/src/images/header-photo.png new file mode 100644 index 00000000..180d9242 Binary files /dev/null and b/src/images/header-photo.png differ diff --git a/src/images/katVR-logo.svg b/src/images/katVR-logo.svg new file mode 100644 index 00000000..6839cf4f --- /dev/null +++ b/src/images/katVR-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/menu-icon.svg b/src/images/menu-icon.svg new file mode 100644 index 00000000..12fad17f --- /dev/null +++ b/src/images/menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/other-socials-icon.svg b/src/images/other-socials-icon.svg new file mode 100644 index 00000000..1edf2f77 --- /dev/null +++ b/src/images/other-socials-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/play-video-icon.svg b/src/images/play-video-icon.svg new file mode 100644 index 00000000..3aa9497f --- /dev/null +++ b/src/images/play-video-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/product-swiper-photo1.png b/src/images/product-swiper-photo1.png new file mode 100644 index 00000000..e36400d6 Binary files /dev/null and b/src/images/product-swiper-photo1.png differ diff --git a/src/images/quantity-dropdown.svg b/src/images/quantity-dropdown.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/quantity-dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/real-estate-icon.svg b/src/images/real-estate-icon.svg new file mode 100644 index 00000000..eb0b0728 --- /dev/null +++ b/src/images/real-estate-icon.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/sensors-icon.png b/src/images/sensors-icon.png new file mode 100644 index 00000000..333f2daa Binary files /dev/null and b/src/images/sensors-icon.png differ diff --git a/src/images/socials-icon.svg b/src/images/socials-icon.svg new file mode 100644 index 00000000..3ed3402f --- /dev/null +++ b/src/images/socials-icon.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/swiper-2photo.png b/src/images/swiper-2photo.png new file mode 100644 index 00000000..2e5e0b02 Binary files /dev/null and b/src/images/swiper-2photo.png differ diff --git a/src/images/swiper-3photo.webp b/src/images/swiper-3photo.webp new file mode 100644 index 00000000..ca2cddcc Binary files /dev/null and b/src/images/swiper-3photo.webp differ diff --git a/src/images/tech-specs-batteries-line.png b/src/images/tech-specs-batteries-line.png new file mode 100644 index 00000000..8e93f722 Binary files /dev/null and b/src/images/tech-specs-batteries-line.png differ diff --git a/src/images/tech-specs-close-icon.svg b/src/images/tech-specs-close-icon.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/src/images/tech-specs-close-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs-connection-line.png b/src/images/tech-specs-connection-line.png new file mode 100644 index 00000000..efe60383 Binary files /dev/null and b/src/images/tech-specs-connection-line.png differ diff --git a/src/images/tech-specs-info-icon.svg b/src/images/tech-specs-info-icon.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/src/images/tech-specs-info-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech-specs-photo.png b/src/images/tech-specs-photo.png new file mode 100644 index 00000000..fa1aa0a6 Binary files /dev/null and b/src/images/tech-specs-photo.png differ diff --git a/src/images/techspecs-sensor-line.png b/src/images/techspecs-sensor-line.png new file mode 100644 index 00000000..633949c1 Binary files /dev/null and b/src/images/techspecs-sensor-line.png differ diff --git a/src/images/triagle.svg b/src/images/triagle.svg new file mode 100644 index 00000000..9a2ff4ef --- /dev/null +++ b/src/images/triagle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/twitter-icon.svg b/src/images/twitter-icon.svg new file mode 100644 index 00000000..9d7d50b6 --- /dev/null +++ b/src/images/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/up-arrow-hover.svg b/src/images/up-arrow-hover.svg new file mode 100644 index 00000000..38bdbf70 --- /dev/null +++ b/src/images/up-arrow-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/up-arrow.svg b/src/images/up-arrow.svg new file mode 100644 index 00000000..b05a6f2c --- /dev/null +++ b/src/images/up-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/visa-icon.svg b/src/images/visa-icon.svg new file mode 100644 index 00000000..66975d2e --- /dev/null +++ b/src/images/visa-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/youtube-icon.svg b/src/images/youtube-icon.svg new file mode 100644 index 00000000..fdcb8d04 --- /dev/null +++ b/src/images/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 619b8c52..e54998b6 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); font-weight: normal; font-style: normal; + src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe..00000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/about-product.scss b/src/styles/about-product.scss new file mode 100644 index 00000000..34e9528b --- /dev/null +++ b/src/styles/about-product.scss @@ -0,0 +1,67 @@ +.about-product { + &__content { + position: relative; + + @include page-grid; + @include padding-block; + } + + &__title { + grid-column: 1/-1; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 4/-1; + margin-bottom: 30px; + } + + @include on-desktop { + grid-column: 9/-1; + } + } + + &__description { + grid-column: 1/-1; + margin-top: 20px; + margin-bottom: 35px; + + @include on-tablet { + grid-column: 4/-1; + margin-top: 0; + margin-bottom: 21px; + } + + @include on-desktop { + grid-column: 9/-1; + } + } + + &__swiper { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/4; + grid-row: 1/4; + } + + @include on-desktop { + grid-column: 3/8; + } + } + + &__play-video { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/-1; + } + + @include on-desktop { + grid-column: 9/-1; + } + } + + &__swiper-container { + position: relative; + } +} diff --git a/src/styles/about-us.scss b/src/styles/about-us.scss new file mode 100644 index 00000000..22076c8f --- /dev/null +++ b/src/styles/about-us.scss @@ -0,0 +1,103 @@ +.about-us { + &__content { + padding-top: 30px; + padding-bottom: 50px; + + @include page-grid; + + @include on-tablet { + padding-top: 14px; + } + + @include on-desktop { + padding-top: 83px; + padding-bottom: 98px; + } + } + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/3; + } + + @include on-desktop { + grid-column: 1/6; + } + } + + &__description { + grid-column: 1/-1; + margin-top: 22px; + + @include on-tablet { + grid-column: 1/5; + margin-top: 32px; + } + + @include on-desktop { + grid-column: 1/6; + } + } + + &__prints { + display: none; + + @include on-tablet { + display: flex; + grid-column: 5/-1; + grid-row: 1/4; + gap: 21px; + } + + @include on-desktop { + grid-column: 7/-1; + gap: 17px; + } + } + + &__print { + height: 246px; + + writing-mode: vertical-lr; + font-size: 48px; + font-weight: 900; + line-height: 130%; + color: $main-dark; + text-shadow: + -1px -1px 0 $main-turquoise, + 1px -1px 0 $main-turquoise, + -1px 1px 0 $main-turquoise, + 1px 1px 0 $main-turquoise; + text-transform: uppercase; + + &--opacity50 { + writing-mode: sideways-lr; + opacity: 0.4; + } + + &--opacity20 { + opacity: 0.2; + } + + &--opacity5 { + display: none; + + @include on-desktop { + display: block; + writing-mode: sideways-lr; + opacity: 0.1; + } + } + + &--opacity1 { + display: none; + + @include on-desktop { + display: block; + opacity: 0.05; + } + } + } +} diff --git a/src/styles/button.scss b/src/styles/button.scss new file mode 100644 index 00000000..f8dd38f9 --- /dev/null +++ b/src/styles/button.scss @@ -0,0 +1,118 @@ +.button { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 280px; + height: 40px; + border: none; + border-radius: 4px; + + font-size: 14px; + font-weight: 500; + line-height: 130%; + color: $main-white; + text-decoration: none; + + background-color: $main-turquoise; + + @include hover(scale, 1.1); + + @include on-tablet { + width: 458px; + height: 48px; + } + + &:hover { + color: $main-turquoise; + background-color: $main-white; + } + + &:disabled { + transform: none; + color: $dark-grey-text; + background-color: $disabled-button; + } + + &--fixed { + position: fixed; + right: 0; + bottom: 3px; + left: 50%; + transform: translate(-50%); + + @include on-desktop { + position: static; + transform: none; + width: 200px; + height: 48px; + } + } + + &--footer { + align-self: center; + margin-top: 6px; + + @include on-tablet { + align-self: flex-start; + width: 200px; + margin-top: 24px; + } + + @include on-desktop { + margin-top: 66px; + } + } + + &--why-kat-loco { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1/-1; + justify-self: center; + width: 200px; + } + } + + &--buy-now { + grid-column: 1/-1; + justify-self: center; + margin-top: 10px; + + @include on-tablet { + margin-top: 18px; + } + + @include on-desktop { + justify-self: left; + width: 199px; + margin-top: 28px; + } + } + + &--pay { + @include on-tablet { + margin-top: 64px; + } + + @include on-desktop { + margin-top: 50px; + } + } + + &--complete { + @include on-desktop { + width: 218px; + } + } +} + +.button-link { + &--buy-now { + width: 280px; + height: 40px; + } +} diff --git a/src/styles/buy-now.scss b/src/styles/buy-now.scss new file mode 100644 index 00000000..d29b1be2 --- /dev/null +++ b/src/styles/buy-now.scss @@ -0,0 +1,51 @@ +.buy-now { + max-width: 1060px; + margin-inline: auto; + + @include on-desktop { + display: flex; + gap: 191px; + align-items: center; + padding: 64px 110px 102px; + } + + &__top-bar { + margin-bottom: 13px; + + @include padding-inline; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + padding: 0; + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: stretch; + + @include on-desktop { + gap: 192px; + } + } + + &__menu-link { + width: 100%; + padding-bottom: 17px; + + font-size: 12px; + line-height: 130%; + color: $dark-grey-text; + text-align: center; + text-decoration: none; + + @include on-desktop { + width: 100px; + padding-bottom: 10px; + } + } +} diff --git a/src/styles/complete.scss b/src/styles/complete.scss new file mode 100644 index 00000000..eb4a06bc --- /dev/null +++ b/src/styles/complete.scss @@ -0,0 +1,52 @@ +.complete { + height: 100%; + background-image: $linear-gradient; + + &__content { + @include page-grid; + + padding-top: 90px; + + @include on-tablet { + padding-top: 180px; + } + + @include on-desktop { + padding-top: 38px; + } + } + + &__title { + grid-column: 1/-1; + margin-bottom: 16px; + text-align: center; + + @include on-tablet { + margin-bottom: 20px; + } + + @include on-desktop { + margin-top: 36px; + } + } + + &__description { + grid-column: 1/-1; + + margin-bottom: 30px; + + line-height: 130%; + color: $main-white; + text-align: center; + + @include on-tablet { + margin-bottom: 50px; + font-size: 18px; + } + } + + &__button { + grid-column: 1/-1; + justify-self: center; + } +} diff --git a/src/styles/contacts.scss b/src/styles/contacts.scss new file mode 100644 index 00000000..58b6d1ec --- /dev/null +++ b/src/styles/contacts.scss @@ -0,0 +1,35 @@ +.contacts { + &__list { + display: flex; + flex-direction: column; + gap: 11px; + + padding: 0; + + list-style: none; + + @include on-tablet { + gap: 25px; + } + + &--footer { + @include on-tablet { + gap: 11px; + } + } + } + + &__link { + line-height: 100%; + color: $grey-text; + text-decoration: none; + + &--footer { + font-size: 13px; + } + + &:hover { + color: $main-turquoise; + } + } +} diff --git a/src/styles/container.scss b/src/styles/container.scss new file mode 100644 index 00000000..5bcad1a9 --- /dev/null +++ b/src/styles/container.scss @@ -0,0 +1,12 @@ +.container { + @include padding-inline; + + max-width: 1060px; + margin-inline: auto; + + &--aside { + @include on-desktop { + padding-inline: 90px; + } + } +} diff --git a/src/styles/faq.scss b/src/styles/faq.scss new file mode 100644 index 00000000..a25053ac --- /dev/null +++ b/src/styles/faq.scss @@ -0,0 +1,60 @@ +.faq { + &__blocks { + display: flex; + flex-direction: column; + gap: 13px; + + margin-top: 30px; + margin-bottom: 13px; + + @include on-tablet { + gap: 18px; + margin-bottom: 50px; + } + + @include on-desktop { + gap: 13px; + margin-block: 50px; + } + } + + &__block { + box-sizing: border-box; + padding: 18px 12px; + border: 1px solid $main-turquoise; + border-radius: 4px; + + @include on-tablet { + padding: 15px 30px; + } + + @include on-desktop { + padding: 18px 29px; + } + } + + &__question { + cursor: pointer; + color: $main-turquoise; + list-style: none; + } + + &__answer { + margin-top: 18px; + margin-bottom: 40px; + color: $grey-text; + + @include on-tablet { + margin-bottom: 15px; + } + + @include on-desktop { + margin-bottom: 20px; + } + } + + &__date { + font-size: 12px; + color: $dark-grey-text; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 00000000..48a1d1e9 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,143 @@ +.footer { + background-color: $main-dark; + + &__content { + @include page-grid; + + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-top: 100px; + padding-bottom: 39px; + } + } + + &__title { + grid-column: 1/-1; + grid-row: 1/2; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/5; + } + } + + &__form { + position: relative; + grid-column: 1/-1; + margin-top: 32px; + + @include on-tablet { + grid-column: 4/-1; + grid-row: 1/6; + margin-top: 0; + margin-bottom: 131px; + } + + @include on-desktop { + grid-column: 7/-1; + margin-bottom: 100px; + } + } + + &__reply { + grid-column: 1/-1; + margin-top: 30px; + margin-bottom: 95px; + font-size: 14px; + + @include on-tablet { + grid-column: 1/4; + margin-top: 50px; + margin-bottom: 76px; + } + + @include on-desktop { + grid-column: 1/5; + margin-top: 26px; + } + } + + &__logo { + grid-column: 1/2; + align-self: center; + margin-bottom: 15px; + + @include on-tablet { + grid-column: span 1; + grid-row: 6/7; + margin-bottom: 0; + } + } + + &__nav { + grid-column: 1/2; + + @include on-tablet { + grid-column: 2/-2; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 12px; + justify-content: center; + + padding: 0; + + @include on-tablet { + flex-direction: row; + gap: 43px; + } + } + + &__item { + list-style: none; + + @include hover(scale, 1.1); + } + + &__link { + font-size: 13px; + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } + + &__contacts { + grid-column: 2/3; + grid-row: 5/6; + + @include on-tablet { + grid-column: 1/4; + grid-row: 3/4; + } + } + + &__socials { + display: flex; + grid-column: 2/3; + grid-row: 5/6; + gap: 23px; + align-items: center; + align-self: flex-end; + + @include on-tablet { + grid-column: -2/-1; + grid-row: 6/7; + gap: 18px; + align-self: center; + } + } +} diff --git a/src/styles/form.scss b/src/styles/form.scss new file mode 100644 index 00000000..fd1db33a --- /dev/null +++ b/src/styles/form.scss @@ -0,0 +1,209 @@ +.form { + display: flex; + flex-direction: column; + gap: 24px; + + &--buy-now { + display: grid; + grid-column: 1/-1; + gap: 30px 19px; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + row-gap: 40px; + } + + @include on-desktop { + grid-column: 7/-1; + grid-row: 1/3; + } + } + + &--pay { + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 7/12; + grid-row: 1/3; + } + } + + &__element { + display: flex; + grid-column: 1/-1; + flex-direction: column; + gap: 4px; + + @include on-tablet { + grid-column: span 1; + } + + &--select { + position: relative; + gap: 13px; + + &::after { + content: ' '; + + position: absolute; + z-index: 2; + top: 70%; + right: 10px; + transform: translateY(-50%); + + display: block; + + width: 9px; + height: 6px; + + background-image: url(/src/images/quantity-dropdown.svg); + background-repeat: no-repeat; + background-size: cover; + } + } + + &--card { + gap: 17px; + + @include on-tablet { + grid-column: 1/-1; + } + } + + &--exp-date { + grid-column: span 1; + } + + &:has(input:focus) label, + &:has(input:hover) label, + &:has(input:active) label { + color: $main-turquoise; + } + } + + &__label { + font-size: 14px; + line-height: 130%; + color: $grey-text; + } + + &__input { + all: unset; + + padding-bottom: 6px; + border-bottom: 1px solid $dark-grey-text; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $main-white; + + &:active, + &:focus, + &:hover { + border-color: $main-turquoise; + } + + &:invalid { + color: $form-invalid; + } + + &--card { + width: 60px; + padding-bottom: 9px; + + font-size: 18px; + line-height: 130%; + text-align: center; + letter-spacing: 3.6px; + + @include on-tablet { + grid-column: 1/-1; + width: 70px; + font-size: 20px; + } + + &::placeholder { + font-size: 18px; + line-height: 130%; + color: $dark-grey-text; + letter-spacing: 3.6px; + } + + &:active, + &:focus, + &:hover { + border-color: $main-turquoise; + } + } + + &--card-name { + grid-column: 1/-1; + } + + &--expiration-date { + width: 80px; + } + + &--cvv { + width: 45px; + } + + &--message { + resize: none; + } + } + + &__card-cvv { + grid-column: span 1; + } + + &__select { + display: block; + + padding-left: 24px; + padding-block: 13px; + border: none; + + font-size: 16px; + font-weight: 400; + line-height: 130%; + color: $main-white; + + appearance: none; + background-color: $main-purple; + outline: none; + } + + &__quantity { + box-sizing: border-box; + width: 90px; + height: 41px; + padding: 0; + border-bottom: 0; + + font-size: 20px; + text-align: center; + } + + &__card-number { + display: flex; + gap: 19px; + + @include on-tablet { + gap: 32px; + } + + @include on-desktop { + gap: 20px; + } + } + + &__card-container { + grid-column: 1/-1; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 00000000..f0dfeb82 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,153 @@ +.header { + background-image: $linear-gradient; + + &__content { + @include page-grid; + + @include on-tablet { + position: relative; + } + } + + &__top-bar { + z-index: 2; + margin-bottom: 172px; + + @include on-tablet { + margin-bottom: 25px; + } + + @include on-desktop { + margin-bottom: 54px; + } + } + + &__photo { + position: absolute; + z-index: 0; + top: 44px; + left: 50%; + transform: translate(-50%); + + width: 320px; + height: 172px; + + background-image: url(/src/images/header-photo.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + top: 0; + right: 0; + left: auto; + transform: none; + + width: 486px; + height: 439px; + + background-image: url(/src/images/header-bg-tablet.png); + background-size: contain; + } + + @include on-desktop { + display: none; + } + } + + &__title { + grid-column: 1/-1; + margin-bottom: 17px; + font-size: 26px; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/8; + margin-bottom: 19px; + font-size: 46px; + } + } + + &__description { + grid-column: 1/-1; + margin-bottom: 8px; + font-weight: 500; + + @include on-tablet { + grid-column: 1/4; + margin-bottom: 10px; + } + + @include on-desktop { + grid-column: 2/6; + margin-bottom: 20px; + } + } + + &__price { + grid-column: 1/-1; + + margin-bottom: 16px; + + font-size: 18px; + font-weight: 500; + line-height: 100%; + color: $main-white; + text-align: center; + + @include on-tablet { + grid-column: 1/3; + margin-bottom: 24px; + text-align: left; + } + + @include on-desktop { + grid-column: 2/3; + margin-bottom: 20px; + } + } + + &__play-video { + grid-column: 1/-1; + margin-bottom: 46px; + + @include on-tablet { + margin-bottom: 61px; + } + + @include on-desktop { + grid-column: 2/5; + margin-bottom: 0; + } + } + + &__bottom { + z-index: 2; + display: none; + + @include on-desktop { + display: flex; + grid-column: 1/7; + gap: 404px; + padding-block: 84px; + } + } + + &__bottom-left { + display: flex; + gap: 39px; + align-items: center; + } + + &__bottom-link { + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } +} diff --git a/src/styles/help.scss b/src/styles/help.scss new file mode 100644 index 00000000..b5ee43cb --- /dev/null +++ b/src/styles/help.scss @@ -0,0 +1,80 @@ +.help { + color: $main-white; + background-color: $main-purple; + + &__content { + @include page-grid; + + @include on-tablet { + height: auto; + padding-bottom: 129px; + } + + @include on-desktop { + padding-bottom: 74px; + } + } + + &__title { + grid-column: 1/-1; + } + + &__description { + grid-column: 1/-1; + padding-block: 30px; + color: $grey-text; + + @include on-tablet { + padding-bottom: 20px; + } + + @include on-desktop { + padding-top: 50px; + } + } + + &__contacts { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/-1; + } + + @include on-desktop { + grid-column: 5/-1; + } + } + + &__navigation { + grid-column: 1/-1; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1/4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1/5; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + padding: 0; + + list-style: none; + + @include on-tablet { + gap: 25px; + } + } + + &__link { + color: $main-turquoise; + text-decoration: none; + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 00000000..e0b29b13 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,250 @@ +.icon { + display: block; + + width: 20px; + height: 9px; + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include hover(scale, 1.2); + + @include on-tablet { + width: 30px; + height: 13px; + } + + &--logo { + width: 58px; + height: 12px; + background-image: url(/src/images/katVR-logo.svg); + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-desktop { + width: 77px; + height: 16px; + } + } + + &--menu { + background-image: url(/src/images/menu-icon.svg); + + @include on-tablet { + width: 30px; + height: 13px; + } + + @include on-desktop { + display: none; + } + } + + &--close { + width: 17px; + height: 17px; + background-image: url(/src/images/close-icon.svg); + + &:hover { + background-image: url(/src/images/close-icon-hover.svg); + } + } + + &--close-place-order { + @include on-desktop { + display: none; + } + } + + &--circle { + position: relative; + width: 53px; + height: 53px; + background-image: url(/src/images/circle.png); + + &::after { + content: ''; + + position: absolute; + top: 14px; + left: 17px; + + display: block; + + width: 20px; + height: 23px; + + background-image: url(/src/images/triagle.svg); + background-repeat: no-repeat; + background-size: cover; + } + } + + &--dropdown { + width: 9px; + height: 6px; + background-image: url(/src/images/dropdown-icon.svg); + + &:hover { + background-image: url(/src/images/dropdown-hover-icon.svg); + } + } + + &--back { + width: 9px; + height: 17px; + background-image: url(/src/images/back-icon.svg); + } + + &--education { + width: 98px; + height: 81px; + background-image: url(/src/images/education-icon.svg); + } + + &--real-estate { + width: 84px; + height: 84px; + background-image: url(/src/images/real-estate-icon.svg); + } + + &--fitness { + width: 110px; + height: 81px; + background-image: url(/src/images/fitness-icon.svg); + } + + &--socials { + width: 83px; + height: 83px; + background-image: url(/src/images/socials-icon.svg); + } + + &--discord { + width: 18px; + height: 18px; + background-image: url(/src/images/other-socials-icon.svg); + } + + &--twitter { + width: 19px; + height: 14px; + background-image: url(/src/images/twitter-icon.svg); + } + + &--facebook { + width: 8px; + height: 16px; + background-image: url(/src/images/facebook-icon.svg); + } + + &--youtube { + width: 18px; + height: 14px; + background-image: url(/src/images/youtube-icon.svg); + } + + &--arrow-up { + position: absolute; + right: 0; + bottom: 0; + + display: none; + + width: 48px; + height: 48px; + + background-image: url(/src/images/up-arrow.svg); + + &:hover { + background-image: url(/src/images/up-arrow-hover.svg); + } + + @include on-tablet { + display: block; + } + } + + &--compatibility { + width: 80px; + height: 80px; + background-image: url(/src/images/compatibility-icon.png); + } + + &--vr-control { + width: 89px; + height: 81px; + background-image: url(/src/images/VR-control-icon.png); + } + + &--sensors { + width: 106px; + height: 76px; + background-image: url(/src/images/sensors-icon.png); + } + + &--info { + position: absolute; + width: 34px; + height: 34px; + background-image: url(/src/images/tech-specs-info-icon.svg); + + @include on-tablet { + width: 62px; + height: 62px; + } + + @include on-desktop { + display: none; + } + + &-top { + top: -11px; + left: 60px; + + @include on-tablet { + top: -27px; + left: 45px; + } + } + + &-center { + top: 80px; + right: 29px; + + @include on-tablet { + top: 135px; + right: 39px; + } + } + + &-bottom { + bottom: 8px; + left: -17px; + + @include on-tablet { + bottom: 19px; + left: -58px; + } + } + + &-close { + background-image: url(/src/images/tech-specs-close-icon.svg); + } + } + + &--visa { + display: none; + + @include on-tablet { + display: block; + width: 54px; + height: 33px; + background-image: url(/src/images/visa-icon.svg); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..d1a0fb3b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,5 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; +.main { + &__linear-bg { + background-image: $linear-gradient; + } } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 00000000..7ac8341f --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,24 @@ +.menu { + color: $main-white; + background-color: $main-purple; + + @include on-tablet { + height: max-content; + } + + &--auto-hight { + height: auto; + } + + &__content { + &--language { + padding-bottom: 26px; + } + + &--nav { + @include on-tablet { + padding-bottom: 139px; + } + } + } +} diff --git a/src/styles/more-than-gaming.scss b/src/styles/more-than-gaming.scss new file mode 100644 index 00000000..e56b6d17 --- /dev/null +++ b/src/styles/more-than-gaming.scss @@ -0,0 +1,94 @@ +.more-than-gaming { + background-color: $footer-bg; + + &__content { + @include padding-block; + } + + &__title { + @include on-tablet { + text-align: center; + } + } + + &__title-description { + margin-top: 12px; + + font-size: 12px; + font-weight: 400; + line-height: 100%; + color: $main-turquoise; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + margin-top: 18px; + } + } + + &__features { + @include page-grid; + + row-gap: 20px; + margin-top: 30px; + + @include on-tablet { + gap: 40px 20px; + } + + @include on-desktop { + margin-top: 83px; + } + } + + &__feature { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + } + + &__feature-title { + margin-bottom: 11px; + + font-size: 16px; + font-weight: 900; + line-height: 100%; + color: $main-white; + + @include on-tablet { + margin-bottom: 18px; + text-align: center; + } + } + + &__feature-description { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + height: 52px; + + text-overflow: ellipsis; + + @include on-tablet { + display: block; + height: auto; + text-align: center; + } + } + + &__photo { + display: none; + + @include on-tablet { + display: block; + margin-bottom: 30px; + margin-inline: auto; + } + } +} diff --git a/src/styles/more.scss b/src/styles/more.scss new file mode 100644 index 00000000..a7d62326 --- /dev/null +++ b/src/styles/more.scss @@ -0,0 +1,26 @@ +.more { + display: flex; + flex-direction: column; + gap: 7px; + align-items: center; + + color: $main-turquoise; + + &--display-none-mobile { + display: none; + + @include on-tablet { + display: flex; + margin-bottom: 49px; + } + } + + &__link { + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } +} diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 00000000..7dbd1fd8 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,39 @@ +.nav { + &__nav { + margin-top: 18px; + + @include on-tablet { + margin-top: 12px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 11px; + + padding: 0; + + list-style: none; + } + + &__link { + display: block; + + padding: 11px 20px; + + font-size: 21px; + line-height: 130%; + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + background-color: $nav-link-bg; + } + + @include on-tablet { + padding-inline: 152px; + } + } +} diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 00000000..718f886f --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,126 @@ +* { + margin: 0; +} + +.page { + scroll-behavior: smooth; + + font-family: Inter, serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $grey-text; + + background-color: $footer-bg; + + &__body { + position: relative; + min-width: 320px; + } + + &__menu, + &__language, + &__faq, + &__help, + &__place-order, + &__pay, + &__complete { + pointer-events: none; + + position: fixed; + z-index: 4; + inset: 0; + transform: translateX(-100%); + + overflow: auto; + + opacity: 0; + + transition: all 300ms; + } + + &__faq { + @include on-desktop { + inset: 124px 200px 70px; + } + } + + &__help { + @include on-tablet { + bottom: auto; + } + + @include on-desktop { + top: 134px; + right: 200px; + left: 200px; + } + } + + &:has(.page__menu:target) .page__menu, + &:has(.page__language:target) .page__language, + &:has(.page__faq:target) .page__faq, + &:has(.page__help:target) .page__help, + &:has(.page__place-order:target) .page__place-order, + &:has(.page__pay:target) .page__pay, + &:has(.page__complete:target) .page__complete { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + &:has(.place-order:target) .buy-now__menu-link--order { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include on-desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.pay:target) .buy-now__menu-link--pay { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include on-desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.complete:target) .buy-now__menu-link--complete { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include on-desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.page__menu:target), + &:has(.page__language:target), + &:has(.page__faq:target), + &:has(.page__help:target), + &:has(.page__place-order:target), + &:has(.page__pay:target), + &:has(.page__complete:target) { + overflow: hidden; + } + + &:has(.page__menu:target) .header, + &:has(.page__language:target) .header, + &:has(.page__faq:target) .header, + &:has(.page__help:target) .header, + &:has(.page__place-order:target) .header, + &:has(.page__pay:target) .header { + opacity: 0.4; + } +} diff --git a/src/styles/pay.scss b/src/styles/pay.scss new file mode 100644 index 00000000..47059c59 --- /dev/null +++ b/src/styles/pay.scss @@ -0,0 +1,48 @@ +.pay { + background-image: $linear-gradient; + + &__content { + position: relative; + padding-bottom: 37px; + + @include page-grid; + + @include on-tablet { + padding-top: 40px; + padding-bottom: 43px; + } + + @include on-desktop { + padding-top: 33px; + } + } + + &__photo { + display: none; + + @include on-tablet { + display: block; + grid-column: 1/-1; + + width: 524px; + height: 277px; + margin-inline: auto; + + background-image: url(/src/images/header-photo.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } + + @include on-desktop { + position: absolute; + top: 80px; + left: -660px; + + grid-column: 7/-1; + + width: 701px; + height: 279px; + } + } +} diff --git a/src/styles/place-order.scss b/src/styles/place-order.scss new file mode 100644 index 00000000..93da463a --- /dev/null +++ b/src/styles/place-order.scss @@ -0,0 +1,49 @@ +.place-order { + background-image: $linear-gradient; + + &__content { + position: relative; + padding-bottom: 37px; + + @include page-grid; + + @include on-tablet { + padding-top: 40px; + padding-bottom: 43px; + } + + @include on-desktop { + padding-top: 0; + padding-bottom: 97px; + } + } + + &__photo { + display: none; + + @include on-tablet { + display: block; + grid-column: 1/-1; + + width: 524px; + height: 277px; + margin-inline: auto; + + background-image: url(/src/images/header-photo.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } + + @include on-desktop { + position: absolute; + top: 80px; + left: -660px; + + grid-column: 7/-1; + + width: 701px; + height: 279px; + } + } +} diff --git a/src/styles/play-video.scss b/src/styles/play-video.scss new file mode 100644 index 00000000..ed172801 --- /dev/null +++ b/src/styles/play-video.scss @@ -0,0 +1,69 @@ +.play-video { + display: flex; + gap: 45px; + align-items: center; + + box-sizing: border-box; + width: 245px; + height: 66px; + padding: 7px; + + background-image: url(/src/images/button-play-video.svg); + background-repeat: no-repeat; + background-size: cover; + + &__link { + font-weight: 500; + line-height: 130%; + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } + + &__video { + display: none; + } +} + +.page:has(.play-video--header:target) .play-video__video--header { + position: absolute; + z-index: 4; + top: 130px; + left: 50%; + transform: translateX(-50%); + + display: block; + + @include on-tablet { + width: 700px; + height: 300px; + } + + @include on-desktop { + width: 1200px; + height: 600px; + } +} + +.page:has(.play-video--about-product:target) .play-video__video--about-product { + position: absolute; + z-index: 4; + top: 130px; + left: 50%; + transform: translateX(-50%); + + display: block; + + @include on-tablet { + width: 700px; + height: 300px; + } + + @include on-desktop { + width: 1200px; + height: 600px; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 00000000..861d762d --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,31 @@ +@import '../styles/fonts'; +@import '../styles/utils/mixins'; +@import '../styles/utils/vars'; +@import 'page'; +@import 'header'; +@import 'top-bar'; +@import 'container'; +@import 'icon'; +@import 'button'; +@import 'nav'; +@import 'faq'; +@import 'menu'; +@import 'title'; +@import 'more'; +@import 'help'; +@import 'contacts'; +@import 'main'; +@import 'more-than-gaming'; +@import 'about-product'; +@import 'swiper'; +@import 'play-video'; +@import 'about-us'; +@import 'tech-specs'; +@import 'footer'; +@import 'form'; +@import 'why-kat-loco'; +@import 'buy-now'; +@import 'place-order'; +@import 'pay'; +@import 'total'; +@import 'complete'; diff --git a/src/styles/swiper.scss b/src/styles/swiper.scss new file mode 100644 index 00000000..a347ee86 --- /dev/null +++ b/src/styles/swiper.scss @@ -0,0 +1,148 @@ +.swiper { + z-index: 0; + + &--header { + position: absolute !important; + top: 0; + right: 0; + + display: none !important; + + width: 790px; + height: 688px; + + @include on-desktop { + right: -120px; + display: block !important; + } + } + + &--product { + width: 280px; + height: 207px; + + @include on-tablet { + width: 100%; + height: 289px; + } + + @include on-desktop { + height: 341px; + } + } + + &--mobile { + display: block !important; + + @include on-desktop { + display: none !important; + } + } + + &--desktop { + display: none !important; + + @include on-desktop { + display: block !important; + } + } + + &-slide { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + + &-photo { + cursor: pointer; + + display: block; + + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; + } + + &-product-wrapper { + height: 189px !important; + + @include on-tablet { + height: 270px !important; + } + + @include on-desktop { + height: 290px !important; + } + } + + &-pagination-bullet { + width: 4px !important; + height: 4px !important; + background-color: $main-white !important; + } + + &-pagination { + bottom: -7px !important; + } + + &-button { + cursor: pointer; + + position: absolute; + z-index: 5; + top: auto !important; + bottom: 0 !important; + + color: $main-white !important; + &::after { + display: none !important; + } + } + + &-button-prev { + left: 20px !important; + + &--header { + right: 276px !important ; + bottom: 40px !important; + left: auto !important; + } + } + + &-button-next { + left: 190px !important; + + &--header { + right: 115px !important ; + bottom: 40px !important; + left: auto !important; + } + } + + &-scrollbar { + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + width: 190px !important; + + &--header { + right: 115px !important; + bottom: 35px !important; + left: auto !important; + width: 207px !important; + } + } + + &-scrollbar-drag { + width: 69px !important; + height: 1px !important; + background-color: $main-turquoise !important; + + &--header { + width: 107px !important; + } + } +} diff --git a/src/styles/tech-specs.scss b/src/styles/tech-specs.scss new file mode 100644 index 00000000..1e8a557c --- /dev/null +++ b/src/styles/tech-specs.scss @@ -0,0 +1,250 @@ +.tech-specs { + background-color: $main-dark; + + &__content { + @include page-grid; + @include padding-block; + } + + &__title { + grid-column: 1/-1; + margin-bottom: 41px; + + @include on-tablet { + margin-bottom: 57px; + } + + @include on-desktop { + grid-column: 9/-1; + margin-bottom: 80px; + } + } + + &__features { + @include page-grid; + + position: relative; + grid-column: 1/-1; + row-gap: 10px; + margin-inline: auto; + + @include on-desktop { + margin-inline: 0; + } + } + + &__photo { + grid-column: 1/-1; + + width: 197px; + height: 195px; + + object-fit: cover; + object-position: center; + + @include on-tablet { + width: 358px; + height: 354px; + } + + @include on-desktop { + grid-column: 5/9; + grid-row: 1/3; + justify-self: start; + + width: 298px; + height: 294px; + margin-top: 52px; + } + } + + &__feature { + &--sensor { + display: none; + + .page:has(.tech-specs__feature--sensor:target) & { + position: absolute; + top: 30px; + left: -75px; + + display: block; + + padding: 15px; + + background-color: $main-purple; + + @include on-tablet { + top: 30px; + left: -200px; + } + } + + @include on-desktop { + position: relative; + top: 0; + left: 0; + + grid-column: 1/4; + grid-row: 1/2; + + padding: 0; + + background-color: none; + + &::after { + content: ''; + + position: absolute; + top: 5px; + right: -258px; + + display: block; + + width: 403px; + height: 72px; + + background-image: url(/src/images/techspecs-sensor-line.png); + } + } + } + + &--connection { + display: none; + + .page:has(.tech-specs__feature--connection:target) & { + position: absolute; + top: -30px; + right: -70px; + + display: block; + + padding: 15px; + + background-color: $main-purple; + + @include on-tablet { + top: 10px; + right: -210px; + } + } + + @include on-desktop { + position: relative; + grid-column: 2/5; + grid-row: 2/3; + + &::after { + content: ''; + + position: absolute; + top: -102px; + right: -25px; + + display: block; + + width: 134px; + height: 113px; + + background-image: url(/src/images/tech-specs-connection-line.png); + } + } + } + + &--batteries { + display: none; + + .page:has(.tech-specs__feature--batteries:target) & { + position: absolute; + top: -100px; + left: -70px; + + display: block; + + padding: 15px; + + background-color: $main-purple; + + @include on-tablet { + top: 50px; + left: -210px; + } + } + + @include on-desktop { + position: relative; + grid-column: 9/-1; + + &::after { + content: ''; + + position: absolute; + top: 5px; + left: -210px; + + display: block; + + width: 192px; + height: 245px; + + background-image: url(/src/images/tech-specs-batteries-line.png); + } + } + } + + &--display-none-mobile { + display: none; + + @include on-desktop { + display: block; + } + } + } + + &__feature-title { + margin-bottom: 21px; + + font-size: 18px; + font-weight: 900; + line-height: 100%; + color: $main-white; + } + + &__description { + font-size: 12px; + + @include on-desktop { + font-size: 16px; + } + } + + &__info-icon--close-top { + display: none; + } + + &__info-icon--close-center { + display: none; + } + + &__info-icon--close-bottom { + display: none; + } +} + +.page:has(.tech-specs__feature--sensor:target) + .tech-specs__info-icon--close-top { + display: block; +} + +.page:has(.tech-specs__feature--connection:target) + .tech-specs__info-icon--close-center { + display: block; +} + +.page:has(.tech-specs__feature--batteries:target) + .tech-specs__info-icon--close-bottom { + display: block; +} + +.page:has(.tech-specs__feature:target) .tech-specs__feature-title { + display: none; +} diff --git a/src/styles/title.scss b/src/styles/title.scss new file mode 100644 index 00000000..c411ec6a --- /dev/null +++ b/src/styles/title.scss @@ -0,0 +1,52 @@ +.title { + font-weight: 900; + line-height: 130%; + color: $main-white; + text-transform: uppercase; + + &-blue { + font-weight: 400; + color: $main-turquoise; + + &--small { + display: block; + + margin-bottom: 11px; + + font-size: 14px; + line-height: 100%; + text-transform: none; + } + } + + &--section { + font-size: 21px; + line-height: 100%; + + @include on-desktop { + font-size: 36px; + } + } + + &--aside { + margin-top: 11px; + font-size: 21px; + + @include on-tablet { + margin-top: 17px; + } + + @include on-desktop { + margin-top: 7px; + font-size: 36px; + } + } + + &--complete { + font-size: 26px; + + @include on-tablet { + font-size: 46px; + } + } +} diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 00000000..daf64b21 --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,91 @@ +.top-bar { + display: flex; + grid-column: 1/-1; + justify-content: space-between; + padding-block: 20px; + + @include on-tablet { + padding-block: 30px; + } + + @include on-desktop { + padding-block: 47px; + } + + &--menu { + @include padding-inline; + + justify-content: end; + margin-bottom: 18px; + + @include on-tablet { + margin-bottom: 12px; + padding-block: 34px; + } + } + + &--smaller-padding { + margin: 0; + + @include on-desktop { + padding: 18px; + } + } + + &--language { + justify-self: start; + } + + &__left-side { + display: flex; + gap: 35px; + align-items: center; + } + + &__right-side { + display: flex; + gap: 37px; + align-items: center; + } + + &__language-change { + display: none; + gap: 4px; + align-items: center; + + color: $main-turquoise; + list-style: 130%; + + @include on-desktop { + display: flex; + } + } + + &__nav { + display: none; + + @include on-desktop { + display: block; + } + } + + &__list { + display: flex; + gap: 32px; + padding: 0; + list-style: none; + } + + &__item { + @include hover(scale, 1.1); + } + + &__link { + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } +} diff --git a/src/styles/total.scss b/src/styles/total.scss new file mode 100644 index 00000000..bf8298f5 --- /dev/null +++ b/src/styles/total.scss @@ -0,0 +1,87 @@ +.total { + display: flex; + grid-column: 1/-1; + gap: 75px; + justify-content: center; + + padding-block: 30px; + + @include on-tablet { + gap: 149px; + justify-content: start; + padding-top: 3px; + padding-bottom: 48px; + } + + @include on-desktop { + grid-column: 1/5; + grid-row: 2/3; + gap: 86px; + + padding-top: 340px; + padding-bottom: 0; + } + + &--pay { + padding-bottom: 53px; + + @include on-tablet { + grid-column: 2/6; + padding-top: 0; + padding-bottom: 60px; + } + + @include on-desktop { + grid-column: 1/7; + padding-bottom: 0; + } + } + + &__title { + margin-bottom: 10px; + line-height: 130%; + color: $grey-text; + text-align: center; + + @include on-tablet { + margin-bottom: 20px; + text-align: start; + } + } + + &__price-amount { + font-size: 26px; + font-weight: 500; + line-height: 100%; + color: $main-turquoise; + + @include on-tablet { + font-size: 36px; + } + } + + &__quantity-form { + position: relative; + display: inline-block; + background-color: $main-purple; + + &::after { + content: ' '; + + position: absolute; + z-index: 2; + top: 50%; + right: 10px; + transform: translateY(-50%); + + display: block; + + width: 9px; + height: 6px; + + background-image: url(/src/images/quantity-dropdown.svg); + background-repeat: no-repeat; + background-size: cover; + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..eb4c0b1b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,73 @@ #{$_property}: $_toValue; } } + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 110px; + } +} + +@mixin padding-block { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin on-tablet { + @media (min-width: 768px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin green-step { + &::after { + content: ' '; + + position: absolute; + bottom: 0; + left: 50%; + + display: block; + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: rgba(5, 194, 223, 1); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..18fde369 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$main-white: rgba(255, 255, 255, 1); +$linear-gradient: linear-gradient( + to right bottom, + rgba(25, 21, 54, 1), + rgba(0, 0, 0, 1) +); +$main-turquoise: rgba(5, 194, 223, 1); +$main-dark: rgb(5, 4, 11); +$dark-grey-text: rgb(47, 47, 47); +$grey-text: rgb(146, 146, 146); +$disabled-button: rgba(25, 21, 54, 1); +$form-invalid: rgba(134, 4, 4, 1); +$main-purple: rgba(25, 21, 54, 1); +$footer-bg: rgb(0, 0, 0); +$nav-link-bg: rgba(17, 14, 37, 1); diff --git a/src/styles/why-kat-loco.scss b/src/styles/why-kat-loco.scss new file mode 100644 index 00000000..d89a6e57 --- /dev/null +++ b/src/styles/why-kat-loco.scss @@ -0,0 +1,80 @@ +.why-kat-loco { + background-image: $linear-gradient; + + &__content { + @include padding-block; + @include page-grid; + } + + &__features { + display: flex; + grid-column: 1/-1; + flex-direction: column; + gap: 20px; + + margin-top: 32px; + + @include on-tablet { + flex-direction: row; + gap: 15px; + } + + @include on-desktop { + gap: 23px; + margin-top: 84px; + margin-bottom: 79px; + } + } + + &__feature-title { + margin-bottom: 11px; + + font-size: 16px; + font-weight: 900; + line-height: 100%; + color: $main-white; + + @include on-tablet { + margin-bottom: 21px; + font-size: 18px; + text-align: center; + } + + @include on-desktop { + margin-bottom: 16px; + } + } + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/3; + } + + @include on-desktop { + grid-column: 1/-1; + text-align: center; + } + } + + &__icon { + display: none; + margin-bottom: 26px; + margin-inline: auto; + + @include on-tablet { + display: block; + } + + @include on-desktop { + margin-bottom: 32px; + } + } + + &__description { + @include on-tablet { + text-align: center; + } + } +}