diff --git a/README.md b/README.md index a95e97afe..d40b9ac47 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://RafaelGratton.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/images/1.png b/src/images/1.png new file mode 100644 index 000000000..22e4c323e Binary files /dev/null and b/src/images/1.png differ diff --git a/src/images/2.png b/src/images/2.png new file mode 100644 index 000000000..b2dd67ac3 Binary files /dev/null and b/src/images/2.png differ diff --git a/src/images/3.png b/src/images/3.png new file mode 100644 index 000000000..8393a8ff6 Binary files /dev/null and b/src/images/3.png differ diff --git a/src/images/4.png b/src/images/4.png new file mode 100644 index 000000000..6b95e0825 Binary files /dev/null and b/src/images/4.png differ diff --git a/src/images/5.png b/src/images/5.png new file mode 100644 index 000000000..50df50e27 Binary files /dev/null and b/src/images/5.png differ diff --git a/src/images/avatar.png b/src/images/avatar.png new file mode 100644 index 000000000..5fa1d98aa Binary files /dev/null and b/src/images/avatar.png differ diff --git a/src/images/background.svg b/src/images/background.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/background.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/1-blue.svg b/src/images/icon/1-blue.svg new file mode 100644 index 000000000..29b7759d0 --- /dev/null +++ b/src/images/icon/1-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/1.svg b/src/images/icon/1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icon/1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/2-blue.svg b/src/images/icon/2-blue.svg new file mode 100644 index 000000000..10877028e --- /dev/null +++ b/src/images/icon/2-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/2.svg b/src/images/icon/2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icon/2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/3-blue.svg b/src/images/icon/3-blue.svg new file mode 100644 index 000000000..9a0e1d19e --- /dev/null +++ b/src/images/icon/3-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/3.svg b/src/images/icon/3.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icon/3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/4-blue.svg b/src/images/icon/4-blue.svg new file mode 100644 index 000000000..0ca2dc5b2 --- /dev/null +++ b/src/images/icon/4-blue.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/icon/4.svg b/src/images/icon/4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon/4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/arrow-up-blue.svg b/src/images/icon/arrow-up-blue.svg new file mode 100644 index 000000000..ba4f0cd59 --- /dev/null +++ b/src/images/icon/arrow-up-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/arrow-up.svg b/src/images/icon/arrow-up.svg new file mode 100644 index 000000000..ed07452a1 --- /dev/null +++ b/src/images/icon/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/close-blue.svg b/src/images/icon/close-blue.svg new file mode 100644 index 000000000..0dbb0b946 --- /dev/null +++ b/src/images/icon/close-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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-blue.svg b/src/images/icon/facebook-blue.svg new file mode 100644 index 000000000..0265ce2e0 --- /dev/null +++ b/src/images/icon/facebook-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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/favicon-big.svg b/src/images/icon/favicon-big.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icon/favicon-big.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/favicon-small.svg b/src/images/icon/favicon-small.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/icon/favicon-small.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/favicon.svg b/src/images/icon/favicon.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icon/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/insta-blue.svg b/src/images/icon/insta-blue.svg new file mode 100644 index 000000000..8e93183c4 --- /dev/null +++ b/src/images/icon/insta-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/insta.svg b/src/images/icon/insta.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/menu-blue.svg b/src/images/icon/menu-blue.svg new file mode 100644 index 000000000..cfa2d1e9c --- /dev/null +++ b/src/images/icon/menu-blue.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/images/icon/menu.svg b/src/images/icon/menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/icon/menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/vector-hovcer-left.svg b/src/images/icon/vector-hovcer-left.svg new file mode 100644 index 000000000..ecd550f93 --- /dev/null +++ b/src/images/icon/vector-hovcer-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/vector-hover-left.svg b/src/images/icon/vector-hover-left.svg new file mode 100644 index 000000000..163b186d2 --- /dev/null +++ b/src/images/icon/vector-hover-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon/vector-hover.svg b/src/images/icon/vector-hover.svg new file mode 100644 index 000000000..037f13419 --- /dev/null +++ b/src/images/icon/vector-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/vector-left.svg b/src/images/icon/vector-left.svg new file mode 100644 index 000000000..b8ca9e86f --- /dev/null +++ b/src/images/icon/vector-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon/vector-off-left.svg b/src/images/icon/vector-off-left.svg new file mode 100644 index 000000000..1917eecf5 --- /dev/null +++ b/src/images/icon/vector-off-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon/vector-off.svg b/src/images/icon/vector-off.svg new file mode 100644 index 000000000..88d236543 --- /dev/null +++ b/src/images/icon/vector-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon/vector.svg b/src/images/icon/vector.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icon/vector.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/x-blue.svg b/src/images/icon/x-blue.svg new file mode 100644 index 000000000..d485925b9 --- /dev/null +++ b/src/images/icon/x-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icon/x.svg b/src/images/icon/x.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-Burger-menu.png b/src/images/icons/Icon-Burger-menu.png new file mode 100644 index 000000000..5c194c7aa Binary files /dev/null and b/src/images/icons/Icon-Burger-menu.png differ diff --git a/src/images/icons/brightness.svg b/src/images/icons/brightness.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/icons/brightness.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/close.png b/src/images/icons/close.png new file mode 100644 index 000000000..5d7801c11 Binary files /dev/null and b/src/images/icons/close.png differ diff --git a/src/images/icons/design.svg b/src/images/icons/design.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/icons/design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon2.png b/src/images/icons/favicon2.png new file mode 100644 index 000000000..90e960f76 Binary files /dev/null and b/src/images/icons/favicon2.png differ diff --git a/src/images/icons/favicon2.svg b/src/images/icons/favicon2.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icons/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/next.png b/src/images/icons/next.png new file mode 100644 index 000000000..a3524255a Binary files /dev/null and b/src/images/icons/next.png differ diff --git a/src/images/icons/prev.png b/src/images/icons/prev.png new file mode 100644 index 000000000..f59d92fe0 Binary files /dev/null and b/src/images/icons/prev.png differ diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/up.png b/src/images/icons/up.png new file mode 100644 index 000000000..2e9d4db7e Binary files /dev/null and b/src/images/icons/up.png differ diff --git a/src/images/icons/volume.svg b/src/images/icons/volume.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/icons/volume.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wi-fi.svg b/src/images/icons/wi-fi.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/icons/wi-fi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/img/avatar.png b/src/images/img/avatar.png new file mode 100644 index 000000000..6bdae6e83 Binary files /dev/null and b/src/images/img/avatar.png differ diff --git a/src/images/img/draws-mob.png b/src/images/img/draws-mob.png new file mode 100644 index 000000000..b89432db4 Binary files /dev/null and b/src/images/img/draws-mob.png differ diff --git a/src/images/img/draws-tab.png b/src/images/img/draws-tab.png new file mode 100644 index 000000000..154474c9b Binary files /dev/null and b/src/images/img/draws-tab.png differ diff --git a/src/images/img/draws.png b/src/images/img/draws.png new file mode 100644 index 000000000..366b39661 Binary files /dev/null and b/src/images/img/draws.png differ diff --git a/src/images/img/meet_luna-mob.png b/src/images/img/meet_luna-mob.png new file mode 100644 index 000000000..13c04427a Binary files /dev/null and b/src/images/img/meet_luna-mob.png differ diff --git a/src/images/img/meet_luna-tab.png b/src/images/img/meet_luna-tab.png new file mode 100644 index 000000000..c992603cf Binary files /dev/null and b/src/images/img/meet_luna-tab.png differ diff --git a/src/images/img/meet_luna.png b/src/images/img/meet_luna.png new file mode 100644 index 000000000..0e76ce664 Binary files /dev/null and b/src/images/img/meet_luna.png differ diff --git a/src/images/img/quote.png b/src/images/img/quote.png new file mode 100644 index 000000000..03986a7fb Binary files /dev/null and b/src/images/img/quote.png differ diff --git a/src/images/img/speaker_2-mob.png b/src/images/img/speaker_2-mob.png new file mode 100644 index 000000000..b5b2d9550 Binary files /dev/null and b/src/images/img/speaker_2-mob.png differ diff --git a/src/images/img/speaker_2-tab.png b/src/images/img/speaker_2-tab.png new file mode 100644 index 000000000..63942e9e4 Binary files /dev/null and b/src/images/img/speaker_2-tab.png differ diff --git a/src/images/img/speaker_2.png b/src/images/img/speaker_2.png new file mode 100644 index 000000000..65768e45c Binary files /dev/null and b/src/images/img/speaker_2.png differ diff --git a/src/images/img/speaker_3-mob.png b/src/images/img/speaker_3-mob.png new file mode 100644 index 000000000..fbd53c271 Binary files /dev/null and b/src/images/img/speaker_3-mob.png differ diff --git a/src/images/img/speaker_3-tab.png b/src/images/img/speaker_3-tab.png new file mode 100644 index 000000000..df35c2650 Binary files /dev/null and b/src/images/img/speaker_3-tab.png differ diff --git a/src/images/img/speaker_3.png b/src/images/img/speaker_3.png new file mode 100644 index 000000000..6c1e4be16 Binary files /dev/null and b/src/images/img/speaker_3.png differ diff --git a/src/images/img/speakers-mob.png b/src/images/img/speakers-mob.png new file mode 100644 index 000000000..fd0965b47 Binary files /dev/null and b/src/images/img/speakers-mob.png differ diff --git a/src/images/img/speakers-tab.png b/src/images/img/speakers-tab.png new file mode 100644 index 000000000..80fa1e6d9 Binary files /dev/null and b/src/images/img/speakers-tab.png differ diff --git a/src/images/img/speakers.png b/src/images/img/speakers.png new file mode 100644 index 000000000..8c0ade625 Binary files /dev/null and b/src/images/img/speakers.png differ diff --git a/src/images/img/test.svg b/src/images/img/test.svg new file mode 100644 index 000000000..685879166 --- /dev/null +++ b/src/images/img/test.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/logo-blue.svg b/src/images/logo-blue.svg new file mode 100644 index 000000000..8cbf4eecb --- /dev/null +++ b/src/images/logo-blue.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..9801c53e5 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/index.html b/src/index.html new file mode 100644 index 000000000..0c7ac956d --- /dev/null +++ b/src/index.html @@ -0,0 +1,640 @@ + + + + + + + + + Crazybaby + + + + +
+
+
+ +
+ + SPECS + + +
+
+ + + + / + + + +
+
+ + +
Buy
+ + + +
+
+
+ +
+
+ image +
+ +
+

+ 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. +
+
+
+
+ +
+
+ features +
+
+ +
+
+
DESIGNED FOR THE FUTURE
+
+ About us +
+
+ 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
+
+ About us +
+
+ 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 + +
+
+ +
+ +
+ +
+
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
+
    +
  • + 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 from Last Song Stopped +
    • +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ 01 + 02 + 03 + / + 03 +
+
+ Functions +
+
+
+ +
+
+
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..2977f5555 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,91 @@ 'use strict'; + +const languages = document.querySelectorAll('.header__link'); + +languages.forEach(language => { + language.addEventListener('click', (event) => { + event.preventDefault(); + + languages.forEach(l => l.classList.remove('header__link--active')); + + + language.classList.add('header__link--active'); + }); +}); + + +const sliders = document.querySelectorAll('.features__section'); +const next = document.querySelector('.swipper-nav__next'); +const prev = document.querySelector('.swipper-nav__prev'); +const currentPage = document.querySelector('.swipper-nav__current-page'); +let currentSlider = 0; + +function updateSlider() { + sliders.forEach(slider => { + slider.classList.remove('features__section--active', 'grid--2-5-tab', 'grid--1-5-mob'); + }); + + sliders[currentSlider].classList.add('features__section--active', 'grid--2-5-tab', 'grid--1-5-mob'); + currentPage.textContent = currentSlider + 1; +} + +next.addEventListener('click', (event) => { + event.preventDefault(); + + if (currentSlider < sliders.length - 1) { + currentSlider++; + updateSlider(); + } +}); + +prev.addEventListener('click', (event) => { + event.preventDefault(); + + if (currentSlider > 0) { + currentSlider--; + updateSlider(); + } +}); + +updateSlider(); + + +const openAside = document.querySelector('.header__burger'); +const closeAside = document.querySelector('.aside__close-button'); +const aside = document.querySelector('.aside'); +const page = document.querySelector('.page') +const menuItem = document.querySelectorAll('.aside__nav-item') + + +openAside.addEventListener('click', ()=>{ + aside.classList.add('aside--open'); + page.classList.add('page--no-scroll') +}) + +closeAside.addEventListener('click', ()=>{ + aside.classList.remove('aside--open'); + page.classList.remove('page--no-scroll') +}) + +menuItem.forEach(item =>{ + item.addEventListener('click', (event)=>{ + page.classList.remove('page--no-scroll'); + aside.classList.remove('aside--open'); + + }) +}) + +const elements = document.querySelectorAll('.animate'); + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate--show'); + observer.unobserve(entry.target); + } + }); +}, { + threshold: 0.5 +}); + +elements.forEach(el => observer.observe(el)); \ No newline at end of file diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 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/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..94ed16452 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,110 @@ h1 { @extend %h1; } + +%h1 { + font-size: 64px; + font-weight: bold; + line-height: 78px; + text-transform: uppercase; + + @include tablet { + font-size: 48px; + line-height: 62px; + } + + @include mobile { + font-size: 40px; + line-height: 52px; + } +} + +%h2 { + font-size: 56px; + font-weight: bold; + line-height: 70px; + text-transform: uppercase; + + @include tablet { + font-size: 36px; + line-height: 46px; + } + + @include mobile { + font-size: 30px; + line-height: 40px; + } +} + +%h3 { + font-size: 34px; + font-weight: bold; + line-height: 42px; + text-transform: uppercase; + + @include tablet { + font-size: 24px; + line-height: 30px; + } + + @include mobile { + font-size: 18px; + line-height: 22px; + } +} + +%h4 { + font-size: 22px; + font-weight: bold; + line-height: 28px; + text-transform: uppercase; +} + +%h5 { + font-size: 16px; + font-weight: bold; + line-height: 22px; +} + +%h6 { + font-size: 14px; + font-weight: bold; + line-height: 20px; + text-transform: uppercase; +} + +%button { + font-size: 12px; + font-weight: bold; + line-height: 14px; + text-transform: uppercase; +} + +%main-text { + font-size: 16px; + font-weight: normal; + line-height: 24px; +} + +%secondary-text { + font-size: 14px; + font-weight: normal; + line-height: 21px; +} + +%thirdary-text { + font-size: 14px; + font-weight: normal; + line-height: 21px; +} + +%quote { + font-size: 24px; + font-weight: bold; + line-height: 36px; + + @include mobile { + font-size: 18px; + line-height: 20px; + } +} diff --git a/src/styles/animations/animations.scss b/src/styles/animations/animations.scss new file mode 100644 index 000000000..011615498 --- /dev/null +++ b/src/styles/animations/animations.scss @@ -0,0 +1,53 @@ +@keyframes slide-in-left { + from { + transform: translateX(-40px); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-right { + from { + transform: translateX(40px); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes scale-in { + from { + transform: scale(0.5); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +.animate { + opacity: 0; + + &--show { + &[data-animate='slide-left'] { + animation: slide-in-left 1s ease forwards; + } + + &[data-animate='slide-right'] { + animation: slide-in-right 1s ease forwards; + } + + &[data-animate='scale'] { + animation: scale-in 1s ease-out forwards; + } + } +} diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..d0894a10f --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,175 @@ +.about-us { + position: relative; + + @include page-grid; + + gap: 20px; + + @include on-tablet { + grid-auto-rows: min-content; + gap: 30px; + min-height: 415px; + } + + @include on-desktop { + min-height: 388px; + } + + &__title { + @include font-main-title; + + grid-column: 1 / -1; + margin-bottom: 10px; + + @include on-tablet { + grid-column: 5 / -1; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + &--right { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + } + + &__info { + @include font-main-info; + + grid-column: 1 / -1; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + &--right { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + } + + &__link { + display: inline-block; + grid-column: 1 / -1; + max-width: max-content; + text-decoration: none; + + @include font-link; + + &::after { + content: ''; + + display: block; + + width: 53px; + height: 1px; + margin-top: 5px; + + background-color: $c-blue; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + &--right { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + } + + &__container { + overflow: hidden; + grid-column: 1 / -1; + aspect-ratio: 37 / 30; + width: 100%; + + @include on-tablet { + position: absolute; + left: -34px; + + grid-column: 1 / 5; + + aspect-ratio: 9 / 10; + width: calc(100% + 34px); + min-height: 415px; + max-height: 100%; + } + + @include on-desktop { + left: 0; + + grid-column: 1 / 7; + + aspect-ratio: 3 / 2; + width: 100%; + min-height: 388px; + } + + &--right { + @include on-tablet { + position: absolute; + right: -34px; // правая граница выходит за пределы + left: auto; + + grid-column: 5 / -1; + + width: calc(100% + 34px); // компенсируем ширину + min-height: 415px; + max-height: 100%; + } + + @include on-desktop { + right: auto; + left: auto; + + grid-column: 7 / -1; + + width: 100%; + min-height: 388px; + } + } + + &-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; // сдвиг фокуса + + @include hover(transform, scale(1.05)); + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..72f130db4 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,17 @@ +.button { + display: flex; + align-items: center; + justify-content: center; + + width: 100px; + height: 48px; + border: none; + + text-decoration: none; + + background-color: $c-default-black; + + @include font-button; + + @include hover(background-color, $c-black); +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..d77561a36 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,132 @@ +.features { + @include page-grid; + + gap: 65px; + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-desktop { + margin-top: 62px; + } + + &__icon { + cursor: auto; + width: 50px; + height: 40px; + transition: background-image 0.3s ease; + + &--design { + background-image: url(../images/icon/1.svg); + } + + &--speaker { + background-image: url(../images/icon/2.svg); + } + + &--multiroom { + background-image: url(../images/icon/3.svg); + } + + &--lighting { + background-image: url(../images/icon/4.svg); + } + } + + &__title { + margin-top: 20px; + transition: color 0.3s ease; + + @include font-h4; + + @include on-tablet { + height: 56px; + margin-top: 30px; + } + } + + &__info { + text-align: center; + + @include font-secondary; + } + + &-img { + margin: 0; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } + + @include hover(transform, scale(1.05)); + } + + &__container { + grid-column: 1 / -1; + width: 100%; + + @include on-desktop { + grid-column: 3 / -3; + } + + &-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + } + + &__block { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 20px; + align-items: center; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + } + } + + &:hover { + .features__title { + color: $c-blue; // цвет заголовка при наведении + transition: color 0.3s ease; + } + + .features__icon--design { + background-image: url(../images/icon/1-blue.svg); // путь к иконке при наведении + } + + .features__icon--speaker { + background-image: url(../images/icon/2-blue.svg); // путь к иконке при наведении + } + + .features__icon--multiroom { + background-image: url(../images/icon/3-blue.svg); // путь к иконке при наведении + } + + .features__icon--lighting { + background-image: url(../images/icon/4-blue.svg); // путь к иконке при наведении + } + } + } +} diff --git a/src/styles/blocks/feedback.scss b/src/styles/blocks/feedback.scss new file mode 100644 index 000000000..29e8d3fe2 --- /dev/null +++ b/src/styles/blocks/feedback.scss @@ -0,0 +1,89 @@ +.feedback { + @include page-grid; + + position: relative; + + &__background { + position: absolute; + z-index: 0; // фон под текстом + top: 0; + left: 50%; + transform: translateX(-50%); + + width: 208px; + height: 171px; + + background-image: url(../images/background.svg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + width: 233px; + height: 189px; + } + + @include on-desktop { + height: 192px; + } + } + + &__info { + position: relative; // нужно, чтобы z-index сработал + z-index: 1; // чтобы быть над фоном + + @include font-black; + + grid-column: 1 / -1; + margin: 42px 0 30px; + + @include on-tablet { + margin: 60px 0 40px; + } + + @include on-desktop { + grid-column: 3 / -3; + margin: 42px 0 30px; + } + } + + &__container { + overflow: hidden; + grid-column: 1 / -1; + place-self: center; + + width: 62px; + height: 62px; + border-radius: 50%; + + @include hover(transform, scale(1.2)); + + &-img { + width: 100%; + height: 100%; + object-fit: cover; // чтобы картинка заполнила круг без искажений + + @include hover(transform, scale(1.2)); + } + } + + &__name { + grid-column: 1 / -1; + + @include font-text-bold; + + margin-top: 10px; + + @include on-tablet { + margin-top: 20px; + } + } + + &__position { + grid-column: 1 / -1; + + @include font-secondary; + + margin-top: 5px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..788bcb7d4 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,38 @@ +.footer { + display: flex; + flex-direction: column; + gap: 60px; + justify-content: center; + + margin-block: 110px 20px; + + @include on-tablet { + margin-block: 140px 30px; + } + + @include on-desktop { + margin-block: 170px 30px; + } + + &__top-bar { + display: none; + + @include on-tablet { + display: flex; + justify-content: center; + } + } + + &__social { + display: flex; + gap: 40px; + justify-content: center; + } + + &__info { + color: $c-gray-white; + text-align: center; + + @include font-secondary; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..2722d2691 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,93 @@ +.form { + @include page-grid; + + gap: 27px; + + &__title { + @include font-main-title; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__container { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__blocks { + display: flex; + flex-direction: column; + gap: 30px; + } + + &__block { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__group { + display: grid; + } + + &__input { + @include font-text-enter; + + padding: 12px 20px; + border: 1px solid $c-light-gray; + transition: border 0.3s; + + &::placeholder { + @include font-info; + + color: $c-gray-white; + transition: all 0.3s; + } + + &:hover::placeholder { + color: $c-blue; + } + + &-textarea { + resize: none; + } + + &:hover { + border: 1px solid $c-blue; + } + + &:focus { + border: 1px solid $c-blue-middle; + outline: none; // УБИРАЕМ ЧЕРНУЮ РАМКУ + } + } + + &__button { + @include font-button-blue; + + height: 40px; + background-color: $c-blue; + + @include hover(background-color, $c-blue-middle); + + @include on-desktop { + width: 123px; + height: 48px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..5c1ecbe07 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,94 @@ +.header { + &__content { + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } + + @include on-tablet { + position: relative; + margin-top: 130px; + + // overflow: hidden; + } + + @include on-desktop { + margin-top: 173px; + } + + &-text { + @include page-grid; + + gap: 20px; + margin-top: 40px; + padding-inline: 30px; + + @include on-tablet { + gap: 30px; + padding: 0; + } + } + + &-title { + z-index: 1; + grid-column: 1 / -1; + margin: 0; + + @include font-h1; + + @include on-tablet { + grid-column: 1 / 5; + } + + &-br { + display: none; + + @include on-tablet { + display: block; + } + } + } + + &-info { + grid-column: 1 / -1; + + @include font-info; + + @include on-tablet { + grid-column: 1 / 4; + } + } + } + + &__container { + overflow: hidden; + aspect-ratio: 64 / 51; + width: 100%; + + @include on-tablet { + position: absolute; + right: 0; + bottom: 0; + + aspect-ratio: 4 / 3; + width: 63%; + max-height: 440px; + } + + @include on-desktop { + aspect-ratio: 16/ 9; + width: 67%; + max-height: 800px; + } + + &-image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; // сдвиг фокуса + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..f9de0cf1a --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,101 @@ +.icon { + /* стабильное масштабирование без рывков */ + // transform-origin: center; + will-change: transform; + cursor: pointer; + + display: block; + + background-repeat: no-repeat; + background-position: center; // центрирует логотип + background-size: contain; // заставляет изображение масштабироваться так, чтобы полностью поместиться в контейнер, сохраняя пропорции. + + transition: all 0.3s; + + // @include hover(transform, scale(1.2)); + + &--menu { + width: 32px; + height: 32px; + background-image: url(../images/icon/menu.svg); + + &:hover { + background-image: url(../images/icon/menu-blue.svg); + } + + @include on-desktop { + display: none; + } + } + + &--close { + width: 24px; + height: 24px; + background-image: url(../images/icon/close.svg); + + &:hover { + background-image: url(../images/icon/close-blue.svg); + } + } + + &__showcase { + width: 48px; + height: 14px; + } + + &--stop-left { + pointer-events: none; + background-image: url(../images/icon/vector-off-left.svg); + } + + &--right { + background-image: url(../images/icon/vector.svg); + + &:hover { + background-image: url(../images/icon/vector-hover.svg); + } + } + + &--left { + background-image: url(../images/icon/vector-left.svg); + + &:hover { + background-image: url(../images/icon/vector-hover-left.svg); + } + } + + &--stop-right { + pointer-events: none; + background-image: url(../images/icon/vector-off.svg); + } + + &__social--fb { + width: 24px; + height: 24px; + background-image: url(../images/icon/facebook.svg); + + &:hover { + background-image: url(../images/icon/facebook-blue.svg); + } + } + + &__social--twitter { + width: 24px; + height: 24px; + background-image: url(../images/icon/x.svg); + + &:hover { + background-image: url(../images/icon/x-blue.svg); + } + } + + &__social--ig { + width: 24px; + height: 24px; + background-image: url(../images/icon/insta.svg); + + &:hover { + background-image: url(../images/icon/insta-blue.svg); + } + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 000000000..e5545342d --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,42 @@ +.language { + &__toggle { + display: flex; + } + + &__radio { + display: none; // Полностью скрываем радиокнопку + } + + &__label { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + color: $c-light-gray; + + @include font-special; + } + + &__radio:checked + &__label { + font-weight: 400; + color: $c-default-black; + } + + &__separator { + display: flex; + align-items: center; + + padding-inline: 3px; + + font-weight: 550; + color: $c-default-black; + } + + &__aside { + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..ed8d63508 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,13 @@ +.main { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..458d95099 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,33 @@ +.menu { + height: 100%; + + &__container { + display: flex; + flex-direction: column; + min-height: 100%; + } + + &__content { + display: flex; + gap: 20px; + align-items: center; + margin-top: 50px; + + @include on-desktop { + gap: 47px; + } + } + + &__button { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + + width: calc(100% - 60px); // отнимает по 30px с каждой стороны + + @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..ef72ccce3 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,71 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 31px 0 0; + padding: 0; + + list-style: none; + + &--ds { + display: none; + + @include on-desktop { + display: flex; + flex-direction: row; + gap: 28px; + justify-content: center; + + margin-top: 170px; + } + } + } + + &__item { + display: flex; + } + + &__link { + @include font-special; + + font-weight: 400; + font-style: regular; + line-height: 20px; + color: $c-default-black; + text-decoration: none; + + transition: all 0.3s; + + @include text-grow-hover; // растягивание текста при наведении + + &--ds { + display: inline-block; + padding: 28px; + text-align: center; + + // предотвращает сдвиг соседних элементов при ховере + &::before { + content: attr( + data-text + ); // Вставляет текст из атрибута data-text в HTML. чтобы "скрыто" отрисовать текст с таким же содержимым. + + overflow: hidden; + display: block; + + height: 0; + + font-weight: 700; + text-align: center; + letter-spacing: 0.2em; + + visibility: hidden; + } + } + } + + &__group { + display: none; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..c06db045f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,74 @@ +.page { + scroll-behavior: smooth; /* чтоб навигация происходила плавно */ + + &:has(.page__menu:target) { + overflow: hidden; /* Когда меню открыто, скрывается прокрутка страницы. Чтобы фон не скроллился за меню. */ + } + + &__body { + position: relative; + margin: 0; + background-color: $c-background; + } + + &__menu { + pointer-events: none; // Отключаем все клики/нажатия по элементу, пока он скрыт (как будто его "нет") + will-change: transform, opacity; + + position: fixed; // Меню фиксировано относительно окна браузера (не скроллится вместе со страницей) + z-index: 100; // Ставим меню поверх других элементов (слоёв) + + // Растягиваем меню по горизонтали сверху (от левого края до правого) + inset: 0; // Растягиваем по всей высоте экрана + transform: translateY( + -100% + ); // // Сдвигаем меню полностью за пределы экрана вверх (оно скрыто) + + min-height: 100vh; // Гарантируем покрытие всей высоты вьюпорта + + opacity: 0; // Делаем меню полностью прозрачным (невидимым) + background-color: $c-white; + + transition: all 0.35s ease; // Синхронизируем скорость появления/скрытия + + &:target { + // Когда на меню ссылаются через якорь (например, #menu в URL), оно становится "целью" + pointer-events: all; // Теперь меню реагирует на клики и взаимодействие + transform: translateY( + 0 + ); // Сдвигаем обратно — меню появляется в видимой области экрана + /* stylelint-disable-next-line order/properties-order */ + opacity: 1; // Делаем меню полностью видимым + } + } + + // Блокируем скролл страницы, когда меню открыто + // &:has(&__menu:target) { + // overflow: hidden; + // } + + &__scroll-up { + position: fixed; + right: 0; + bottom: 50px; + + display: flex; + + width: 50px; + height: 50px; + + background-image: url(../images/icon/arrow-up.svg); + background-repeat: no-repeat; + background-position: center; + + transition: all 0.3s; + + &:hover { + background-image: url(../images/icon/arrow-up-blue.svg); + } + + @include on-desktop { + right: 30px; + } + } +} diff --git a/src/styles/blocks/showcase.scss b/src/styles/blocks/showcase.scss new file mode 100644 index 000000000..1a4cfa87d --- /dev/null +++ b/src/styles/blocks/showcase.scss @@ -0,0 +1,260 @@ +.showcase { + position: relative; + overflow: hidden; + + &__radio { + pointer-events: none; + + // скрывает кружочки инпута + position: absolute; + opacity: 0; + } + + &__title { + margin-bottom: 32px; + padding-inline: 30px; + + @include font-main-title; + + @include on-desktop { + padding-inline: 123px; + } + } + + &__functions { + display: flex; + width: 100%; + height: 275px; + transition: transform 0.4s ease; + + @include on-desktop { + @include page-grid; + + gap: 56px; + width: auto; + height: auto; + padding-top: 60px; + + &:nth-child(odd) { + grid-column: 2 / 6; + } + + &:nth-child(even) { + grid-column: 7 / 10; + } + } + + &-case { + position: absolute; + top: 102px; + left: 0; + + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: 20px; + + width: 100%; // каждый слайд занимет ширину окна + + opacity: 0; + + transition: opacity 0.3s ease; + + @include on-tablet { + top: 130px; + } + + @include on-desktop { + position: static; + + grid-column: span 6; + flex-shrink: 1; + gap: 30px; + + width: auto; + + opacity: 1; + } + } + + &-title { + @include font-subtitle; + + padding-inline: 30px; + + @include on-tablet { + padding-inline: 124px; + } + + @include on-desktop { + padding-inline: 102px; + } + } + + &-list { + display: flex; + flex-direction: column; + gap: 10px; + + margin: 0; + padding-inline: 45px; + + @include on-tablet { + padding-inline: 139px; + } + + @include on-desktop { + padding-inline: 117px; + } + } + + &-item { + @include font-secondary; + + color: $c-default-black; + text-align: left; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + } + + &__nav { + @include on-tablet { + display: inline-flex; + flex-direction: column; + align-items: center; + padding-bottom: 123px; + } + } + + &__counter { + display: flex; + justify-content: center; + padding-top: 10px; + + @include on-tablet { + justify-content: flex-start; + padding-left: 90px; + } + + @include on-desktop { + display: none; + } + + &-num { + display: none; + } + + &-total { + @include font-num; + + display: flex; + align-items: flex-end; + padding-left: 4px; + } + } + + &__img { + overflow: hidden; + aspect-ratio: 16 / 9; + width: 100%; + + @include on-tablet { + position: absolute; + right: 44px; + bottom: 0; + width: clamp(350px, calc(350px + (100vw - 640px) * 0.39), 600px); + } + + @include on-desktop { + right: 169px; + width: 543px; + } + } + + &__block { + &-bg { + background-color: $c-blue-light; + + @include on-tablet { + margin-inline: 34px; + } + + @include on-desktop { + margin-inline: 123px; + } + } + + // навигация и переключение. показываем активный слайд - исчезает - появляется + .showcase__radio:nth-of-type(1):checked + ~ .showcase__functions + .showcase__functions-case:nth-child(1) { + pointer-events: auto; + opacity: 1; + transition-delay: 0.3s; // появление с задержкой, чтоб не накладывались слайды + } + + .showcase__radio:nth-of-type(2):checked + ~ .showcase__functions + .showcase__functions-case:nth-child(2) { + pointer-events: auto; + opacity: 1; + transition-delay: 0.3s; + } + + .showcase__radio:nth-of-type(3):checked + ~ .showcase__functions + .showcase__functions-case:nth-child(3) { + pointer-events: auto; + opacity: 1; + transition-delay: 0.3s; + } + + // @include on-desktop { // отключаем листание слайдов на десктопе. Для варианта с перелистыванием + // .showcase__radio:nth-of-type(1):checked ~ .showcase__functions, + // .showcase__radio:nth-of-type(2):checked ~ .showcase__functions, + // .showcase__radio:nth-of-type(3):checked ~ .showcase__functions { + // transform: none; + // transition: none; + // opacity: 1; + // } + // } + + .showcase__radio:nth-of-type(1):checked + ~ .showcase__nav + .showcase__counter + .num1, + .showcase__radio:nth-of-type(2):checked + ~ .showcase__nav + .showcase__counter + .num2, + .showcase__radio:nth-of-type(3):checked + ~ .showcase__nav + .showcase__counter + .num3 { + display: inline; + + @include font-info; + } + + .showcase__radio:nth-of-type(1):checked ~ .showcase__nav .nav__group--1, + .showcase__radio:nth-of-type(2):checked ~ .showcase__nav .nav__group--2, + .showcase__radio:nth-of-type(3):checked ~ .showcase__nav .nav__group--3 { + display: flex; + justify-content: center; + padding-top: 50px; + + @include on-tablet { + justify-content: flex-start; + padding-left: 90px; + } + + @include on-desktop { + display: none; + } + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..4b7fae599 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,63 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 76px; + + &__logo-link { + flex-shrink: 0; // предотвращает сжатие логотипа + width: 161px; + height: 25px; + background-image: url(../images/logo.svg); + + &:hover { + background-image: url(../images/logo-blue.svg); + } + } + + &__block { + display: flex; + gap: 30px; + align-items: center; + + @include on-desktop { + gap: 47px; + } + } + + &__language { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__button { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__specs { + @include font-special; + + text-decoration: none; + + @include hover(color, $c-black); + + @include on-tablet { + display: none; + } + + &--header { + display: none; + + @include on-tablet { + display: flex; + } + } + } +} diff --git a/src/styles/components/aboutUs.scss b/src/styles/components/aboutUs.scss new file mode 100644 index 000000000..f4d9462b1 --- /dev/null +++ b/src/styles/components/aboutUs.scss @@ -0,0 +1,94 @@ +.about-us { + display: flex; + flex-direction: column; + gap: 170px; + + @include tablet { + gap: 140px; + } + + @include mobile { + gap: 110px; + } + + &__container { + @include mobile { + display: flex; + flex-direction: column; + gap: 20px; + } + } + + &__title { + @extend %h2; + + @include mobile { + order: 1; + } + } + + &__info { + @include mobile { + order: 3; + } + } + + &__desc { + @extend %main-text; + } + + &__more { + position: relative; + margin-top: 60px; + border: none; + background-color: $c-white; + + &::after { + content: ' '; + + position: absolute; + bottom: -5px; + left: 0; + + width: 50%; + height: 1px; + + background-color: #0db2b3; + + transition: width 1s ease; + } + + &:hover { + &::after { + width: 100%; + transition: width 1s ease; + } + } + + @include mobile { + margin-top: 30px; + } + } + + &__link { + @extend %button; + + color: #0db2b3; + text-decoration: none; + } + + &__img { + grid-row: 1/3; + + width: 100%; + height: 100%; + max-height: 415px; + + object-fit: cover; + + @include mobile { + grid-row: 1/2; + order: 2; + } + } +} diff --git a/src/styles/components/aside.scss b/src/styles/components/aside.scss new file mode 100644 index 000000000..c5c41f6a5 --- /dev/null +++ b/src/styles/components/aside.scss @@ -0,0 +1,88 @@ +.aside { + display: none; + + @include tablet { + position: fixed; + z-index: 100; + top: 0; + right: -100%; + + display: block; + + width: 100%; + height: 100vh; + padding: 30px 34px; + + background-color: $c-white; + + @include mobile { + padding: 20px 30px; + } + + &--open { + right: 0; + transition: right 1s ease; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + + @include mobile { + height: 35.5px; + } + } + + &__close-button { + cursor: pointer; + border: none; + background-color: $c-white; + } + + &__nav { + margin-top: 64px; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 40px; + list-style: none; + } + + &__nav-link { + font-size: 22px; + font-weight: 400; + line-height: 28px; + color: #333; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ' '; + + position: absolute; + bottom: -10px; + left: 0; + + width: 0; + height: 2px; + + background-color: #0c797a; + + transition: width 1s ease; + } + + &:hover { + color: #0c797a; + + &::after { + width: 100%; + transition: width 1s ease; + } + } + } +} diff --git a/src/styles/components/benefits.scss b/src/styles/components/benefits.scss new file mode 100644 index 000000000..a14118d43 --- /dev/null +++ b/src/styles/components/benefits.scss @@ -0,0 +1,43 @@ +.benefits { + display: flex; + flex-direction: column; + gap: 90px; + + &__block { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + min-height: 286px; + padding: 15px; + + &:hover { + border-radius: 15px; + box-shadow: + 0 4px 10px rgba(42, 169, 171, 0.6), + 0 8px 25px rgba(112, 238, 238, 0.4); + } + } + + &__title { + @extend %h4; + + min-height: 48px; + margin-top: 30px; + } + + &__desc { + @extend %secondary-text; + + min-height: 120px; + margin-top: 30px; + } + + &__icon { + width: 70px; + height: 50px; + object-fit: contain; + } +} diff --git a/src/styles/components/features.scss b/src/styles/components/features.scss new file mode 100644 index 000000000..a11c6a15c --- /dev/null +++ b/src/styles/components/features.scss @@ -0,0 +1,70 @@ +.features { + position: relative; + width: 100%; + + &__title { + @extend %h2; + } + + &__container { + row-gap: 56px; + + min-height: 555px; + margin-top: 30px; + padding: 60px 0 59px; + + background-color: #d6ecec; + + @include mobile { + row-gap: 30px; + width: calc(100% + 30px + 30px); + margin-left: -30px; + padding: 30px 30px 0; + } + } + + &__section { + z-index: 100; + min-height: 280px; + + @include tablet { + display: none; + + &--active { + display: block; + } + } + } + + &__subtitle { + @extend %h3; + + color: #0c797a; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + margin-top: 30px; + + list-style: disc; + } + + &__point { + @extend %main-text; + } + + &__img { + position: absolute; + right: 0; + bottom: 0; + + @include mobile { + position: relative; + width: 100%; + object-fit: contain; + } + } +} diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss new file mode 100644 index 000000000..51b929774 --- /dev/null +++ b/src/styles/components/footer.scss @@ -0,0 +1,27 @@ +.footer { + position: relative; + + display: flex; + flex-direction: column; + gap: 60px; + align-items: center; + + width: 100%; + + &__social { + display: flex; + gap: 40px; + } + + &__up { + position: absolute; + top: 0; + right: 0; + } + + &__right { + @extend %secondary-text; + + color: #bdbdbd; + } +} diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss new file mode 100644 index 000000000..42ce10dcf --- /dev/null +++ b/src/styles/components/header.scss @@ -0,0 +1,94 @@ +.header { + display: flex; + flex-direction: column; + gap: 90px; + + @include tablet { + gap: 130px; + } + + @include mobile { + gap: 25px; + } + + &__upper { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + } + + &__nav { + display: flex; + gap: 30px; + align-items: center; + } + + &__spec { + @extend %thirdary-text; + + color: #333; + text-decoration: none; + text-transform: uppercase; + + @include mobile { + display: none; + } + } + + &__link { + @extend %thirdary-text; + + font-weight: 300; + color: #828282; + text-decoration: none; + text-transform: uppercase; + + &:hover { + color: #0db2b3; + } + + &--active { + font-weight: 400; + color: #333; + + &:hover { + color: #333; + } + } + + @include mobile { + display: none; + } + } + + &__buy { + cursor: pointer; + + width: 102px; + height: 48px; + border: none; + + color: $c-white; + + background-color: #333; + + &:hover { + background-color: #131313; + } + + @include mobile { + display: none; + } + } + + &__burger { + display: none; + + @include tablet { + display: block; + border: none; + background-color: $c-white; + } + } +} diff --git a/src/styles/components/main-info.scss b/src/styles/components/main-info.scss new file mode 100644 index 000000000..fe5437f8a --- /dev/null +++ b/src/styles/components/main-info.scss @@ -0,0 +1,42 @@ +.main-info { + position: relative; + width: 100%; + max-height: 465px; + + &__title { + @extend %h1; + + @include mobile { + order: 2; + } + } + + &__desc { + @extend %main-text; + + margin-top: 30px; + + @include mobile { + order: 3; + margin-top: 20px; + } + } + + &__img { + position: absolute; + z-index: -1; + right: 0; + bottom: 0; + + height: 100%; + + object-fit: contain; + + @include mobile { + position: relative; + order: 1; + width: 100%; + object-fit: contain; + } + } +} diff --git a/src/styles/components/menu.scss b/src/styles/components/menu.scss new file mode 100644 index 000000000..bdf5f7f2f --- /dev/null +++ b/src/styles/components/menu.scss @@ -0,0 +1,45 @@ +.menu { + @include tablet { + display: none; + } + + &__list { + display: flex; + gap: 84px; + justify-content: center; + list-style: none; + } + + &__link { + @extend %thirdary-text; + + position: relative; + color: #333; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ' '; + + position: absolute; + bottom: -10px; + left: 0; + + width: 0; + height: 2px; + + background-color: #0c797a; + + transition: width 1s ease; + } + + &:hover { + color: #0c797a; + + &::after { + width: 100%; + transition: width 1s ease; + } + } + } +} diff --git a/src/styles/components/page.scss b/src/styles/components/page.scss new file mode 100644 index 000000000..80898d281 --- /dev/null +++ b/src/styles/components/page.scss @@ -0,0 +1,31 @@ +.page { + position: relative; + width: 100vw; + background-color: $c-white; + + &--no-scroll { + overflow: hidden; + } + + &__container { + display: flex; + flex-direction: column; + gap: 170px; + align-items: center; + + width: 100%; + margin: 0 auto; + padding: 30px 123px; + + @include tablet { + gap: 140px; + width: 100%; + padding: 30px 34px; + } + + @include mobile { + gap: 110px; + padding: 25px 30px; + } + } +} diff --git a/src/styles/components/presentation.scss b/src/styles/components/presentation.scss new file mode 100644 index 000000000..b8df02b66 --- /dev/null +++ b/src/styles/components/presentation.scss @@ -0,0 +1,16 @@ +.presentation { + transform: scale(1); + display: flex; + justify-content: center; + transition: transform 1s ease; + + &:hover { + transform: scale(1.1); + transition: transform 1s ease; + } + + &__img { + width: 100%; + object-fit: contain; + } +} diff --git a/src/styles/components/questions.scss b/src/styles/components/questions.scss new file mode 100644 index 000000000..126088e63 --- /dev/null +++ b/src/styles/components/questions.scss @@ -0,0 +1,58 @@ +.questions { + &__title { + @extend %h2; + } + + &__form { + display: flex; + flex-direction: column; + + @include mobile { + margin-top: 27px; + } + } + + &__email { + @extend %main-text; + + height: 48px; + padding: 12px 36px; + border: 1px solid #828282; + color: #333; + } + + &__text { + @extend %main-text; + + resize: none; + + height: 128px; + margin-top: 20px; + padding: 16px 36px; + border: 1px solid #828282; + + color: #333; + text-align: top; + + &::placeholder { + @extend %main-text; + } + } + + &__submit { + @extend %button; + + width: 124px; + height: 48px; + margin-top: 30px; + border: none; + + color: #fff; + + background-color: #0db2b3; + + &:hover { + background-color: #0c797a; + } + } +} diff --git a/src/styles/components/testimonials.scss b/src/styles/components/testimonials.scss new file mode 100644 index 000000000..59f3abdbd --- /dev/null +++ b/src/styles/components/testimonials.scss @@ -0,0 +1,40 @@ +.testimonials { + padding-top: 42px; + background-image: url('../images/img/quote.png'); + background-repeat: no-repeat; + background-position: top center; + + &__wrapper { + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + @include tablet { + gap: 40px; + } + } + + &__author { + display: flex; + flex-direction: column; + align-items: center; + } + + &__text { + @extend %quote; + } + + &__name { + @extend %h5; + + margin-top: 20px; + } + + &__position { + @extend %secondary-text; + + margin-top: 5px; + color: #7c7c7c; + } +} diff --git a/src/styles/layout/gridTemplate.scss b/src/styles/layout/gridTemplate.scss new file mode 100644 index 000000000..65e7d4b84 --- /dev/null +++ b/src/styles/layout/gridTemplate.scss @@ -0,0 +1,41 @@ +.grid { + display: grid; + grid-auto-rows: min-content; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + + width: 100%; + + @for $start from 1 through 12 { + @for $end from 1 through 13 { + &--#{$start}-#{$end} { + grid-column: #{$start} / #{$end}; + } + } + } + + @include tablet { + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + + @for $start from 1 through 8 { + @for $end from 1 through 9 { + &--#{$start}-#{$end}-tab { + grid-column: #{$start} / #{$end}; + } + } + } + } + + @include mobile { + grid-template-columns: repeat(4, 1fr); + + @for $start from 1 through 4 { + @for $end from 1 through 5 { + &--#{$start}-#{$end}-mob { + grid-column: #{$start} / #{$end}; + } + } + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..3eeda66b5 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,15 @@ +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); +} + +body { + background: #eee; +} /*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..bfab7ea54 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["utils/_extends.scss","main.css","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,+BAAA;EACA,gBAAA;ACCF;;ACHA;EACE,iDAAA;EACA,+DAAA;EACA,mBAAA;EACA,kBAAA;ADMF;AENA;EACE,gBCLO;AHaT","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..6494e1486 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,37 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './layout/gridTemplate'; +@import './ui/logo'; +@import './components/page'; +@import './components/header'; +@import './components/main-info'; +@import './components/benefits'; +@import './components/menu'; +@import './components/presentation'; +@import './components/aboutUs'; +@import './components/testimonials'; +@import './components/features'; +@import './components/questions'; +@import './components/footer'; +@import './ui/swipper-nav'; +@import './components/aside'; +@import './animations/animations'; + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + overflow-x: hidden; + font-family: Inter, Roboto, serif; + background: $c-white; } diff --git a/src/styles/ui/logo.css b/src/styles/ui/logo.css new file mode 100644 index 000000000..5b1c61221 --- /dev/null +++ b/src/styles/ui/logo.css @@ -0,0 +1,3 @@ +.logo { + width: 161px; +} /*# sourceMappingURL=logo.css.map */ diff --git a/src/styles/ui/logo.css.map b/src/styles/ui/logo.css.map new file mode 100644 index 000000000..53ad69ac2 --- /dev/null +++ b/src/styles/ui/logo.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["logo.scss","logo.css"],"names":[],"mappings":"AAAA;EACE,YAAA;ACCF","file":"logo.css"} \ No newline at end of file diff --git a/src/styles/ui/logo.scss b/src/styles/ui/logo.scss new file mode 100644 index 000000000..e3fc23318 --- /dev/null +++ b/src/styles/ui/logo.scss @@ -0,0 +1,3 @@ +.logo { + width: 161px; +} diff --git a/src/styles/ui/swipper-nav.scss b/src/styles/ui/swipper-nav.scss new file mode 100644 index 000000000..ee5c8c019 --- /dev/null +++ b/src/styles/ui/swipper-nav.scss @@ -0,0 +1,44 @@ +.swipper-nav { + display: none; + + @include tablet { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + } + + &__next, + &__prev { + cursor: pointer; + + width: 48px; + height: 13px; + border: none; + + background-color: #d6ecec; + } + + &__prev { + background-image: url('../images/icons/prev.png'); + } + &__next { + background-image: url('../images/icons/next.png'); + } + + &__pages { + display: flex; + gap: 5px; + } + + &__current-page { + @extend %main-text; + } + + &__total-page { + position: relative; + top: 10px; + font-size: 11px; + color: #0c797a; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..232abcd78 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,11 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin tablet { + @media (max-width: 1279px) { + @content; + } +} + +@mixin mobile { + @media (max-width: 639px) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..4ef793453 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ -$c-gray: #eee; +$c-white: #f7f7f7; +$c-light-gray: #d0d0d0; +$c-gray: #7c7c7c;