diff --git a/README.md b/README.md index a95e97afe..67cfacf32 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://Cumacea.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..aad8f156e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,772 @@ - + - Title + CrazyBaby + - -

Hello Mate Academy

- + +
+
+ + +
+
+

+ SPECS +

+ +
+ + + / + + +
+
+ + + Buy + + + +
+
+ + + + + + Acoustic_speaker + + +
+

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

+
+
+
+
+ +
+ + + + Acoustic_speakers + +
+ +
+
+

+ DESIGNED FOR THE FUTURE +

+ + + + + + Design-draft + + +

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

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

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

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

+ + Garrett-Martin + +
+ Garrett Martin +
+ +

+ Creative Director +

+
+
+ +
+

+ 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 +
    • + +
  • + 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 +
    • +
+
+
+ +
+
+ + +
+ +
+
+  / 03 +
+
+ + + + + Luna-eye-scheme + +
+
+ +
+

+ DO YOU HAVE ANY QUESTIONS? +

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

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

+
+ 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/fonts/inter-v20-cyrillic_latin-700.woff2 b/src/fonts/inter-v20-cyrillic_latin-700.woff2 new file mode 100644 index 000000000..f2d31b545 Binary files /dev/null and b/src/fonts/inter-v20-cyrillic_latin-700.woff2 differ diff --git a/src/fonts/inter-v20-cyrillic_latin-regular.woff2 b/src/fonts/inter-v20-cyrillic_latin-regular.woff2 new file mode 100644 index 000000000..6618a68eb Binary files /dev/null and b/src/fonts/inter-v20-cyrillic_latin-regular.woff2 differ diff --git a/src/images/about/design-desktop.png b/src/images/about/design-desktop.png new file mode 100644 index 000000000..ca235160a Binary files /dev/null and b/src/images/about/design-desktop.png differ diff --git a/src/images/about/design-mobile.png b/src/images/about/design-mobile.png new file mode 100644 index 000000000..5451aa27b Binary files /dev/null and b/src/images/about/design-mobile.png differ diff --git a/src/images/about/design-tablet.png b/src/images/about/design-tablet.png new file mode 100644 index 000000000..f780b0832 Binary files /dev/null and b/src/images/about/design-tablet.png differ diff --git a/src/images/about/luna-desktop.png b/src/images/about/luna-desktop.png new file mode 100644 index 000000000..caf1ad198 Binary files /dev/null and b/src/images/about/luna-desktop.png differ diff --git a/src/images/about/luna-mobile.png b/src/images/about/luna-mobile.png new file mode 100644 index 000000000..122948f75 Binary files /dev/null and b/src/images/about/luna-mobile.png differ diff --git a/src/images/about/luna-tablet.png b/src/images/about/luna-tablet.png new file mode 100644 index 000000000..72d1d9d67 Binary files /dev/null and b/src/images/about/luna-tablet.png differ diff --git a/src/images/benefits/design-icon.svg b/src/images/benefits/design-icon.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/benefits/design-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits/lighting-icon.svg b/src/images/benefits/lighting-icon.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/benefits/lighting-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/benefits/multiroom-icon.svg b/src/images/benefits/multiroom-icon.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/benefits/multiroom-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits/speaker-icon.svg b/src/images/benefits/speaker-icon.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/benefits/speaker-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features/button-left.svg b/src/images/features/button-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/features/button-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/features/button-right.svg b/src/images/features/button-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/features/button-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/features/features-desktop.png b/src/images/features/features-desktop.png new file mode 100644 index 000000000..b5397812c Binary files /dev/null and b/src/images/features/features-desktop.png differ diff --git a/src/images/features/features-mobile.png b/src/images/features/features-mobile.png new file mode 100644 index 000000000..90cb2e1b8 Binary files /dev/null and b/src/images/features/features-mobile.png differ diff --git a/src/images/header/header-desktop.png b/src/images/header/header-desktop.png new file mode 100644 index 000000000..bf81c807b Binary files /dev/null and b/src/images/header/header-desktop.png differ diff --git a/src/images/header/header-mobile.png b/src/images/header/header-mobile.png new file mode 100644 index 000000000..dfd5e8e17 Binary files /dev/null and b/src/images/header/header-mobile.png differ diff --git a/src/images/header/header-tablet.png b/src/images/header/header-tablet.png new file mode 100644 index 000000000..2854cc049 Binary files /dev/null and b/src/images/header/header-tablet.png differ diff --git a/src/images/icons/arrow-icon.svg b/src/images/icons/arrow-icon.svg new file mode 100644 index 000000000..9977a457b --- /dev/null +++ b/src/images/icons/arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger-menu-icon.svg b/src/images/icons/burger-menu-icon.svg new file mode 100644 index 000000000..17a0e5baa --- /dev/null +++ b/src/images/icons/burger-menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 000000000..055a1ec26 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logos/favicon.png b/src/images/logos/favicon.png new file mode 100644 index 000000000..76f94040e Binary files /dev/null and b/src/images/logos/favicon.png differ diff --git a/src/images/logos/logo.svg b/src/images/logos/logo.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/logos/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/presentation/presentation-desktop.png b/src/images/presentation/presentation-desktop.png new file mode 100644 index 000000000..edac48c24 Binary files /dev/null and b/src/images/presentation/presentation-desktop.png differ diff --git a/src/images/presentation/presentation.png b/src/images/presentation/presentation.png new file mode 100644 index 000000000..39200e0e0 Binary files /dev/null and b/src/images/presentation/presentation.png differ diff --git a/src/images/social-icons/facebook.svg b/src/images/social-icons/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/social-icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/instagram.svg b/src/images/social-icons/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/social-icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/x.svg b/src/images/social-icons/x.svg new file mode 100644 index 000000000..2550fd2dc --- /dev/null +++ b/src/images/social-icons/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/testimonials/quote.svg b/src/images/testimonials/quote.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/testimonials/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonials/testimonial-photo.png b/src/images/testimonials/testimonial-photo.png new file mode 100644 index 000000000..f8d6052db Binary files /dev/null and b/src/images/testimonials/testimonial-photo.png differ diff --git a/src/scripts/changeLanguage.js b/src/scripts/changeLanguage.js new file mode 100644 index 000000000..5d5f83d5a --- /dev/null +++ b/src/scripts/changeLanguage.js @@ -0,0 +1,170 @@ +/* eslint-disable max-len */ + +const translations = { + EN: { + specs: 'SPECS', + buy_button: 'Buy', + header_title: 'Futuristic Wireless Speaker', + header_description: + 'Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctly more layered.', + story_link: 'OUR STORY', + about_link: 'ABOUT US', + features_link: 'FEATURES', + get_link: 'GET IN TOUCH', + design_title: 'Futuristic Design', + design_description: + '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_title: 'Tweeter Speaker System', + speaker_description: + '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_title: 'Multiroom System', + multiroom_description: + '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.', + lighting_title: 'Intuitive Lighting System', + lighting_description: + 'An intuitive user interface allows you to adjust the hue and saturation of color for lighting that fits any mood and situation.', + about_title: 'DESIGNED FOR THE FUTURE', + about_description: + '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.', + more_button: 'See more about us', + eye_title: 'Luna Eye', + luna_description: + '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.', + testimonials_description: + '“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.”', + testimonials_name: 'Garrett Martin', + testimonials_position: 'Creative Director', + features_title: 'FEATURES', + features_sound: 'Sound & Music', + sound_item_1: 'Feel-in-chest Base Power', + sound_item_2: 'Lossless Digital Audio Transmission', + sound_item_3: 'Easy & Stable Stereo Pairing', + sound_item_4: 'Crisp and Clear High Frequency Sound', + sound_item_5: 'Streams from Cloud Music and Local Library', + sound_item_6: 'Auto Music Playback from Last Song Stopped', + features_connectivity: 'Connectivity', + connectivity_item_1: 'Hands Free Wireless Audio', + connectivity_item_4: 'Smart Multiroom System Set Up', + connectivity_item_5: 'Party Mode with 6.0 Units and above', + connectivity_item_6: 'MESHNET Multi Speaker Network', + features_app: 'App Features', + app_item_1: 'Customize Music Schedule', + app_item_2: 'Wake Up with Favorite Songs', + app_item_3: 'Home Detection Auto Wake Up', + app_item_4: 'Color Wheel', + question_title: 'DO YOU HAVE ANY QUESTIONS?', + send_button: 'SEND', + terms: '© 2019 All rights reserved. Terms of Use & Privacy Policy', + input_email: 'Your email', + input_message: 'Your message...', + }, + UA: { + specs: 'ПАРАМЕТРИ', + buy_button: 'Купити', + header_title: 'Новітній радіо спікер', + header_description: + 'Виконання Luna збалансоване та плавне у всіх частотних діапазонах, що робить музику одночасно природно приємною та помітно більш багатошаровою.', + story_link: 'НАША ІСТОРІЯ', + about_link: 'ПРО НАС', + features_link: 'ОСОБЛИВОСТІ', + get_link: "ЗВ'ЯЖІТЬСЯ З НАМИ", + design_title: 'Футуристичний дизайн', + design_description: + 'Щоб надати Luna справді бездоганного вигляду, ми спеціально обрали алюміній авіаційного класу як матеріал та застосували як технологію тривимірного розтягування, так і високоточну технологію холодного кування.', + speaker_title: 'Твітер система', + speaker_description: + 'Щоб забезпечити більш багатошарове звучання, краще, ніж з одним повнодіапазонним динаміком, наша команда оснастила Luna ще одним високочастотним динаміком, який незалежно відповідає за високочастотний звук.', + multiroom_title: 'Мультирумна система', + multiroom_description: + 'Luna має вбудовану сумісність з вашим домашнім Wi-Fi. Встановіть кілька динаміків у різних кімнатах, щоб поширити музичний досвід на весь будинок.', + lighting_title: 'Інтуїтивна система освітлення', + lighting_description: + 'Інтуїтивно зрозумілий інтерфейс користувача дозволяє налаштувати відтінок і насиченість кольору для освітлення, яке відповідає будь-якому настрою та ситуації.', + about_title: 'СТВОРЕНО ДЛЯ МАЙБУТНЬОГО', + about_description: + 'У 2014 році група захоплених промислових дизайнерів, ветеранів інженерії та експертів з акустики створила crazybaby. Це група пристрасних людей, які достатньо божевільні, щоб думати, що можуть кинути виклик індустрії за допомогою революційних аудіопродуктів.', + more_button: 'Дізнайтеся більше про нас', + eye_title: 'Місячне Око', + luna_description: + 'Luna Eye — це суть цієї інноваційної світлової та аудіосистеми. Вона складається з незалежного високочастотного динаміка, світловодного компонента, купола та кільцевої прикраси.', + testimonials_description: + '“Чесно кажучи, мене справді здивував такий насичений гарний звук, який виходить з цього маленького компактного пристрою. А завдяки матовій алюмінієвій поверхні він такий знайомий. Як мій iPhone.”', + testimonials_name: 'Гарретт Мартін', + testimonials_position: 'Креативний директор', + features_title: 'ОСОБЛИВОСТІ', + features_sound: 'Звук і музика', + sound_item_1: 'Базова сила відчуття в грудях', + sound_item_2: 'Безвтратна цифрова передача аудіо', + sound_item_3: 'Легке та стабільне стереосполучення', + sound_item_4: 'Чіткий та чистий високочастотний звук', + sound_item_5: 'Потоки з Cloud Music та локальної бібліотеки', + sound_item_6: 'Автоматичне відтворення музики з останньої пісні', + features_connectivity: 'Підключення', + connectivity_item_1: 'Бездротове аудіо Hands Free', + connectivity_item_4: 'Налаштування розумної мультирумної системи', + connectivity_item_5: 'Режим вечірки з 6.0 одиницями та вище', + connectivity_item_6: 'Багатоканальна мережа MESHNET', + features_app: 'Функції програми', + app_item_1: 'Налаштовуйте розклад музики', + app_item_2: 'Прокидайтеся з улюбленими піснями', + app_item_3: 'Автоматичне пробудження після виявлення дому', + app_item_4: 'Кольорова палітра', + question_title: 'У ВАС Є ЯКІСЬ ПИТАННЯ?', + send_button: 'НАДІСЛАТИ', + terms: + '© 2019 Усі права захищено. Умови використання та Політика конфіденційності', + input_email: 'Ваша електронна адреса', + input_message: 'Ваше повідомлення...', + }, +}; + +export function initLanguages() { + const langButtons = document.querySelectorAll('.languages__button'); + const i18nElements = document.querySelectorAll('[data-i18n]'); + + const translatePage = (lang) => { + i18nElements.forEach((el) => { + const key = el.getAttribute('data-i18n'); + const translation = translations[lang][key]; + + if (translation) { + if (el.hasAttribute('placeholder')) { + el.setAttribute('placeholder', translation); + } else { + el.textContent = translation; + } + } + }); + }; + + const updateButtonStyles = (activeLang) => { + langButtons.forEach((btn) => { + const isTarget = btn.classList.contains( + `languages__button--${activeLang.toLowerCase()}`, + ); + + btn.classList.toggle('languages__button--active', isTarget); + }); + }; + + const setLanguage = (lang) => { + window.localStorage.setItem('selectedLanguage', lang); + translatePage(lang); + updateButtonStyles(lang); + document.documentElement.lang = lang.toLowerCase(); + }; + + langButtons.forEach((btn) => { + btn.addEventListener('click', () => { + const newLang = btn.classList.contains('languages__button--ua') + ? 'UA' + : 'EN'; + + setLanguage(newLang); + }); + }); + + const savedLang = window.localStorage.getItem('selectedLanguage') || 'EN'; + + setLanguage(savedLang); +} diff --git a/src/scripts/form.js b/src/scripts/form.js new file mode 100644 index 000000000..dcfac626a --- /dev/null +++ b/src/scripts/form.js @@ -0,0 +1,55 @@ +export function initFormValidation() { + const form = document.querySelector('.question__form'); + + if (!form) { + return; + } + + const inputs = form.querySelectorAll('input, textarea'); + + form.setAttribute('novalidate', ''); + + const validateEmail = (email) => { + return String(email) + .toLowerCase() + .match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/); + }; + + form.addEventListener('submit', (event) => { + event.preventDefault(); + + let isFormValid = true; + + inputs.forEach((input) => { + const value = input.value.trim(); + let isInputValid = true; + + if (value === '') { + isInputValid = false; + } else if (input.type === 'email' && !validateEmail(value)) { + isInputValid = false; + } + + if (!isInputValid) { + input.classList.add('is-invalid'); + isFormValid = false; + } else { + input.classList.remove('is-invalid'); + } + + input.addEventListener('input', () => { + if (input.type === 'email') { + if (validateEmail(input.value.trim())) { + input.classList.remove('is-invalid'); + } + } else if (input.value.trim() !== '') { + input.classList.remove('is-invalid'); + } + }); + }); + + if (isFormValid) { + form.reset(); + } + }); +} diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..82862aadf 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,23 @@ 'use strict'; + +import AOS from 'aos'; +import 'aos/dist/aos.css'; +import '../styles/main.scss'; +import { initMobileSwiper } from './swiper.js'; +import { initSlider } from './slider.js'; +import { initFormValidation } from './form.js'; +import { initLanguages } from './changeLanguage.js'; + +document.addEventListener('DOMContentLoaded', () => { + AOS.init({ + duration: 900, + once: false, + offset: 150, + easing: 'ease-in-out', + disableMutationObserver: false, + }); + initMobileSwiper(); + initSlider(); + initFormValidation(); + initLanguages(); +}); diff --git a/src/scripts/slider.js b/src/scripts/slider.js new file mode 100644 index 000000000..ffeeb24ad --- /dev/null +++ b/src/scripts/slider.js @@ -0,0 +1,125 @@ +export function initSlider() { + const slider = document.querySelector('[data-slider]'); + + if (!slider) { + return; + } + + const value = document.querySelector('.features__value'); + const items = slider.querySelectorAll('.features__item'); + const leftButton = slider.querySelector('.features__button--left'); + const rightButton = slider.querySelector('.features__button--right'); + + if (!items.length || !leftButton || !rightButton) { + return; + } + + let currentIndex = 0; + let previousIndex = 0; + const totalSteps = items.length; + const breakpoint = window.matchMedia('(min-width: 1280px)'); + + const updateSlider = (direction = 'init') => { + if (breakpoint.matches) { + return; + } + + if (value) { + value.textContent = `0${currentIndex + 1}`; + } + + items.forEach((item) => { + item.classList.remove( + 'features__item--active', + 'features__item--exit-left', + 'features__item--exit-right', + 'features__item--enter-left', + 'features__item--enter-right', + ); + }); + + if (direction === 'init') { + items[currentIndex].classList.add('features__item--active'); + } else if (direction === 'next') { + if (items[previousIndex]) { + items[previousIndex].classList.add('features__item--exit-left'); + } + + items[currentIndex].classList.add('features__item--enter-right'); + + void items[currentIndex].offsetWidth; + + items[currentIndex].classList.add('features__item--enter-right'); + + items[currentIndex].classList.remove('features__item--enter-right'); + items[currentIndex].classList.add('features__item--active'); + } else if (direction === 'prev') { + if (items[previousIndex]) { + items[previousIndex].classList.add('features__item--exit-right'); + } + + items[currentIndex].classList.add('features__item--enter-left'); + + void items[currentIndex].offsetWidth; + + items[currentIndex].classList.remove('features__item--enter-left'); + items[currentIndex].classList.add('features__item--active'); + } + + leftButton.classList.toggle( + 'features__button--disabled', + currentIndex === 0, + ); + + leftButton.classList.toggle('features__button--active', currentIndex > 0); + + rightButton.classList.toggle( + 'features__button--disabled', + currentIndex === totalSteps - 1, + ); + + rightButton.classList.toggle( + 'features__button--active', + currentIndex < totalSteps - 1, + ); + }; + + const goToNext = () => { + if (currentIndex < totalSteps - 1 && !breakpoint.matches) { + previousIndex = currentIndex; + currentIndex++; + updateSlider('next'); + } + }; + + const goToPrev = () => { + if (currentIndex > 0 && !breakpoint.matches) { + previousIndex = currentIndex; + currentIndex--; + updateSlider('prev'); + } + }; + + rightButton.addEventListener('click', goToNext); + leftButton.addEventListener('click', goToPrev); + + breakpoint.addEventListener('change', () => { + if (breakpoint.matches) { + items.forEach((item) => { + item.classList.remove( + 'features__item--exit-left', + 'features__item--exit-right', + ); + item.classList.add('features__item--active'); + }); + } else { + updateSlider('init'); + } + }); + + if (breakpoint.matches) { + items.forEach((item) => item.classList.add('features__item--active')); + } else { + updateSlider('init'); + } +} diff --git a/src/scripts/swiper.js b/src/scripts/swiper.js new file mode 100644 index 000000000..f40c56dec --- /dev/null +++ b/src/scripts/swiper.js @@ -0,0 +1,41 @@ +import Swiper from 'swiper'; + +export function initMobileSwiper() { + const swiperElement = document.querySelector('[data-mobile-swiper]'); + + if (!swiperElement) { + return; + } + + let swiperInstance = null; + const breakpoint = window.matchMedia('(min-width: 640px)'); + + const initSwiper = () => { + if (!breakpoint.matches && !swiperInstance) { + swiperInstance = new Swiper('[data-mobile-swiper]', { + slidesPerView: 1, + spaceBetween: 30, + grabCursor: true, + }); + } + }; + + const destroySwiper = () => { + if (breakpoint.matches && swiperInstance) { + swiperInstance.destroy(true, true); + swiperInstance = null; + } + }; + + const handleResize = () => { + if (breakpoint.matches) { + destroySwiper(); + } else { + initSwiper(); + } + }; + + breakpoint.addEventListener('change', handleResize); + + handleResize(); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..cfdbd2636 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,15 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; + font-weight: 400; font-style: normal; + font-display: swap; + src: url('../fonts/inter-v20-cyrillic_latin-regular.woff2') format('woff2'); +} + +@font-face { + font-family: Inter; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/inter-v20-cyrillic_latin-700.woff2') format('woff2'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..00429406d 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,48 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +p, +input, +textarea, +.features__value, +.features__amount, +::placeholder { + @extend %main-text; +} + +.button { + @extend %button; +} + +.languages, +.nav { + @extend %languages; +} + +.benefits__description, +.testimonials__position, +.features__list-item, +.footer__terms { + @extend %secondary-text; +} + +.quote { + @extend %quote; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..77fe67f3a 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; +@import 'utils/reset'; @import 'utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..cfe650de8 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,151 @@ +.about { + overflow-x: hidden; + display: flex; + flex-direction: column; + gap: 110px; + + padding-inline: 30px; + + @include on-tablet { + gap: 140px; + padding-inline: 0; + } + + @include on-desktop { + @include padding-inline; + + gap: 170px; + } + + &__block { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: auto auto auto; + align-items: start; + } + + &--design { + @include on-tablet { + padding-inline: 0 34px; + } + } + + &--luna { + @include on-tablet { + padding-inline: 34px 0; + } + } + } + + &__picture { + overflow: hidden; + + &--design { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / -1; + } + } + + &--luna { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1 / -1; + } + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + + @include on-tablet { + max-height: 415px; + } + + &:hover { + transform: scale(1.1); + } + } + + &__title { + &--design { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1; + } + } + + &--luna { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + } + } + + &__description { + color: $secondary-text-color; + + &--design { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 2; + } + } + + &--luna { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 2; + } + } + } + + &__button { + position: relative; + width: fit-content; + color: $secondary-color; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + left: 0; + + width: 50%; + height: 1px; + + background-color: $secondary-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + + &--design { + @include on-tablet { + grid-column: 5 / -1; + grid-row: 3; + } + } + + &--luna { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 3; + } + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..7217fb036 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,107 @@ +.benefits { + @include padding-inline; + + scroll-margin-top: 120px; + margin-top: 110px; + + &__container { + overflow: hidden; + width: 100%; + margin: -20px; + padding: 20px; + + @include on-tablet { + overflow: visible; + } + } + + &__wrapper { + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 20px 65px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__item { + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: 20px; + align-items: center; + + box-sizing: border-box; + min-height: 254px; + padding: 15px; + border-radius: 8px; + + transition: box-shadow 0.6s ease; + + @include on-tablet { + grid-column: span 4; + gap: 40px; + } + + @include on-desktop { + grid-column: span 3; + } + + &:hover { + box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3); + } + } + + &__icon { + display: block; + + margin-bottom: 20px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + margin-bottom: 10px; + } + + &--design { + width: 50px; + height: 40px; + background-image: url('../images/benefits/design-icon.svg'); + } + + &--speaker { + width: 46px; + height: 40px; + background-image: url('../images/benefits/speaker-icon.svg'); + } + + &--multiroom { + width: 46px; + height: 37px; + background-image: url('../images/benefits/multiroom-icon.svg'); + } + + &--lighting { + width: 44px; + height: 44px; + background-image: url('../images/benefits/lighting-icon.svg'); + } + } + + &__title { + min-height: 54px; + max-height: 74px; + text-align: center; + } + + &__description { + color: $secondary-text-color; + text-align: center; + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..906034ede --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,208 @@ +.features { + scroll-margin-top: 120px; + + @include on-tablet { + @include padding-inline; + } + + &__main-title { + padding: 0 30px 32px; + + @include on-tablet { + padding-bottom: 30px; + padding-inline: 0; + } + } + + &__container { + position: relative; + height: 575px; + padding: 30px 30px 50px; + background-color: $features-background; + + @include on-tablet { + height: 455px; + } + + @include on-desktop { + height: 642px; + } + } + + &__wrapper { + position: relative; + overflow: hidden; + min-height: 275px; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + row-gap: 56px; + padding-block: 60px; + } + } + + &__item { + position: absolute; + top: 0; + left: 0; + transform: translateX(0); + + width: 100%; + + visibility: hidden; + opacity: 0; + + transition: + transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.5s ease, + visibility 0.5s ease; + + &--active { + position: relative; + z-index: 2; + transform: translateX(0); + + visibility: visible; + opacity: 1; + } + + &--enter-right { + transform: translateX(100%); + transition: none; + } + + &--enter-left { + transform: translateX(-100%); + transition: none; + } + + &--exit-left { + z-index: 1; + transform: translateX(-100%); + opacity: 0; + } + + &--exit-right { + z-index: 1; + transform: translateX(100%); + opacity: 0; + } + } + + &__music { + @include on-desktop { + grid-column: 2 / 6; + grid-row: 2; + } + } + + &__connectivity { + @include on-desktop { + grid-column: 2 / 6; + grid-row: 1; + } + } + + &__app { + @include on-desktop { + grid-column: 8 / -1; + grid-row: 1; + } + } + + &__title { + padding-bottom: 20px; + color: $features-text-color; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + list-style-position: inside; + } + + &__controls { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + @include on-tablet { + align-items: start; + } + + @include on-desktop { + display: none; + } + } + + &__button { + cursor: pointer; + + width: 48px; + height: 14px; + border: none; + + background: transparent; + + transition: background-color 0.3s ease; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + mask-size: contain; + + &--left { + -webkit-mask-image: url(../images/features/button-left.svg); + mask-image: url(../images/features/button-left.svg); + } + + &--right { + -webkit-mask-image: url(../images/features/button-right.svg); + mask-image: url(../images/features/button-right.svg); + } + + &--disabled { + cursor: not-allowed; + background-color: $disabled-button; + } + + &--active { + background-color: $main-color; + + &:hover { + background-color: $features-text-color; + } + } + } + + &__count { + display: flex; + } + + &__amount { + margin-top: 4px; + font-size: 11px; + color: $features-text-color; + } + + &__image { + position: absolute; + z-index: 9; + right: 0; + bottom: 0; + + width: 100%; + + @include on-tablet { + width: 58%; + } + + @include on-desktop { + right: 20px; + max-width: 543px; + max-height: 301px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..3fe2ed9ef --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,101 @@ +.footer { + position: relative; + + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + margin: 0 30px 20px; + + @include on-tablet { + gap: 60px; + margin: 0 30px 30px; + } + + @include on-desktop { + margin-inline: 123px; + } + + @include on-large-desktop { + margin-inline: 200px; + } + + &__logo { + display: none; + + @include on-tablet { + display: block; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + } + + &__social { + display: flex; + gap: 40px; + } + + &__social-icon { + cursor: pointer; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: transform 0.3s ease; + + &--facebook { + background-image: url('../images/social-icons/facebook.svg'); + } + + &--x { + background-image: url('../images/social-icons/x.svg'); + } + + &--instagram { + background-image: url('../images/social-icons/instagram.svg'); + } + + &:hover { + transform: scale(1.2); + } + } + + &__terms { + color: $disabled-button; + text-align: center; + } + + &__arrow { + display: none; + + @include on-tablet { + position: absolute; + top: 0; + right: 0; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/arrow-icon.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..c4d623998 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,74 @@ +.header { + @include on-tablet { + @include padding-inline; + + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 20px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + + &__picture { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2; + padding-top: 58px; + } + + @include on-desktop { + grid-column: 5 / -1; + padding-top: 40px; + } + } + + &__image { + display: block; + width: 100%; + + @include on-tablet { + height: 100%; + max-height: 430px; + object-fit: contain; + } + + @include on-desktop { + max-height: 465px; + margin-top: 90px; + } + } + + &__content { + padding: 40px 30px; + + @include on-tablet { + grid-column: 1 / 4; + padding: 130px 0 0; + } + + @include on-desktop { + padding-top: 171px; + } + } + + &__title { + padding-bottom: 20px; + + @include on-tablet { + padding-bottom: 30px; + } + } + + &__nav { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1 / -1; + grid-row: 3; + justify-self: center; + } + } +} diff --git a/src/styles/blocks/languages.scss b/src/styles/blocks/languages.scss new file mode 100644 index 000000000..361a52e26 --- /dev/null +++ b/src/styles/blocks/languages.scss @@ -0,0 +1,60 @@ +.languages { + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + gap: 30px; + } + + &__specs { + font: inherit; + color: $specs-color; + } + + &__slash { + font: inherit; + } + + &__buttons { + display: flex; + gap: 4px; + } + + &__button { + cursor: pointer; + + position: relative; + + padding: 0; + border: none; + + font: inherit; + color: $language-color; + + background: inherit; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + + &--active { + color: $main-color; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..1e06177b5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,83 @@ +.menu { + @include padding-inline; + + pointer-events: none; + + position: fixed; + z-index: 10; + top: 0; + left: 0; + + overflow: auto; + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100%; + + color: $main-color; + + opacity: 0; + background-color: $main-background; + + transition: opacity 0.4s ease; + + &:target { + pointer-events: all; + opacity: 1; + + @include on-desktop { + display: none; + } + } + + &__top-bar { + padding-inline: 0; + + @include on-tablet { + padding-top: 37px; + } + } + + &__nav { + margin-block: 30px 50px; + + @include on-tablet { + margin-top: 64px; + } + } + + &__languages { + @include on-tablet { + display: none; + } + } + + &__buy-button { + display: block; + + margin-block: auto 30px; + padding-block: 16px; + + color: $button-color; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + background-color: $main-color; + + transition: + box-shadow 0.3s ease, + background-color 0.3s ease; + + &:hover { + background-color: $button-hover; + box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3); + } + + @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..fa90a57af --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,54 @@ +.nav { + display: flex; + flex-direction: column; + gap: 25px; + list-style: none; + + @include on-tablet { + gap: 40px; + } + + @include on-desktop { + flex-direction: row; + gap: 84px; + margin-top: 198px; + } + + &__link { + position: relative; + font: inherit; + color: $main-color; + text-decoration: none; + + @include on-tablet { + font-size: 22px; + } + + @include on-desktop { + font-size: 14px; + } + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + left: 0; + + width: 0; + height: 2px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__story-link { + font-weight: 700; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..6fe2d73a2 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page { + scroll-behavior: smooth; + color: $main-color; + background-color: $main-background; + + &__body:has(.menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..58e67c668 --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,33 @@ +.presentation { + margin: 110px 24px; + + @include on-tablet { + margin: 140px 34px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + margin: 170px 123px; + } + + @include on-large-desktop { + margin: 150px 200px; + } + + &__picture { + @include on-desktop { + grid-column: 2 / -2; + } + } + + &__image { + width: 100%; + height: 100%; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/styles/blocks/question.scss b/src/styles/blocks/question.scss new file mode 100644 index 000000000..d76edb9a9 --- /dev/null +++ b/src/styles/blocks/question.scss @@ -0,0 +1,96 @@ +.question { + @include padding-inline; + + padding-block: 90px 110px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + padding-block: 140px; + } + + @include on-desktop { + padding-block: 170px; + } + + &__title { + margin-bottom: 27px; + } + + &__form { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__input { + padding: 12px 0 12px 20px; + border: 1px solid $language-color; + + color: $main-color; + + background: transparent; + outline: none; + caret-color: $main-color; + + transition: border-color 0.3s ease; + + &::placeholder { + color: $disabled-button; + transition: color 0.3s ease; + } + + &--textarea { + resize: none; + padding-bottom: 88px; + } + + &.is-invalid { + border-color: #eb5757; + + &::placeholder { + color: rgba(235, 87, 87, 0.3); + } + } + + &:hover { + border-color: $features-text-color; + + &::placeholder { + color: $features-text-color; + } + } + + &:focus { + border-color: $features-text-color; + + &::placeholder { + color: $features-text-color; + } + } + } + + &__button { + width: 100px; + margin-top: 10px; + padding-block: 16px; + border: none; + + color: $button-color; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + background-color: $secondary-color; + + transition: + box-shadow 0.3s ease, + background-color 0.3s ease; + + &:hover { + background-color: $features-text-color; + box-shadow: 5px 10px 10px rgba(12, 121, 122, 0.3); + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 000000000..38f7cef0c --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,80 @@ +.testimonials { + @include padding-inline; + + position: relative; + + box-sizing: border-box; + width: 100%; + margin-block: 110px; + + text-align: center; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + } + + &__content { + @include on-desktop { + grid-column: 3 / -3; + } + } + + &__quote { + position: absolute; + z-index: -1; + top: 0; + left: 50%; + transform: translateX(-104px); + + display: block; + + width: 208px; + height: 171px; + + background-image: url(../images/testimonials/quote.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + transform: translateX(-116.5px); + width: 233px; + height: 189px; + } + } + + &__photo { + padding-top: 30px; + transition: transform 0.3s ease; + + @include on-tablet { + padding-top: 40px; + } + + &:hover { + transform: scale(1.1); + } + } + + &__description { + padding-top: 50px; + + @include on-tablet { + padding-top: 60px; + } + } + + &__name { + padding-top: 10px; + + @include on-tablet { + padding-top: 20px; + } + } + + &__position { + padding-top: 5px; + color: $secondary-text-color; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..27ddee0e0 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,111 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 25px 30px; + + @include on-tablet { + grid-column: 1 / -1; + padding: 29px 0 0; + } + + &__image { + width: 161px; + height: 26px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__right { + display: flex; + gap: 30px; + align-items: center; + } + + &__languages { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__buy-button { + display: none; + + @include on-tablet { + display: block; + + width: 100px; + padding-block: 16px; + border: none; + + color: $button-color; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + background-color: $main-color; + + transition: + box-shadow 0.3s ease, + background-color 0.3s ease; + + &:hover { + background-color: $button-hover; + box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3); + } + } + } + + &__menu { + cursor: pointer; + + display: block; + + width: 24px; + height: 16px; + + background-image: url('../images/icons/burger-menu-icon.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: transform 0.3s ease; + + @include on-desktop { + display: none; + } + + &:hover { + transform: scale(1.1); + } + } + + &__close { + cursor: pointer; + + display: block; + + width: 16px; + height: 16px; + + background-image: url('../images/icons/close-icon.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: transform 0.3s ease; + + @include on-desktop { + display: none; + } + + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..5782209a9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,17 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'swiper/css'; +@import 'blocks/page'; +@import 'blocks/nav'; +@import 'blocks/languages'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/benefits'; +@import 'blocks/presentation'; +@import 'blocks/about'; +@import 'blocks/testimonials'; +@import 'blocks/features'; +@import 'blocks/question'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..4f7662435 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,109 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +%h3 { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-transform: uppercase; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +%h4 { + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-transform: uppercase; +} + +%h5 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; +} + +%main-text { + font-family: Inter, sans-serif; + font-size: 16px; font-weight: 400; + line-height: 24px; +} + +%secondary-text { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; +} + +%button { + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; +} + +%languages { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; +} + +%quote { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..c653597ff 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,39 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-large-desktop { + @media screen and (min-width: 1920px) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } + + @include on-large-desktop { + padding-inline: 200px; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..3c6a2d882 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,35 @@ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 50px transparent inset !important; + transition: background-color 999999s ease-in-out 0s; + + -webkit-text-fill-color: $main-color !important; +} + +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:active { + border: 1px solid $language-color !important; +} + +body, +html, +ul, +p, +h1, +h2, +h3, +h4, +h5, +button, +a { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..29cafea1b 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,11 @@ -$c-gray: #eee; +$main-background: #f7f7f7; +$main-color: #333; +$button-color: #fff; +$button-hover: #131313; +$specs-color: #4f4f4f; +$secondary-color: #0db2b3; +$language-color: #828282; +$secondary-text-color: #7c7c7c; +$features-background: #d6ecec; +$features-text-color: #0c797a; +$disabled-button: #bdbdbd;