diff --git a/README.md b/README.md index a95e97afe..687b40d16 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,2 @@ -# 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).** - -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 -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) - -1. Implement the header with `nav`. -1. Implement `Benefits` block. -1. Implement `Presentation` block. -1. Implement `About us` block. -1. Implement `Technology` block. -1. Implement `Testimonilas` block. -1. Implement `Features` block. -1. Implement `Questions` block -1. Implement the footer. - - -## Github flow - -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`) -4. Run `npm start`. -5. Open one more terminal window for the next steps -6. `git checkout -b develop` - to create new branch and switch on it -7. Write you code in `src` folder -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages` -10. `git add . && git commit -m 'solution'` to save your changes -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/) -14. Copy `DEMO LINK` to the PR description - -> To update you PR repeat steps 7-11 +# Kickstarter landing page +- [DEMO LINK](https://yevheniia-biliaieva.github.io/Kickstarter/) diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/header/header-bg.png b/src/images/header/header-bg.png new file mode 100644 index 000000000..4b05dd50f Binary files /dev/null and b/src/images/header/header-bg.png differ diff --git a/src/images/icons/circinus.svg b/src/images/icons/circinus.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icons/circinus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..fbeee204a --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram-icon.svg b/src/images/icons/instagram-icon.svg new file mode 100644 index 000000000..9c7b45248 --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/kickstarter-favicon.svg b/src/images/icons/kickstarter-favicon.svg new file mode 100644 index 000000000..4f250adf7 --- /dev/null +++ b/src/images/icons/kickstarter-favicon.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/src/images/icons/kickstarter-logo.svg b/src/images/icons/kickstarter-logo.svg new file mode 100644 index 000000000..9801c53e5 --- /dev/null +++ b/src/images/icons/kickstarter-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/quotation.svg b/src/images/icons/quotation.svg new file mode 100644 index 000000000..2cd173184 --- /dev/null +++ b/src/images/icons/quotation.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/slider-arrow-left.svg b/src/images/icons/slider-arrow-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/icons/slider-arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/slider-arrow-right.svg b/src/images/icons/slider-arrow-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icons/slider-arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/speaker.svg b/src/images/icons/speaker.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icons/speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/sun.svg b/src/images/icons/sun.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icons/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/top-arrow.svg b/src/images/icons/top-arrow.svg new file mode 100644 index 000000000..e1399f1f8 --- /dev/null +++ b/src/images/icons/top-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter-icon.svg b/src/images/icons/twitter-icon.svg new file mode 100644 index 000000000..b969568ed --- /dev/null +++ b/src/images/icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wifi.svg b/src/images/icons/wifi.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icons/wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/card-img-1.jpg b/src/images/main/card-img-1.jpg new file mode 100644 index 000000000..c8bf27e5a Binary files /dev/null and b/src/images/main/card-img-1.jpg differ diff --git a/src/images/main/card-img-2.jpg b/src/images/main/card-img-2.jpg new file mode 100644 index 000000000..6fe9ddab3 Binary files /dev/null and b/src/images/main/card-img-2.jpg differ diff --git a/src/images/main/features-img.png b/src/images/main/features-img.png new file mode 100644 index 000000000..16071cfef Binary files /dev/null and b/src/images/main/features-img.png differ diff --git a/src/images/main/main-bg.jpg b/src/images/main/main-bg.jpg new file mode 100644 index 000000000..32be892d8 Binary files /dev/null and b/src/images/main/main-bg.jpg differ diff --git a/src/images/review-people/person-1.jpg b/src/images/review-people/person-1.jpg new file mode 100644 index 000000000..48ed6cfc3 Binary files /dev/null and b/src/images/review-people/person-1.jpg differ diff --git a/src/images/review-people/person-2.jpg b/src/images/review-people/person-2.jpg new file mode 100644 index 000000000..db9e7f30a Binary files /dev/null and b/src/images/review-people/person-2.jpg differ diff --git a/src/images/review-people/person-3.jpg b/src/images/review-people/person-3.jpg new file mode 100644 index 000000000..1f8c451b2 Binary files /dev/null and b/src/images/review-people/person-3.jpg differ diff --git a/src/index.html b/src/index.html index 8019b83ec..0f9b13838 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,589 @@ - + - Title + + + + Kickstarter + - -

Hello Mate Academy

+ + + + + + +
+
+
+
+ + +
+ circinus +

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. +

+
+ +
+ speaker +

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. +

+
+ +
+ wi-fi +

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. +

+
+ +
+ sun +

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. +

+
+
+
+
+ +
+ speaker +
+ +
+
+
+
+

DESIGNED FOR THE FUTURE

+ # +
+

+ 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 + +
+
+ +
+

Luna Eye

+ # + +
+

+ 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.” +

+ + person + +

Garrett Martin

+

+ Creative Director +

+
+ +
+

+ “I didn’t expect the room to fill so evenly with sound. The + balance is crystal clear — highs, mids, and lows, all where + they should be. It’s the kind of experience you usually only + get from big studio gear.” +

+ + person + +

Daniel Novak

+

+ Music Producer +

+
+ +
+

+ “The design feels timeless. Sleek, minimal, but with real + weight and quality in your hands. It doesn’t just play music, + it feels like a part of my workspace — as natural as my laptop + or phone.” +

+ + person + +

Sophia Lee

+

+ Product Designer +

+
+
+
+
+
+ +
+
+

FEATURES

+
+ +
+
+
+
+
+
+

Sound & Music

+
    +
  • Feel-in-chest Base Power
    • +
  • + 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
    • +
  • + Smart Multiroom System Set Up +
    • +
  • + Party Mode with 6.0 Units and above +
    • +
  • + Powerful MESHNET Multi Speaker Network +
    • +
+
+ +
+

App Features

+
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • + Color Wheel & Saturation Change +
    • +
+
+
+ +
+
+ + +
+ +
+ 01 + / + 03 +
+
+
+ +
+ speaker +
+
+
+
+
+ +
+
+
+

DO YOU HAVE ANY QUESTIONS?

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

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

+
+
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..e8bd15543 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,171 @@ 'use strict'; + +// #region menu +const body = document.querySelector('.page__body'); +const sideMenu = document.querySelector('.page__menu'); +const menuBtn = document.querySelectorAll('.button--menu'); +const menuLinks = document.querySelectorAll('.page__menu .nav__link'); + +function toggleMenu(forceState) { + const isActive = + forceState !== undefined + ? forceState + : !sideMenu.classList.contains('page__menu--is-active'); + + sideMenu.classList.toggle('page__menu--is-active', isActive); + body.classList.toggle('page__body--no-scroll', isActive); + + menuBtn.forEach((btn) => { + btn.classList.toggle('button--menu--is-active', isActive); + }); +} + +menuBtn.forEach((btn) => { + btn.addEventListener('click', () => toggleMenu()); +}); + +menuLinks.forEach((link) => { + link.addEventListener('click', () => toggleMenu(false)); +}); + +// #endregion + +// #region reviews slider +const slider = document.querySelector('.reviews__slider'); +const slides = document.querySelectorAll('.review'); +const dotsContainer = document.createElement('div'); + +dotsContainer.classList.add('reviews__dots'); +slider.parentNode.appendChild(dotsContainer); + +slides.forEach((_, i) => { + const dot = document.createElement('button'); + + dot.addEventListener('click', () => { + slider.scrollTo({ + left: i * slider.offsetWidth, + behavior: 'smooth', + }); + setActiveDot(i); + }); + + dotsContainer.appendChild(dot); +}); + +const dots = dotsContainer.querySelectorAll('button'); + +const setActiveDot = (index) => { + dots.forEach((d) => d.classList.remove('active')); + + if (dots[index]) { + dots[index].classList.add('active'); + } +}; + +slider.addEventListener('scroll', () => { + const index = Math.round(slider.scrollLeft / slider.offsetWidth); + + setActiveDot(index); +}); + +setActiveDot(0); +// #endregion + +// #region features slider +const featuresTrack = document.querySelector('.features__track'); + +if (featuresTrack) { + const featureSlides = Array.from(featuresTrack.querySelectorAll('.feature')); + const btnPrev = document.querySelector('.features__arrow--left'); + const btnNext = document.querySelector('.features__arrow--right'); + const curEl = document.querySelector('.features__current'); + const totalEl = document.querySelector('.features__total'); + + let featureIndex = 0; + const featureTotal = featureSlides.length; + + if (totalEl) { + totalEl.textContent = String(featureTotal).padStart(2, '0'); + } + + const updateFeatureCounter = () => { + if (curEl) { + curEl.textContent = String(featureIndex + 1).padStart(2, '0'); + } + }; + + const getSlideLeft = (i) => { + const trackRect = featuresTrack.getBoundingClientRect(); + const slideRect = featureSlides[i].getBoundingClientRect(); + + return slideRect.left - trackRect.left + featuresTrack.scrollLeft; + }; + + const goToFeature = (i) => { + if (featureTotal === 0) { + return; + } + + let targetIndex = i; + + if (targetIndex < 0) { + targetIndex = featureTotal - 1; + } + + if (targetIndex >= featureTotal) { + targetIndex = 0; + } + + featureIndex = targetIndex; + + const left = getSlideLeft(targetIndex); + + featuresTrack.scrollTo({ + left, + behavior: 'smooth', + }); + }; + + btnNext?.addEventListener('click', () => goToFeature(featureIndex + 1)); + btnPrev?.addEventListener('click', () => goToFeature(featureIndex - 1)); + + let ticking = false; + + featuresTrack.addEventListener( + 'scroll', + () => { + if (ticking) { + return; + } + ticking = true; + + /* eslint-env browser */ + requestAnimationFrame(() => { + const x = featuresTrack.scrollLeft; + let nearest = 0; + let best = Infinity; + + for (let i = 0; i < featureTotal; i++) { + const d = Math.abs(getSlideLeft(i) - x); + + if (d < best) { + best = d; + nearest = i; + } + } + + if (nearest !== featureIndex) { + featureIndex = nearest; + updateFeatureCounter(); + } + + ticking = false; + }); + }, + { passive: true }, + ); + + window.addEventListener('resize', () => goToFeature(featureIndex)); + updateFeatureCounter(); +} +// #endregion diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- 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 index 3280c3fe1..1ef8ed7ba 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ +@import 'utils/normalize'; @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; +@import 'utils/typography'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..934da3485 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,92 @@ +.about-us { + &__wrapper { + display: flex; + flex-direction: column; + gap: 116px; + } +} + +.card { + @include page-grid; + + grid-template-rows: auto 1fr; + + &__img { + grid-column: 1 / -1; + + width: 100%; + height: 210px; + margin-bottom: 20px; + + object-fit: cover; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / 3; + height: 415px; + margin: 0; + } + + @include on-desktop { + grid-column: 1 / 7; + height: 388px; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 30px; + + @include on-tablet { + grid-column: 5 / -1; + gap: 60px; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__text { + font-size: 16px; + } + + &__button { + align-items: flex-start; + + @include on-tablet { + grid-column: 5 / -1; + } + } +} + +.card--right { + @include on-tablet { + direction: rtl; + justify-items: flex-end; + + .card__content { + align-items: flex-end; + text-align: end; + } + + .card__button { + align-items: flex-end; + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..19eaccb98 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,72 @@ +.benefits { + &__wrapper { + @include page-grid; + + scroll-behavior: smooth; + scroll-snap-type: y mandatory; + + overflow-y: scroll; + gap: 40px; + + height: 254px; + + @include on-tablet { + overflow-y: visible; + row-gap: 65px; + height: auto; + } + + @include on-desktop { + row-gap: 90px; + } + + &::-webkit-scrollbar { + display: none; + } + } +} + +.benefit { + scroll-snap-align: start; + + display: flex; + grid-column: 1 / -1; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + height: 254px; + + text-align: center; + + @include on-tablet { + grid-column: span 4; + height: auto; + } + + @include on-desktop { + grid-column: span 3; + } + .benefit__icon { + width: 50px; + height: 40px; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + width: 70px; + height: 50px; + margin-bottom: 30px; + } + } + .benefit__title { + margin-bottom: 20px; + + @include on-tablet { + height: 56px; + } + } +} diff --git a/src/styles/blocks/buttons.scss b/src/styles/blocks/buttons.scss new file mode 100644 index 000000000..c4d8e34c1 --- /dev/null +++ b/src/styles/blocks/buttons.scss @@ -0,0 +1,152 @@ +.button { + cursor: pointer; + + height: 48px; + + font-size: 12px; + font-weight: 500; + text-align: center; + text-transform: uppercase; + + &--primary { + padding: 16px 35px; + color: #fff; + background-color: $light-btn-bc; + + @include effects; + + &:hover { + background-color: $light-btn-hover; + } + + &--dark { + background-color: $dark-btn-bc; + &:hover { + background-color: $dark-bnt-hover; + } + } + } + + &--secondary { + display: flex; + flex-direction: column; + gap: 5px; + + font-size: 12px; + font-weight: 700; + color: $accent-color; + text-transform: uppercase; + + &::after { + content: ''; + + display: block; + + width: 53px; + height: 1px; + + background-color: currentColor; + + @include effects; + } + + &:hover { + &::after { + width: 100%; + } + } + } +} + +.button--menu { + cursor: pointer; + + position: relative; + + width: 24px; + height: 24px; + margin: 0; + padding: 0; + border: none; + + span { + @include effects; + + position: absolute; + right: 3px; + left: 3px; + + width: 18px; + height: 2px; + + background-color: $accent-text-color; + } + + span:nth-child(1) { + top: 6px; + } + span:nth-child(2) { + top: 11px; + } + span:nth-child(3) { + top: 16px; + } + + /* active */ + &--is-active span:nth-child(1) { + top: 11px; + left: 3px; + transform: rotate(45deg); + background-color: $accent-text-color; + } + &--is-active span:nth-child(2) { + display: none; + } + &--is-active span:nth-child(3) { + top: 11px; + left: 3px; + transform: rotate(-45deg); + background-color: $accent-text-color; + } + + /* hover */ + &:hover span { + background-color: $dark-bnt-hover; + } + &:hover span:nth-child(1) { + transform: translateX(-2px); + } + &:hover span:nth-child(2) { + transform: translateX(2px); + } + &:hover span:nth-child(3) { + transform: translateX(-2px); + } + + /* active + hover */ + &--is-active:hover span:nth-child(1) { + transform: rotate(45deg) scale(1.2); + } + &--is-active:hover span:nth-child(3) { + transform: rotate(-45deg) scale(1.2); + } + + @include on-desktop { + display: none; + } +} + +.button-top { + cursor: pointer; + + width: 50px; + height: 50px; + padding: 15px; + + color: $accent-text-color; + + background-color: currentColor; + + -webkit-mask: url(../images/icons/top-arrow.svg) center / contain no-repeat; + mask: url(../images/icons/top-arrow.svg) center / contain no-repeat; +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..cbd24c439 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,13 @@ +.container { + padding-inline: $page-padding-mobile; + + @include on-tablet { + padding-inline: $page-padding-tablet; + } + + @include on-desktop { + max-width: $max-content-width; + margin: 0 auto; + padding-inline: $page-padding-desktop; + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..810b4ca3f --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,201 @@ +.features { + position: relative; + + &__title { + margin-bottom: 32px; + } + + &__bc { + padding-top: 30px; + padding-bottom: 175px; + background-color: #d6ecec; + + @include on-tablet { + padding-top: 60px; + padding-bottom: 123px; + } + + @include on-desktop { + padding-block: 60px; + } + } + + &__wrapper { + @include page-grid; + + @include on-desktop { + grid-template-rows: auto 1fr; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 50px; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 1 / 3; + align-items: flex-start; + } + + @include on-desktop { + grid-column: 2 / -4; + } + } + + &__track { + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: 40px; + + &::-webkit-scrollbar { + display: none; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 56px; + } + } + + &__bg { + position: absolute; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; + grid-column: 1 / -1; + + width: 100vw; + height: 175px; + + @include on-tablet { + right: 0; + left: auto; + width: 435px; + height: 226px; + } + + @include on-desktop { + width: 582px; + height: 302px; + } + + img { + width: 100%; + max-width: none; + height: 100%; + + object-fit: cover; + object-position: top; + } + } + + // slider + + &__controls { + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + justify-content: center; + + @include on-desktop { + display: none; + } + } + + &__arrow { + cursor: pointer; + + width: 48px; + height: 14px; + + color: $accent-text-color; + + background-color: currentColor; + + @include effects; + + &:hover { + color: $dark-bnt-hover; + } + } + + &__arrow--left { + -webkit-mask: url(../images/icons/slider-arrow-left.svg) center / contain + no-repeat; + mask: url(../images/icons/slider-arrow-left.svg) center / contain no-repeat; + } + + &__arrow--right { + -webkit-mask: url(../images/icons/slider-arrow-right.svg) center / contain + no-repeat; + mask: url(../images/icons/slider-arrow-right.svg) center / contain no-repeat; + } + + &__counter { + color: $accent-text-color; + } + + &__current { + font-size: 16px; + font-weight: 400; + } + + &__total, + &__slash { + font-size: 11px; + font-weight: 400; + color: $accent-color; + } +} + +.feature { + scroll-snap-align: start; + + display: flex; + flex: 0 0 100%; + flex-direction: column; + gap: 20px; + align-items: flex-start; + + &__title { + color: #0c797a; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + justify-content: space-between; + + color: $accent-text-color; + } + + &__item { + display: flex; + gap: 10px; + align-items: center; + + font-size: 14px; + line-height: 21px; + + &::before { + content: ''; + + width: 6px; + height: 6px; + border-radius: 50%; + + background-color: currentColor; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..5ddf65487 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,50 @@ +.footer { + padding-bottom: 20px; + + &__wrapper { + position: relative; + + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + @include on-tablet { + gap: 60px; + } + } + + &__button { + position: absolute; + top: 0; + right: 0; + display: none; + + @include effects; + + &:hover { + transform: scale(1.02); + } + + @include on-tablet { + display: block; + } + } + + &__logo { + display: none; + + @include on-tablet { + display: block; + } + } + + &__socials { + display: flex; + gap: 40px; + } + + &__info { + text-align: center; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..9f2398a88 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,86 @@ +.header { + position: relative; + + &__top-bar { + margin-bottom: 285px; + + @include on-tablet { + gap: 30px; + margin-bottom: 100px; + padding-block: 30px; + } + + @include on-desktop { + gap: 47px; + margin-bottom: 60px; + } + } + + &__content { + @include page-grid; + + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__bg { + position: absolute; + z-index: -1; + top: 76px; + right: 0; + left: 0; + + overflow: hidden; + + width: 100%; + height: 245px; + + @include on-tablet { + position: static; + + grid-column: 4 / -1; + grid-row: 1 / 3; + align-self: flex-end; + + width: 100%; + height: 317px; + } + + @include on-desktop { + grid-column: 5 / -1; + height: 464px; + } + } + + &__img { + max-width: none; + height: 100%; + object-fit: cover; + } + + &__title { + grid-column: 1 / -1; + grid-row: 1 / 2; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 30px; + } + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..b83e75c1e --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,34 @@ +.icon { + cursor: pointer; + + width: 24px; + height: 24px; + + color: $main-text-color; + + background-color: currentColor; + + @include effects; + + &:hover { + color: $accent-color; + } + + &--facebook { + -webkit-mask: url(../images/icons/facebook-icon.svg) center / contain + no-repeat; + mask: url(../images/icons/facebook-icon.svg) center / contain no-repeat; + } + + &--twitter { + -webkit-mask: url(../images/icons/twitter-icon.svg) center / contain + no-repeat; + mask: url(../images/icons/twitter-icon.svg) center / contain no-repeat; + } + + &--instagram { + -webkit-mask: url(../images/icons/instagram-icon.svg) center / contain + no-repeat; + mask: url(../images/icons/instagram-icon.svg) center / contain no-repeat; + } +} diff --git a/src/styles/blocks/meet-luna.scss b/src/styles/blocks/meet-luna.scss new file mode 100644 index 000000000..b95a001cf --- /dev/null +++ b/src/styles/blocks/meet-luna.scss @@ -0,0 +1,21 @@ +.meet-luna { + background-color: #f9f9f9; + + @include page-grid; + + &__bg { + grid-column: 1 / -1; + width: 100%; + min-height: 195px; + + @include on-tablet { + grid-column: 1 / -1; + min-height: 430px; + margin: 0; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..a8197eda2 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,50 @@ +.menu { + &__wrapper { + position: relative; + + display: flex; + flex-direction: column; + justify-content: space-between; + + height: 100vh; + min-height: 100%; + padding-bottom: 30px; + + @include on-tablet { + justify-content: flex-start; + } + } + + &__buttons { + display: flex; + gap: 20px; + + @include on-tablet { + display: none; + } + } + + &__specs { + text-transform: uppercase; + } + + &__button { + @include on-tablet { + display: none; + } + } + + &__top-bar { + margin-bottom: 30px; + } + + &__nav { + margin-bottom: 50px; + + .nav__list { + flex-direction: column; + gap: 25px; + align-items: flex-start; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..dd377ce2f --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,16 @@ +.nav { + .nav__list { + display: flex; + } + + &__link { + color: $accent-text-color; + text-transform: uppercase; + + @include effects; + + &:hover { + color: $dark-bnt-hover; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..158a4c3ed --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,93 @@ +.page { + scroll-behavior: smooth; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + + &__body { + color: $main-text-color; + background-color: $page-bc; + + &--no-scroll { + overflow: hidden; + } + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + bottom: 0; + left: 0; + + overflow: hidden; + display: none; + + width: 100%; + min-height: 100vh; + + opacity: 0; + background-color: $page-bc; + + &--is-active { + pointer-events: all; + z-index: 1000; + display: block; + opacity: 1; + } + } + + &__nav { + display: none; + + .nav__list { + gap: 84px; + align-items: center; + justify-content: center; + } + + @include on-desktop { + display: block; + grid-column: 1 / -1; + } + } + + &__main { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } +} + +.logo { + height: 26px; + + @include effects; + + &:hover { + transform: scale(1.02); + } +} + +.main { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..36a8bee34 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,68 @@ +.questions { + &__wrapper { + @include page-grid; + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 27px; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__form { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 20px; + align-items: flex-start; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__field { + width: 100%; + padding: 12px 20px; + border: 1px solid #828282; + + @include effects; + + &:hover { + border-color: $dark-bnt-hover; + } + + &:focus { + border-color: $accent-color; + } + + &--text { + resize: none; + height: 104px; + + @include on-tablet { + height: 201px; + } + + @include on-desktop { + height: 128px; + } + } + } + + &__button { + margin-top: 10px; + } +} diff --git a/src/styles/blocks/reviews.scss b/src/styles/blocks/reviews.scss new file mode 100644 index 000000000..eb8ef75a4 --- /dev/null +++ b/src/styles/blocks/reviews.scss @@ -0,0 +1,119 @@ +.reviews { + &__wrapper { + @include page-grid; + + padding-top: 50px; + background-image: url(../images/icons/quotation.svg); + background-repeat: no-repeat; + background-position: top center; + + @include on-tablet { + padding-top: 60px; + } + + @include on-desktop { + padding-top: 42px; + } + } + + &__slider { + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + grid-column: 1 / -1; + gap: 40px; + + margin-bottom: 10px; + + @include on-desktop { + grid-column: 3 / -3; + } + + &::-webkit-scrollbar { + display: none; + } + } + + &__dots { + display: flex; + grid-column: 1 / -1; + gap: 8px; + justify-content: center; + + margin-top: 10px; + + button { + @include effects; + + cursor: pointer; + + width: 10px; + height: 10px; + border: none; + border-radius: 50%; + + background-color: $dark-btn-bc; + + &:hover { + background-color: $dark-bnt-hover; + } + } + + button.active { + background: $accent-color; + } + } +} + +.review { + scroll-snap-align: center; + + display: flex; + flex: 0 0 100%; + flex-direction: column; + align-items: center; + + .review__text { + margin-bottom: 30px; + + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: $accent-text-color; + text-align: center; + + @include on-tablet { + margin-bottom: 40px; + font-size: 24px; + line-height: 36px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + .review__photo { + width: 62px; + height: 62px; + margin-bottom: 10px; + border-radius: 50%; + + object-fit: cover; + + @include on-tablet { + margin-bottom: 20px; + } + } + + .review__person-name { + margin-bottom: 5px; + + font-size: 16px; + font-weight: 700; + color: $accent-text-color; + text-align: center; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..109c8b770 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,42 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 22px; + + &__logo { + margin-right: 0; + } + + &__buttons { + display: none; + + margin-left: auto; + + font-size: 14px; + font-weight: 300; + color: $icons-color; + text-transform: uppercase; + + @include on-tablet { + display: flex; + gap: 20px; + align-items: center; + justify-content: space-between; + } + } + + &__specs { + @include effects; + &:hover { + color: $dark-bnt-hover; + } + } + + &__lang-change { + display: flex; + gap: 3px; + align-items: center; + justify-content: space-between; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..a3304dca5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/header'; +@import './blocks/menu'; +@import './blocks/top-bar'; +@import './blocks/icons'; +@import './blocks/buttons'; +@import './blocks/benefits'; +@import './blocks/nav'; +@import './blocks/meet-luna'; +@import './blocks/about-us'; +@import './blocks/reviews'; +@import './blocks/features'; +@import './blocks/questions'; +@import './blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- 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 80c79780d..c33658e20 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,33 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; } } + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin page-grid { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} + +@mixin effects { + transition-duration: $animation-duration; +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..ad5fef20b --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,237 @@ +/* === reset + normalize hybrid (2025) === */ +@layer reset { + /* Base */ + *, + *::before, + *::after { + box-sizing: border-box; + } + * { + margin: 0; + } + + html { + font-size: 16px; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + } + + body { + min-height: 100dvh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + } + + main { + display: block; + } + + /* Typography */ + h1, + h2, + h3, + h4, + h5, + h6 { + font: inherit; + } + p, + figure, + blockquote, + dl, + dd { + margin: 0; + } + + b, + strong { + font-weight: bolder; + } + i, + em { + font-style: italic; + } + small { + font-size: 80%; + } + + sub, + sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + + a { + display: inline-block; + + color: inherit; + text-decoration: none; + + background: transparent; + + -webkit-tap-highlight-color: transparent; + } + + a:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + ::selection { + color: #000; + background: #bcdcff; + } + + /* Lists */ + ul, + ol { + padding: 0; + list-style: none; + } + + /* Media */ + img, + picture, + video, + canvas, + svg { + display: block; + max-width: 100%; + height: auto; + } + + /* Tables */ + table { + border-spacing: 0; + border-collapse: collapse; + width: 100%; + } + th, + td { + padding: 0; + } + + /* Forms */ + button, + input, + select, + textarea { + margin: 0; + padding: 0; + border: 0; + + font: inherit; + color: inherit; + + background: transparent; + } + button, + [role='button'] { + cursor: pointer; + } + :disabled { + cursor: not-allowed; + } + + textarea { + resize: vertical; + } + textarea::placeholder, + input::placeholder { + opacity: 0.6; + } + + input, + textarea, + select { + border-radius: 0; + -webkit-appearance: none; + appearance: none; + } + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + -webkit-appearance: none; + } + [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + + fieldset, + legend { + margin: 0; + padding: 0; + border: 0; + } + + label { + cursor: pointer; + } + + *:focus-visible { + outline: transparent; + } + + /* Autofill fixes */ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px transparent inset; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: currentColor; + } + + /* Misc */ + hr { + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + [hidden], + template { + display: none; + } + + details { + display: block; + } + summary { + cursor: pointer; + list-style: none; + } + summary::-webkit-details-marker { + display: none; + } + + .visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip: rect(0 0 0 0); + } +} diff --git a/src/styles/utils/_typography.scss b/src/styles/utils/_typography.scss new file mode 100644 index 000000000..ade7b9751 --- /dev/null +++ b/src/styles/utils/_typography.scss @@ -0,0 +1,73 @@ +h1 { + font-size: 40px; + line-height: 52px; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-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-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-desktop { + font-size: 34px; + line-height: 42px; + } +} + +h4 { + font-size: 22px; + line-height: 28px; +} + +h5 { + font-size: 16px; + line-height: 22px; +} + +.title { + font-weight: 700; + color: $accent-text-color; + text-transform: uppercase; +} + +// перенести в page + +.secondary-text { + font-size: 14px; + line-height: 21px; +} + +.thirdary-text { + font-size: 14px; + line-height: 21px; + text-transform: uppercase; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..93accfff8 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,19 @@ -$c-gray: #eee; +$tablet-width: 640px; +$desktop-width: 1280px; +$max-content-width: 1440px; +$page-bc: #f7f7f7; +$accent-color: #0db2b3; +$accent-text-color: #333; +$main-text-color: #7c7c7c; +$icons-color: #4f4f4f; +$dark-btn-bc: #333; +$dark-bnt-hover: #131313; +$dark-btn-disable: #d0d0d0; +$light-btn-bc: #39bebf; +$light-btn-hover: #0c797a; +$light-bnt-disable: #cfeff0; +$no-active-color: #bdbdbd; +$page-padding-mobile: 30px; +$page-padding-tablet: 34px; +$page-padding-desktop: 123px; +$animation-duration: 0.3s;