diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf b/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf deleted file mode 100644 index c9caaccd..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.Heavy.otf and /dev/null differ diff --git a/src/fonts/FontFont_FF.Mark.Pro.Medium.otf b/src/fonts/FontFont_FF.Mark.Pro.Medium.otf deleted file mode 100644 index d5999d8c..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.Medium.otf and /dev/null differ diff --git a/src/fonts/FontFont_FF.Mark.Pro.otf b/src/fonts/FontFont_FF.Mark.Pro.otf deleted file mode 100644 index 3b72bc1f..00000000 Binary files a/src/fonts/FontFont_FF.Mark.Pro.otf and /dev/null differ diff --git a/src/fonts/Quantum-400.otf b/src/fonts/Quantum-400.otf deleted file mode 100644 index b26c7892..00000000 Binary files a/src/fonts/Quantum-400.otf and /dev/null differ diff --git a/src/images/about-us/about-us-bg-tablet.svg b/src/images/about-us/about-us-bg-tablet.svg new file mode 100644 index 00000000..6a8f5038 --- /dev/null +++ b/src/images/about-us/about-us-bg-tablet.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/about-us/about-us-bg.svg b/src/images/about-us/about-us-bg.svg new file mode 100644 index 00000000..1e7b4f91 --- /dev/null +++ b/src/images/about-us/about-us-bg.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/arrow-back-hover.svg b/src/images/icons/arrow-back-hover.svg new file mode 100644 index 00000000..8f8dd42d --- /dev/null +++ b/src/images/icons/arrow-back-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-up-hover.svg b/src/images/icons/arrow-up-hover.svg new file mode 100644 index 00000000..38bdbf70 --- /dev/null +++ b/src/images/icons/arrow-up-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 00000000..f246f3ac --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrrow-back.svg b/src/images/icons/arrrow-back.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/icons/arrrow-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close-icon-hover.svg b/src/images/icons/close-icon-hover.svg new file mode 100644 index 00000000..b5e21280 --- /dev/null +++ b/src/images/icons/close-icon-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 00000000..9ebfb1b9 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/cursos-icon.svg b/src/images/icons/cursos-icon.svg new file mode 100644 index 00000000..80c9c6f7 --- /dev/null +++ b/src/images/icons/cursos-icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/icons/discord.svg b/src/images/icons/discord.svg new file mode 100644 index 00000000..53bade5b --- /dev/null +++ b/src/images/icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/dot-small.svg b/src/images/icons/dot-small.svg new file mode 100644 index 00000000..fcb9b841 --- /dev/null +++ b/src/images/icons/dot-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/dot.svg b/src/images/icons/dot.svg new file mode 100644 index 00000000..c53ffc3a --- /dev/null +++ b/src/images/icons/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 00000000..e4de883e --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon-small.svg b/src/images/icons/favicon-small.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/icons/favicon-small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 00000000..6caa6495 Binary files /dev/null and b/src/images/icons/favicon.png differ diff --git a/src/images/icons/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 00000000..a4259452 --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/mastercard.svg b/src/images/icons/mastercard.svg new file mode 100644 index 00000000..67e199b8 --- /dev/null +++ b/src/images/icons/mastercard.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/menu-hover.svg b/src/images/icons/menu-hover.svg new file mode 100644 index 00000000..917b6692 --- /dev/null +++ b/src/images/icons/menu-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/minus.svg b/src/images/icons/minus.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/src/images/icons/minus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/more-icon-hover.svg b/src/images/icons/more-icon-hover.svg new file mode 100644 index 00000000..4c150067 --- /dev/null +++ b/src/images/icons/more-icon-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/more-icon.svg b/src/images/icons/more-icon.svg new file mode 100644 index 00000000..5cbb538d --- /dev/null +++ b/src/images/icons/more-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/plus.svg b/src/images/icons/plus.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/src/images/icons/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/select-icon-hover.svg b/src/images/icons/select-icon-hover.svg new file mode 100644 index 00000000..a750c32e --- /dev/null +++ b/src/images/icons/select-icon-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/select-icon-right.svg b/src/images/icons/select-icon-right.svg new file mode 100644 index 00000000..7c2a91c3 --- /dev/null +++ b/src/images/icons/select-icon-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/select-icon.svg b/src/images/icons/select-icon.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icons/select-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/visa.svg b/src/images/icons/visa.svg new file mode 100644 index 00000000..0a97fb76 --- /dev/null +++ b/src/images/icons/visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/x.svg b/src/images/icons/x.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/src/images/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/youtube.svg b/src/images/icons/youtube.svg new file mode 100644 index 00000000..d0756ed2 --- /dev/null +++ b/src/images/icons/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main/header-image.svg b/src/images/main/header-image.svg new file mode 100644 index 00000000..e467691a --- /dev/null +++ b/src/images/main/header-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/main-img.svg b/src/images/main/main-img.svg new file mode 100644 index 00000000..cd602bae --- /dev/null +++ b/src/images/main/main-img.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/more-than-gaming-icons/education.svg b/src/images/more-than-gaming-icons/education.svg new file mode 100644 index 00000000..1029a962 --- /dev/null +++ b/src/images/more-than-gaming-icons/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/more-than-gaming-icons/estate.svg b/src/images/more-than-gaming-icons/estate.svg new file mode 100644 index 00000000..08230921 --- /dev/null +++ b/src/images/more-than-gaming-icons/estate.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/more-than-gaming-icons/fitnes.svg b/src/images/more-than-gaming-icons/fitnes.svg new file mode 100644 index 00000000..0f0d5160 --- /dev/null +++ b/src/images/more-than-gaming-icons/fitnes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/more-than-gaming-icons/social.svg b/src/images/more-than-gaming-icons/social.svg new file mode 100644 index 00000000..b68e1770 --- /dev/null +++ b/src/images/more-than-gaming-icons/social.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/slider/slider-1.png b/src/images/slider/slider-1.png new file mode 100644 index 00000000..63447d78 Binary files /dev/null and b/src/images/slider/slider-1.png differ diff --git a/src/images/slider/slider-2.png b/src/images/slider/slider-2.png new file mode 100644 index 00000000..24ee3c08 Binary files /dev/null and b/src/images/slider/slider-2.png differ diff --git a/src/images/slider/slider-3.png b/src/images/slider/slider-3.png new file mode 100644 index 00000000..a5d4e64a Binary files /dev/null and b/src/images/slider/slider-3.png differ diff --git a/src/images/slider/slider-4.png b/src/images/slider/slider-4.png new file mode 100644 index 00000000..d89f9947 Binary files /dev/null and b/src/images/slider/slider-4.png differ diff --git a/src/images/slider/slider-5.png b/src/images/slider/slider-5.png new file mode 100644 index 00000000..b9afe4e9 Binary files /dev/null and b/src/images/slider/slider-5.png differ diff --git a/src/images/slider/slider-dot-active.svg b/src/images/slider/slider-dot-active.svg new file mode 100644 index 00000000..8ce25b68 --- /dev/null +++ b/src/images/slider/slider-dot-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/slider-dot.svg b/src/images/slider/slider-dot.svg new file mode 100644 index 00000000..6564bb55 --- /dev/null +++ b/src/images/slider/slider-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech-specs/battery-line-desktop.svg b/src/images/tech-specs/battery-line-desktop.svg new file mode 100644 index 00000000..fad6249e --- /dev/null +++ b/src/images/tech-specs/battery-line-desktop.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/battery-line.svg b/src/images/tech-specs/battery-line.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/src/images/tech-specs/battery-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/connection-line-desktop.svg b/src/images/tech-specs/connection-line-desktop.svg new file mode 100644 index 00000000..3caea26c --- /dev/null +++ b/src/images/tech-specs/connection-line-desktop.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..a1f02465 --- /dev/null +++ b/src/images/tech-specs/connection-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/img.svg b/src/images/tech-specs/img.svg new file mode 100644 index 00000000..c36e6fae --- /dev/null +++ b/src/images/tech-specs/img.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/tech-specs/semi-round.svg b/src/images/tech-specs/semi-round.svg new file mode 100644 index 00000000..86595c33 --- /dev/null +++ b/src/images/tech-specs/semi-round.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech-specs/sensor-line-desktop.svg b/src/images/tech-specs/sensor-line-desktop.svg new file mode 100644 index 00000000..ef522dfa --- /dev/null +++ b/src/images/tech-specs/sensor-line-desktop.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..dfc56f6d --- /dev/null +++ b/src/images/tech-specs/sensor-line.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech-specs/tech-specs.png b/src/images/tech-specs/tech-specs.png new file mode 100644 index 00000000..27b4c8cb Binary files /dev/null and b/src/images/tech-specs/tech-specs.png differ diff --git a/src/images/titles/get-in-touch-title.svg b/src/images/titles/get-in-touch-title.svg new file mode 100644 index 00000000..a6b53d6b --- /dev/null +++ b/src/images/titles/get-in-touch-title.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/titles/header-title.svg b/src/images/titles/header-title.svg new file mode 100644 index 00000000..b2bf88e5 --- /dev/null +++ b/src/images/titles/header-title.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/titles/more-than-gaming.svg b/src/images/titles/more-than-gaming.svg new file mode 100644 index 00000000..1029ae42 --- /dev/null +++ b/src/images/titles/more-than-gaming.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/titles/nice-to-meet-you.svg b/src/images/titles/nice-to-meet-you.svg new file mode 100644 index 00000000..af196005 --- /dev/null +++ b/src/images/titles/nice-to-meet-you.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/titles/why-kat.svg b/src/images/titles/why-kat.svg new file mode 100644 index 00000000..e016cd08 --- /dev/null +++ b/src/images/titles/why-kat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/video-button/video-hover.svg b/src/images/video-button/video-hover.svg new file mode 100644 index 00000000..39b113b6 --- /dev/null +++ b/src/images/video-button/video-hover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/video-button/video.svg b/src/images/video-button/video.svg new file mode 100644 index 00000000..fbdf596c --- /dev/null +++ b/src/images/video-button/video.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/why-kat-icons/why-kat-2.svg b/src/images/why-kat-icons/why-kat-2.svg new file mode 100644 index 00000000..0f09382d --- /dev/null +++ b/src/images/why-kat-icons/why-kat-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/why-kat-icons/wk-1.svg b/src/images/why-kat-icons/wk-1.svg new file mode 100644 index 00000000..f2e9e834 --- /dev/null +++ b/src/images/why-kat-icons/wk-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/why-kat-icons/wk-3.svg b/src/images/why-kat-icons/wk-3.svg new file mode 100644 index 00000000..eddc9927 --- /dev/null +++ b/src/images/why-kat-icons/wk-3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..e78eaea8 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,1808 @@ - + - Title + KatVR + + + + - -

Hello Mate Academy

- + + +
+
+
+
+ + +
+
+ + KatVR Loco + +
+
+
+
+
+
+
+
+
+
+
+ +

+ THE NEW START OF + VR LOCOMOTION +

+ +

+ Discover the most comprehensive VR Locomotion system, and unlock + infinite motion in any games on any platforms! +

+ +

1200$

+ + + +
+
+ + FAQ + + + Help + +
+ + + +
+
+
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + + Buy Now + + +
+
+
+ + +
+
+
En
+ +
+
    +
  • + En +
    • +
  • Ua
    • +
  • Ru
    • +
  • Pl
    • +
+
+
+
+
+ +
+ + + + Buy Now + +
+
+
+ + + + + +
+
+
+

+ MORE THAN + GAMING! +

+ +

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

+ +
+
+
+

+ EDUCATION +

+

+ Create aducational simulations, trainings and much more with... +

+ +

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

+
+
+ +
+
+
+

REAL ESTATE

+

+ Desighn architectural projects in a deeply realistic + environment... +

+ +

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

+
+
+ +
+
+
+

FITNESS

+

+ Combine business with pleasure, and discover countless ways... +

+ +

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

+
+
+ + +
+
+ +
+
+
+

+ ABOUT + PRODUCT +

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

+
+
+
+
+ +
+
+

+ TECH + SPECS +

+ +
+ tech specs img + +
+

SENSOR

+

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

+
+
+ +
+

BATTERIES

+

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

+
+
+
+ +
+ +

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

+
+ +
+ +

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

+
+ +
+ +

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

+
+
+
+
+ +
+
+

+ WHY + KAT LOCO? +

+ +
+
+

+ UNIVERSALLY COMPATIBLE +

+

+ KAT Loco offers universal compatibility across all major VR + headsets and platforms... +

+ +

+ KAT Loco offers universal compatibility across all major VR + headsets and... +

+ +

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

+

+ Our Multifunctional Software allows for quick access to KAT Loco’s + control panel both from... +

+ +

+ Our Multifunctional Software allows for quick access to KAT + Loco’s... +

+ +

+ 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

+

+ What makes it even more advanced, KAT Loco is entirely wireless, + and comes with a... +

+ +

+ What makes it even more advanced, KAT Loco is entirely wireless, + and... +

+ +

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

+ +
+
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..abd7710f 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,652 @@ 'use strict'; + +// About Slider + +const about = document.getElementById('about'); +const aboutSliderNumber = about.querySelector('.about__slider-number'); + +const aboutSlides = about.querySelector('.slider__slides'); +const aboutSliderPoints = about.querySelectorAll('.slider__point'); + +const aboutSliderUnderlines = about.querySelectorAll('.prev-next__underline'); +const aboutPrevSlideBtn = about.querySelector('.prev-next__btn--prev'); +const aboutNextSlideBtn = about.querySelector('.prev-next__btn--next'); + +let aboutTimerId = 0; + +aboutSlides.addEventListener('scroll', () => { + const aboutSlideWidth = aboutSlides.getBoundingClientRect().width; + + window.clearTimeout(aboutTimerId); + aboutTimerId = window.setTimeout(() => { + scrollSlider(aboutSlides, aboutSlideWidth, updateAboutSlider); + }, 100); +}); + +aboutNextSlideBtn.addEventListener('click', () => { + const aboutSlideWidth = aboutSlides.getBoundingClientRect().width; + + aboutSlides.scrollLeft += aboutSlideWidth; +}); + +aboutPrevSlideBtn.addEventListener('click', () => { + const aboutSlideWidth = aboutSlides.getBoundingClientRect().width; + + aboutSlides.scrollLeft -= aboutSlideWidth; +}); + +function updateAboutSlider(slideIndex) { + aboutPrevSlideBtn.disabled = slideIndex === 0; + aboutNextSlideBtn.disabled = slideIndex === 4; + aboutSliderNumber.textContent = `${slideIndex + 1}/5`; + + const activeUnderline = about.querySelector('.prev-next__underline--active'); + + activeUnderline.classList.remove('prev-next__underline--active'); + aboutSliderUnderlines[slideIndex].classList.add( + 'prev-next__underline--active', + ); + + const activePoint = about.querySelector('.slider__point--active'); + + activePoint.classList.remove('slider__point--active'); + aboutSliderPoints[slideIndex].classList.add('slider__point--active'); +} + +// Header Slider + +const header = document.querySelector('.header'); + +const headerSlides = header.querySelector('.slider__slides--header'); +const headerSliderUnderlines = header.querySelectorAll('.prev-next__underline'); +const headerPrevSlideBtn = header.querySelector('.prev-next__btn--prev'); +const headerNextSlideBtn = header.querySelector('.prev-next__btn--next'); + +let headerTimerId = 0; + +headerSlides.addEventListener('scroll', () => { + const headerSlideWidth = headerSlides.getBoundingClientRect().width; + + window.clearTimeout(headerTimerId); + headerTimerId = window.setTimeout(() => { + scrollSlider(headerSlides, headerSlideWidth, updateHeaderSlider); + }, 100); +}); + +headerNextSlideBtn.addEventListener('click', () => { + const headerSlideWidth = headerSlides.getBoundingClientRect().width; + + headerSlides.scrollLeft += headerSlideWidth; +}); + +headerPrevSlideBtn.addEventListener('click', () => { + const headerSlideWidth = headerSlides.getBoundingClientRect().width; + + headerSlides.scrollLeft -= headerSlideWidth; +}); + +function updateHeaderSlider(slideIndex) { + headerPrevSlideBtn.disabled = slideIndex === 0; + headerNextSlideBtn.disabled = slideIndex === 4; + + const activeUnderline = header.querySelector('.prev-next__underline--active'); + + activeUnderline.classList.remove('prev-next__underline--active'); + headerSliderUnderlines[slideIndex].classList.add( + 'prev-next__underline--active', + ); +} + +function scrollSlider(slides, slideWidth, updateSlider) { + const scrollLeft = Math.round(slides.scrollLeft); + + switch (scrollLeft) { + case 0: + updateSlider(0); + break; + + case slideWidth: + updateSlider(1); + break; + + case slideWidth * 2: + updateSlider(2); + break; + + case slideWidth * 3: + updateSlider(3); + break; + + case slideWidth * 4: + updateSlider(4); + break; + + default: + break; + } +} + +// Tech Specs Buttons + +const techSpecsImgWrapper = document.querySelector('.tech-specs__img-wrapper'); +const techSpecsButtons = + techSpecsImgWrapper.querySelectorAll('.tech-specs__btn'); + +techSpecsImgWrapper.addEventListener('click', (e) => { + const pressedBtn = e.target.closest('.tech-specs__btn'); + + if (!pressedBtn) { + return; + } + + pressedBtn.classList.toggle('tech-specs__btn--active'); + + for (const techSpecsButton of techSpecsButtons) { + if (techSpecsButton !== pressedBtn) { + techSpecsButton.classList.remove('tech-specs__btn--active'); + } + } +}); + +for (const techSpecsButton of techSpecsButtons) { + techSpecsButton.addEventListener('blur', () => { + if (techSpecsButton.classList.contains('tech-specs__btn--active')) { + techSpecsButton.classList.remove('tech-specs__btn--active'); + } + }); +} + +// Get In Touch / Form Validation + +const form = document.querySelector('.form'); + +const nameLabel = form.querySelector('.form__label--name'); +const nameInput = form.querySelector('#name-input'); + +const emailLabel = form.querySelector('.form__label--email'); +const emailInput = form.querySelector('#email-input'); + +const phoneLabel = form.querySelector('.form__label--phone'); +const phoneInput = form.querySelector('#phone-input'); + +const redColor = '#860404'; +const contrastColor = '#05c2df'; +const textColor = '#929292'; +const darkGreyColor = '#2f2f2f'; + +const numbers = '0123456789'; +const smallLetters = 'abcdefghijklmnopqrstuvwxyz'; +const capitalLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + +let nameError = false; +let emailError = false; +let phoneError = false; + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + const formData = new FormData(form); + + const name = formData.get('name'); + const email = formData.get('email'); + const phone = formData.get('phone'); + + if (!name.trim()) { + nameError = true; + nameLabel.textContent = 'Please, fill your name*'; + setColor(nameLabel, nameInput, redColor, redColor); + } else { + const allowedChars = smallLetters + capitalLetters + numbers + '_- '; + + for (const char of name) { + if (!allowedChars.includes(char)) { + nameError = true; + nameLabel.textContent = 'Incorrect name format*'; + setColor(nameLabel, nameInput, redColor, redColor); + + break; + } + } + } + + if (!email.trim()) { + emailError = true; + emailLabel.textContent = 'Please, fill your email*'; + setColor(emailLabel, emailInput, redColor, redColor); + } else { + const allowedChars = smallLetters + capitalLetters + numbers + '@.'; + + for (const char of email) { + if (!allowedChars.includes(char)) { + emailError = true; + + break; + } + } + + if (!email.includes('@')) { + emailError = true; + } + + if (emailError) { + emailLabel.textContent = 'Incorrect email format*'; + setColor(emailLabel, emailInput, redColor, redColor); + } + } + + if (!phone.trim()) { + phoneError = true; + phoneLabel.textContent = 'Please, fill your phone*'; + setColor(phoneLabel, phoneInput, redColor, redColor); + } else { + const allowedChars = numbers + '+'; + + for (let i = 0; i < phone.length; i++) { + const char = phone[i]; + + if (!allowedChars.includes(char) || (char === '+' && i !== 0)) { + phoneError = true; + phoneLabel.textContent = 'Incorrect phone format*'; + setColor(phoneLabel, phoneInput, redColor, redColor); + + break; + } + } + } + + if (nameError) { + nameInput.focus(); + + return; + } + + if (emailError) { + emailInput.focus(); + + return; + } + + if (phoneError) { + phoneInput.focus(); + + return; + } + + form.reset(); +}); + +nameInput.addEventListener('input', () => { + nameError = false; + nameLabel.textContent = 'Name*'; + setColor(nameLabel, nameInput, contrastColor, contrastColor); +}); + +emailInput.addEventListener('input', () => { + emailError = false; + emailLabel.textContent = 'Email*'; + setColor(emailLabel, emailInput, contrastColor, contrastColor); +}); + +phoneInput.addEventListener('input', () => { + phoneError = false; + phoneLabel.textContent = 'Phone*'; + setColor(phoneLabel, phoneInput, contrastColor, contrastColor); +}); + +nameInput.addEventListener('blur', () => { + if (!nameError) { + setColor(nameLabel, nameInput, textColor, darkGreyColor); + } +}); + +emailInput.addEventListener('blur', () => { + if (!emailError) { + setColor(emailLabel, emailInput, textColor, darkGreyColor); + } +}); + +phoneInput.addEventListener('blur', () => { + if (!phoneError) { + setColor(phoneLabel, phoneInput, textColor, darkGreyColor); + } +}); + +nameInput.addEventListener('focus', () => { + if (!nameError) { + setColor(nameLabel, nameInput, contrastColor, contrastColor); + } +}); + +emailInput.addEventListener('focus', () => { + if (!emailError) { + setColor(emailLabel, emailInput, contrastColor, contrastColor); + } +}); + +phoneInput.addEventListener('focus', () => { + if (!phoneError) { + setColor(phoneLabel, phoneInput, contrastColor, contrastColor); + } +}); + +function setColor(label, input, labelColor, inputBorderColor) { + label.style.color = labelColor; + input.style.borderColor = inputBorderColor; +} + +// Scroll Buy Now Link + +const buyNowLink = document.querySelector('.page__buy-now'); +const getInTouchSection = document.getElementById('contact'); +const getInTouchTop = getInTouchSection.offsetTop; +const windowHeight = window.innerHeight; + +window.addEventListener('scroll', () => { + const scrollY = window.scrollY; + + if (scrollY > getInTouchTop - windowHeight) { + buyNowLink.classList.add('page__buy-now--hidden'); + } else { + buyNowLink.classList.remove('page__buy-now--hidden'); + } +}); + +// FAQ Select Question + +const faqSection = document.getElementById('faq'); +const faqMoreBtn = faqSection.querySelector('.more-btn'); +const questions = faqSection.querySelectorAll('.faq__question'); + +faqSection.addEventListener('click', (e) => { + const question = e.target.closest('.faq__question'); + + if (!question) { + return; + } + + question.classList.toggle('faq__question--selected'); + + let isMoreBtnDisabled = true; + + for (const question of questions) { + if (!question.classList.contains('faq__question--selected')) { + isMoreBtnDisabled = false; + + break; + } + } + + faqMoreBtn.disabled = isMoreBtnDisabled; +}); + +faqMoreBtn.addEventListener('click', () => { + for (const question of questions) { + if (!question.classList.contains('faq__question--selected')) { + question.classList.add('faq__question--selected'); + + break; + } + } + + const selectedQuestions = faqSection.querySelectorAll( + '.faq__question--selected', + ); + + if (questions.length === selectedQuestions.length) { + faqMoreBtn.disabled = true; + } +}); + +// Closing The Video In The Correct Section + +const headerPlayVideoBtn = document.querySelector('.header__play-video'); +const aboutPlayVideoBtn = document.querySelector('.about__play-video'); +const videoAside = document.getElementById('video'); +const videoCloseIcon = videoAside.querySelector('.top-bar__icon--close'); + +headerPlayVideoBtn.addEventListener('click', () => { + videoCloseIcon.setAttribute('href', '#page-top'); +}); + +aboutPlayVideoBtn.addEventListener('click', () => { + videoCloseIcon.setAttribute('href', '#about'); +}); + +// Select Quantity + +const orderPlace = document.getElementById('order-place'); +const orderPay = document.getElementById('order-pay'); + +const price1 = orderPlace.querySelector('.qty-price__price-value'); +const qtySelect1 = orderPlace.querySelector('.select-qty'); +const qtySelectValue1 = orderPlace.querySelector('.select-qty__current-value'); +const qtySelectList1 = orderPlace.querySelector('.select-qty__list-wrapper'); + +const price2 = orderPay.querySelector('.qty-price__price-value'); +const qtySelect2 = orderPay.querySelector('.select-qty'); +const qtySelectValue2 = orderPay.querySelector('.select-qty__current-value'); +const qtySelectList2 = orderPay.querySelector('.select-qty__list-wrapper'); + +qtySelect1.addEventListener('click', () => { + qtySelectList1.classList.toggle('select-qty__list-wrapper--visible'); +}); + +qtySelectList1.addEventListener('click', (e) => { + handleClickQuantityList(e, qtySelect1, qtySelectValue1, price1); +}); + +qtySelect2.addEventListener('click', () => { + qtySelectList2.classList.toggle('select-qty__list-wrapper--visible'); +}); + +qtySelectList2.addEventListener('click', (e) => { + handleClickQuantityList(e, qtySelect2, qtySelectValue2, price2); +}); + +function handleClickQuantityList(event, qtySelect, qtySelectValue, price) { + const li = event.target.closest('.select-qty__item'); + + if (!li) { + return; + } + + const liText = li.innerText; + const selectedQty = +liText; + + price.textContent = `${selectedQty * 1200}$`; + + qtySelectValue.textContent = liText; + qtySelectValue.classList.toggle( + 'select-qty__current-value--changed', + li.innerText !== '1', + ); + + const selectedLi = qtySelect.querySelector('.select-qty__item--selected'); + + selectedLi.classList.remove('select-qty__item--selected'); + li.classList.add('select-qty__item--selected'); +} + +// Select Country / City + +const countrySelect = document.querySelector('.select--country'); +const countrySelectValue = countrySelect.querySelector( + '.select__current-value', +); +const countrySelectList = countrySelect.querySelector('.select__list-wrapper'); + +const citySelect = document.querySelector('.select--city'); +const citySelectValue = citySelect.querySelector('.select__current-value'); +const citySelectList = citySelect.querySelector('.select__list-wrapper'); + +countrySelect.addEventListener('click', () => { + countrySelectList.classList.toggle('select__list-wrapper--visible'); +}); + +countrySelectList.addEventListener('click', (e) => { + handleClickSelectList(e, countrySelect, countrySelectValue); +}); + +citySelect.addEventListener('click', () => { + citySelectList.classList.toggle('select__list-wrapper--visible'); +}); + +citySelectList.addEventListener('click', (e) => { + handleClickSelectList(e, citySelect, citySelectValue); +}); + +function handleClickSelectList(event, selectField, selectValue) { + const li = event.target.closest('.select__item'); + + if (!li) { + return; + } + + selectValue.innerText = li.innerText; + + const selectedLi = selectField.querySelector('.select__item--selected'); + + li.classList.add('select__item--selected'); + + if (!selectedLi) { + return; + } + + selectedLi.classList.remove('select__item--selected'); +} + +// Select Language + +const langSelect = document.querySelector('.select-lang'); + +const langSelectValue = langSelect.querySelector('.select-lang__current-value'); +const langSelectList = langSelect.querySelector('.select-lang__list-wrapper'); + +langSelect.addEventListener('click', () => { + langSelectList.classList.toggle('select-lang__list-wrapper--visible'); +}); + +langSelectList.addEventListener('click', (e) => { + handleClickLangList(e, langSelect, langSelectValue); +}); + +function handleClickLangList(event, selectField, selectValue) { + const li = event.target.closest('.select-lang__item'); + + if (!li) { + return; + } + + selectValue.innerText = li.innerText; + + const selectedLi = selectField.querySelector('.select-lang__item--selected'); + + li.classList.add('select-lang__item--selected'); + + if (!selectedLi) { + return; + } + + selectedLi.classList.remove('select-lang__item--selected'); +} + +document.addEventListener('click', (e) => { + handleClickOutsideSelectList( + e, + '.select-qty', + qtySelectList1, + 'select-qty__list-wrapper--visible', + ); + handleClickOutsideSelectList( + e, + '.select-qty', + qtySelectList2, + 'select-qty__list-wrapper--visible', + ); + + handleClickOutsideSelectList( + e, + '.select--country', + countrySelectList, + 'select__list-wrapper--visible', + ); + + handleClickOutsideSelectList( + e, + '.select--city', + citySelectList, + 'select__list-wrapper--visible', + ); + + handleClickOutsideSelectList( + e, + '.select-lang', + langSelectList, + 'select-lang__list-wrapper--visible', + ); +}); + +function handleClickOutsideSelectList(event, selector, selectList, className) { + if ( + !event.target.closest(selector) && + selectList.classList.contains(className) + ) { + selectList.classList.remove(className); + } +} + +// Card Number & CVV Number Inputs + +const cardNumInputs = orderPay.querySelectorAll('.pay-order__input--card-num'); +const cvvInput = orderPay.querySelector('.pay-order__input--cvv'); + +for (const cardNumInput of cardNumInputs) { + cardNumInput.addEventListener('input', (e) => { + handleNumInputValidation(e, cardNumInput); + }); +} + +cvvInput.addEventListener('input', (e) => { + handleNumInputValidation(e, cvvInput); +}); + +function handleNumInputValidation(event, input) { + for (const ch of event.target.value) { + if (!numbers.includes(ch)) { + input.value = ''; + } + } +} + +// Set Order Pay Quantity After Click On Order Place Purchase Button + +const orderPurchaseBtn = orderPlace.querySelector('.place-order__purchase-btn'); + +orderPurchaseBtn.addEventListener('click', () => { + const currQtyTxt = qtySelectValue1.innerText; + const currQty = +currQtyTxt; + + price2.textContent = `${currQty * 1200}$`; + + qtySelectValue2.textContent = currQtyTxt; + qtySelectValue2.classList.toggle( + 'select-qty__current-value--changed', + currQty !== 1, + ); + + const order2LiCollection = orderPay.querySelectorAll('.select-qty__item'); + const order2LiArr = [...order2LiCollection]; + + const order2PrevSelectedLi = order2LiArr.find((li) => { + return li.classList.contains('select-qty__item--selected'); + }); + + const order2NextSelectedLi = order2LiArr.find((li) => { + return li.innerText === currQtyTxt; + }); + + if (order2NextSelectedLi !== order2PrevSelectedLi) { + order2NextSelectedLi.classList.add('select-qty__item--selected'); + order2PrevSelectedLi.classList.remove('select-qty__item--selected'); + } +}); 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..77715b14 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,242 @@ +.about { + &__content { + box-sizing: border-box; + padding-block: 50px; + background: $gradient; + + @include on-tablet { + padding: 70px 0 50px; + } + + @include on-laptop { + padding: 100px 0 98px; + } + + @include on-desktop { + padding: 147px 0 156px; + } + } + + &__top { + @include grid-container; + + margin-bottom: 79px; + + @include on-tablet { + margin-bottom: 84px; + } + + @include on-laptop { + margin-bottom: 183px; + } + + @include on-desktop { + margin-bottom: 175px; + } + } + + &__bottom { + @include grid-container; + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 20px; + height: 29px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 2; + margin-bottom: 30px; + } + + @include on-laptop { + grid-column: -5 / -1; + height: 45px; + } + + @include on-desktop { + grid-column: -6 / -1; + height: 72px; + margin-bottom: 32px; + } + + &--nice-to-meet { + margin-bottom: 22px; + height: auto; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2 / 3; + margin-bottom: 32px; + } + + @include on-laptop { + grid-column: 1 / 6; + grid-row: 2 / 3; + } + + @include on-desktop { + grid-column: 2 / 7; + height: 46px; + margin-bottom: 30px; + } + } + } + + &__slider { + position: relative; + grid-column: 1 / -1; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1 / 4; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: 3 / 8; + } + + @include on-desktop { + grid-column: 4 / 11; + } + } + + &__slider-number { + display: none; + + @include on-laptop { + display: block; + position: absolute; + right: 100%; + width: 21px; + height: 17px; + margin-right: 23px; + line-height: 17px; + color: $contrastColor; + } + } + + &__description { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 15px; + height: 176px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2 / 3; + height: 124px; + margin-bottom: 21px; + } + + @include on-laptop { + grid-column: -5 / -1; + grid-row: 2 / 3; + height: 128px; + } + + @include on-desktop { + grid-column: -6 / -1; + width: 435px; + height: 105px; + margin-bottom: 33px; + } + + &--nice-to-meet { + margin-bottom: 0; + width: auto; + height: 218px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 3 / 4; + height: 128px; + margin-bottom: 22px; + } + + @include on-laptop { + grid-column: 1 / 6; + height: 157px; + margin-bottom: 38px; + } + + @include on-desktop { + grid-column: 2 / 8; + height: 128px; + margin-bottom: 69px; + } + } + } + + &__play-video { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 3 / 4; + margin-bottom: 19px; + } + + @include on-laptop { + grid-column: -5 / -1; + margin-bottom: 46px; + } + + @include on-desktop { + grid-column: -6 / -1; + margin-bottom: 45px; + } + } + + &__hello { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 11px; + font-size: 14px; + line-height: 16.94px; + color: $contrastColor; + + @include on-tablet { + grid-column: 1 / 3; + grid-row: 1 / 2; + margin-top: 24px; + } + + @include on-laptop { + margin-top: 43px; + margin-bottom: 15px; + } + + @include on-desktop { + grid-column: 2 / 4; + margin-top: 45px; + } + } + + &__background { + display: none; + + @include on-tablet { + display: block; + grid-column: 5 / -1; + grid-row: 1 / 4; + background-image: url('../images/about-us/about-us-bg-tablet.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: left center; + } + + @include on-laptop { + grid-column: 7 / -1; + background-image: url('../images/about-us/about-us-bg.svg'); + } + + @include on-desktop { + grid-column: 9 / -1; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..60ebd564 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,48 @@ +.button { + width: 280px; + height: 40px; + background-color: $contrastColor; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + text-align: center; + font: inherit; + font-weight: 500; + font-size: 14px; + line-height: 18.2px; + color: $whiteColor; + + @include on-tablet { + width: 458px; + height: 48px; + font-size: 16px; + line-height: 20.8px; + } + + @include pointer-cursor; + @include on-hover(background-color, $whiteColor); + @include on-hover(color, $contrastColor); + + &--small { + @include on-tablet { + width: 200px; + height: 48px; + } + } + + &--order { + @include on-laptop { + width: 200px; + height: 48px; + } + } + + &--back-home { + @include on-laptop { + width: 218px; + height: 48px; + } + } +} diff --git a/src/styles/blocks/card-benefits.scss b/src/styles/blocks/card-benefits.scss new file mode 100644 index 00000000..a0f18bf9 --- /dev/null +++ b/src/styles/blocks/card-benefits.scss @@ -0,0 +1,123 @@ +.card-benefits { + display: block; + width: 100%; + height: 108px; + + @include on-tablet { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + + height: 237px; + + @include on-hover(transform, scale(1.05)); + } + + @include on-laptop { + height: 259px; + } + + @include on-desktop { + height: 257px; + } + + &__icon { + display: none; + + @include on-tablet { + display: block; + width: 80px; + height: 79.45px; + + background-image: url('../images/why-kat-icons/wk-1.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + &--panel { + width: 89px; + height: 81px; + background-image: url('../images/why-kat-icons/why-kat-2.svg'); + } + + &--sensors { + width: 105px; + height: 75px; + background-image: url('../images/why-kat-icons/wk-3.svg'); + } + } + + @include on-laptop { + &--panel { + width: 88px; + height: 80px; + } + + &--sensors { + width: 111px; + height: 80px; + } + } + } + + &__title { + margin: 0; + margin-bottom: 11px; + + font-weight: 900; + font-size: 18px; + line-height: 21.78px; + color: $whiteColor; + text-transform: uppercase; + + @include on-tablet { + margin-bottom: 0; + text-align: center; + } + + &--compatible { + font-weight: 900; + font-size: 16px; + line-height: 19.36px; + + @include on-tablet { + font-size: 14px; + } + + @include on-laptop { + font-size: 16px; + } + } + } + + &__description { + margin: 0; + + @include on-tablet { + display: none; + } + + &--tablet { + display: none; + + @include on-tablet { + display: block; + text-align: center; + } + + @include on-laptop { + display: none; + } + } + + &--full { + display: none; + + @include on-laptop { + display: block; + text-align: center; + } + } + } +} diff --git a/src/styles/blocks/card-more.scss b/src/styles/blocks/card-more.scss new file mode 100644 index 00000000..255092cb --- /dev/null +++ b/src/styles/blocks/card-more.scss @@ -0,0 +1,112 @@ +.card-more { + width: 100%; + height: 82px; + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + align-items: center; + height: 230px; + + @include on-hover(transform, scale(1.05)); + + &--fitness { + height: 227px; + } + + &--social-interactions { + height: 235px; + } + } + + @include on-laptop { + height: 262px; + + &--social-interactions { + height: 238px; + } + } + + @include on-desktop { + height: 238px; + + &--social-interactions { + height: 214px; + } + } + + &__icon { + display: none; + + @include on-tablet { + display: block; + width: 98px; + height: 81px; + background-image: url('../images/more-than-gaming-icons/education.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + &--real-estate { + width: 84px; + height: 84px; + background-image: url('../images/more-than-gaming-icons/estate.svg'); + } + + &--fitness { + width: 110px; + height: 80.44px; + background-image: url('../images/more-than-gaming-icons/fitnes.svg'); + } + + &--social-interactions { + width: 83px; + height: 83px; + background-image: url('../images/more-than-gaming-icons/social.svg'); + } + } + + @include on-laptop { + &--fitness { + width: 113px; + height: 82.63px; + } + } + } + + &__title { + margin: 0; + font-weight: 900; + font-size: 18px; + line-height: 21.78px; + color: $whiteColor; + text-transform: uppercase; + + @include on-tablet { + text-align: center; + } + + &--education { + font-size: 16px; + line-height: 19.36px; + } + } + + &--description { + margin: 0; + + @include on-tablet { + display: none; + } + + &--full { + display: none; + + @include on-tablet { + display: block; + text-align: center; + } + } + } +} diff --git a/src/styles/blocks/contact-info.scss b/src/styles/blocks/contact-info.scss new file mode 100644 index 00000000..92185712 --- /dev/null +++ b/src/styles/blocks/contact-info.scss @@ -0,0 +1,58 @@ +.contact-info { + height: 76px; + line-height: 19px; + display: flex; + flex-direction: column; + align-items: flex-start; + + &--help { + @include on-tablet { + height: fit-content; + } + } + + &--footer { + height: 72px; + font-size: 13px; + line-height: 16px; + } + + &__link { + text-decoration: none; + color: $textColor; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &:first-of-type { + margin-bottom: 11px; + } + + &:nth-of-type(2) { + margin-bottom: 8px; + } + + &--help { + @include on-hover(color, $whiteColor); + + @include on-tablet { + &:first-of-type { + margin-bottom: 25px; + } + + &:nth-of-type(2) { + margin-bottom: 24px; + } + } + } + + &--footer { + &:first-of-type { + margin-bottom: 12px; + } + &:nth-of-type(2) { + margin-bottom: 12px; + } + } + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 00000000..16044e17 --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,274 @@ +.faq { + @include content-min-width; + + box-sizing: border-box; + width: 100vw; + height: 100vh; + background-color: #191536b3; + overflow: auto; + + @include on-laptop { + padding-top: 134px; + } + + &__content { + @include grid-container; + + width: 100%; + min-height: 100%; + background-color: $darkColor; + + @include on-laptop { + grid-template-columns: repeat(10, 70px); + width: 880px; + border-radius: 4px; + margin-inline: auto; + margin-bottom: 184px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 72px); + width: 1084px; + margin-bottom: 153px; + } + } + + &__top-bar { + grid-column: 1 / -1; + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 30px; + + @include on-tablet { + width: 280px; + } + + @include on-laptop { + grid-column: 2 / -2; + width: 520px; + margin-bottom: 50px; + } + + @include on-desktop { + width: 622px; + height: 56px; + margin-bottom: 37px; + } + } + + &__details { + grid-column: 1 / -1; + box-sizing: border-box; + width: 100%; + height: 84px; + padding: 18px 12px; + border: 1px solid $contrastColor; + border-radius: 4px; + margin-bottom: 13px; + transition: all $transitionDuration; + + @include on-tablet { + height: 54px; + padding: 14px 30px 15px; + margin-bottom: 18px; + + &--4 { + margin-bottom: 50px; + } + } + + @include on-laptop { + grid-column: 2 / -2; + position: relative; + height: 60px; + padding: 18px 29px; + margin-bottom: 13px; + + &--4 { + margin-bottom: 50px; + } + + &::after { + content: ''; + position: absolute; + top: 25px; + right: 32.5px; + display: block; + width: 6px; + height: 9px; + background-image: url('../images/icons/select-icon-right.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include on-desktop { + right: 25.5px; + } + } + } + + &:has(.faq__question--selected) { + padding: 20px 11px 12px; + + @include on-tablet { + padding: 20px 14px 24px 28px; + } + + @include on-laptop { + padding: 18px 31px 21px 29px; + margin-bottom: 15px; + + &::after { + content: ''; + position: absolute; + top: 27px; + right: 31px; + display: block; + width: 9px; + height: 6px; + background-image: url('../images/icons/select-icon.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include on-desktop { + top: 25px; + right: 25px; + } + } + } + + @include on-desktop { + padding: 18px 27px 23px; + margin-bottom: 13px; + } + } + + &--1:has(.faq__question--selected) { + height: 608px; + + @include on-tablet { + height: 288px; + } + + @include on-laptop { + height: 291.6px; + } + + @include on-desktop { + height: 269.6px; + } + } + + &--2:has(.faq__question--selected) { + height: 488px; + + @include on-tablet { + height: 241px; + } + + @include on-laptop { + height: 243.6px; + } + + @include on-desktop { + height: 221.6px; + } + } + + &--3:has(.faq__question--selected) { + height: 440px; + + @include on-tablet { + height: 217px; + } + + @include on-laptop { + height: 219.6px; + } + + @include on-desktop { + height: 197.6px; + } + } + + &--4:has(.faq__question--selected) { + height: 416px; + + @include on-tablet { + height: 217px; + } + + @include on-laptop { + height: 219.6px; + margin-bottom: 50px; + } + + @include on-desktop { + height: 197.6px; + } + } + } + + &__answer { + display: none; + margin: 0; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 15px; + } + + @include on-laptop { + margin-bottom: 20px; + } + } + + &__update-info { + display: none; + margin: 0; + font-size: 12px; + line-height: 18px; + color: $lightGreyColor; + + @include on-laptop { + font-size: 14px; + line-height: 21px; + } + } + + &__question { + margin: 0; + width: fit-content; + color: $contrastColor; + + @include pointer-cursor; + @include on-hover(color, $whiteColor); + + &--selected { + margin-bottom: 18px; + } + + &--selected ~ .faq__answer { + display: block; + } + + &--selected ~ .faq__update-info { + display: block; + } + } + + &__more-btn { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / -1; + justify-self: center; + margin-bottom: 50px; + } + } +} diff --git a/src/styles/blocks/fixed-top.scss b/src/styles/blocks/fixed-top.scss new file mode 100644 index 00000000..6c148ba6 --- /dev/null +++ b/src/styles/blocks/fixed-top.scss @@ -0,0 +1,32 @@ +.fixed-top { + @include grid-container; + + box-sizing: border-box; + width: 100%; + height: 98px; + padding-top: 16px; + background: linear-gradient( + 180deg, + #191536 0%, + rgba(25, 21, 54, 0.83) 70.31%, + rgba(25, 21, 54, 0) 100% + ); + + &__content { + grid-column: 1 / -1; + display: flex; + justify-content: space-between; + } + + &__left { + display: flex; + align-items: center; + gap: 35px; + } + + &__right { + display: flex; + align-items: center; + gap: 37px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..46d93c1b --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,131 @@ +.footer { + &__content { + @include content-min-width; + @include grid-container; + + box-sizing: border-box; + padding: 45px 0 50px; + background-color: $blackColor; + + @include on-tablet { + align-items: center; + padding-block: 21px; + } + + @include on-laptop { + padding-block: 39px; + } + } + + &__logo { + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 0; + justify-self: start; + } + + @include on-laptop { + grid-column: 1 / 3; + } + } + + &__nav { + grid-column: 1 / 2; + grid-row: 2 / 4; + + @include on-tablet { + grid-column: 2 / -2; + grid-row: 1 / 2; + justify-self: center; + } + + @include on-laptop { + grid-column: 3 / -3; + } + } + + &__contacts { + grid-column: 2 / 3; + grid-row: 2 / 3; + align-self: start; + + @include on-tablet { + display: none; + } + } + + &__socials { + grid-column: 2 / 3; + grid-row: 3 / 4; + align-self: end; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + grid-column: -2 / -1; + grid-row: 1 / 2; + align-self: center; + } + + @include on-laptop { + grid-column: -3 / -1; + justify-self: end; + justify-content: flex-end; + gap: 18px; + } + } + + &__social { + width: 7.57px; + height: 15.15px; + background-image: url('../images/icons/facebook.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include on-tablet { + width: 6px; + height: 12px; + } + + @include pointer-cursor; + @include on-hover(transform, scale(1.3)); + + &--x { + width: 18.93px; + height: 13.88px; + background-image: url('../images/icons/x.svg'); + + @include on-tablet { + width: 15px; + height: 11px; + } + } + + &--youtube { + width: 17.9px; + height: 13.63px; + background-image: url('../images/icons/youtube.svg'); + + @include on-tablet { + width: 14.18px; + height: 10.8px; + } + } + + &--discord { + width: 17.67px; + height: 17.67px; + background-image: url('../images/icons/discord.svg'); + + @include on-tablet { + width: 14px; + height: 14px; + } + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 00000000..7f7ba761 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,106 @@ +.form { + &__input-wrapper { + width: 100%; + height: 40px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + &--textarea { + height: 88px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-laptop { + margin-bottom: 90px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + } + + &__label { + display: block; + height: 14px; + font-size: 14px; + line-height: 1em; + + &:has(+ .form__input:focus) { + color: $contrastColor; + } + } + + &__input { + display: block; + box-sizing: border-box; + width: 100%; + height: 26px; + border: none; + outline: none; + padding: 0; + background-color: transparent; + border-bottom: 1px solid $darkGreyColor; + font: inherit; + font-size: 16px; + line-height: 24px; + color: $whiteColor; + + &:-webkit-autofill { + -webkit-text-fill-color: $whiteColor; + -webkit-box-shadow: 0 0 0 50px $backgroundBlackColor inset; + } + + &:focus { + border-color: $contrastColor; + } + + &--textarea { + resize: none; + height: 74px; + } + } + + &__buttons-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__contact-btn { + margin-inline: auto; + border: none; + outline: none; + padding: 0; + + @include on-tablet { + margin-inline: 0; + } + } + + &__up-btn { + display: none; + + @include on-tablet { + display: block; + width: 48px; + height: 48px; + background-image: url('../images/icons/arrow-up.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include pointer-cursor; + @include on-hover( + background-image, + url('../images/icons/arrow-up-hover.svg') + ); + } + } +} diff --git a/src/styles/blocks/get-in-touch.scss b/src/styles/blocks/get-in-touch.scss new file mode 100644 index 00000000..1e2a4c28 --- /dev/null +++ b/src/styles/blocks/get-in-touch.scss @@ -0,0 +1,114 @@ +.get-in-touch { + &__content { + @include grid-container; + + box-sizing: border-box; + padding-block: 50px; + + @include on-tablet { + padding-top: 70px; + padding-bottom: 130px; + } + + @include on-laptop { + padding-block: 100px; + } + + @include on-desktop { + padding-top: 156px; + padding-bottom: 205px; + } + } + + &__have-questions { + grid-column: 1/ -1; + margin: 0; + margin-bottom: 11px; + font-size: 14px; + line-height: 16.94px; + color: $contrastColor; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1 / 2; + } + + @include on-laptop { + margin-bottom: 13px; + } + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 32px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2 / 3; + margin-bottom: 50px; + } + + @include on-laptop { + grid-column: 1 /5; + margin-bottom: 26px; + } + } + + &__form { + grid-column: 1 / -1; + margin-bottom: 27px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 5; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: 7 / -1; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__manager-reply { + grid-column: 1 / -1; + margin: 0; + font-size: 12px; + line-height: 18px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 3 / 4; + margin-bottom: 76px; + font-size: 16px; + line-height: 24px; + } + + @include on-laptop { + grid-column: 1 / 6; + } + } + + &__contacts { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / 4; + grid-row: 4 / 5; + margin-bottom: 97px; + } + + @include on-laptop { + margin-bottom: 139px; + } + + @include on-desktop { + margin-bottom: 98px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..7a5d6b3a --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,244 @@ +.header { + &__content { + @include content-min-width; + @include grid-container; + + box-sizing: border-box; + width: 100%; + height: 100vh; + min-height: 554px; + background: $gradient; + + @include on-tablet { + min-height: 445px; + } + + @include on-laptop { + min-height: 740px; + padding-top: 196px; + } + + @include on-desktop { + min-height: 1103px; + padding-top: 327px; + } + } + + &__top-bar { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 1 / 2; + } + + @include on-laptop { + display: none; + } + } + + &__img { + grid-column: 1 / -1; + display: block; + width: 100%; + height: 172px; + object-fit: cover; + object-position: center; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2 / 6; + height: 100%; + object-fit: contain; + } + + @include on-laptop { + display: none; + } + } + + &__slider { + display: none; + + @include on-laptop { + display: block; + grid-column: 7 / -1; + grid-row: 1 / 5; + margin-bottom: 84px; + } + + @include on-desktop { + grid-column: 8 / -1; + margin-bottom: 212px; + } + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 17px; + font-weight: 900; + font-size: 26px; + line-height: 33.8px; + color: $whiteColor; + text-transform: uppercase; + + & > span { + font-weight: 400; + color: $contrastColor; + } + + @include on-tablet { + grid-column: span 3; + grid-row: 2 / 3; + } + + @include on-laptop { + grid-column: span 6; + grid-row: 1 / 2; + margin-bottom: 19px; + font-size: 46px; + line-height: 60px; + color: transparent; + + & > span { + color: transparent; + } + + background-image: url('../images/titles/header-title.svg'); + background-repeat: no-repeat; + background-position: left center; + } + + @include on-desktop { + grid-column: span 7; + width: 552px; + margin-bottom: 35px; + font-size: 54px; + line-height: 70.2px; + background-size: contain; + } + } + + &__description { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 8px; + font-weight: 500; + + @include on-tablet { + grid-column: span 3; + grid-row: 3 / 4; + margin-bottom: 16px; + } + + @include on-laptop { + grid-column: 2 / 6; + grid-row: 2 / 3; + height: 87px; + margin-bottom: 5px; + } + + @include on-desktop { + grid-column: 2 / 7; + margin-bottom: 30px; + font-size: 20px; + line-height: 30px; + } + } + + &__price { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 16px; + font-weight: 500; + font-size: 18px; + line-height: 21.78px; + color: $whiteColor; + text-align: center; + + @include on-tablet { + grid-column: span 3; + grid-row: 4 / 5; + margin-bottom: 24px; + text-align: left; + } + + @include on-laptop { + grid-column: 2 / 4; + grid-row: 3 / 4; + margin-bottom: 20px; + } + + @include on-desktop { + margin-bottom: 36px; + font-size: 20px; + line-height: 24.2px; + } + } + + &__play-video { + grid-column: 1 / -1; + margin-bottom: 46px; + + @include on-tablet { + grid-column: span 3; + grid-row: 5 / 6; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: 2 / 5; + grid-row: 4 / 5; + margin-bottom: 84px; + } + + @include on-desktop { + grid-column: 2 / 6; + margin-bottom: 212px; + } + } + + &__bottom-bar { + display: none; + + @include on-laptop { + display: flex; + justify-content: space-between; + align-items: center; + grid-column: 1 / -1; + grid-row: 5 / 6; + margin-bottom: 84px; + } + + @include on-desktop { + margin-bottom: 107px; + } + } + + &__faq-help-links { + align-self: flex-start; + width: 207px; + height: 24px; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 39px; + } + + &__link { + text-decoration: none; + font-weight: 500; + color: $whiteColor; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + } + + &__prev-next { + display: none; + + @include on-laptop { + display: block; + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..c2ebb7fa --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,127 @@ +.help { + @include content-min-width; + + box-sizing: border-box; + width: 100vw; + height: 100vh; + background-color: #191536b3; + overflow: auto; + + @include on-laptop { + padding-top: 134px; + } + + @include on-desktop { + padding-top: 287px; + } + + &__content { + @include grid-container; + + width: 100%; + min-height: 100%; + background-color: $darkColor; + + @include on-tablet { + min-height: 596px; + } + + @include on-laptop { + grid-template-columns: repeat(10, 70px); + width: 880px; + min-height: 550px; + border-radius: 4px; + margin-inline: auto; + margin-bottom: 127px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 72px); + width: 1084px; + min-height: 518px; + margin-bottom: 275px; + } + } + + &__top-bar { + grid-column: 1 / -1; + grid-row: 1 / 2; + } + + &__title { + grid-column: 1 / -1; + grid-row: 2 / 3; + margin: 0; + margin-bottom: 30px; + + @include on-laptop { + grid-column: 2 / -2; + height: 61px; + margin-bottom: 50px; + } + } + + &__description { + grid-column: 1 / -1; + grid-row: 3 / 4; + margin: 0; + margin-bottom: 30px; + + @include on-tablet { + height: 179px; + margin-bottom: 20px; + } + + @include on-laptop { + grid-column: 2 / -2; + height: 173px; + } + + @include on-desktop { + height: 133px; + } + } + + &__links { + grid-column: 1 / -1; + grid-row: 4 / 5; + margin-bottom: 30px; + display: flex; + flex-direction: column; + gap: 20px; + align-items: flex-start; + + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: 2 / 5; + } + } + + &__link { + text-decoration: none; + color: $contrastColor; + + @include pointer-cursor; + @include on-hover(color, $whiteColor); + } + + &__contacts { + grid-column: 1 / -1; + grid-row: 5 / 6; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 4 / 5; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: 5 / 8; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..407f10e1 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,31 @@ +.logo { + display: block; + width: 58px; + height: 12px; + + @include pointer-cursor; + @include on-hover(transform, scale(1.15)); + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-laptop { + width: 78px; + height: 16px; + } + + &--footer { + width: 69px; + height: 14px; + } + + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + object-position: left center; + } +} diff --git a/src/styles/blocks/main-block.scss b/src/styles/blocks/main-block.scss new file mode 100644 index 00000000..708ff48d --- /dev/null +++ b/src/styles/blocks/main-block.scss @@ -0,0 +1,3 @@ +.main { + @include content-min-width; +} diff --git a/src/styles/blocks/menu-nav.scss b/src/styles/blocks/menu-nav.scss new file mode 100644 index 00000000..e8c53149 --- /dev/null +++ b/src/styles/blocks/menu-nav.scss @@ -0,0 +1,34 @@ +.menu-nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 0; + font-weight: 500; + font-size: 21px; + line-height: 27.3px; + } + + &__item { + @include grid-container; + @include on-hover(background-color, $extraDarkColor); + } + + &__link { + grid-column: 1 / -1; + display: flex; + align-items: center; + height: 49px; + text-decoration: none; + color: $whiteColor; + + @include on-tablet { + grid-column: 2 / -1; + } + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..041f5ac7 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,30 @@ +.menu { + @include content-min-width; + + width: 100vw; + height: 100vh; + background-color: #191536b3; + overflow: auto; + + &__content { + width: 100%; + min-height: 100%; + background-color: $darkColor; + + @include on-tablet { + min-height: 568px; + + &--language { + min-height: 596px; + } + } + } + + &__top-bar-wrapper { + @include grid-container; + } + + &__top-bar { + grid-column: 1 / -1; + } +} diff --git a/src/styles/blocks/more-btn.scss b/src/styles/blocks/more-btn.scss new file mode 100644 index 00000000..1be15503 --- /dev/null +++ b/src/styles/blocks/more-btn.scss @@ -0,0 +1,19 @@ +.more-btn { + display: block; + width: 40px; + height: 37px; + border: none; + outline: none; + padding: 0; + background-color: transparent; + background-image: url(../images/icons/more-icon.svg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include pointer-cursor; + @include on-hover( + background-image, + url('../images/icons/more-icon-hover.svg') + ); +} diff --git a/src/styles/blocks/more-gaming.scss b/src/styles/blocks/more-gaming.scss new file mode 100644 index 00000000..adbaeb04 --- /dev/null +++ b/src/styles/blocks/more-gaming.scss @@ -0,0 +1,105 @@ +.more-gaming { + &__content { + @include grid-container; + + box-sizing: border-box; + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-laptop { + padding-block: 100px; + } + + @include on-desktop { + padding-block: 158px; + } + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 12px; + + @include on-tablet { + grid-column: 2 / -2; + grid-row: 1 / 2; + text-align: center; + } + + @include on-laptop { + margin-bottom: 16px; + } + } + + &__description { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 30px; + height: 30px; + font-size: 12px; + line-height: 14.52px; + color: $contrastColor; + + @include on-tablet { + grid-column: 2 / -2; + grid-row: 2 / 3; + text-align: center; + } + + @include on-laptop { + height: 17px; + margin-bottom: 83px; + font-size: 14px; + line-height: 16.94px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__article { + grid-column: 1 / -1; + margin-bottom: 20px; + + &--social-interactions { + margin-bottom: 0; + } + + @include on-tablet { + grid-column: span 3; + margin-bottom: 40px; + + &--education { + grid-row: 3 / 4; + } + + &--real-estate { + grid-row: 3 / 4; + } + + &--fitness { + grid-row: 4 / 5; + margin-bottom: 0; + } + + &--social-interactions { + grid-row: 4 / 5; + margin-bottom: 0; + } + } + + @include on-laptop { + grid-column: span 3; + grid-row: 3 / 4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..0d655b0c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,38 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + font-size: 13px; + line-height: 19.5px; + + @include on-tablet { + flex-direction: row; + align-items: center; + gap: 43px; + font-size: 14px; + line-height: 22px; + } + + &--top { + @include on-laptop { + gap: 36px; + font-weight: 500; + font-size: 16px; + line-height: 20.8px; + } + } + } + + &__link { + text-decoration: none; + color: $whiteColor; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + } +} diff --git a/src/styles/blocks/order-stage.scss b/src/styles/blocks/order-stage.scss new file mode 100644 index 00000000..d468c626 --- /dev/null +++ b/src/styles/blocks/order-stage.scss @@ -0,0 +1,28 @@ +.order-stage { + box-sizing: border-box; + width: 100%; + height: 33px; + display: flex; + flex-wrap: nowrap; + gap: 0; + + &__stage { + width: 33.33%; + border-bottom: 1px solid $darkGreyColor; + text-align: center; + font-weight: 500; + font-size: 12px; + line-height: 15.6px; + color: $lightGreyColor; + + @include on-tablet { + font-size: 14px; + line-height: 18.2px; + } + + &--active { + color: $contrastColor; + border-bottom: 1px solid $contrastColor; + } + } +} diff --git a/src/styles/blocks/order.scss b/src/styles/blocks/order.scss new file mode 100644 index 00000000..4cde14c6 --- /dev/null +++ b/src/styles/blocks/order.scss @@ -0,0 +1,247 @@ +.order { + &__content { + @include content-min-width; + + width: 100vw; + height: 100vh; + background: $gradient; + overflow: auto; + } + + &__top-mob-tablet { + @include on-laptop { + display: none; + } + } + + &__top-laptop-desktop { + display: none; + + @include on-laptop { + display: block; + } + } + + &__top-bar-wrapper { + @include grid-container; + } + + &__top-bar-mob { + grid-column: 1 / -1; + } + + &__top-bar-laptop { + grid-column: 1 / -1; + margin-bottom: 102px; + + &--pay { + margin-bottom: 131px; + } + + &--complete { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 229px; + + &--complete { + margin-bottom: 236px; + } + } + } + + &__order-stage { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + &--complete { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 180px; + } + } + } + + &__main-content { + @include grid-container; + + justify-items: center; + + @include on-laptop { + justify-items: start; + } + + &--complete { + justify-items: center; + } + } + + &__img { + display: none; + + @include on-tablet { + grid-column: 1 / -1; + display: block; + width: 100%; + height: 277px; + object-fit: contain; + object-position: center; + } + + @include on-laptop { + grid-column: 1 / 6; + grid-row: 1 / 2; + padding-top: 29px; + height: 279px; + margin-bottom: 32px; + + &--pay { + padding-top: 0; + } + } + + @include on-desktop { + grid-column: 1 / 8; + padding-top: 0; + height: 386px; + } + } + + &__qty-price { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include on-tablet { + justify-self: start; + margin-bottom: 48px; + } + + &--pay { + margin-bottom: 53px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 60px; + } + } + + @include on-laptop { + grid-column: 1 / 6; + grid-row: 2 / 3; + margin-bottom: 150px; + } + + @include on-desktop { + margin-bottom: 268px; + } + } + + &__inputs { + grid-column: 1 / -1; + margin-bottom: 37px; + width: 100%; + + @include on-tablet { + margin-bottom: 43px; + } + + @include on-laptop { + grid-column: 7 / -1; + grid-row: 1 / 3; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 9 / -1; + padding-top: 43px; + } + + &--pay { + margin-bottom: 37px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 43px; + } + + @include on-laptop { + grid-column: 7 / -2; + grid-row: 1 / 3; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 9 / -3; + padding-top: 35px; + } + } + } + + &__complete-title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 16px; + text-transform: uppercase; + text-align: center; + font-weight: 900; + font-size: 26px; + line-height: 33.8px; + color: $whiteColor; + + @include on-tablet { + margin-bottom: 20px; + font-size: 46px; + line-height: 60px; + } + + @include on-laptop { + margin-bottom: 36px; + } + + @include on-desktop { + margin-bottom: 56px; + } + + & > span { + font-weight: 400; + color: $contrastColor; + } + } + + &__complete-description { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 30px; + text-align: center; + line-height: 20.8px; + color: $whiteColor; + + @include on-tablet { + margin-bottom: 50px; + font-size: 18px; + line-height: 23.4px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__home-btn { + grid-column: 1 / -1; + margin-bottom: 50px; + + @include on-laptop { + margin-bottom: 233px; + } + + @include on-desktop { + margin-bottom: 323px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..eb34412a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,71 @@ +.page { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $textColor; + scroll-behavior: smooth; + + &:has(.page__aside:target) { + overflow: hidden; + } + + &__body { + margin: 0; + background-color: $backgroundBlackColor; + } + + &__aside { + position: fixed; + top: 0; + z-index: 3; + transition: all $transitionDuration; + transform: translateX(100%); + opacity: 0; + pointer-events: none; + + &:target { + transform: translateX(0); + opacity: 1; + pointer-events: all; + } + } + + &__nav { + position: fixed; + top: 0; + z-index: 2; + visibility: hidden; + pointer-events: none; + + @include on-laptop { + visibility: visible; + pointer-events: all; + } + } + + &__buy-now { + position: fixed; + z-index: 2; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + transition: all $transitionDuration; + opacity: 1; + pointer-events: all; + + @include on-tablet { + bottom: 31px; + } + + @include on-laptop { + visibility: hidden; + pointer-events: none; + } + + &--hidden { + opacity: 0; + pointer-events: none; + } + } +} diff --git a/src/styles/blocks/pay-order.scss b/src/styles/blocks/pay-order.scss new file mode 100644 index 00000000..7b5f745a --- /dev/null +++ b/src/styles/blocks/pay-order.scss @@ -0,0 +1,226 @@ +.pay-order { + @include grid-container; + + @include on-tablet { + grid-template-columns: repeat(4, 100px); + } + + @include on-laptop { + grid-template-columns: repeat(5, 70px); + } + + @include on-desktop { + grid-template-columns: repeat(6, 72px); + } + + &__card-num-wrapper { + grid-column: 1 / -1; + grid-row: 1 / 2; + height: 67px; + margin-bottom: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + height: 68px; + margin-bottom: 38px; + } + + @include on-laptop { + height: 67px; + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 68px; + } + } + + &__label { + display: block; + height: 18px; + align-self: flex-start; + font-size: 14px; + line-height: 18px; + + &--holder { + height: 14px; + line-height: 1em; + } + + &:has(+ .pay-order__input:focus), + &:has(+ .pay-order__card-num-inputs-wrapper > .pay-order__input:focus) { + color: $contrastColor; + } + } + + &__card-num-inputs-wrapper { + display: flex; + justify-content: space-between; + } + + &__visa-icon { + display: none; + + @include on-tablet { + display: block; + width: 54px; + height: 33.7px; + align-self: flex-end; + background-image: url('../images/icons/visa.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + } + + &__input { + display: block; + box-sizing: border-box; + padding: 0; + outline: none; + border: none; + width: 100%; + background-color: transparent; + border-bottom: 1px solid $darkGreyColor; + font: inherit; + font-size: 18px; + line-height: 23.4px; + color: $whiteColor; + + @include on-tablet { + font-size: 20px; + line-height: 26px; + } + + &::placeholder { + color: $darkGreyColor; + text-align: center; + } + + &:-webkit-autofill { + -webkit-text-fill-color: $whiteColor; + -webkit-box-shadow: 0 0 0 70px $backgroundBlackColor inset; + } + + &:focus { + border-color: $contrastColor; + } + + &--card-num { + width: 56px; + height: 32px; + padding-bottom: 9px; + letter-spacing: 0.1em; + + @include on-tablet { + width: 70px; + padding-bottom: 6px; + letter-spacing: 0.2em; + } + } + + &--holder-name { + font: inherit; + line-height: 22px; + } + + &--expiration-date { + width: 90px; + height: 31px; + padding-bottom: 7px; + letter-spacing: 0.1em; + } + + &--cvv { + width: 41px; + height: 31px; + padding-bottom: 8px; + letter-spacing: 0.1em; + + @include on-tablet { + width: 49px; + padding-bottom: 5px; + } + } + } + + &__holder-name-wrapper { + grid-column: 1 / -1; + grid-row: 2 / 3; + height: 37px; + margin-bottom: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + height: 44px; + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__expiration-date { + grid-column: 1 / 2; + grid-row: 3 / 4; + height: 66px; + margin-bottom: 40px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + @include on-tablet { + grid-column: 1 / 3; + margin-bottom: 104px; + } + + @include on-laptop { + margin-bottom: 90px; + } + + @include on-desktop { + margin-bottom: 125px; + } + } + + &__cvv { + grid-column: 2 / 3; + grid-row: 3 / 4; + align-self: end; + height: 61px; + margin-bottom: 40px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + @include on-tablet { + grid-column: 3 / 5; + margin-bottom: 104px; + } + + @include on-laptop { + margin-bottom: 90px; + } + + @include on-desktop { + margin-bottom: 125px; + } + } + + &__purchase-btn-wrapper { + grid-column: 1 / -1; + grid-row: 4 / 5; + justify-self: center; + + @include on-laptop { + justify-self: start; + } + } +} diff --git a/src/styles/blocks/place-order.scss b/src/styles/blocks/place-order.scss new file mode 100644 index 00000000..0064e651 --- /dev/null +++ b/src/styles/blocks/place-order.scss @@ -0,0 +1,129 @@ +.place-order { + @include grid-container; + + @include on-laptop { + grid-template-columns: repeat(6, 70px); + } + + @include on-desktop { + grid-template-columns: repeat(8, 72px); + } + + &__input-wrapper { + grid-column: span 2; + margin-bottom: 30px; + width: 100%; + height: 37px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + &--adress-2 { + margin-bottom: 40px; + } + + @include on-tablet { + grid-column: span 3; + margin-bottom: 40px; + + &--adress { + margin-bottom: 58px; + } + + &--adress-2 { + margin-bottom: 58px; + } + } + + @include on-laptop { + &--adress { + margin-bottom: 68px; + } + + &--adress-2 { + margin-bottom: 68px; + } + } + + @include on-desktop { + grid-column: span 4; + + &--adress { + margin-bottom: 102px; + } + + &--adress-2 { + margin-bottom: 102px; + } + } + } + + &__label { + height: 14px; + font-size: 14px; + line-height: 1em; + + &:has(+ .place-order__input:focus) { + color: $contrastColor; + } + } + + &__input { + display: block; + box-sizing: border-box; + width: 100%; + height: 23px; + padding: 0; + outline: none; + border: none; + background-color: transparent; + border-bottom: 1px solid $darkGreyColor; + font: inherit; + line-height: 23px; + color: $whiteColor; + + &:-webkit-autofill { + -webkit-text-fill-color: $whiteColor; + -webkit-box-shadow: 0 0 0 50px $backgroundBlackColor inset; + } + + &:focus { + border-color: $contrastColor; + } + } + + &__select-field { + grid-column: span 2; + margin-bottom: 30px; + width: 100%; + height: 78px; + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__select-name { + font-size: 14px; + line-height: 18.2px; + } + + &__purchase-btn-wrapper { + grid-column: 1 / -1; + justify-self: center; + + @include on-laptop { + grid-column: span 3; + justify-self: start; + } + } +} diff --git a/src/styles/blocks/play-video-btn.scss b/src/styles/blocks/play-video-btn.scss new file mode 100644 index 00000000..08556804 --- /dev/null +++ b/src/styles/blocks/play-video-btn.scss @@ -0,0 +1,19 @@ +.play-video-btn { + display: block; + width: 100%; + height: 66px; + background-image: url('../images/video-button/video.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: left center; + + @include on-tablet { + width: 247px; + } + + @include pointer-cursor; + @include on-hover( + background-image, + url('../images/video-button/video-hover.svg') + ); +} diff --git a/src/styles/blocks/prev-next.scss b/src/styles/blocks/prev-next.scss new file mode 100644 index 00000000..c2674293 --- /dev/null +++ b/src/styles/blocks/prev-next.scss @@ -0,0 +1,52 @@ +.prev-next { + width: 207px; + height: 34px; + display: flex; + flex-direction: column; + justify-content: space-between; + + &__buttons { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__btn { + display: block; + border: none; + outline: none; + padding: 0; + background-color: transparent; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: $whiteColor; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &:disabled { + color: $textColor; + } + } + + &__underlines { + width: 100%; + height: 1px; + display: flex; + flex-wrap: nowrap; + } + + &__underline { + flex-shrink: 0; + width: 20%; + height: 1px; + background-color: $extraGreyColor; + transition: background-color $transitionDuration; + + &--active { + background-color: $contrastColor; + } + } +} diff --git a/src/styles/blocks/qty-price.scss b/src/styles/blocks/qty-price.scss new file mode 100644 index 00000000..b07e8c57 --- /dev/null +++ b/src/styles/blocks/qty-price.scss @@ -0,0 +1,63 @@ +.qty-price { + width: 244px; + height: 72px; + + display: flex; + justify-content: space-between; + + @include on-tablet { + width: 347px; + height: 88px; + } + + @include on-laptop { + width: 285px; + } + + @include on-desktop { + width: 293px; + } + + &__label { + line-height: 20.8px; + } + + &__quantity-wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + + @include on-tablet { + align-items: flex-start; + } + } + + &__price-wrapper { + width: 85px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + + @include on-tablet { + width: 109px; + align-items: flex-start; + } + } + + &__price-value { + margin-bottom: 10px; + font-weight: 500; + font-size: 26px; + line-height: 31.47px; + color: $contrastColor; + + @include on-tablet { + margin-bottom: 3px; + font-size: 36px; + line-height: 43.57px; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 00000000..55f45ff4 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,70 @@ +.section-title { + font-weight: 900; + font-size: 21px; + line-height: 25.41px; + color: $whiteColor; + text-transform: uppercase; + + @include on-laptop { + font-size: 36px; + line-height: 43.57px; + } + + & > span { + font-weight: 400; + color: $contrastColor; + } + + &--aside { + line-height: 27.3px; + + @include on-laptop { + line-height: 46.8px; + } + } + + &--more-gaming { + @include on-laptop { + background-image: url('../images/titles/more-than-gaming.svg'); + background-position: center; + } + } + + &--nice-to-meet { + @include on-laptop { + background-image: url('../images/titles/nice-to-meet-you.svg'); + background-position: left center; + } + } + + &--why-kat { + @include on-laptop { + background-image: url('../images/titles/why-kat.svg'); + background-position: center; + letter-spacing: 0.1em; + } + } + + &--get-in-touch { + @include on-laptop { + background-image: url('../images/titles/get-in-touch-title.svg'); + background-position: left center; + } + } + + &--more-gaming, + &--nice-to-meet, + &--why-kat, + &--get-in-touch { + @include on-laptop { + width: 100%; + color: transparent; + + & > span { + color: transparent; + } + + background-repeat: no-repeat; + } + } +} diff --git a/src/styles/blocks/select-lang.scss b/src/styles/blocks/select-lang.scss new file mode 100644 index 00000000..adcb258b --- /dev/null +++ b/src/styles/blocks/select-lang.scss @@ -0,0 +1,88 @@ +.select-lang { + &__content { + position: relative; + width: 33px; + height: 21px; + font-weight: 500; + font-size: 16px; + line-height: 20.8px; + color: $contrastColor; + } + + &__current-value { + width: 100%; + height: 100%; + background-image: url('../images/icons/select-icon.svg'); + background-repeat: no-repeat; + background-position: right 80%; + + @include pointer-cursor; + @include on-hover(color, $whiteColor); + @include on-hover( + background-image, + url('../images/icons/select-icon-hover.svg') + ); + } + + &__list-wrapper { + position: absolute; + top: 100%; + margin-top: 14px; + left: -25%; + width: 45px; + border-radius: 4px; + background-color: $darkColor; + transition: opacity $transitionDuration; + opacity: 0; + pointer-events: none; + + &--visible { + opacity: 1; + pointer-events: all; + } + + &::before { + content: ''; + position: absolute; + top: 4px; + bottom: 4px; + right: 0; + display: block; + width: 1px; + background-color: $lightBlueColor; + } + + &::after { + content: ''; + position: absolute; + top: 4px; + right: 0; + display: block; + width: 1px; + height: 22px; + background-color: $contrastColor; + } + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + padding-block: 12px; + display: flex; + flex-direction: column; + gap: 12px; + } + + &__item { + text-align: center; + + @include pointer-cursor; + @include on-hover(color, $whiteColor); + + &--selected { + display: none; + } + } +} diff --git a/src/styles/blocks/select-qty.scss b/src/styles/blocks/select-qty.scss new file mode 100644 index 00000000..ee737b0f --- /dev/null +++ b/src/styles/blocks/select-qty.scss @@ -0,0 +1,114 @@ +.select-qty { + &__content { + position: relative; + width: 90px; + height: 41px; + border-radius: 4px; + background-color: $darkColor; + text-align: center; + font-size: 20px; + line-height: 26px; + color: $whiteColor; + + @include on-tablet { + height: 47px; + } + } + + &__current-value { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &::before { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 11px; + display: block; + width: 9px; + height: 6px; + background-image: url('../images/icons/select-icon.svg'); + background-repeat: no-repeat; + background-position: center; + } + + &--changed { + &::after { + content: ''; + position: absolute; + right: 35px; + display: block; + width: 1px; + height: 16px; + background-color: $contrastColor; + } + } + } + + &__list-wrapper { + position: absolute; + z-index: 1; + top: 100%; + margin-top: 3px; + width: 100%; + border-radius: 4px; + background-color: $darkColor; + transition: opacity $transitionDuration; + opacity: 0; + pointer-events: none; + + &--visible { + opacity: 1; + pointer-events: all; + } + + &::before { + content: ''; + position: absolute; + top: 4px; + bottom: 4px; + right: 0; + display: block; + width: 1px; + background-color: $lightBlueColor; + } + + &::after { + content: ''; + position: absolute; + top: 4px; + right: 0; + display: block; + width: 1px; + height: 22px; + background-color: $contrastColor; + } + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + padding-block: 8px; + display: flex; + flex-direction: column; + gap: 8px; + } + + &__item { + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &--selected { + display: none; + } + } +} diff --git a/src/styles/blocks/select.scss b/src/styles/blocks/select.scss new file mode 100644 index 00000000..af7cdf14 --- /dev/null +++ b/src/styles/blocks/select.scss @@ -0,0 +1,101 @@ +.select { + &__content { + position: relative; + width: 100%; + height: 47px; + border-radius: 4px; + background-color: $darkColor; + line-height: 20.8px; + color: $whiteColor; + } + + &__current-value { + box-sizing: border-box; + width: 100%; + height: 100%; + padding-left: 24px; + display: flex; + align-items: center; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &::after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + display: block; + width: 9px; + height: 6px; + background-image: url('../images/icons/select-icon.svg'); + background-repeat: no-repeat; + background-position: center; + } + } + + &__list-wrapper { + position: absolute; + z-index: 1; + top: 100%; + margin-top: 3px; + width: 100%; + border-radius: 4px; + background-color: $darkColor; + transition: opacity $transitionDuration; + opacity: 0; + pointer-events: none; + + &--visible { + opacity: 1; + pointer-events: all; + } + + &::before { + content: ''; + position: absolute; + top: 4px; + bottom: 4px; + right: 0; + display: block; + width: 1px; + background-color: $lightBlueColor; + } + + &::after { + content: ''; + position: absolute; + top: 4px; + right: 0; + display: block; + width: 1px; + height: 22px; + background-color: $contrastColor; + } + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + padding-top: 13px; + padding-bottom: 15px; + display: flex; + flex-direction: column; + gap: 10px; + } + + &__item { + box-sizing: border-box; + padding-left: 24px; + + @include pointer-cursor; + @include on-hover(color, $contrastColor); + + &--selected { + display: none; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 00000000..10caf683 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,124 @@ +.slider { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 100%; + height: 207px; + + @include on-tablet { + height: 289px; + } + + @include on-laptop { + height: 341px; + } + + @include on-desktop { + height: 353px; + } + + &--header { + height: 100%; + } + + &__slides { + width: 100%; + height: 189px; + display: flex; + flex-wrap: nowrap; + gap: 0; + overflow-x: auto; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-color: transparent transparent; + scrollbar-width: none; + + @include on-tablet { + height: 270px; + } + + @include on-laptop { + overflow: hidden; + height: 290px; + } + + @include on-desktop { + height: 307px; + } + + &--header { + height: 100%; + } + } + + &__slide { + flex-shrink: 0; + box-sizing: border-box; + width: 100%; + height: 100%; + scroll-snap-align: start; + background-image: url('../images/slider/slider-1.png'); + background-color: $backgroundBlackColor; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + &--2 { + background-image: url('../images/slider/slider-2.png'); + } + + &--3 { + background-image: url('../images/slider/slider-3.png'); + background-size: contain; + } + + &--4 { + background-image: url('../images/slider/slider-4.png'); + background-size: contain; + } + + &--5 { + background-image: url('../images/slider/slider-5.png'); + background-size: contain; + } + + &--header-bg { + background-color: transparent; + background-image: url('../images/main/header-image.svg'); + background-size: contain; + } + } + + &__points { + display: flex; + gap: 6px; + + @include on-laptop { + display: none; + } + } + + &__point { + width: 4px; + height: 4px; + + background-image: url('../images/slider/slider-dot.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + &--active { + background-image: url('../images/slider/slider-dot-active.svg'); + } + } + + &__prev-next { + display: none; + + @include on-laptop { + display: block; + align-self: flex-start; + } + } +} diff --git a/src/styles/blocks/tech-specs.scss b/src/styles/blocks/tech-specs.scss new file mode 100644 index 00000000..9b1d1c46 --- /dev/null +++ b/src/styles/blocks/tech-specs.scss @@ -0,0 +1,323 @@ +.tech-specs { + &__content { + @include grid-container; + + box-sizing: border-box; + padding-block: 50px; + + @include on-tablet { + padding-block: 80px; + } + + @include on-laptop { + padding: 100px 0 101px; + } + + @include on-desktop { + padding-block: 160px; + } + } + + &__title { + grid-column: 1 / -1; + height: 29px; + margin: 0; + margin-bottom: 41px; + + @include on-tablet { + grid-column: span 3; + grid-row: 1 / 2; + margin-bottom: 57px; + } + + @include on-laptop { + grid-column: -5 / -1; + height: 45px; + margin-bottom: 141px; + } + + @include on-desktop { + grid-column: -6 / -1; + } + } + + &__img-wrapper { + grid-column: 1 / -1; + justify-self: center; + position: relative; + width: 197px; + height: 194.7px; + display: flex; + justify-content: center; + align-items: center; + + @include on-tablet { + grid-column: 2 / -2; + grid-row: 2 / 3; + width: 358px; + height: 354px; + } + + @include on-laptop { + width: 297px; + height: 294px; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; + } + + &__details { + display: none; + + @include on-laptop { + display: block; + position: absolute; + + &--sensor { + top: -61px; + right: 100%; + width: 250px; + height: 143px; + margin-right: 107px; + } + + &--batteries { + top: -61px; + left: 100%; + width: 338px; + height: 207px; + margin-left: 63px; + } + + &--connection { + top: 156px; + right: 100%; + width: 241px; + height: 124px; + margin-right: 30px; + } + } + + @include on-desktop { + &--sensor { + top: -58px; + margin-right: 125px; + } + + &--batteries { + top: -60px; + width: 344px; + height: 207px; + margin-left: 158px; + } + + &--connection { + margin-right: 134px; + } + } + } + + &__details-name { + margin: 0; + margin-bottom: 21px; + text-transform: uppercase; + font-weight: 900; + font-size: 18px; + line-height: 22px; + color: $whiteColor; + } + + &__laptop-description { + margin: 0; + } + + &__sensor-line { + position: absolute; + top: 11px; + left: 101px; + width: 403px; + height: 72px; + background-image: url('../images/tech-specs/sensor-line.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include on-desktop { + top: 8px; + left: 91px; + width: 431px; + background-image: url('../images/tech-specs/sensor-line-desktop.svg'); + } + } + + &__batteries-line { + position: absolute; + top: 0; + right: 100%; + width: 192px; + height: 245px; + margin-right: 21px; + background-image: url('../images/tech-specs/battery-line.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include on-desktop { + top: 7px; + width: 283px; + background-image: url('../images/tech-specs/battery-line-desktop.svg'); + } + } + + &__connection-line { + position: absolute; + bottom: 109px; + left: 140px; + width: 134px; + height: 113px; + background-image: url('../images/tech-specs/connection-line.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include on-desktop { + left: 137px; + width: 241px; + height: 113px; + background-image: url('../images/tech-specs/connection-line-desktop.svg'); + } + } + + &__connection-arc { + position: absolute; + bottom: 39px; + left: 100%; + margin-left: 15px; + width: 45px; + height: 201px; + background-image: url('../images/tech-specs/semi-round.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include on-desktop { + margin-left: 118px; + } + } + + &__btn-wrapper { + position: absolute; + width: 34px; + height: 34px; + + @include on-tablet { + width: 62px; + height: 62px; + } + + @include on-laptop { + display: none; + } + + &--sensor { + top: -11px; + left: 60px; + + @include on-tablet { + top: -27px; + left: 65px; + } + } + + &--batteries { + right: 29px; + + @include on-tablet { + right: 49px; + } + } + + &--connection { + left: -17px; + bottom: 7.7px; + + @include on-tablet { + left: -62px; + bottom: 19px; + } + } + } + + &__description { + display: none; + position: absolute; + top: 100%; + right: -12px; + z-index: 1; + margin: 0; + box-sizing: border-box; + padding: 17px 11px 22px; + width: 168px; + height: 112px; + background-color: $darkColor; + border-radius: 4px; + font-size: 12px; + line-height: 18px; + + @include on-tablet { + right: -100%; + width: 220px; + height: fit-content; + font-size: 16px; + line-height: 24px; + } + + &--batteries { + top: -100px; + right: 100%; + width: 200px; + height: 210px; + + @include on-tablet { + width: 300px; + height: fit-content; + } + } + + &--connection { + inset: auto auto 100% -100%; + + @include on-tablet { + left: -50%; + } + } + } + + &__btn { + width: 100%; + height: 100%; + border: none; + outline: none; + padding: 0; + border-radius: 50%; + background-image: url('../images/icons/plus.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include pointer-cursor; + + &--active { + background-image: url('../images/icons/minus.svg'); + + & + .tech-specs__description { + display: block; + } + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 00000000..f9caaa5c --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,115 @@ +.top-bar { + box-sizing: border-box; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + padding: 18px 0 14px; + + @include on-tablet { + padding: 30px 0 55px; + } + + &--close-only { + justify-content: flex-end; + padding: 20px 0 38px; + + @include on-tablet { + padding: 34px 0 50px; + } + + @include on-laptop { + padding: 18px 18px 25px; + } + + @include on-desktop { + padding: 28px 28px 25px; + } + } + + &--back-only { + justify-content: flex-start; + padding: 20px 0 38px; + + @include on-tablet { + padding: 33px 0 47px; + } + } + + &--order { + padding: 19px 0 31px; + + @include on-tablet { + padding: 30px 0 27px; + } + } + + &--youtube-close { + justify-content: flex-end; + padding: 150px 0 23px; + + @include on-tablet { + padding: 90px 0 23px; + } + } + + &__icon { + display: block; + width: 20px; + height: 10px; + background-image: url('../images/icons/menu.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include pointer-cursor; + @include on-hover(transform, scale(1.25)); + @include on-hover(background-image, url('../images/icons/menu-hover.svg')); + + @include on-tablet { + width: 29.25px; + height: 14px; + } + + &--close { + width: 17px; + height: 17.22px; + background-image: url('../images/icons/close-icon.svg'); + + @include on-hover( + background-image, + url('../images/icons/close-icon-hover.svg') + ); + } + + &--order-close { + width: 14.61px; + height: 14.8px; + background-image: url('../images/icons/close-icon.svg'); + + @include on-hover(transform, scale(1.35)); + @include on-hover( + background-image, + url('../images/icons/close-icon-hover.svg') + ); + + @include on-tablet { + width: 17px; + height: 17.22px; + } + } + + &--back { + width: 8.5px; + height: 17px; + background-image: url('../images/icons/arrrow-back.svg'); + + @include on-hover(transform, scale(1.35)); + @include on-hover( + background-image, + url('../images/icons/arrow-back-hover.svg') + ); + } + } +} diff --git a/src/styles/blocks/top-order-laptop.scss b/src/styles/blocks/top-order-laptop.scss new file mode 100644 index 00000000..dc28f829 --- /dev/null +++ b/src/styles/blocks/top-order-laptop.scss @@ -0,0 +1,64 @@ +.top-order-laptop { + box-sizing: border-box; + padding-top: 64px; + display: flex; + justify-content: space-between; + + @include on-desktop { + padding-top: 58px; + } + + &__stages { + width: 647px; + height: 29px; + display: flex; + justify-content: space-between; + + @include on-desktop { + width: 842px; + } + } + + &__stage { + font-weight: 500; + line-height: 18.2px; + color: $lightGreyColor; + + &--active { + position: relative; + color: $contrastColor; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + display: block; + width: 4px; + height: 4px; + background-image: url('../images/icons/dot-small.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + } + } + + &__close { + display: block; + width: 17px; + height: 17.22px; + background-image: url('../images/icons/close-icon.svg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include pointer-cursor; + @include on-hover(transform, scale(1.25)); + @include on-hover( + background-image, + url('../images/icons/close-icon-hover.svg') + ); + } +} diff --git a/src/styles/blocks/video.scss b/src/styles/blocks/video.scss new file mode 100644 index 00000000..c167c910 --- /dev/null +++ b/src/styles/blocks/video.scss @@ -0,0 +1,43 @@ +.video { + &__content { + @include content-min-width; + @include grid-container; + + width: 100vw; + height: 100vh; + background-color: #191536e6; + overflow: auto; + } + + &__top-bar { + grid-column: 1 / -1; + + @include on-laptop { + grid-column: 2 / -2; + } + } + + &__youtube-wrapper { + grid-column: 1 / -1; + margin-bottom: 50px; + position: relative; + width: 100%; + padding-bottom: 56%; + + @include on-laptop { + grid-column: 2 / -2; + margin-bottom: 70px; + } + + @include on-desktop { + margin-bottom: 124px; + } + } + + &__youtube { + position: absolute; + width: 100%; + height: 100%; + border: none; + } +} diff --git a/src/styles/blocks/why-kat.scss b/src/styles/blocks/why-kat.scss new file mode 100644 index 00000000..50324776 --- /dev/null +++ b/src/styles/blocks/why-kat.scss @@ -0,0 +1,91 @@ +.why-kat { + &__content { + @include grid-container; + + box-sizing: border-box; + padding-block: 50px; + background: $gradient; + + @include on-tablet { + padding-block: 70px; + } + + @include on-laptop { + justify-items: center; + padding: 100px 0 102px; + } + + @include on-desktop { + padding-block: 160px; + } + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-bottom: 32px; + + @include on-tablet { + grid-column: span 2; + grid-row: 1 / 2; + margin-bottom: 30px; + } + + @include on-laptop { + grid-column: 4 / -4; + grid-row: 1 / 2; + margin-bottom: 82px; + text-align: center; + } + } + + &__article { + grid-column: 1 / -1; + margin-bottom: 20px; + + &--sensors { + margin-bottom: 0; + } + + @include on-tablet { + grid-column: span 2; + grid-row: 2 / 3; + margin-bottom: 0; + } + + @include on-laptop { + grid-column: span 4; + margin-bottom: 79px; + } + + @include on-desktop { + margin-bottom: 0; + + &--compatible { + grid-column: 1 / 5; + } + + &--panel { + grid-column: 7 / 11; + } + + &--sensors { + grid-column: -5 / -1; + } + } + } + + &__buy-now { + display: none; + + @include on-laptop { + display: block; + grid-column: 5 / -5; + grid-row: 3 / 4; + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..b69f8ea2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,39 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/vars'; +@import './utils/mixins'; +@import './blocks/logo'; +@import './blocks/button'; +@import './blocks/play-video-btn'; +@import './blocks/more-btn'; +@import './blocks/nav'; +@import './blocks/menu-nav'; +@import './blocks/top-bar'; +@import './blocks/top-order-laptop'; +@import './blocks/fixed-top'; +@import './blocks/section-title'; +@import './blocks/slider'; +@import './blocks/prev-next'; +@import './blocks/card-benefits'; +@import './blocks/card-more'; +@import './blocks/contact-info'; +@import './blocks/order-stage'; +@import './blocks/qty-price'; +@import './blocks/select'; +@import './blocks/select-qty'; +@import './blocks/select-lang'; +@import './blocks/form'; +@import './blocks/place-order'; +@import './blocks/pay-order'; +@import './blocks/menu'; +@import './blocks/faq'; +@import './blocks/help'; +@import './blocks/video'; +@import './blocks/order'; +@import './blocks/header'; +@import './blocks/more-gaming'; +@import './blocks/about'; +@import './blocks/tech-specs'; +@import './blocks/why-kat'; +@import './blocks/get-in-touch'; +@import './blocks/main-block'; +@import './blocks/footer'; +@import './blocks/page'; 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..c2059b2b --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,52 @@ +@mixin on-tablet { + @media (min-width: 768px) { + @content; + } +} + +@mixin on-laptop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1920px) { + @content; + } +} + +@mixin content-min-width { + min-width: 320px; +} + +@mixin grid-container { + display: grid; + grid-template-columns: repeat(2, 130px); + column-gap: 20px; + place-content: start center; + + @include on-tablet { + grid-template-columns: repeat(6, 100px); + } + + @include on-laptop { + grid-template-columns: repeat(12, 70px); + } + + @include on-desktop { + grid-template-columns: repeat(16, 72px); + } +} + +@mixin on-hover($_property, $_toValue) { + transition: all $transitionDuration; + + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin pointer-cursor { + cursor: url('../images/icons/cursos-icon.svg'), pointer; +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 00000000..a79dc6f9 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,14 @@ +$contentMinWidth: 320px; +$transitionDuration: 0.3s; +$whiteColor: #fff; +$blackColor: #000; +$darkColor: #191536; +$extraDarkColor: #110e25; +$textColor: #929292; +$darkGreyColor: #2f2f2f; +$lightGreyColor: #545454; +$extraGreyColor: #212121; +$lightBlueColor: #014954; +$backgroundBlackColor: #05040b; +$contrastColor: #05c2df; +$gradient: linear-gradient(107.56deg, $darkColor 0%, $blackColor 100%);