diff --git a/README.md b/README.md index a95e97afe..44a6d31fa 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 11. `git push origin develop` - to send you code for PR 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Kickstarter/) + [DEMO LINK](https://RuslanV23.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..f60ba9fdf 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,867 @@ - + - Title + Kickstarter + + + + + + + - -

Hello Mate Academy

- + +
+
+
+ +
+ + SPECS + + + + buy + + +
+
+
+
+
+
+

+ Futuristic Wireless Speaker +

+

+ Luna’s performance is balanced and smooth in all frequency ranges + which makes the music both naturally pleasant and distinctly more + layered. +

+
+
+
+
+
+
+
+
+
+
+
+
+

Futuristic Design

+

+ To give Luna a truly flawless look, we specifically picked + aircraft grade aluminum as its material and adopted both + three-dimensional stretch-bending technology and a high + precision cold forging technique. +

+
+
+
+
+
+

Tweeter Speaker System

+

+ To deliver a more layered sound performance better than a + sole full-range speaker, our team equipped Luna with one + more tweeter speaker responsible for high-frequency sound + independently. +

+
+
+
+
+
+

Multiroom System

+

+ Luna is natively compatible with your home Wi-Fi. Set up + multiple speakers in different rooms to expand your music + experience into the entire house. +

+
+
+
+
+
+

Intuitive Lighting System

+

+ An intuitive user interface allows you to adjust the hue and + saturation of color for lighting that fits any mood and + situation. +

+
+
+
+
+
+
+
+ +
+
+
+
+
+

Futuristic Design

+

+ To give Luna a truly flawless look, we specifically picked + aircraft grade aluminum as its material and adopted both + three-dimensional stretch-bending technology and a high + precision cold forging technique. +

+
+
+
+
+
+

Tweeter Speaker System

+

+ To deliver a more layered sound performance better than a sole + full-range speaker, our team equipped Luna with one more tweeter + speaker responsible for high-frequency sound independently. +

+
+
+
+
+
+

Multiroom System

+

+ Luna is natively compatible with your home Wi-Fi. Set up + multiple speakers in different rooms to expand your music + experience into the entire house. +

+
+
+
+
+
+

Intuitive Lighting System

+

+ An intuitive user interface allows you to adjust the hue and + saturation of color for lighting that fits any mood and + situation. +

+
+
+
+
+ +
+
+
+ +
+
+

DESIGNED FOR THE FUTURE

+
+ image +
+

+ In 2014, a group of geeky industrial designers, engineering veterans + and acoustic experts formed crazybaby. This is a bunch of passionate + people who are crazy enough to think they can challenge the industry + with disruptive audio products. +

+ + See more about us + +
+
+ +
+
+

+ DESIGNED FOR THE FUTURE +

+
+ image +
+

+ Luna Eye is to the essence of this innovative light and audio + system. It comprises an independent tweeter speaker, a light guiding + component, a dome and a ring ornament. +

+ + See more about us + +
+
+ +
+
+
+
+

+ It really took me by surprise honestly to have such full beautiful + sound that coming out of this small compact device. And with the + brush aluminum surface, it feels so familiar. Like my iPhone. +

+
+ Garrett Martin + + Creative Director + +
+
+
+ +
+
+

FEATURES

+
+
+
+
+
+
+
+
+
+

Connectivity

+
    +
  • + Hands Free Wireless Audio +
    • +
  • + Bluetooth 4.0 LE +
    • +
  • + Wi-Fi 2.4 GHz (802.11 b/g/n) +
    • +
  • + Smart Multiroom System Set Up +
    • +
  • + Party Mode with 6.0 Units and above +
    • +
  • + MESHNET Multi Speaker Network +
    • +
+
+ +
+

App Features

+
    +
  • + Customize Music Schedule +
    • +
  • + Wake Up with Favorite Songs +
    • +
  • + Home Detection Auto Wake Up +
    • +
  • Color Wheel
    • +
+
+ +
+

Sound & Music

+
    +
  • + section-features__slide-title +
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • + Easy & Stable Stereo Pairing +
    • +
  • + Crisp and Clear High Frequency Sound +
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music Playback from Last Song Stopped +
    • +
+
+
+
+
+
+ + +
+
+
+

Connectivity

+
    +
  • + Hands Free Wireless Audio +
    • +
  • Bluetooth 4.0 LE
    • +
  • + Wi-Fi 2.4 GHz (802.11 b/g/n) +
    • +
  • + Smart Multiroom System Set Up +
    • +
  • + Party Mode with 6.0 Units and above +
    • +
  • + MESHNET Multi Speaker Network +
    • +
+
+ +
+

App Features

+
    +
  • + Customize Music Schedule +
    • +
  • + Wake Up with Favorite Songs +
    • +
  • + Home Detection Auto Wake Up +
    • +
  • Color Wheel
    • +
+
+ +
+

Sound & Music

+
    +
  • + section-features__slide-title +
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • + Easy & Stable Stereo Pairing +
    • +
  • + Crisp and Clear High Frequency Sound +
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music Playback from Last Song Stopped +
    • +
+
+
+
+
+ +
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+
+ +
+ +
+ + + +
+

+ © 2019 All rights reserved. Terms of Use & Privacy Policy +

+
+
+ + + + + + + + + + + diff --git a/src/images/about-us/1.png b/src/images/about-us/1.png new file mode 100644 index 000000000..1de73099b Binary files /dev/null and b/src/images/about-us/1.png differ diff --git a/src/images/about-us/2.png b/src/images/about-us/2.png new file mode 100644 index 000000000..8c1d6ebb2 Binary files /dev/null and b/src/images/about-us/2.png differ diff --git a/src/images/avatar/1.jpg b/src/images/avatar/1.jpg new file mode 100644 index 000000000..0651fa867 Binary files /dev/null and b/src/images/avatar/1.jpg differ diff --git a/src/images/benefit/1.svg b/src/images/benefit/1.svg new file mode 100644 index 000000000..55b340246 --- /dev/null +++ b/src/images/benefit/1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit/2.svg b/src/images/benefit/2.svg new file mode 100644 index 000000000..945253101 --- /dev/null +++ b/src/images/benefit/2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit/3.svg b/src/images/benefit/3.svg new file mode 100644 index 000000000..a15bc32b2 --- /dev/null +++ b/src/images/benefit/3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefit/4.svg b/src/images/benefit/4.svg new file mode 100644 index 000000000..60c45a669 --- /dev/null +++ b/src/images/benefit/4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/bg/header-image.png b/src/images/bg/header-image.png new file mode 100644 index 000000000..58868d4a8 Binary files /dev/null and b/src/images/bg/header-image.png differ diff --git a/src/images/bg/testimonilas.svg b/src/images/bg/testimonilas.svg new file mode 100644 index 000000000..71544aa4e --- /dev/null +++ b/src/images/bg/testimonilas.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/button/arrow.svg b/src/images/button/arrow.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/button/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/favicon/favicon.svg b/src/images/favicon/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/favicon/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/arrow-up.svg b/src/images/icon/arrow-up.svg new file mode 100644 index 000000000..e23b10413 --- /dev/null +++ b/src/images/icon/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/burger-menu.svg b/src/images/icon/burger-menu.svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/icon/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/close.svg b/src/images/icon/close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram.svg b/src/images/icon/instagram.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/social/facebook.svg b/src/images/icon/social/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/social/instagram.svg b/src/images/icon/social/instagram.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/social/twitter.svg b/src/images/icon/social/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/social/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/presentation/presentation.png b/src/images/presentation/presentation.png new file mode 100644 index 000000000..81435cd76 Binary files /dev/null and b/src/images/presentation/presentation.png differ diff --git a/src/images/section-features/1.png b/src/images/section-features/1.png new file mode 100644 index 000000000..ab91f1f65 Binary files /dev/null and b/src/images/section-features/1.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..e69de29bb 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +0,0 @@ -'use strict'; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..b19d74920 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,10 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } + +html { + font-family: Inter, Arial, Helvetica, sans-serif; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..1bbfe8066 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,107 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; + text-transform: uppercase; + color: $gray1; +} + h1 { - @extend %h1; + font-size: 40px; + line-height: 52px; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-small-desktop { + font-size: 64px; + line-height: 78px; + } +} + +h2 { + font-size: 30px; + line-height: 40px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-small-desktop { + font-size: 56px; + line-height: 70px; + } +} + +h3 { + font-size: 18px; + line-height: 22px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-small-desktop { + font-size: 34px; + line-height: 42px; + } +} + +h4 { + font-size: 22px; + line-height: 28px; +} + +h5 { + font-size: 16px; + line-height: 22px; +} + +h6 { + font-size: 14px; + line-height: 20px; +} + +button { + text-transform: uppercase; + font-size: 12px; + line-height: 14px; +} + +.main-text { + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.secondary-text { + font-weight: 400; + font-size: 14px; + line-height: 21px; +} + +.thirdary-text { + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-transform: uppercase; +} + +.quote { + font-weight: 700; + font-size: 14px; + line-height: 24px; + + @include on-small-desktop { + font-weight: 700; + font-size: 24px; + line-height: 36px; + } } diff --git a/src/styles/blocks/benefit.scss b/src/styles/blocks/benefit.scss new file mode 100644 index 000000000..12967287b --- /dev/null +++ b/src/styles/blocks/benefit.scss @@ -0,0 +1,135 @@ +.swiper { + width: 100%; + height: 100%; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + background: #444; + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.swiper-pagination { + --swiper-pagination-bottom: 40px; + + bottom: 0; +} + +.section-benefits { + + &__swiper { + + @include on-tablet { + display: none; + } + } + + &__container-static { + row-gap: 20px; + } + + &__nav { + height: 76px; + align-items: center; + display: none; + margin-bottom: 20px; + + @include on-small-desktop { + display: flex; + grid-column: 4 / -4; + } + } +} + +.benefit { + background-color: transparent; + grid-column: 4 span; + height: 100%; + min-height: 100%; + + + + @include on-small-desktop { + grid-column: 3 span; + } + + &--static { + display: none; + + @include on-tablet { + display: block; + } + } + + &__container { + box-sizing: border-box; + min-height: 100%; + height: 100%; + + padding-block: 40px; + padding-inline: 10px; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + background-color: $white; + + transition: box-shadow $translition; + &:hover { + box-shadow: 0 0 10px $turquoise-accent; + } + + &--height-280 { + box-sizing: border-box; + padding-block: 40px 80px; + padding-inline: 10px; + margin-inline: 30px; + margin-block: 10px; + min-height: auto; + } + } + + &__icon { + width: 50px; + height: 50px; + min-height: 50px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + &--1 { + // background-image: url('../images/benefit/2.svg'); + background-image: url('../images/benefit/1.svg'); + } + &--2 { + background-image: url('../images/benefit/2.svg'); + } + &--3 { + background-image: url('../images/benefit/3.svg'); + } + &--4 { + background-image: url('../images/benefit/4.svg'); + } + } + + & h2 { + text-align: center; + margin-top: 40px; + font-size: 22px; + } + + & p { + text-align: center; + margin-top: 20px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..70c886796 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,91 @@ +.footer { + &__container { + display: flex; + flex-direction: column; + justify-items: center; + gap: 30px; + + @include on-tablet { + gap: 60px; + } + } + + &__socials { + display: flex; + justify-content: center; + gap: 40px; + + @include on-tablet { + gap: 50px; + } + } + + &__copyright { + margin-bottom: 20px; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: $gray4; + text-align: center; + + @include on-small-desktop { + margin-bottom: 30px; + } + } + + &__logo { + display: none; + width: fit-content; + place-self: center; + + @include on-tablet { + width: fit-content; + justify-self: center; + display: block; + } + } + + &__button-up { + display: none; + width: 45px; + height: 45px; + right: 30px; + bottom: -50px; + position: fixed; + border-radius: 50%; + background-color: $gray1; + z-index: 2; + + -webkit-mask-image: url('../images/icon/arrow-up.svg'); + mask-image: url('../images/icon/arrow-up.svg'); + + -webkit-mask-size: cover; + mask-size: cover; + + -webkit-mask-position: center; + mask-position: center; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + transition: + transform $translition, + background-color $translition, + bottom $translition; + + + + &__show { + bottom: 40px; + } + + @include on-tablet { + display: block; + } + + &:hover { + transform: scale(1.05); + background-color: $turquoise-accent; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..d16b9e36e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,56 @@ +.header { + &__image { + background-image: url('../images/bg/header-image.png'); + background-position: left; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + aspect-ratio: 12 / 9; + + &--mob { + @include on-tablet { + display: none; + } + } + + &--tab-desktop { + display: none; + + @include on-tablet { + aspect-ratio: 12 / 9; + display: block; + grid-column: 4/-1; + align-self: flex-end; + } + + @include on-small-desktop { + aspect-ratio: 16 / 9; + grid-column: 5/-1; + } + } + } + + &__text { + margin-top: 40px; + display: flex; + flex-direction: column; + gap: 20px; + grid-column: 1/-1; + + @include on-tablet { + margin-top: 120px; + + gap: 30px; + grid-column: 1/4; + z-index: 1; + } + + @include on-small-desktop { + grid-column: 1/5; + } + + & p { + color: $gray1; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..728ac6d68 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,31 @@ +.menu { + background-color: $white; + + &__container { + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 30px; + } + + &__box-lang { + display: flex; + gap: 20px; + } + + &__button-box { + flex-grow: 1; + display: flex; + } + + &__button-buy { + display: block; + width: 100%; + align-self: end; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..407e20152 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,67 @@ +.nav { + &--menu { + padding-block: 30px; + + @include on-tablet { + padding-block: 40px; + } + } + + &__list { + width: 100%; + padding: 0; + margin: 0; + display: flex; + list-style: none; + justify-content: space-between; + + &--menu { + flex-direction: column; + gap: 25px; + + @include on-tablet { + gap: 40px; + } + } + } + + &__link { + position: relative; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 14px; + color: $gray1; + padding-block: 10px; + + transition: font-weight $translition; + + &::after { + transition: transform $translition; + transform-origin: 100%; + transform: scaleX(0); + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 100%; + height: 4px; + background-color: $turquoise-accent; + border-radius: 2px; + } + + &:hover { + font-weight: 700; + + &::after { + transform: scaleX(1); + transform-origin: 0%; + } + } + + + &--menu::after { + bottom: 1px; + height: 2px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..92ddeda1d --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,28 @@ +.page { + position: relative; + min-width: 320px; + scroll-behavior: smooth; + + &__body { + padding: 0; + margin: 0; + background-color: $white; + } + + &:has(&__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + inset: 0; + z-index: 3; + transform: translateX(-100%); + + transition: transform $translition; + + &:target { + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/section-about-us.scss b/src/styles/blocks/section-about-us.scss new file mode 100644 index 000000000..43644021b --- /dev/null +++ b/src/styles/blocks/section-about-us.scss @@ -0,0 +1,158 @@ +.section-about-us { + &__container { + row-gap: 20px; + + @include on-tablet { + row-gap: 30px; + } + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + + &--2 { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 7; + } + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + transition: transform $translition; + + &:hover { + transform: scale(1.05); + } + } + + &__image { + overflow: hidden; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / 4; + width: calc(100% + 34px); + left: -34px; + position: relative; + } + + @include on-small-desktop { + grid-column: 1 / 7; + } + + &--2 { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1 / 4; + width: calc(100% + 34px); + position: relative; + right: 34px; + left: 0; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + } + } + + &__paragraph { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + + &--2 { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 7; + } + } + } + + &__link { + margin-top: 10px; + height: fit-content; + grid-column: 1 / -1; + width: fit-content; + position: relative; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 700; + font-size: 12px; + color: $turquoise-accent; + text-transform: uppercase; + + transition: transform $translition; + + @include on-tablet { + margin-top: 30px; + + grid-column: 5 / -1; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + + &::after { + transition: transform $translition; + transform-origin: 100%; + transform: scaleX(0); + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 100%; + height: 2px; + background-color: $turquoise-accent; + border-radius: 2px; + } + + &--2 { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 7; + } + } + + &:hover { + transform: scale(1.05); + + &::after { + transform: scaleX(1); + transform-origin: 0%; + } + } + + + } +} diff --git a/src/styles/blocks/section-features.scss b/src/styles/blocks/section-features.scss new file mode 100644 index 000000000..bc3871fbc --- /dev/null +++ b/src/styles/blocks/section-features.scss @@ -0,0 +1,220 @@ +.section-features { + &__container { + margin-top: 30px; + box-sizing: border-box; + position: relative; + padding-top: 30px; + + @include on-small-desktop { + row-gap: 56px; + padding-top: 60px; + } + } + + &__background { + background-color: #d6ecec; + width: 100%; + height: 100%; + + &-container { + box-sizing: border-box; + width: 100%; + height: 100%; + position: absolute; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-small-desktop { + padding-inline: 123px; + } + } + } + + &__slide { + display: flex; + flex-direction: column; + background-color: transparent; + + align-items: start; + + &--static { + display: none; + + @include on-small-desktop { + display: block; + z-index: 1; + } + + &-1 { + grid-column: 2 / 6; + } + + &-2 { + grid-column: 6 / 10; + } + + &-3 { + grid-column: 2 / 6; + } + } + + &-title { + font-weight: 700; + font-size: 18px; + text-transform: uppercase; + color: $turquoise-dark; + text-align: start; + + @include on-small-desktop { + font-size: 34px; + font-weight: 700; + } + } + + &-list { + padding-left: 20px; + + @include on-small-desktop { + margin-top: 30px; + } + } + + &-item { + margin-top: 10px; + color: $gray1; + font-weight: 400; + font-size: 14px; + line-height: 21px; + + text-align: start; + + @include on-small-desktop { + font-size: 16px; + line-height: 24px; + } + } + } + + &__swiper-button { + margin-top: 20px; + border: none; + background-color: $gray1; + -webkit-mask-image: url('../images/button/arrow.svg'); + mask-image: url('../images/button/arrow.svg'); + + -webkit-mask-size: cover; + mask-size: cover; + + -webkit-mask-position: center; + mask-position: center; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + width: 48px; + height: 14px; + + cursor: pointer; + + transition: + transform $translition, + background-color $translition; + + &:hover { + background-color: $turquoise-accent; + transform: scale(1.05); + } + + &:disabled { + background-color: $gray4; + cursor: auto; + } + + &--prev { + transform: scale(-1, -1); + + &:hover { + transform: scale(-1.05, -1.05); + } + } + } + + &__box-pagination { + display: grid; + grid-column: 1/-1; + width: 93px; + height: 50px; + row-gap: 10px; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-column: 2/ 4; + } + + @include on-small-desktop { + display: none; + } + } + + &__swiper-pagination { + grid-column: 1/-1; + + width: 100%; + gap: 5px; + + color: black; + z-index: 1; + display: flex; + justify-content: center; + font-weight: 400; + + &-1 { + color: $gray1; + font-size: 16px; + } + + &-2 { + margin-top: 10px; + color: $turquoise-dark; + + font-size: 12px; + } + } + + &__image { + grid-column: 1/-1; + aspect-ratio: 16 / 9; + background-image: url('../images/section-features/1.png'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + z-index: 1; + margin-top: 20px; + align-self: self-end; + + @include on-tablet { + margin: 0; + grid-column: 4/-1; + } + + @include on-small-desktop { + grid-column: 7/-1; + } + } + + &__swiper { + grid-column: 1 / -1; + height: fit-content; + + @include on-tablet { + grid-column: 2 / 5; + } + + @include on-small-desktop { + position: static; + display: none; + } + } +} diff --git a/src/styles/blocks/section-presentation.scss b/src/styles/blocks/section-presentation.scss new file mode 100644 index 000000000..90adcf1fa --- /dev/null +++ b/src/styles/blocks/section-presentation.scss @@ -0,0 +1,26 @@ +.section-presentation { + box-sizing: border-box; + @include on-tablet { + padding-inline: 30px; + } + + @include on-small-desktop { + padding-inline: 297px; + } + + &__image { + padding: 0; + width: 100%; + aspect-ratio: 16 / 9; + background-image: url('../images/presentation/presentation.png'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + transition: transform $translition; + + &:hover { + transform: scale(1.05); + } + } +} diff --git a/src/styles/blocks/section-questions.scss b/src/styles/blocks/section-questions.scss new file mode 100644 index 000000000..d53b00951 --- /dev/null +++ b/src/styles/blocks/section-questions.scss @@ -0,0 +1,87 @@ +.questions { + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-small-desktop { + grid-column: span 6; + } + } + + &__form { + margin-top: 27px; + grid-column: 1 / -1; + + @include on-tablet { + margin-top: 0; + grid-column: span 4; + } + + @include on-small-desktop { + grid-column: span 6; + } + } + + &__field { + width: 100%; + box-sizing: border-box; + height: 48px; + padding: 12px 20px; + color: $gray1; + font-weight: 600; + font-size: 14px; + font-family: Helvetica, sans-serif; + outline: none; + border-width: 2px; + border-style: solid; + + border-color: #828282; + + &:focus { + border-color: $turquoise-dark; + outline: none; + } + + &:hover { + border-color: $turquoise-accent; + } + + &:invalid:not(:focus, :placeholder-shown) { + border-color: #eb5757; + } + + &::placeholder { + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 16px; + color: #828282; + } + + &-message { + resize: vertical; + margin-top: 20px; + height: 128px; + } + } + + &__send-button { + margin-top: 30px; + font-size: 12px; + font-weight: 700; + color: white; + border: none; + width: 100px; + height: 40px; + background-color: $turquoise-accent; + + transition: background-color $translition; + cursor: pointer; + + &:hover { + background-color: $turquoise-dark; + } + } +} diff --git a/src/styles/blocks/section-testimonilas.scss b/src/styles/blocks/section-testimonilas.scss new file mode 100644 index 000000000..9da2dc953 --- /dev/null +++ b/src/styles/blocks/section-testimonilas.scss @@ -0,0 +1,78 @@ +.section-testimonilas { + --padding-testimonilas: 50px; + + position: relative; + + &__background { + position: absolute; + + background-color: #0db2b312; + -webkit-mask-image: url('../images/bg/testimonilas.svg'); + mask-image: url('../images/bg/testimonilas.svg'); + + -webkit-mask-size: cover; + mask-size: cover; + + -webkit-mask-position: center; + mask-position: center; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + width: 208px; + height: 171px; + transform: translateY(calc(var(--padding-testimonilas) * -1)); + } + + &__content { + padding-top: var(--padding-testimonilas); + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + + @include on-small-desktop { + grid-column: 3 / -3; + } + } + + &__paragraph { + font-weight: 700; + font-size: 14px; + color: $gray1; + line-height: 20px; + text-align: center; + } + + &__avatar { + margin-top: 30px; + width: 62px; + height: 62px; + background-image: url('../images/avatar/1.jpg'); + background-position: center; + background-size: cover; + border-radius: 50%; + + @include on-tablet { + margin-top: 40px; + } + } + + &__name { + margin-top: 10px; + font-weight: 700; + font-size: 16px; + color: $gray1; + + @include on-tablet { + margin-top: 20px; + } + } + + &__job-position { + font-weight: 400; + font-size: 14px; + margin-top: 5px; + color: $gray3; + } +} diff --git a/src/styles/blocks/small-blocks.scss b/src/styles/blocks/small-blocks.scss new file mode 100644 index 000000000..dd6be6e32 --- /dev/null +++ b/src/styles/blocks/small-blocks.scss @@ -0,0 +1,215 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-color: black; + + -webkit-mask-image: url('mask.png'); + mask-image: url('mask.png'); + + -webkit-mask-size: cover; + mask-size: cover; + + -webkit-mask-position: center; + mask-position: center; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + transition: background-color $translition; + + &:hover { + background-color: $turquoise-accent; + } + + &--burger-menu { + width: 32px; + height: 32px; + + -webkit-mask-image: url('../images/icon/burger-menu.svg'); + mask-image: url('../images/icon/burger-menu.svg'); + } + + &--social { + background-color: $gray2; + cursor: pointer; + } + + &--facebook { + -webkit-mask-image: url('../images/icon/social/facebook.svg'); + mask-image: url('../images/icon/social/facebook.svg'); + } + + &--twitter { + -webkit-mask-image: url('../images/icon/social/twitter.svg'); + mask-image: url('../images/icon/social/twitter.svg'); + } + + &--instagram { + -webkit-mask-image: url('../images/icon/social/instagram.svg'); + mask-image: url('../images/icon/social/instagram.svg'); + } + + &--close-menu { + -webkit-mask-image: url('../images/icon/icon-close.svg'); + mask-image: url('../images/icon/icon-close.svg'); + } +} + +.specs { + display: block; + font-family: Helvetica, sans-serif; + font-size: 14px; + font-weight: 300; + color: $gray2; + height: 100%; + + transition: color $translition; + + &--top-bar { + display: none; + + @include on-tablet { + display: block; + } + } + + &--menu { + @include on-tablet { + display: none; + } + } + + &:hover { + color: $turquoise-accent; + } +} + +.lang { + background-color: transparent; + + gap: 5px; + + align-items: center; + + font-family: Helvetica, sans-serif; + font-size: 14px; + font-weight: 300; + border: none; + cursor: pointer; + display: flex; + + color: $gray3; + + &--top-bar { + display: none; + + @include on-tablet { + display: flex; + } + } + + &--menu { + @include on-tablet { + display: none; + } + } + + &__span { + display: block; + + transition: + color $translition, + transform $translition; + } + + &:hover &__span:not(&__span--active) { + color: $turquoise-accent; + transform: scale(1.2); + } + + &__span--active { + font-weight: 400; + color: $gray1; + } +} + +.button-buy { + display: none; + width: 100px; + height: 48px; + background-color: $gray1; + align-content: center; + + color: white; + text-align: center; + font-family: Helvetica, sans-serif; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + + transition: background-color $translition; + + @include on-tablet { + display: block; + } + + &:hover { + background-color: $black; + } + + &:disabled { + background-color: $gray4; + } +} + +.container { + --count-column: 4; + + display: grid; + padding-inline: 30px; + grid-template-columns: repeat(var(--count-column), 1fr); + column-gap: 20px; + + @include on-tablet { + --count-column: 8; + + padding-inline: 34px; + } + + @include on-small-desktop { + --count-column: 12; + + column-gap: 30px; + padding-inline: 123px; + } +} + +.button-arrow { + background-image: url('../images/button/arrow.svg'); + transform: scaleX(-1); + width: 48px; + height: 13px; + border: none; +} + +.logo { + display: block; + color: black; + cursor: pointer; + + transition: color $translition; + + &:hover { + color: $turquoise-accent; + } + + &__svg { + display: block; + object-fit: contain; + object-position: center; + width: 162px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..69a5abec0 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,25 @@ +.top-bar { + height: 74px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; + + grid-column: 1 / -1; + + @include on-tablet { + height: 105px; + } + + &__rigth-box { + display: flex; + gap: 30px; + align-items: center; + } + + &__burger-menu { + @include on-small-desktop { + display: none; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..994f77562 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,35 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'normalize'; -body { - background: $c-gray; +@import 'blocks/small-blocks'; +@import 'blocks/page'; +@import 'blocks/menu'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/benefit'; +@import 'blocks/section-presentation'; +@import 'blocks/nav'; +@import 'blocks/section-about-us'; +@import 'blocks/section-testimonilas'; +@import 'blocks/section-features'; +@import 'blocks/section-questions'; +@import 'blocks/footer'; + +.main { + display: flex; + flex-direction: column; + gap: 110px; + padding-block: 110px; + + @include on-tablet { + gap: 140px; + padding-block: 140px; + } + + @include on-small-desktop { + gap: 170px; + padding-block: 170px; + } } diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 000000000..c710421bc --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,9 @@ +a { + text-decoration: none; +} + +h1, h2, h3, h4, h5, h6, p, button { + padding: 0; + margin: 0; +} + diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6e4f64b6c 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,21 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +}; + +@mixin on-small-desktop { + @media (min-width: 1280px) { + @content; + } +}; + +@mixin on-desktop { + @media (min-width: 1440px) { + @content; + } +}; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..0bde1e1bc 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ $c-gray: #eee; +$turquoise-accent: #0DB2B3; +$turquoise-dark: #0C797A; +$turquoise: #CFEFF0; +$turquoise-light: #EEFAFA; +$white: #F7F7F7; +$black: #131313; +$gray1: #333; +$gray2: #4F4F4F; +$gray3: #7C7C7C; +$gray4: #BDBDBD; +$gray5: #D0D0D0; +$translition: 0.3s;