diff --git a/index.html b/index.html index d339e685..7baaf918 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,1802 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + KatVR + + + + + - -

Hello Mate Academy

- + + + + + + + + +
+
+
+

+ More than + gaming! +

+

+ This also made for people who are interested in... +

+
+ +
+
+ Education image + +

Education

+ +

+ Create aducational simulations, trainings and much more with + unlimited virtual space and minimum physical space +

+
+ +
+ Real estate image + +

Real estate

+ +

+ Desighn architectural projects in a deeply realistic environment + allowing visitors to freely walk around, and feel their vibe +

+
+ +
+ Fitness image + +

Fitness

+ +

+ Combine business with pleasure, and discover countless ways to + stay fit while playing your favorite VR Games! +

+
+ +
+ Fitness image + +

Social iteractions

+ +

+ Hang out with your friends in the virtual world when you can`t + meet space requirements +

+
+
+
+ +
+
+

+ About + product +

+ +
+
+ slide 1 + slide 2 + slide 3 + slide 4 + slide 5 +
+ +
+ + + + + +
+ +
+ 1 + / + 5 +
+ +
+
+ + +
+
+
+
+
+
+
+
+
+
+ +

+ KAT loco is a foot-based VR locomotion system that gives complete + physical control over lower-body actions, allowing you to freely + walk, run, and carry out just any other movement in virtual reality. +

+ + +
+ +
+
+ + Hello, +
+ +

+ Nice to meet + you! +

+ +

+ KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and solutions. + Founded in 2013, we have quickly grown to become one of the + world`s leading professional suppliers of VR games` & simulations` + equipment +

+
+ +
+ Style image About Us + Style image About Us + Style image About Us + Style image About Us + Style image About Us + Style image About Us + Style image About Us +
+
+
+ +
+
+

+ Tech + specs +

+ +
+ tech image + + + +
+

Sensor

+

+ Weight: 35g/1.23oz each +
+ Dimension: 50mm/1.97in +
+ 24mm/0.94in +
+ Light: LED lights +

+
+
+

Batterries

+

+ Type: Lthium-lon polymer batteries +
+ Capacity: 370mAh +
+ Battery life: 10h of continuous use 150 hours +
+ on stand by +
+ Charging: Fast charging - 1 hour +
+ Charging voltage and current: 5V = 0.5A +

+
+
+

Connection

+

+ Wireless: Bluetooth 4.2 +
+ Signal range: 5m +
+ Receiver: USB 2.0 and above +

+
+ + + + decoration line + + + + + decoration line + + + + + decoration line + + + decoration line +
+
+
+ +
+
+

+ Why   + kat loco? +

+
+
+ Universally compatible image +

Universally compatible

+

+ KAT Loco offers universal compatibility across all major VR + headsets and platforms allowing you to play any VR game with + support for Free Locomotion +

+
+
+ VR/PC image +

VR/PC control panel

+

+ Our Multifunctional Software allows for quick access to KAT Loco's + control panel both from a computer desktop, and directly from your + VR headset. +

+
+
+ Wireless sensors image +

Wireless sensors

+

+ What makes it even more advanced, KAT Loco is entirely wireless, + and comes with a complete system of algorithms, super durable + batteries and more! +

+
+
+
+ + Buy Now + +
+
+
+ +
+
+
+

Have any questions?

+

+ Get in + touch +

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

+ Our manager will reply you within 15 minutes +

+
+ +
+ +
+
+
+ + + + +
+ + +
+ +
+
+ diff --git a/src/images/about/about-us.svg b/src/images/about/about-us.svg new file mode 100644 index 00000000..46f1ba6f --- /dev/null +++ b/src/images/about/about-us.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/card-brand/mastercard.png b/src/images/card-brand/mastercard.png new file mode 100644 index 00000000..756b96c4 Binary files /dev/null and b/src/images/card-brand/mastercard.png differ diff --git a/src/images/card-brand/visa.png b/src/images/card-brand/visa.png new file mode 100644 index 00000000..5cbc06f6 Binary files /dev/null and b/src/images/card-brand/visa.png differ diff --git a/src/images/icons/dropdown-icon-hover.svg b/src/images/icons/dropdown-icon-hover.svg new file mode 100644 index 00000000..1b74fd13 --- /dev/null +++ b/src/images/icons/dropdown-icon-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/dropdown-icon.svg b/src/images/icons/dropdown-icon.svg new file mode 100644 index 00000000..801d5661 --- /dev/null +++ b/src/images/icons/dropdown-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 00000000..184fe5ca Binary files /dev/null and b/src/images/icons/favicon.png differ diff --git a/src/images/icons/icon-back.svg b/src/images/icons/icon-back.svg new file mode 100644 index 00000000..1a2fbd8a --- /dev/null +++ b/src/images/icons/icon-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 00000000..307a46db --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 00000000..b0e90ef8 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-play-hover.svg b/src/images/icons/icon-play-hover.svg new file mode 100644 index 00000000..cac14542 --- /dev/null +++ b/src/images/icons/icon-play-hover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/icon-play.svg b/src/images/icons/icon-play.svg new file mode 100644 index 00000000..26f57506 --- /dev/null +++ b/src/images/icons/icon-play.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/icon-up-hover.svg b/src/images/icons/icon-up-hover.svg new file mode 100644 index 00000000..40da6f4c --- /dev/null +++ b/src/images/icons/icon-up-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-up.svg b/src/images/icons/icon-up.svg new file mode 100644 index 00000000..c70c5043 --- /dev/null +++ b/src/images/icons/icon-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/social/facebook-icon.svg b/src/images/icons/social/facebook-icon.svg new file mode 100644 index 00000000..c5ce9201 --- /dev/null +++ b/src/images/icons/social/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/reddit-icon.svg b/src/images/icons/social/reddit-icon.svg new file mode 100644 index 00000000..2ec59738 --- /dev/null +++ b/src/images/icons/social/reddit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/twitter-icon.svg b/src/images/icons/social/twitter-icon.svg new file mode 100644 index 00000000..cd292e38 --- /dev/null +++ b/src/images/icons/social/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/youtube-icon.svg b/src/images/icons/social/youtube-icon.svg new file mode 100644 index 00000000..d59efa35 --- /dev/null +++ b/src/images/icons/social/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/information/education.svg b/src/images/information/education.svg new file mode 100644 index 00000000..67546729 --- /dev/null +++ b/src/images/information/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/information/fitness.svg b/src/images/information/fitness.svg new file mode 100644 index 00000000..93790d0f --- /dev/null +++ b/src/images/information/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/information/real-estate.svg b/src/images/information/real-estate.svg new file mode 100644 index 00000000..d96adb64 --- /dev/null +++ b/src/images/information/real-estate.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/information/social.svg b/src/images/information/social.svg new file mode 100644 index 00000000..19528aeb --- /dev/null +++ b/src/images/information/social.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 00000000..df0e513e Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/product-img-tablet.png b/src/images/product-img-tablet.png new file mode 100644 index 00000000..c9c596b9 Binary files /dev/null and b/src/images/product-img-tablet.png differ diff --git a/src/images/product-img-x1.png b/src/images/product-img-x1.png new file mode 100644 index 00000000..349b0f7d Binary files /dev/null and b/src/images/product-img-x1.png differ diff --git a/src/images/product-img-x2.png b/src/images/product-img-x2.png new file mode 100644 index 00000000..0e571e72 Binary files /dev/null and b/src/images/product-img-x2.png differ diff --git a/src/images/product-img.png b/src/images/product-img.png new file mode 100644 index 00000000..0c44622b Binary files /dev/null and b/src/images/product-img.png differ diff --git a/src/images/sllider/header/slide-1.png b/src/images/sllider/header/slide-1.png new file mode 100644 index 00000000..993d6323 Binary files /dev/null and b/src/images/sllider/header/slide-1.png differ diff --git a/src/images/sllider/slide1.png b/src/images/sllider/slide1.png new file mode 100644 index 00000000..c67ce5f6 Binary files /dev/null and b/src/images/sllider/slide1.png differ diff --git a/src/images/tech-specs/bateries-line-wide.svg b/src/images/tech-specs/bateries-line-wide.svg new file mode 100644 index 00000000..06b938dd --- /dev/null +++ b/src/images/tech-specs/bateries-line-wide.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/bateries-line.svg b/src/images/tech-specs/bateries-line.svg new file mode 100644 index 00000000..a037109a --- /dev/null +++ b/src/images/tech-specs/bateries-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/connection-line-wide.svg b/src/images/tech-specs/connection-line-wide.svg new file mode 100644 index 00000000..8183d536 --- /dev/null +++ b/src/images/tech-specs/connection-line-wide.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/connection-line.svg b/src/images/tech-specs/connection-line.svg new file mode 100644 index 00000000..e366ad56 --- /dev/null +++ b/src/images/tech-specs/connection-line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech-specs/ellipse.svg b/src/images/tech-specs/ellipse.svg new file mode 100644 index 00000000..4b03291f --- /dev/null +++ b/src/images/tech-specs/ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech-specs/icons/button-icon-close.svg b/src/images/tech-specs/icons/button-icon-close.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/src/images/tech-specs/icons/button-icon-close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/icons/button-icon.svg b/src/images/tech-specs/icons/button-icon.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/src/images/tech-specs/icons/button-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech-specs/sensor-line-wide.svg b/src/images/tech-specs/sensor-line-wide.svg new file mode 100644 index 00000000..ef522dfa --- /dev/null +++ b/src/images/tech-specs/sensor-line-wide.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech-specs/sensor-line.svg b/src/images/tech-specs/sensor-line.svg new file mode 100644 index 00000000..ea391bde --- /dev/null +++ b/src/images/tech-specs/sensor-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/tech-specs.png b/src/images/tech-specs/tech-specs.png new file mode 100644 index 00000000..6dc01e42 Binary files /dev/null and b/src/images/tech-specs/tech-specs.png differ diff --git a/src/images/why-kat/compatible.svg b/src/images/why-kat/compatible.svg new file mode 100644 index 00000000..3d64d90f --- /dev/null +++ b/src/images/why-kat/compatible.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/why-kat/control.svg b/src/images/why-kat/control.svg new file mode 100644 index 00000000..b0ae1762 --- /dev/null +++ b/src/images/why-kat/control.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/why-kat/wireless.svg b/src/images/why-kat/wireless.svg new file mode 100644 index 00000000..1b62826b --- /dev/null +++ b/src/images/why-kat/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/scripts/cardInputs.js b/src/scripts/cardInputs.js new file mode 100644 index 00000000..3594f9f3 --- /dev/null +++ b/src/scripts/cardInputs.js @@ -0,0 +1,62 @@ +export function initCardInputs() { + const cardField = document.querySelector('.form__card'); + const cardInputs = cardField.querySelectorAll('.form__input'); + const expirationDateInput = document.querySelector('#expiration-date'); + + const cardBrandElem = document.querySelector('.card-brand'); + + [...cardInputs].forEach((input, index) => { + input.addEventListener('input', () => { + input.value = input.value.replace(/\D/g, ''); + + if (input.value.length === 4 && cardInputs[index + 1]) { + cardInputs[index + 1].focus(); + } + + if (index === 0) { + const firstDigit = +input.value[0]; + + cardBrandElem.classList.remove( + 'card-brand--visa', + 'card-brand--mastercard', + ); + + if (!firstDigit) { + return; + } + + if (firstDigit >= 0 && firstDigit <= 4) { + cardBrandElem.classList.add('card-brand--visa'); + } else if (firstDigit >= 5 && firstDigit <= 9) { + cardBrandElem.classList.add('card-brand--mastercard'); + } + } + }); + + input.addEventListener('keydown', (e) => { + if ( + e.key === 'Backspace' && + input.value.length === 0 && + cardInputs[index - 1] + ) { + cardInputs[index - 1].focus(); + } + }); + }); + + expirationDateInput.addEventListener('input', () => { + let inputValue = expirationDateInput.value.replace(/\D/g, ''); + + if (inputValue.length > 2) { + inputValue = `${inputValue.slice(0, 2)}/${inputValue.slice(2)}`; + } + + expirationDateInput.value = inputValue; + }); + + expirationDateInput.addEventListener('keydown', (e) => { + if (expirationDateInput.length === 3 && e.key === 'Backspace') { + expirationDateInput.value = expirationDateInput.value.slice(0, 2); + } + }); +} diff --git a/src/scripts/dropdown.js b/src/scripts/dropdown.js new file mode 100644 index 00000000..6532c40d --- /dev/null +++ b/src/scripts/dropdown.js @@ -0,0 +1,41 @@ +export function initDropdown() { + const dropdowns = document.querySelectorAll('.dropdown'); + + dropdowns.forEach(dropdown => { + const trigger = dropdown.querySelector('.dropdown__trigger'); + const dropdownList = dropdown.querySelector('.dropdown__list'); + const dropdownValue = dropdown.querySelector('.dropdown__value'); + + if (!trigger || !dropdownList) { + return; + } + + const isQuantity = dropdown.dataset.type === 'quantity'; + const UNIT_PRICE = 1200; + const priceElem = isQuantity + ? dropdown.closest('.order-summary')?.querySelector('.order-summary__value') + : null; + + trigger.addEventListener('click', () => { + dropdown.classList.toggle('dropdown--active'); + }); + + dropdownList.addEventListener('click', (event) => { + const listItem = event.target.closest('.dropdown__item'); + + if (!listItem) { + return; + } + + const value = listItem.textContent; + + dropdownValue.textContent = value; + + if (isQuantity && priceElem) { + priceElem.textContent = `$${UNIT_PRICE * +value}`; + } + + dropdown.classList.remove('dropdown--active'); + }); + }); +} diff --git a/src/scripts/faq.js b/src/scripts/faq.js new file mode 100644 index 00000000..ee378d61 --- /dev/null +++ b/src/scripts/faq.js @@ -0,0 +1,15 @@ +export function initFaq() { + const faqList = document.querySelector('.faq__list'); + + faqList.addEventListener('click', (event) => { + const trigger = event.target.closest('.faq__question'); + + if (!trigger) { + return; + } + + const item = trigger.closest('.faq__item'); + + item.classList.toggle('faq__item--active'); + }); +} diff --git a/src/scripts/form.js b/src/scripts/form.js new file mode 100644 index 00000000..a451058e --- /dev/null +++ b/src/scripts/form.js @@ -0,0 +1,72 @@ +export function initForm() { + const buyElem = document.querySelector('.buy'); + const completeButton = buyElem.querySelector('.complete__button'); + + const placeOrderElem = buyElem.querySelector('.place-order'); + const placeOrderForm = placeOrderElem.querySelector('.form'); + + const payElem = buyElem.querySelector('.pay'); + const payForm = payElem.querySelector('.form'); + + placeOrderForm.addEventListener('submit', (e) => { + e.preventDefault(); + + buyElem.classList.add('buy--pay'); + setActiveStep(1); + + placeOrderForm.reset(); + }); + + payForm.addEventListener('submit', (e) => { + e.preventDefault(); + + buyElem.classList.add('buy--complete'); + setActiveStep(2); + + payForm.reset(); + }); + + completeButton.addEventListener('click', () => { + if (buyElem.classList.contains('buy--complete')) { + buyElem.classList.remove('buy--complete'); + } + + if (buyElem.classList.contains('buy--pay')) { + buyElem.classList.remove('buy--pay'); + } + + setActiveStep(0); + }); +} + +export function setActiveStep(stepIndex = 0) { + const stepsElem = document.querySelector('[data-steps="steps"]'); + const stepsTopElem = document.querySelector('[data-steps="top-steps"]'); + + const steps = stepsElem.querySelectorAll('.checkout-steps__step'); + const lines = stepsElem.querySelectorAll('.checkout-steps__line'); + + const stepsTop = stepsTopElem.querySelectorAll('.checkout-steps__step'); + + [...steps].forEach((step, index) => { + step.classList.toggle( + 'checkout-steps__step--active', + index === stepIndex + ); + }); + + [...stepsTop].forEach((step, index) => { + step.classList.toggle( + 'checkout-steps__step--active', + index === stepIndex + ); + }); + + [...lines].forEach((line, index) => { + line.classList.toggle( + 'checkout-steps__line--active', + index === stepIndex + ); + }); +} + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..3b734681 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,20 @@ 'use strict'; + +import { initFaq } from "./faq"; +import { initDropdown } from "./dropdown"; +import { initForm, setActiveStep } from "./form"; +import { initCardInputs } from "./cardInputs"; +import { initSliderAbout } from "./sliderAbout"; +import { initSpecsShown } from "./techSpecs"; +import { initSliderHeader } from "./sliderHeader"; +import { initVideoModal } from "./videoModal"; + +setActiveStep(); +initFaq(); +initDropdown(); +initForm(); +initCardInputs(); +initSliderAbout(); +initSpecsShown(); +initSliderHeader(); +initVideoModal(); diff --git a/src/scripts/sliderAbout.js b/src/scripts/sliderAbout.js new file mode 100644 index 00000000..793c6866 --- /dev/null +++ b/src/scripts/sliderAbout.js @@ -0,0 +1,75 @@ +export function initSliderAbout() { + const aboutElem = document.querySelector('.about'); + const slider = aboutElem.querySelector('.slider'); + const images = slider.querySelectorAll('.slider__image'); + const dots = slider.querySelectorAll('.slider__dot'); + const lines = slider.querySelectorAll('.slider__line'); + const buttons = slider.querySelectorAll('.slider__button'); + const counterCurrent = slider.querySelector('.slider__counter-current'); + + slider.addEventListener('click', (e) => { + const dot = e.target.closest('.slider__dot'); + const button = e.target.closest('.slider__button'); + + if (dot) { + setActive(+dot.dataset.index); + } + + if (button) { + const currentActiveSlide = slider.querySelector('.slider__image--active'); + const buttonData = button.dataset.sliderControl; + let nextSlide; + + if (buttonData === 'prev') { + nextSlide = currentActiveSlide.previousElementSibling; + } + + if (buttonData === 'next') { + nextSlide = currentActiveSlide.nextElementSibling; + } + + if (!nextSlide) return; + + const index = [...images].findIndex(image => image === nextSlide); + + setActive(index); + setCounter(index); + setDisabled(); + } + }); + + function setActive(index = 0) { + images.forEach((image, i) => { + image.classList.toggle('slider__image--active', i === index); + }); + + dots.forEach((dot, i) => { + dot.classList.toggle('slider__dot--active', i === index); + }); + + lines.forEach((line, i) => { + line.classList.toggle('slider__line--active', i === index); + }); + } + + setActive(); + + function setDisabled() { + const [prev, next] = buttons; + const isFirstSlideActive = images[0].classList.contains( + 'slider__image--active', + ); + const isLastSlideActive = images[images.length - 1].classList.contains( + 'slider__image--active', + ); + + prev.disabled = isFirstSlideActive; + next.disabled = isLastSlideActive; + } + + setDisabled(); + + function setCounter(index) { + counterCurrent.textContent = index + 1; + } +} diff --git a/src/scripts/sliderHeader.js b/src/scripts/sliderHeader.js new file mode 100644 index 00000000..040ebb7e --- /dev/null +++ b/src/scripts/sliderHeader.js @@ -0,0 +1,64 @@ +export function initSliderHeader() { + const BUTTON_PREV = 'prev'; + const BUTTON_NEXT = 'next'; + + const headerElem = document.querySelector('.header'); + const slider = headerElem.querySelector('.slider'); + const images = headerElem.querySelectorAll('.slider__image'); + const lines = headerElem.querySelectorAll('.header__slider-line'); + const controlButtonsElem = headerElem.querySelector( + '.header__slider-buttons', + ); + const buttons = controlButtonsElem.querySelectorAll('button'); + + images[0].classList.add('slider__image--active'); + lines[0].classList.add('header__slider-line--active'); + setDisabled(); + + controlButtonsElem.addEventListener('click', (e) => { + const button = e.target.closest('.header__button'); + + if (!button) return; + + const currentActiveSlide = slider.querySelector('.slider__image--active'); + const buttonData = button.dataset.sliderControl; + let nextSlide; + + if (buttonData === BUTTON_PREV) { + nextSlide = currentActiveSlide.previousElementSibling; + } + + if (buttonData === BUTTON_NEXT) { + nextSlide = currentActiveSlide.nextElementSibling; + } + + if (!nextSlide) return; + + const index = [...images].findIndex(image => image === nextSlide); + + setActiveSlide(index); + setDisabled(); + }); + + function setActiveSlide(index) { + images.forEach((image, i) => { + image.classList.toggle('slider__image--active', index === i); + }); + lines.forEach((line, i) => { + line.classList.toggle('header__slider-line--active', index === i); + }); + } + + function setDisabled() { + const [prev, next] = buttons; + const isFirstSlideActive = images[0].classList.contains( + 'slider__image--active', + ); + const isLastSlideActive = images[images.length - 1].classList.contains( + 'slider__image--active', + ); + + prev.disabled = isFirstSlideActive; + next.disabled = isLastSlideActive; + } +} diff --git a/src/scripts/techSpecs.js b/src/scripts/techSpecs.js new file mode 100644 index 00000000..b34b65fe --- /dev/null +++ b/src/scripts/techSpecs.js @@ -0,0 +1,31 @@ +export function initSpecsShown() { + const techElem = document.querySelector('.tech'); + const buttons = [...techElem.querySelectorAll('.tech__button')]; + const contents = [...techElem.querySelectorAll('.tech__specs')]; + + function setActive(button) { + const feature = button.dataset.feature; + const isActive = button.classList.contains('tech__button--active'); + + buttons.forEach((btn) => + btn.classList.toggle('tech__button--active', !isActive && btn === button), + ); + + contents.forEach((content) => + content.classList.toggle( + 'tech__specs--active', + !isActive && content.dataset.featureContent === feature, + ), + ); + } + + techElem.addEventListener('click', (e) => { + const button = e.target.closest('.tech__button'); + + if (!button) { + return; + } + + setActive(button); + }); +} diff --git a/src/scripts/videoModal.js b/src/scripts/videoModal.js new file mode 100644 index 00000000..79de458d --- /dev/null +++ b/src/scripts/videoModal.js @@ -0,0 +1,35 @@ +export function initVideoModal() { + const TABLET_WIDTH = 1280; + const videoButtons = document.querySelectorAll('.video-button'); + const modal = document.querySelector('.video-modal'); + const video = modal.querySelector('.video-modal__video'); + const YOUTUBE_VIDEO_URL = + 'https://www.youtube.com/embed/SvTbB19bvIw?si=LXBeo7zUC5gdkYcK&autoplay=1'; + + videoButtons.forEach((videoButton) => { + videoButton.addEventListener('click', (e) => modalOpen(e)); + }); + + modal.addEventListener('click', (e) => modalClose(e)); + + function modalOpen(e) { + if (window.innerWidth < TABLET_WIDTH) { + return; + } + + e.preventDefault(); + video.src = YOUTUBE_VIDEO_URL; + modal.showModal(); + document.documentElement.style.overflow = 'hidden'; + } + + function modalClose(e) { + const close = modal.querySelector('.video-modal__close'); + + if (e.target === close || e.target === modal) { + modal.close(); + video.src = ''; + document.documentElement.style.overflow = ''; + } + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 619b8c52..00000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe..00000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..05660083 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,195 @@ +.about { + padding-block: 50px; + + @include padding-inline; + + background: $bg-gradient; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-desktop-wide { + padding: 158px 0; + } + + &__top { + @include on-tablet { + @include section-grid; + + grid-template-rows: repeat(3, min-content); + margin-bottom: 80px; + } + + @include on-desktop { + margin-bottom: 200px; + } + + @include on-desktop-wide { + max-width: $wide-desktop-width; + margin-inline: auto; + + @include padding-inline; + } + } + + &__slider { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1 / -1; + } + + @include on-desktop { + position: relative; + grid-column: 3 / 8; + } + + @include on-desktop-wide { + grid-column: 4 / 11; + } + } + + &__title { + @include h2-mobile; + + margin-bottom: 20px; + + &--highlighted { + font-weight: 400; + color: $color-blue; + + @include on-desktop-wide { + font-family: Quantum, Inter, sans-serif; + } + } + + @include on-tablet { + grid-column: 4 / -1; + margin-block: 10px 30px; + } + + @include on-desktop { + @include h2-desktop; + + grid-column: 9 / -1; + } + + @include on-desktop-wide { + grid-column: 12 / -1; + } + } + + &__desc { + @include text-mobile; + + margin-top: 20px; + + @include on-tablet { + grid-column: 4 / -1; + margin-block: 0 30px; + } + + @include on-desktop { + grid-column: 9 / -1; + } + + @include on-desktop-wide { + grid-column: 12 / -1; + } + } + + &__video-button { + position: relative; + margin-block: 24px 80px; + margin-inline: auto; + + @include on-tablet { + grid-column: 4 / -1; + margin: 0; + } + + @include on-desktop { + grid-column: 9 / -1; + } + + @include on-desktop-wide { + grid-column: 12 / -1; + } + } + + &__bottom { + @include on-tablet { + @include section-grid; + } + + @include on-desktop-wide { + @include padding-inline; + + max-width: $wide-desktop-width; + margin-inline: auto; + } + } + + &__bottom-left { + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &__style-img { + display: block; + flex-shrink: 0; + width: 62px; + height: 253px; + + @include on-desktop { + width: 83px; + height: 337px; + } + } + + &__bottom-right { + display: none; + + & > .about__style-img:nth-child(odd) { + transform: rotate(180deg); + } + + @for $i from 1 through 7 { + $opacity: 1 - ($i - 1) * 0.2; + $opacity: max($opacity, 0.1); + + & > .about__style-img:nth-child(#{$i}) { + opacity: $opacity; + } + } + + @include on-tablet { + overflow: hidden; + display: flex; + grid-column: 5 / -1; + gap: 20px; + } + + @include on-desktop { + transform: translateY(-10%); + grid-column: 7 / -1; + } + } + + &__pre-meet { + font-family: inherit; + font-size: 14px; + font-weight: 400; + line-height: 100%; + color: $color-blue; + } +} diff --git a/src/styles/blocks/buy-button.scss b/src/styles/blocks/buy-button.scss new file mode 100644 index 00000000..67f4da44 --- /dev/null +++ b/src/styles/blocks/buy-button.scss @@ -0,0 +1,3 @@ +.buy-button { + @include button; +} diff --git a/src/styles/blocks/buy.scss b/src/styles/blocks/buy.scss new file mode 100644 index 00000000..04c4885e --- /dev/null +++ b/src/styles/blocks/buy.scss @@ -0,0 +1,180 @@ +.buy { + @include section-grid; + + grid-auto-rows: min-content; + height: 100vh; + background: $bg-gradient; + + @include on-desktop { + grid-template-rows: repeat(3, min-content); + padding-right: 110px; + } + + + &__top-bar { + grid-column: 1 / -1; + margin-bottom: 12px; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / -1; + margin-bottom: 100px; + + @include padding-inline; + } + + @include on-desktop-wide { + margin-inline: 0; + } + } + + &__icon { + @include on-desktop { + display: none; + } + } + + &__checkout-steps { + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + display: none; + } + } + + &__order-summary { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 6; + } + + @include on-desktop-wide { + grid-column: 1 / 8; + } + } + + &__image { + display: none; + + @include on-tablet { + display: block; + grid-column: 2 / -2; + width: 100%; + } + + @include on-desktop { + grid-column: 1 / 8; + } + } + + &__wrapper { + position: relative; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 8 / -1; + grid-row: 2 / -1; + } + } + + &__place-order, + &__pay, + &__complete { + position: absolute; + top: 0; + right: 0; + left: 0; + + transition: transform $animation-duration; + + @include on-desktop { + transition: none; + } + } + + &__pay { + transform: translateX(100%); + + @include on-desktop { + transform: scale(0) translateX(0); + } + } + + &__complete { + transform: translateX(100%); + margin-top: 60px; + } + + &--pay { + .buy__place-order { + pointer-events: none; + transform: translateX(-100%); + + @include on-desktop { + transform: scale(0); + } + } + + .buy__pay { + transform: translateX(0); + } + + .buy__order-summary { + @include on-tablet { + grid-column: 2 / 4; + padding-left: 0; + } + + @include on-desktop { + grid-column: 1 / 6; + padding-left: 110px; + } + } + } + + &--complete { + .buy__place-order { + transform: translateX(-100%); + + @include on-desktop { + transform: scale(0); + } + } + + .buy__pay { + transform: translateX(-100%); + + @include on-desktop { + pointer-events: none; + transform: scale(0); + } + } + + .buy__complete { + transform: translateX(0); + } + + .buy__order-summary, + .buy__image { + display: none; + } + + .buy__wrapper { + @include on-desktop { + grid-column: 2 / -1; + } + } + } +} diff --git a/src/styles/blocks/card-brand.scss b/src/styles/blocks/card-brand.scss new file mode 100644 index 00000000..b2059d72 --- /dev/null +++ b/src/styles/blocks/card-brand.scss @@ -0,0 +1,31 @@ +.card-brand { + display: none; + + @include on-tablet { + height: 30px; + } + + &__img { + display: none; + height: 100%; + } + + &--visa, + &--mastercard { + @include on-tablet { + display: block; + } + } + + &--visa &__img--visa { + @include on-tablet { + display: block; + } + } + + &--mastercard &__img--mastercard { + @include on-tablet { + display: block; + } + } +} diff --git a/src/styles/blocks/checkout-steps.scss b/src/styles/blocks/checkout-steps.scss new file mode 100644 index 00000000..d88fdbe1 --- /dev/null +++ b/src/styles/blocks/checkout-steps.scss @@ -0,0 +1,73 @@ +.checkout-steps { + &__list { + display: flex; + justify-content: space-between; + justify-items: center; + + padding-bottom: $steps-underline-offset; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 0; + } + + @include on-desktop { + gap: 200px; + padding-bottom: 0; + } + } + + &__step { + @include text-aside-mobile; + + position: relative; + font-size: 12px; + color: $color-info; + transition: color $animation-duration; + + &--active { + color: $color-blue; + } + + @include on-tablet { + display: flex; + justify-content: center; + width: 100%; + } + + @include on-desktop { + width: max-content; + font-size: 14px; + + &--active::after { + content: ''; + + position: absolute; + bottom: -10px; + + display: block; + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: $color-blue; + } + } + } + + &__lines { + display: flex; + } + + &__line { + width: 100%; + height: 1px; + background-color: $passive-buy-collor; + transition: background-color $animation-duration; + + &--active { + background-color: $color-blue; + } + } +} diff --git a/src/styles/blocks/complete.scss b/src/styles/blocks/complete.scss new file mode 100644 index 00000000..3fcacc55 --- /dev/null +++ b/src/styles/blocks/complete.scss @@ -0,0 +1,60 @@ +.complete { + @include padding-inline; + @include section-grid; + + &__title { + grid-column: 1 / -1; + + @include h1-mobile; + + margin-bottom: 16px; + text-align: center; + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + + @include on-tablet { + @include h1-desktop; + + grid-column: 2 / -2; + } + + @include on-desktop { + margin-bottom: 36px; + } + } + + &__desc { + grid-column: 1 / -1; + + @include text-mobile; + + margin-bottom: 40px; + color: $color-white; + text-align: center; + + @include on-tablet { + font-size: 18px; + } + } + + &__button { + grid-column: 1 / -1; + + @include button; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 5 / 9; + } + + @include on-desktop-wide { + grid-column: 7 / 11; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..34211d36 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,159 @@ +.contact-us { + padding-block: 50px; + + @include padding-inline; + + background-color: $bg-black; + + @include on-tablet { + padding-block: 70px 130px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-desktop-wide { + padding-block: 156px 206px; + padding-inline: 0; + } + + &__container { + position: relative; + + @include on-tablet { + @include section-grid; + + grid-template-rows: repeat(3, min-content); + } + + @include on-desktop-wide { + @include padding-inline; + + max-width: $wide-desktop-width; + margin-inline: auto; + } + } + + &__title-wrapper { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: span 6; + grid-row: 1; + } + + @include on-desktop-wide { + grid-column: span 8; + } + } + + &__title-intro { + @include text-mobile; + + margin-bottom: 10px; + font-size: 14px; + line-height: 100%; + color: $color-blue; + } + + &__title { + @include h2-mobile; + + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + @include h2-desktop; + } + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + } + + &__form { + margin-bottom: 30px; + padding-inline: 0; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / -1; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-desktop-wide { + grid-column: span 8; + } + } + + &__text { + @include text-mobile; + + font-size: 12px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + font-size: 16px; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-desktop-wide { + grid-column: span 8; + } + } + + &__contacts { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / 4; + grid-row: 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__link-up { + position: absolute; + right: 0; + bottom: 0; + + display: none; + + width: 48px; + height: 48px; + + background-image: url(../images/icons/icon-up.svg); + background-size: contain; + + @include hover(background-image, url(../images/icons/icon-up-hover.svg)); + + @include on-tablet { + right: 0; + bottom: 0; + display: block; + } + + @include on-desktop-wide { + right: 234px; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 00000000..bb78206e --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,35 @@ +.contacts { + width: fit-content; + + &--hidden-on-wide { + @include on-tablet { + display: none; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 12px; + } + + &__link { + @include text-mobile; + + display: block; + + width: 100%; + padding-block: 4px; + + font-size: 13px; + line-height: 100%; + text-decoration: none; + + @include hover(color, $color-blue); + @include hover(transform, translateX(20px)); + + @include on-tablet { + font-size: 16px; + } + } +} diff --git a/src/styles/blocks/dropdown.scss b/src/styles/blocks/dropdown.scss new file mode 100644 index 00000000..ea9ced63 --- /dev/null +++ b/src/styles/blocks/dropdown.scss @@ -0,0 +1,123 @@ +.dropdown { + position: relative; + width: 90px; + + &--header { + width: min-content; + } + + &__trigger { + cursor: pointer; + + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 40px; + padding-inline: $dropdown-padding; + border: none; + + background-color: #191536; + + &--left { + justify-content: start; + } + + &--header { + padding-inline: 10px; + background-color: transparent; + } + } + + &__value { + @include text-drop-down; + + &--font-size-s { + font-size: 16px; + } + + &--header { + color: $color-blue; + } + } + + &__icon { + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + + color: $color-blue; + + transition: transform $animation-duration; + + .dropdown--active & { + transform: rotate(180deg) translateY(50%); + } + + &--header { + right: -4px; + } + } + + &__content { + pointer-events: none; + cursor: pointer; + + position: absolute; + z-index: 1; + transform: translateY(-20px); + + overflow-y: auto; + + width: 100%; + max-height: 120px; + margin-top: 4px; + border-radius: 4px; + + opacity: 0; + background-color: #191536; + + transition: + opacity $animation-duration, + transform $animation-duration; + } + + &--active &__content { + pointer-events: auto; + transform: translateY(0); + opacity: 1; + } + + &__list { + display: flex; + flex-direction: column; + align-items: center; + } + + &__item { + @include text-drop-down; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + padding: 8px; + + @include hover(color, $color-blue); + @include hover(background-color, #2c2a55); + + &--font-size-s { + font-size: 16px; + } + + &--left { + justify-content: start; + padding-left: $dropdown-padding; + } + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 00000000..c626e4e8 --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,147 @@ +.faq { + height: 100vh; + background-color: $bg-aside; + + @include on-desktop { + max-height: 50%; + padding-bottom: 60px; + } + + &__top-bar { + justify-content: end; + margin-bottom: 24px; + + @include on-desktop { + margin-bottom: 0; + padding: 18px; + } + + @include on-desktop-wide { + margin-inline: 0; + } + } + + &__content { + @include padding-inline; + + @include on-desktop { + padding-inline: 90px; + } + } + + &__title { + @include h2-mobile; + + margin-bottom: 30px; + + &--secondary { + font-weight: 400; + color: $color-blue; + } + + @include on-desktop { + @include h2-desktop; + + width: 500px; + margin-bottom: 50px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 13px; + + @include on-desktop { + gap: 16px; + } + } + + &__item { + border: 1px solid $color-blue; + border-radius: 4px; + } + + &__question { + @include text-mobile; + + cursor: pointer; + + width: 100%; + padding: 20px 12px; + border: none; + + color: $color-blue; + text-align: left; + + background: none; + + @include on-tablet { + padding-inline: 30px; + } + + @include hover(color, $color-white); + } + + &__answer { + display: none; + flex-direction: column; + gap: 10px; + padding: 0 12px 20px; + + @include on-tablet { + padding-inline: 30px; + } + } + + &__item--active &__answer { + display: flex; + } + + &__text { + @include text-mobile; + } + + &__last-update { + @include text-mobile; + + font-size: 12px; + color: $color-info; + + @include on-desktop { + font-size: 14px; + } + } + + &__more-button { + display: block; + + margin-top: 50px; + margin-inline: auto; + padding-bottom: 10px; + border: none; + + color: $color-blue; + + background: none; + background-image: url(../images/icons/dropdown-icon.svg); + background-repeat: no-repeat; + background-position: bottom center; + + transition: + background-image $animation-duration, + color $animation-duration; + + @include text-mobile; + + &:disabled { + cursor: not-allowed; + opacity: 0.7; + } + + &:hover:not(&:disabled) { + color: $color-white; + background-image: url(../images/icons/dropdown-icon-hover.svg); + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..7e971860 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,46 @@ +.footer { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, min-content); + gap: 16px; + + @include padding-inline; + + padding-block: 50px; + + background-color: #000; + + @include on-tablet { + display: flex; + align-items: center; + justify-content: space-between; + + height: 64px; + padding-block: 0; + } + + @include on-desktop { + height: 100px; + } + + &__logo-link { + display: block; + grid-column: 1/2; + width: fit-content; + } + + &__logo { + width: 69px; + } + + &__navigation { + grid-column: 1/2; + } + + &__social { + display: flex; + grid-column: 2/-1; + flex-direction: column; + justify-content: space-between; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 00000000..6f7fb7be --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,277 @@ +.form { + display: flex; + flex-direction: column; + gap: 30px; + padding-top: 20px; + + @include padding-inline; + + @include on-tablet { + padding-top: 0; + } + + &--grid { + @include section-grid; + + row-gap: 30px; + + @include on-tablet { + row-gap: 50px; + } + } + + &--padding--0 { + @include on-tablet { + padding: 0; + } + } + + &--desktop--padding--0 { + @include on-desktop { + padding: 0; + } + } + + &__field { + position: relative; + grid-column: 1 / -1; + + &--card-info { + display: flex; + flex-direction: column; + gap: $form-label-field-offset; + } + + &--grid--left { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-desktop-wide { + grid-column: span 8; + } + } + + &--grid--right { + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-desktop-wide { + grid-column: span 8; + } + } + + &--pay { + @include on-tablet { + grid-column: 2 / -2; + } + } + } + + &__country { + grid-column: 1 / -1; + + &--grid--left { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 7; + } + + @include on-desktop-wide { + grid-column: 1 / 9; + } + } + } + + &__city { + grid-column: 1 / -1; + + &--grid--right { + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + @include on-desktop-wide { + grid-column: 9 / -1; + } + } + } + + &__input { + @include text-mobile; + + width: 100%; + padding-bottom: 8px; + border: none; + + color: $color-white; + + background: none; + outline: none; + + &--card { + font-size: 18px; + font-weight: 400; + line-height: 130%; + text-align: center; + letter-spacing: $input-card-letter-spacing; + } + + @for $width from 3 through 4 { + &--width-#{$width} { + width: calc(#{$width}ch + ($input-card-letter-spacing * #{$width - 1})); + } + } + + &:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #{$bg-black} inset !important; + transition: background-color 9999s ease-in-out 0s; + + -webkit-text-fill-color: #fff !important; + } + } + + &__textarea { + @include text-mobile; + + resize: none; + + width: 100%; + padding-bottom: 36px; + border: none; + + color: $color-white; + + background: none; + outline: none; + } + + &__label { + @include text-mobile; + + position: absolute; + top: 0; + left: 0; + + font-size: 14px; + + transition: + top $animation-duration, + color $animation-duration; + + &--static { + position: static; + } + } + + &__line { + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 1px; + + background-color: #2f2f2f; + + transition: background-color $animation-duration; + } + + &__dropdown { + width: 100%; + margin-top: $form-label-field-offset; + } + + &__submit { + @include button; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + margin-top: 30px; + } + + @include on-desktop { + grid-column: 7 / 11; + } + + &--tablet--max-width--200 { + @include on-tablet { + max-width: 200px; + } + } + } + + &__card { + position: relative; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + } + + &__inputs { + display: flex; + gap: 10px; + justify-content: space-between; + + max-width: 360px; + margin-top: $form-label-field-offset; + margin-inline: auto; + + @include on-tablet { + max-width: 100%; + margin-inline: 0; + } + } + + &__additional-card-info { + display: flex; + grid-column: 1 / -1; + gap: 30px; + max-width: min-content; + + @include on-tablet { + grid-column: 2 / -2; + gap: 100px; + justify-content: space-between; + } + } + + &__field:focus-within &__line { + background-color: $color-blue; + } + + .form__input, + .form__textarea { + &:focus ~ .form__label { + color: $color-blue; + } + + &:not(:placeholder-shown) ~ .form__label { + top: $form-label-offset; + } + + &:focus ~ .form__line { + background-color: $color-blue; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..575146cd --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,123 @@ +.header { + padding-bottom: 32px; + background: $bg-gradient; + + @include on-desktop { + padding-bottom: 84px; + } + + &__product { + @include on-desktop { + margin-top: 80px; + } + + @include on-desktop-wide { + margin-top: 200px; + margin-inline: auto; + } + } + + &__bottom { + display: none; + + @include on-desktop { + @include padding-inline; + + display: flex; + align-items: start; + justify-content: space-between; + margin-top: 50px; + } + + @include on-desktop-wide { + max-width: $wide-desktop-width; + margin-top: 100px; + margin-inline: auto; + } + } + + &__bottom-nav { + display: flex; + gap: 40px; + } + + &__slider-control { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__slider-buttons { + display: flex; + justify-content: space-between; + width: 210px; + } + + &__slider-lines { + display: flex; + width: 100%; + } + + &__slider-line { + width: 100%; + height: 1px; + background-color: #212121; + transition: background-color, $animation-duration; + + &--active { + background-color: $color-blue; + } + } + + &__more-button { + @include text-desktop; + + cursor: pointer; + + display: block; + + padding-bottom: 10px; + border: none; + + color: $color-blue; + text-decoration: none; + + background-image: url(../images/icons/dropdown-icon.svg); + background-repeat: no-repeat; + background-position: bottom center; + + transition: + background-image $animation-duration, + color $animation-duration; + + &:hover { + color: $color-white; + background-image: url(../images/icons/dropdown-icon-hover.svg); + } + } + + &__link { + font-weight: 500; + text-decoration: none; + + @include text-desktop; + @include hover(color, $color-blue); + } + + &__button { + cursor: pointer; + border: none; + font-weight: 500; + background: none; + + @include text-desktop; + + @include hover(color, $color-blue); + + &:disabled { + cursor: not-allowed; + color: $color-white; + opacity: 0.6; + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..8523421b --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,113 @@ +.help { + height: 100vh; + background-color: $bg-aside; + + @include on-tablet { + height: auto; + max-height: 100vh; + padding-bottom: 60px; + } + + @include on-desktop { + border-radius: 4px; + } + + &__top-bar { + justify-content: end; + margin-bottom: 24px; + + @include on-desktop { + margin-bottom: 0; + padding: 18px; + } + + @include on-desktop-wide { + margin-inline: 0; + } + } + + &__content { + @include section-grid; + + row-gap: 30px; + + @include padding-inline; + + @include on-desktop { + padding-inline: 90px; + } + } + + &__title { + @include h2-mobile; + + grid-column: 1 / -1; + text-align: center; + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + + @include on-tablet { + text-align: left; + } + + @include on-desktop { + @include h2-desktop; + } + } + + &__desc { + @include text-mobile; + + grid-column: 1 / -1; + } + + &__link { + color: $color-blue; + text-decoration: none; + + @include hover(color, $color-white); + } + + &__list { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__contacts { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 8px; + + @include on-tablet { + grid-column: 4 / -1; + gap: 20px; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__contacts-link { + @include text-mobile; + + line-height: 100%; + text-decoration: none; + + @include hover(color, $color-white); + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..3d21c17f --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,33 @@ +.icon { + display: block; + + width: 20px; + height: 20px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover(transform, scale(1.1)); + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + + @include on-tablet { + width: 30px; + height: 30px; + } + + @include on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } + + &--back { + background-image: url(../images/icons/icon-back.svg); + } +} diff --git a/src/styles/blocks/information.scss b/src/styles/blocks/information.scss new file mode 100644 index 00000000..35ebc478 --- /dev/null +++ b/src/styles/blocks/information.scss @@ -0,0 +1,148 @@ +.information { + padding-block: 50px; + + @include padding-inline; + + background-color: $bg-black; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px + } + + @include on-desktop-wide { + padding: 158px 0; + + } + + &__title { + @include h2-mobile; + + margin-bottom: 12px; + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + @include h2-desktop; + + margin-bottom: 16px; + } + } + + &__intro { + font-family: inherit; + font-size: 12px; + font-weight: 400; + line-height: 100%; + color: $color-blue; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + font-size: 14px; + } + } + + &__image { + display: none; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + display: block; + width: 84px; + height: 84px; + margin-bottom: 30px; + } + } + + &__title-wrapper { + margin-bottom: 30px; + + @include on-desktop { + margin-bottom: 80px; + } + + @include on-desktop-wide { + @include padding-inline; + + max-width: $wide-desktop-width; + margin-inline: auto; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + @include section-grid; + + row-gap: 40px; + } + + @include on-desktop-wide { + @include padding-inline; + + max-width: $wide-desktop-width; + margin-inline: auto; + } + } + + &__subsection { + display: flex; + grid-column: span 3; + flex-direction: column; + + @include on-tablet { + align-items: center; + } + + @include on-desktop-wide { + grid-column: span 4; + } + } + + &__subsection-title { + @include h3-mobile; + + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 20px; + } + + @include on-desktop { + @include h3-desktop; + } + } + + &__subsection-desc { + @include text-mobile; + + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + text-overflow: ellipsis; + + @include on-tablet { + display: inline; + text-align: center; + } + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 00000000..36677f11 --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,29 @@ +.language { + height: 100vh; + background-color: $bg-aside; + + @include on-tablet { + height: auto; + max-height: 100vh; + padding-bottom: 60px; + } + + &__list { + display: flex; + flex-direction: column; + } + + &__item { + @include text-aside-mobile; + + cursor: pointer; + padding: 11px 22px; + + @include on-tablet { + padding-inline: 152px; + } + + @include hover(color, $color-blue); + @include hover(background-color, $aside-link-bg-hover); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..e4bb577a --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,14 @@ +.menu { + height: 100vh; + background-color: $bg-aside; + + @include on-tablet { + height: auto; + max-height: 100vh; + padding-bottom: 60px; + } + + &__top-bar{ + justify-content: end; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..b7818014 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,17 @@ +.nav { + &__link { + @include text-aside-mobile; + + display: block; + padding-block: 11px; + padding-inline: 22px; + + @include hover(color, $color-blue); + @include hover(background-color, $aside-link-bg-hover); + + @include on-tablet { + padding-inline: 152px; + } + } +} + diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 00000000..40726247 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,31 @@ +.navigation { + &__list { + display: flex; + flex-direction: column; + gap: 12px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + justify-content: space-between; + } + } + + &__link { + @include text-mobile; + + font-size: 13px; + color: $color-white; + text-decoration: none; + + @include hover(color, $color-blue); + + @include on-desktop { + font-size: 14px; + } + + @include on-desktop { + @include text-link-button; + } + } +} diff --git a/src/styles/blocks/order-summary.scss b/src/styles/blocks/order-summary.scss new file mode 100644 index 00000000..395a875e --- /dev/null +++ b/src/styles/blocks/order-summary.scss @@ -0,0 +1,39 @@ +.order-summary { + display: flex; + justify-content: space-around; + padding-block: 30px; + + @include padding-inline; + + @include on-tablet { + justify-content: space-between; + padding-block: 0 48px; + } + + &__quantity { + display: flex; + flex-direction: column; + gap: $order-summary-row-gap; + } + + &__label { + @include text-mobile; + + align-self: center; + line-height: 130%; + } + + &__price { + display: flex; + flex-direction: column; + gap: $order-summary-row-gap; + } + + &__value { + font-family: inherit; + font-size: 26px; + font-weight: 500; + line-height: 100%; + color: $color-blue; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..1455ea94 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,120 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; +} + +@font-face { + font-family: Quantum; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url(../fonts/Quantum-400.otf); +} + +html { + scroll-behavior: smooth; + + ::-webkit-scrollbar { + width: 1px; + height: 1px; + } + ::-webkit-scrollbar-track { + background: #014954; + } + + ::-webkit-scrollbar-thumb { + background: #05C2DF; + } +} + +.page { + &__body { + min-width: 320px; + font-family: Inter, sans-serif; + + &::before { + pointer-events: none; + content: ''; + + position: fixed; + z-index: 80; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + opacity: 0; + background-color: #000000c0; + + transition: opacity $animation-duration; + } + + &:has( + .page__menu:target, + .page__language:target, + .page__help:target, + .page__faq:target, + .page__buy:target + ) { + overflow: hidden; + + &::before { + pointer-events: all; + opacity: 1; + } + } + } + + &__menu, + &__language, + &__help, + &__faq, + &__buy { + pointer-events: none; + + position: fixed; + z-index: 100; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + overflow: hidden auto; + + opacity: 0; + + transition: all 0.3s; + + @include on-desktop { + &.page__help, + &.page__faq { + top: 50%; + transform: translateY(-50%); + + display: flex; + flex-direction: column; + + max-width: 800px; + margin-inline: auto; + + transition: none; + } + } + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + + @include on-desktop { + &.page__help, + &.page__faq { + transform: translateY(-50%); + } + } + } + } +} diff --git a/src/styles/blocks/place-order.scss b/src/styles/blocks/place-order.scss new file mode 100644 index 00000000..99b985df --- /dev/null +++ b/src/styles/blocks/place-order.scss @@ -0,0 +1,3 @@ +.place-order { + padding-bottom: 60px; +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 00000000..50926c20 --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,161 @@ +.product { + @include on-tablet { + @include section-grid; + } + + @include on-desktop-wide { + max-width: $wide-desktop-width; + + @include padding-inline; + } + + &__img-wrapper { + grid-column: 3/-1; + grid-row: 1; + + @include on-desktop { + display: none; + } + } + + &__img { + pointer-events: none; + display: block; + width: 100%; + object-fit: cover; + } + + &__slider { + display: none; + grid-column: 7 / -1; + width: 100%; + height: 100%; + + @include on-desktop { + display: block; + } + } + + &__content { + @include padding-inline; + + @include on-tablet { + grid-column: 1/4; + grid-row: 1; + } + + @include on-desktop { + grid-column: 1 / 7; + padding-right: 0; + + @include section-grid; + } + + @include on-desktop-wide { + padding-inline: 0; + } + } + + &__title { + @include h1-mobile; + + margin-bottom: 17px; + + &--secondary { + font-weight: 400; + color: $color-blue; + } + + @include on-desktop { + @include h1-desktop; + + grid-column: 1 / -1; + } + + @include on-desktop-wide { + @include h1-desktop-wide; + + margin-bottom: 36px + } + } + + &__desc { + @include text-mobile; + + margin-bottom: 8px; + font-weight: 500; + + @include on-tablet { + margin-bottom: 10px; + } + + @include on-desktop { + grid-column: 3 / span 6; + margin-bottom: 16px; + } + + @include on-desktop-wide { + grid-column: 3 / span 10; + margin-bottom: 30px; + font-size: 20px; + } + } + + &__price-wrapper { + display: flex; + align-items: center; + justify-content: center; + + @include on-tablet { + justify-content: start; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } + + &__price { + margin-bottom: 24px; + + font-size: 18px; + font-weight: 500; + line-height: 100%; + color: $color-white; + + @include on-tablet { + margin-bottom: 34px; + } + + @include on-desktop-wide { + font-size: 20px; + } + } + + &__buy-wrapper { + position: fixed; + z-index: 10; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + + width: calc(100% - ($mobile-padding-inline * 2)); + + &--hidden-on-desktop { + @include on-desktop { + display: none; + } + } + + @include on-tablet { + bottom: 30px; + width: 460px; + } + } + + &__video-button { + @include on-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 00000000..617d94e3 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,125 @@ +.slider { + &__images { + position: relative; + height: 190px; + + @include on-tablet { + height: 100%; + } + } + + &__image { + pointer-events: none; + + position: absolute; + transform: scale(0); + + display: block; + + width: 100%; + height: 100%; + + opacity: 0; + object-fit: cover; + + transition: transform $animation-duration; + + &--active { + pointer-events: auto; + transform: scale(1); + opacity: 1; + } + } + + &__dots { + display: flex; + gap: 6px; + justify-content: center; + margin-top: 12px; + + @include on-desktop { + display: none; + } + } + + &__dot { + cursor: pointer; + + width: 4px; + height: 4px; + border: none; + border-radius: 50%; + + background-color: #484848; + + @include hover(background-color, $color-blue); + + &--active { + background-color: #ababab; + } + } + + &__counter { + position: absolute; + top: 0; + left: -40px; + + display: none; + + color: $color-blue; + + @include text-desktop-s; + + @include on-desktop { + display: flex; + } + } + + &__control { + display: none; + margin-top: 12px; + + @include on-desktop { + display: flex; + flex-direction: column; + gap: 10px; + width: 50%; + } + } + + &__buttons { + display: flex; + justify-content: space-between; + } + + &__button { + cursor: pointer; + border: none; + font-weight: 500; + background: none; + + @include text-desktop; + + @include hover(color, $color-blue); + + &:disabled { + color: $color-white; + opacity: 0.6; + } + } + + &__lines { + display: flex; + } + + &__line { + width: 100%; + height: 1px; + background-color: #212121; + transition: background-color, $animation-duration; + + &--active { + background-color: $color-blue; + } + } +} diff --git a/src/styles/blocks/social.scss b/src/styles/blocks/social.scss new file mode 100644 index 00000000..6df5558a --- /dev/null +++ b/src/styles/blocks/social.scss @@ -0,0 +1,27 @@ +.social { + &__list { + display: flex; + justify-content: space-between; + + @include on-tablet { + gap: 16px; + } + } + + &__link { + display: flex; + justify-content: center; + + width: 20px; + height: 20px; + + color: $color-white; + + @include hover(color, $color-blue); + @include hover(transform, scale(1.1)); + } + + &__icon { + color: inherit; + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 00000000..48ae7f86 --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,291 @@ +.tech { + padding-block: 50px; + background-color: $bg-black; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-desktop-wide { + padding-block: 160px; + } + + &__title { + @include h2-mobile; + + margin-bottom: 30px; + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + @include h2-desktop; + + grid-column: 9 / -1; + } + + @include on-desktop-wide { + grid-column: 12 / -1; + } + } + + &__content { + position: relative; + width: 200px; + height: 200px; + margin-inline: auto; + + @include on-tablet { + width: 360px; + height: 360px; + } + + @include on-desktop { + @include section-grid; + + grid-column: 1 / -1; + grid-template-rows: 60px repeat(2, 1fr); + width: 100%; + height: auto; + } + } + + &__container { + @include padding-inline; + + @include on-desktop { + @include section-grid; + + max-width: $desktop-width; + margin-inline: auto; + } + + @include on-desktop-wide { + max-width: $wide-desktop-width; + } + } + + &__image { + width: 100%; + height: 100%; + + @include on-desktop { + grid-column: 5 / 9; + grid-row: 2 / -1; + width: 360px; + height: 360px; + } + + @include on-desktop-wide { + grid-column: 7 / 11; + } + } + + &__button { + cursor: pointer; + + position: absolute; + + display: block; + + width: 34px; + height: 34px; + border: none; + + background: none; + background-image: url(../images/tech-specs/icons/button-icon.svg); + background-repeat: no-repeat; + background-size: contain; + + @include hover(transform, scale(1.1) rotate(90deg)); + + @include on-tablet { + width: 62px; + height: 62px; + } + + @include on-desktop { + display: none; + } + + &--sensor { + top: -5%; + left: 30%; + } + + &--battery { + top: 40%; + left: 70%; + } + + &--connection { + bottom: 5%; + left: -10%; + } + + &--active { + background-image: url(../images/tech-specs/icons/button-icon-close.svg); + + @include hover(transform, scale(1.1) rotate(0)); + } + } + + &__specs { + position: absolute; + transform: scale(0); + + width: max-content; + padding: 16px 10px; + border-radius: 4px; + + background-color: $bg-tech; + + transition: transform $animation-duration; + + @include on-desktop { + position: static; + transform: scale(1); + padding: 0; + background-color: transparent; + } + + &--active { + transform: scale(1); + } + + &--sensor { + top: 14%; + left: 0; + transform-origin: center top; + + @include on-tablet { + transform-origin: 90% top; + } + + @include on-desktop { + grid-column: 1 / 4; + grid-row: 1 / 3; + } + + @include on-desktop-wide { + grid-column: 3 / 6; + } + } + + &--battery { + top: 59%; + left: -20%; + transform-origin: 73% top; + + @include on-tablet { + left: 0; + transform-origin: right top; + } + + @include on-desktop { + grid-column: -4 / -1; + grid-row: 1 / 3; + } + + @include on-desktop-wide { + grid-column: -6 / -1; + } + } + + &--connection { + top: 92%; + left: 7%; + transform-origin: left top; + + @include on-desktop { + grid-column: 2 / 4; + grid-row: 3; + } + + @include on-desktop-wide { + grid-column: 3 / 6; + } + } + } + + &__specs-title { + display: none; + + @include h3-mobile; + + @include on-desktop { + display: inline-block; + margin-bottom: 20px; + + @include h3-desktop; + } + } + + &__specs-desc { + @include text-mobile; + + font-size: 12px; + + @include on-desktop { + @include text-desktop; + + color: $color-text; + } + } + + &__line { + position: absolute; + display: none; + + @include on-desktop { + display: block; + } + + &--sensor { + top: 6px; + left: 102px; + + @include on-desktop-wide { + left: 292px; + } + } + + &--ellipse { + top: 134px; + left: 320px; + transform: scale(1.2); + + @include on-desktop-wide { + left: 536px; + } + } + + &--battery { + top: 10px; + left: 510px; + + @include on-desktop-wide { + left: 720px; + } + } + + &--connection { + top: 138px; + left: 200px; + + @include on-desktop-wide { + left: 316px; + } + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 00000000..e1324ce1 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,84 @@ +.top-bar { + display: flex; + justify-content: space-between; + padding-block: 20px; + + @include padding-inline; + + @include on-tablet { + padding-block: 34px; + } + + @include on-desktop { + align-items: center; + } + + @include on-desktop-wide { + max-width: $wide-desktop-width; + margin-inline: auto; + } + + &__right { + display: flex; + gap: 36px; + align-items: center; + } + + &__left { + display: flex; + gap: 36px; + } + + &__dropdown { + display: none; + + @include on-desktop { + display: block; + } + } + + &__navigation { + display: none; + + @include on-desktop { + display: flex; + } + } + + &__buy-button-wrapper { + display: none; + width: 200px; + + @include on-desktop { + display: block; + } + } + + &__logo-link { + display: flex; + align-items: center; + justify-content: center; + } + + &__logo { + height: 12px; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + height: 14px; + } + + @include on-desktop { + height: 16px; + } + } + + &__checkout-steps { + display: none; + + @include on-desktop { + display: block; + } + } +} diff --git a/src/styles/blocks/video-button.scss b/src/styles/blocks/video-button.scss new file mode 100644 index 00000000..a9cf00de --- /dev/null +++ b/src/styles/blocks/video-button.scss @@ -0,0 +1,16 @@ +.video-button { + cursor: pointer; + + display: flex; + + width: 248px; + height: 69px; + border: none; + + background-image: url(../images/icons/icon-play.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover(background-image, url(../images/icons/icon-play-hover.svg)) +} diff --git a/src/styles/blocks/video-modal.scss b/src/styles/blocks/video-modal.scss new file mode 100644 index 00000000..16db51f1 --- /dev/null +++ b/src/styles/blocks/video-modal.scss @@ -0,0 +1,46 @@ +.video-modal { + margin: auto; + border: none; + border-radius: 4px; + + &::backdrop { + background: #00000080; + } + + &__content { + position: relative; + } + + &__close { + position: absolute; + top: 16px; + right: 16px; + + display: block; + + width: 20px; + height: 20px; + border: none; + + background: none; + background-image: url(../images/icons/icon-close.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover(transform, scale(1.1)); + } + + &__video-container { + width: 80vw; + } + + &__video { + display: block; + + aspect-ratio: 16 / 9; + width: 100%; + height: auto; + border: none; + } +} diff --git a/src/styles/blocks/why-kat.scss b/src/styles/blocks/why-kat.scss new file mode 100644 index 00000000..05c44006 --- /dev/null +++ b/src/styles/blocks/why-kat.scss @@ -0,0 +1,134 @@ +.why-kat { + padding-block: 50px; + + @include padding-inline; + + background: $bg-gradient; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-desktop-wide { + padding: 160px 0; + } + + &__content { + @include on-desktop-wide { + @include padding-inline; + + max-width: $wide-desktop-width; + margin-inline: auto; + } + } + + &__title { + @include h2-mobile; + + margin-bottom: 30px; + + @include on-desktop { + @include h2-desktop; + + margin-bottom: 82px; + text-align: center; + } + + &--highlighted { + font-weight: 400; + color: $color-blue; + } + } + + &__container { + display: flex; + flex-direction: column; + row-gap: 20px; + + @include on-tablet { + flex-direction: row; + gap: 0 20px; + } + + @include on-desktop-wide { + column-gap: 200px; + } + } + + &__section { + @include on-tablet { + display: flex; + flex-direction: column; + align-items: center; + } + } + + &__img { + display: none; + + @include on-tablet { + display: block; + width: 84px; + height: 84px; + margin-bottom: 26px; + + @include hover(transform, scale(1.1)); + } + } + + &__section-title { + @include h3-mobile; + + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 26px; + text-align: center; + } + + @include on-desktop { + @include h3-desktop; + } + } + + &__desc { + @include text-mobile; + + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + + text-overflow: ellipsis; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + @include text-desktop; + + display: inline-block; + color: $color-text; + } + } + + &__buy-button { + display: none; + width: 200px; + margin-top: 90px; + margin-inline: auto; + + @include on-desktop { + display: block; + } + + @include on-desktop-wide { + display: none; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..213cf294 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,35 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import './utils/vars'; +@import './utils/mixins'; +@import './utils/typography'; -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/icon'; +@import './blocks/product'; +@import './blocks/video-button'; +@import './blocks/buy-button'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/language'; +@import './blocks/help'; +@import './blocks/faq'; +@import './blocks/buy'; +@import './blocks/checkout-steps'; +@import './blocks/order-summary'; +@import './blocks/dropdown'; +@import './blocks/place-order'; +@import './blocks/form'; +@import './blocks/card-brand'; +@import './blocks/complete'; +@import './blocks/information'; +@import './blocks/about'; +@import './blocks/slider'; +@import './blocks/tech'; +@import './blocks/why-kat'; +@import './blocks/contact-us'; +@import './blocks/footer'; +@import './blocks/navigation'; +@import './blocks/contacts'; +@import './blocks/social'; +@import './blocks/video-modal'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780..00000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ff..00000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 00000000..5859aecb --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,87 @@ +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin on-desktop-wide { + @media (min-width: $wide-desktop-width) { + @content; + } +} + +@mixin padding-inline { + padding-inline: $mobile-padding-inline; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 110px; + } + + @include on-desktop-wide { + padding-inline: 234px; + } +} + +@mixin section-grid { + --columns: 6; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-desktop { + --columns: 12; + } + + @include on-desktop-wide { + --columns: 16; + } +} + +@mixin hover($_property, $_toValue) { + transition: #{$_property} $animation-duration; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin button { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + height: 40px; + border: none; + border-radius: 4px; + + font-family: inherit; + font-size: 14px; + font-weight: 500; + line-height: 130%; + color: $color-white; + text-decoration: none; + + background-color: $color-blue; + outline: none; + + @include hover(color, $color-blue); + @include hover(background-color, $color-white); + + @include on-tablet { + height: 48px; + font-size: 16px; + line-height: auto; + } +} diff --git a/src/styles/utils/typography.scss b/src/styles/utils/typography.scss new file mode 100644 index 00000000..d800c343 --- /dev/null +++ b/src/styles/utils/typography.scss @@ -0,0 +1,111 @@ +@mixin h1-mobile { + font-family: inherit; + font-size: 26px; + font-weight: 900; + line-height: 130%; + color: $color-white; + text-transform: uppercase; +} + +@mixin h2-mobile { + font-family: inherit; + font-size: 21px; + font-weight: 900; + line-height: 130%; + color: $color-white; + text-transform: uppercase; +} + +@mixin h3-mobile { + font-family: inherit; + font-size: 16px; + font-weight: 900; + line-height: 100%; + color: $color-white; + text-transform: uppercase; +} + +@mixin text-mobile { + font-family: inherit; + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $color-text; +} + +@mixin text-aside-mobile { + font-family: inherit; + font-size: 21px; + font-weight: 500; + line-height: 130%; + color: $color-white; + text-decoration: none; +} + +@mixin text-drop-down { + font-family: inherit; + font-size: 20px; + font-weight: 400; + line-height: 130%; + color: $color-white; +} + +@mixin h1-desktop { + font-family: inherit; + font-size: 46px; + font-weight: 900; + line-height: 130%; + color: $color-white; + text-transform: uppercase; +} + +@mixin h2-desktop { + font-family: inherit; + font-size: 36px; + font-weight: 900; + line-height: auto; + color: $color-white; + text-transform: uppercase; +} + +@mixin h3-desktop { + font-family: inherit; + font-size: 18px; + font-weight: 900; + line-height: auto; + color: $color-white; + text-transform: uppercase; +} + +@mixin text-desktop { + font-family: inherit; + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $color-white; +} + +@mixin text-desktop-s { + font-family: inherit; + font-size: 14px; + font-weight: 400; + line-height: auto; + color: $color-white; +} + +@mixin text-link-button { + font-family: inherit; + font-size: 16px; + font-weight: 500; + line-height: auto; + color: $color-white; +} + +@mixin h1-desktop-wide { + font-family: inherit; + font-size: 54px; + font-weight: 900; + line-height: 130%; + color: $color-white; + text-transform: uppercase; +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 00000000..ab77d3b1 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,21 @@ +$color-white: #fff; +$color-blue: #05C2DF; +$color-text: #929292; +$color-info: #545454; +$bg-gradient: linear-gradient(100.83deg, #191536 0.67%, #000 100%); +$bg-aside: #191536; +$bg-tech: #191536; +$bg-black: #05040B; +$aside-link-bg-hover: #110E25; +$passive-buy-collor: #2f2f2f; +$mobile-padding-inline: 20px; +$steps-underline-offset: 16px; +$order-summary-row-gap: 10px; +$animation-duration: .3s; +$form-label-offset: -20px; +$dropdown-padding: 24px; +$input-card-letter-spacing: 4px; +$form-label-field-offset: 12px; +$tablet-width: 768px; +$desktop-width: 1280px; +$wide-desktop-width: 1920px;