diff --git a/src/images/about/about-us-text-big-desktop.png b/src/images/about/about-us-text-big-desktop.png new file mode 100644 index 00000000..f9844ce6 Binary files /dev/null and b/src/images/about/about-us-text-big-desktop.png differ diff --git a/src/images/about/about-us-text-big-desktop.svg b/src/images/about/about-us-text-big-desktop.svg new file mode 100644 index 00000000..e8351e0b --- /dev/null +++ b/src/images/about/about-us-text-big-desktop.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/about/about-us-text-desktop.png b/src/images/about/about-us-text-desktop.png new file mode 100644 index 00000000..25e55889 Binary files /dev/null and b/src/images/about/about-us-text-desktop.png differ diff --git a/src/images/about/about-us-text-desktop.svg b/src/images/about/about-us-text-desktop.svg new file mode 100644 index 00000000..25145dc3 --- /dev/null +++ b/src/images/about/about-us-text-desktop.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/about/about-us-text-tablet.svg b/src/images/about/about-us-text-tablet.svg new file mode 100644 index 00000000..c3273765 --- /dev/null +++ b/src/images/about/about-us-text-tablet.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/about/about-us-text.png b/src/images/about/about-us-text.png new file mode 100644 index 00000000..896259f0 Binary files /dev/null and b/src/images/about/about-us-text.png differ diff --git a/src/images/about/slider/slide1.png b/src/images/about/slider/slide1.png new file mode 100644 index 00000000..98ca21ea Binary files /dev/null and b/src/images/about/slider/slide1.png differ diff --git a/src/images/about/slider/slide2.jpg b/src/images/about/slider/slide2.jpg new file mode 100644 index 00000000..e3e0cc5a Binary files /dev/null and b/src/images/about/slider/slide2.jpg differ diff --git a/src/images/about/slider/slide3.jpg b/src/images/about/slider/slide3.jpg new file mode 100644 index 00000000..46d3c2c9 Binary files /dev/null and b/src/images/about/slider/slide3.jpg differ diff --git a/src/images/about/slider/slide4.jpg b/src/images/about/slider/slide4.jpg new file mode 100644 index 00000000..7acbcb8f Binary files /dev/null and b/src/images/about/slider/slide4.jpg differ diff --git a/src/images/about/slider/slide5.jpg b/src/images/about/slider/slide5.jpg new file mode 100644 index 00000000..3eaabf98 Binary files /dev/null and b/src/images/about/slider/slide5.jpg differ diff --git a/src/images/common-images/arrow-down-icon.svg b/src/images/common-images/arrow-down-icon.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/common-images/arrow-down-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/common-images/arrow-left-icon.svg b/src/images/common-images/arrow-left-icon.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/common-images/arrow-left-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/common-images/detail-minus-icon.svg b/src/images/common-images/detail-minus-icon.svg new file mode 100644 index 00000000..37a7c4f5 --- /dev/null +++ b/src/images/common-images/detail-minus-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/common-images/detail-plus-icon.svg b/src/images/common-images/detail-plus-icon.svg new file mode 100644 index 00000000..4a37bb8e --- /dev/null +++ b/src/images/common-images/detail-plus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/common-images/katvr-favicon.svg b/src/images/common-images/katvr-favicon.svg new file mode 100644 index 00000000..01a2193e --- /dev/null +++ b/src/images/common-images/katvr-favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/common-images/katvr-logo.svg b/src/images/common-images/katvr-logo.svg new file mode 100644 index 00000000..0dc340bd --- /dev/null +++ b/src/images/common-images/katvr-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/common-images/menu-close-icon.svg b/src/images/common-images/menu-close-icon.svg new file mode 100644 index 00000000..9ebfb1b9 --- /dev/null +++ b/src/images/common-images/menu-close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/common-images/menu-icon.svg b/src/images/common-images/menu-icon.svg new file mode 100644 index 00000000..1cc5401c --- /dev/null +++ b/src/images/common-images/menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/common-images/scroll-up-button.svg b/src/images/common-images/scroll-up-button.svg new file mode 100644 index 00000000..89b022d2 --- /dev/null +++ b/src/images/common-images/scroll-up-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/common-images/video-player-button-white.svg b/src/images/common-images/video-player-button-white.svg new file mode 100644 index 00000000..9b21cdf6 --- /dev/null +++ b/src/images/common-images/video-player-button-white.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/common-images/video-player-button.svg b/src/images/common-images/video-player-button.svg new file mode 100644 index 00000000..3220562e --- /dev/null +++ b/src/images/common-images/video-player-button.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/favicon/faviconKateVR.png b/src/images/favicon/faviconKateVR.png new file mode 100644 index 00000000..3111568e Binary files /dev/null and b/src/images/favicon/faviconKateVR.png differ diff --git a/src/images/header/headerBGImg.png b/src/images/header/headerBGImg.png new file mode 100644 index 00000000..aadbc804 Binary files /dev/null and b/src/images/header/headerBGImg.png differ diff --git a/src/images/header/headerBg-fifth.png b/src/images/header/headerBg-fifth.png new file mode 100644 index 00000000..fc962d7e Binary files /dev/null and b/src/images/header/headerBg-fifth.png differ diff --git a/src/images/header/headerBg-fourth.png b/src/images/header/headerBg-fourth.png new file mode 100644 index 00000000..516e821a Binary files /dev/null and b/src/images/header/headerBg-fourth.png differ diff --git a/src/images/header/headerBg-phone.png b/src/images/header/headerBg-phone.png new file mode 100644 index 00000000..0e5a7504 Binary files /dev/null and b/src/images/header/headerBg-phone.png differ diff --git a/src/images/header/headerBg-second.png b/src/images/header/headerBg-second.png new file mode 100644 index 00000000..74b70aa3 Binary files /dev/null and b/src/images/header/headerBg-second.png differ diff --git a/src/images/header/headerBg-third.png b/src/images/header/headerBg-third.png new file mode 100644 index 00000000..71fc866c Binary files /dev/null and b/src/images/header/headerBg-third.png differ diff --git a/src/images/social-icons/fb-icon.svg b/src/images/social-icons/fb-icon.svg new file mode 100644 index 00000000..e4de883e --- /dev/null +++ b/src/images/social-icons/fb-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/reddit-icon.svg b/src/images/social-icons/reddit-icon.svg new file mode 100644 index 00000000..53bade5b --- /dev/null +++ b/src/images/social-icons/reddit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/twitter-icon.svg b/src/images/social-icons/twitter-icon.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/src/images/social-icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/youtube-icon.svg b/src/images/social-icons/youtube-icon.svg new file mode 100644 index 00000000..59b97532 --- /dev/null +++ b/src/images/social-icons/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/tech-specs/bottom-line-mask.svg b/src/images/tech-specs/bottom-line-mask.svg new file mode 100644 index 00000000..3caea26c --- /dev/null +++ b/src/images/tech-specs/bottom-line-mask.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/bottom-line.svg b/src/images/tech-specs/bottom-line.svg new file mode 100644 index 00000000..a1f02465 --- /dev/null +++ b/src/images/tech-specs/bottom-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/circle-line.svg b/src/images/tech-specs/circle-line.svg new file mode 100644 index 00000000..b90496be --- /dev/null +++ b/src/images/tech-specs/circle-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech-specs/detail-plus.svg b/src/images/tech-specs/detail-plus.svg new file mode 100644 index 00000000..9c4a3f56 --- /dev/null +++ b/src/images/tech-specs/detail-plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech-specs/device-bg.png b/src/images/tech-specs/device-bg.png new file mode 100644 index 00000000..6da536db Binary files /dev/null and b/src/images/tech-specs/device-bg.png differ diff --git a/src/images/tech-specs/right-line-mask.svg b/src/images/tech-specs/right-line-mask.svg new file mode 100644 index 00000000..ab6f647e --- /dev/null +++ b/src/images/tech-specs/right-line-mask.svg @@ -0,0 +1,8 @@ + + + Source: openclipart.org/detail/209545 + + + + + \ No newline at end of file diff --git a/src/images/tech-specs/right-line.svg b/src/images/tech-specs/right-line.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/src/images/tech-specs/right-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech-specs/up-line.svg b/src/images/tech-specs/up-line.svg new file mode 100644 index 00000000..ef522dfa --- /dev/null +++ b/src/images/tech-specs/up-line.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/using-areas/buildings.svg b/src/images/using-areas/buildings.svg new file mode 100644 index 00000000..f375f9c9 --- /dev/null +++ b/src/images/using-areas/buildings.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/using-areas/network.svg b/src/images/using-areas/network.svg new file mode 100644 index 00000000..eaf7896e --- /dev/null +++ b/src/images/using-areas/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/using-areas/power-hand.svg b/src/images/using-areas/power-hand.svg new file mode 100644 index 00000000..f7ec9950 --- /dev/null +++ b/src/images/using-areas/power-hand.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/using-areas/study-hat.svg b/src/images/using-areas/study-hat.svg new file mode 100644 index 00000000..62adf3e2 --- /dev/null +++ b/src/images/using-areas/study-hat.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/why-cat-loco/modern.svg b/src/images/why-cat-loco/modern.svg new file mode 100644 index 00000000..30b6079b --- /dev/null +++ b/src/images/why-cat-loco/modern.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/why-cat-loco/signal.svg b/src/images/why-cat-loco/signal.svg new file mode 100644 index 00000000..60de1b3e --- /dev/null +++ b/src/images/why-cat-loco/signal.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/why-cat-loco/vr-screen.svg b/src/images/why-cat-loco/vr-screen.svg new file mode 100644 index 00000000..912319b6 --- /dev/null +++ b/src/images/why-cat-loco/vr-screen.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..d9765354 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,1342 @@ - + - Title + KatVR + + + + + - -

Hello Mate Academy

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

+ MORE THAN + GAMING! +

+

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

+
+
+ study hat icon +

Education

+

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

+
+
+ building icon +

Real Estate

+

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

+
+
+ training hand icon +

Fitness

+

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

+
+
+ network icon +

Social interactions

+

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

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

+ About + Product +

+
+
+
+ 1/5 +
+ Slide 1 + Slide 2 + Slide 3 + Slide 4 + Slide 5 +
+
+ + + + + +
+ +
+
+ + +
+
+
+
+
+
+ +
+

+ About + Product +

+ +

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

+ +
+
+ +

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

+
+
+ +

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

+
+
+ +

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

+
+
+ +
+
+
+

Sensor

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

Batterries

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

Connection

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

+ Why + Kat loco? +

+
+
+ universal svg image +

Universally Compatible

+

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

+
+
+ screen svg image +

VR/PC Control panel

+

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

+
+
+ signal svg image +

Wireless sensors

+

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

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

Have any questions

+

+ Get in + touch +

+
+ +
+
+

Have any questions

+

+ Get in + touch +

+
+

+ Our manager will reply you within 15 minutes +

+
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + scroll up + +

+ Our manager will reply you within 15 minutes +

+
+
+
+
+ +
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..df73a577 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,232 @@ 'use strict'; + +document.addEventListener("DOMContentLoaded", function () { + + // #region YouTube video + const hdrButton = document.getElementById("header__button"); + const hdrCloseButton = document.getElementById("header__close-button"); + const hdrContainer = document.getElementById("header__video-container"); + const hdrIframe = document.getElementById("header__video-frame"); + + const abtButton = document.getElementById("about__button"); + const abtCloseButton = document.getElementById("about__close-button"); + const abtContainer = document.getElementById("about__video-container"); + const abtIframe = document.getElementById("about__video-frame"); + + + hdrButton.addEventListener('click', function () { + hdrContainer.classList.remove('hidden'); + hdrIframe.setAttribute('src', hdrButton.dataset.video); + }); + + hdrCloseButton.addEventListener('click', function () { + hdrContainer.classList.add('hidden'); + hdrIframe.setAttribute('src', ""); + }); + + abtButton.addEventListener('click', function () { + abtContainer.classList.remove('hidden'); + abtIframe.setAttribute('src', abtButton.dataset.video); + }); + + abtCloseButton.addEventListener('click', function () { + abtContainer.classList.add('hidden'); + abtIframe.setAttribute('src', ""); + }); + + // #endregion + + // #region About slider +const aboutSlides = document.querySelectorAll(".about__slider .slider__slide"); +const aboutPrevBtn = document.getElementById("about-prev"); +const aboutNextBtn = document.getElementById("about-next"); +const aboutProgressBar = document.getElementById("about-progress-bar"); +const aboutProgressLine = document.getElementById("about-progress-line"); +const aboutPaginationCount = document.querySelector(".about__slider .slider__pagination-count"); +const aboutTotalSlides = aboutSlides.length; +const aboutPaginationDots = document.querySelectorAll(".about__slider .dot"); + +let aboutCurrent = 0; +let aboutInterval = null; + + function showAboutSlide(index) { + aboutSlides.forEach((slide, i) => { + slide.classList.toggle("active", i === index); + slide.style.opacity = i === index ? "1" : "0"; + slide.style.visibility = i === index ? "visible" : "hidden"; + }); + + if (aboutPaginationCount) { + aboutPaginationCount.textContent = `${index + 1}/${aboutTotalSlides}`; + } + + if (aboutPaginationDots.length) { + aboutPaginationDots.forEach((dot, i) => { + dot.classList.toggle("active", i === index); + }); + } + + if (aboutProgressBar && aboutProgressLine) { + const lineWidth = aboutProgressLine.offsetWidth; + const barWidth = aboutProgressBar.offsetWidth; + const maxTranslate = lineWidth - barWidth; + const step = aboutTotalSlides > 1 ? maxTranslate / (aboutTotalSlides - 1) : 0; + aboutProgressBar.style.transform = `translateX(${index * step}px)`; + } +} + +function nextAboutSlide() { + aboutCurrent = (aboutCurrent + 1) % aboutSlides.length; + showAboutSlide(aboutCurrent); +} + +function prevAboutSlide() { + aboutCurrent = (aboutCurrent - 1 + aboutSlides.length) % aboutSlides.length; + showAboutSlide(aboutCurrent); +} + +function startAboutAuto() { + if (aboutInterval) clearInterval(aboutInterval); + aboutInterval = setInterval(nextAboutSlide, 3000); +} + +if (aboutSlides.length > 0) { + showAboutSlide(aboutCurrent); + startAboutAuto(); + + if (aboutNextBtn) { + aboutNextBtn.addEventListener("click", () => { + nextAboutSlide(); + startAboutAuto(); + }); + } + if (aboutPrevBtn) { + aboutPrevBtn.addEventListener("click", () => { + prevAboutSlide(); + startAboutAuto(); + }); + } +} +// #endregion + + // #region tech-specs plusses + const plusFirst = document.getElementById("plus-detail-first"); + const plusSecond = document.getElementById("plus-detail-second"); + const plusThird = document.getElementById("plus-detail-third"); + + const infoFirst = document.querySelector(".tech-specs__info--first"); + const infoSecond = document.querySelector(".tech-specs__info--second"); + const infoThird = document.querySelector(".tech-specs__info--third"); + + if (plusFirst && infoFirst) { + plusFirst.addEventListener('click', function () { + plusFirst.classList.toggle('plus-active'); + infoFirst.classList.toggle('tech-specs__info-active'); + }); + } + if (plusSecond && infoSecond) { + plusSecond.addEventListener('click', function () { + plusSecond.classList.toggle('plus-active'); + infoSecond.classList.toggle('tech-specs__info-active'); + }); + } + if (plusThird && infoThird) { + plusThird.addEventListener('click', function () { + plusThird.classList.toggle('plus-active'); + infoThird.classList.toggle('tech-specs__info-active'); + }); + } +// #endregion + + // #region Header slider + const slides = document.querySelectorAll(".header__slider .slider__slide"); + const prevBtn = document.getElementById("button-prev"); + const nextBtn = document.getElementById("button-next"); + const headerProgressBar = document.getElementById("header-progress-bar"); + const headerProgressLine = document.getElementById("header-progress-line"); + + const headerTotalSlides = slides.length; + let current = 0; + let interval = null; + + function showSlide(index) { + slides.forEach((slide, i) => { + slide.classList.toggle("active", i === index); + slide.style.opacity = i === index ? "1" : "0"; + slide.style.visibility = i === index ? "visible" : "hidden"; + }); + aboutPaginationCount.textContent = `${index + 1}/${aboutTotalSlides}`; + + if (headerProgressBar && headerProgressLine) { + const lineWidth = headerProgressLine.offsetWidth; + const barWidth = headerProgressBar.offsetWidth; + const maxTranslate = lineWidth - barWidth; + const step = headerTotalSlides > 1 ? maxTranslate / (headerTotalSlides - 1) : 0; + headerProgressBar.style.transform = `translateX(${index * step}px)`; + } + } + + function nextSlide() { + current = (current + 1) % slides.length; + showSlide(current); + } + + function prevSlide() { + current = (current - 1 + slides.length) % slides.length; + showSlide(current); + } + + function startAuto() { + if (interval) clearInterval(interval); + interval = setInterval(nextSlide, 3000); + } + + if (slides.length > 0) { + showSlide(current); + startAuto(); + + if (nextBtn) { + nextBtn.addEventListener("click", () => { + nextSlide(); + startAuto(); + }); + } + if (prevBtn) { + prevBtn.addEventListener("click", () => { + prevSlide(); + startAuto(); + }); + } + } +// #endregion + + // #region error in the form input +const inputFields = document.querySelectorAll("input"); +const errorMessages = { + name: "Please, fill your name*", + phone: "Please, fill your phone*", + email: "Please, fill your email*" +}; + +inputFields.forEach((input) => { + const label = input.closest(".form__field").querySelector(".form__field-name"); + const formFieldPlace = input; + + input.addEventListener("input", () => { + if (!input.checkValidity()) { + label.textContent = errorMessages[input.name]; + label.classList.add("error"); + formFieldPlace.classList.add("error-field"); + } else { + label.textContent = label.getAttribute("data-default-text"); + label.classList.remove("error"); + formFieldPlace.classList.remove("error-field"); + } + }); +}); + +// #endregion + +}); + + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46..94fde18a 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,136 @@ -h1 { - @extend %h1; +.page { + font-family: $fontFamilyInter; + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $greyC; + letter-spacing: 0; +} + +.header-title { + font-size: 26px; + line-height: 130%; + letter-spacing: 0; + color: $whiteC; + + &--bold { + font-weight: 900; + } + + &-thin { + font-weight: 400; + color: $cyanC; + } + + @include on-desktop { + font-size: 46px; + } +} + +.section-title { + font-size: 21px; + line-height: 100%; + text-transform: uppercase; + color: $whiteC; + + &--bold { + font-weight: 900; + } + + &-thin { + font-weight: 400; + color: $cyanC; + } + + @include on-desktop { + font-size: 36px; + line-height: 100%; + } +} + +h3 { + font-weight: 900; + font-size: 18px; + line-height: 100%; + text-transform: uppercase; + color: $whiteC; +} + +.slider__pagination-count { + font-size: 14px; + line-height: 100%; + font-weight: 400; +} + +.form__field-name { + height: 21px; + font-size: 14px; +} + +.button { + font-weight: 500; + font-size: 16px; + line-height: 130%; + text-align: center; +} + +.top-bar__language-switcher { + font-weight: 500; + line-height: 130%; +} + +.header__text { + font-weight: 500; + + @include on-desktop { + font-size: 20px; + } +} + +.header__price { + font-weight: 500; + font-size: 18px; + line-height: 100%; + + @include on-desktop { + font-size: 20px; + } +} + +.bottom__link, +.bottom__button-more, +.bottom__button { + font-weight: 500; + line-height: 150%; +} + +.about__greeting { + font-size: 14px; + line-height: 100%; +} + +.using-areas__text { + font-size: 12px; + line-height: 100%; + + @include on-desktop { + font-size: 14px; + } +} + +.tech-specs__info { + font-size: 12px; +} + +.footer__link { + font-size: 13px; + + @include on-tablet { + font-size: 14px; + } +} + +.footer__contact { + font-size: 13px; + line-height: 100%; } diff --git a/src/styles/blocks/_buttons.scss b/src/styles/blocks/_buttons.scss new file mode 100644 index 00000000..c20ef65c --- /dev/null +++ b/src/styles/blocks/_buttons.scss @@ -0,0 +1,98 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + padding: 0; + border: none; + box-sizing: border-box; + color: $whiteC; + background-color: $cyanC; + border-radius: 4px; + transition-duration: $effectDuration; + width: 100%; + height: 40px; + + @include on-tablet { + width: 200px; + height: 48px; + } + + &:hover { + color: $cyanC; + background-color: $whiteC; + } + + &:active { + color: $cyanC; + background-color: $whiteC; + } + + &:disabled { + color: $ralphLaurenC; + background-color: $darkBlueMagentaC; + } +} + +.button-play { + cursor: pointer; + display: flex; + background-color: transparent; + border: none; + background-image: url(../images/common-images/video-player-button.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + box-sizing: border-box; + padding: 0; + height: 70px; + align-items: center; + transition-duration: $effectDuration; +} + +.button-play:hover { + background-image: url(../images/common-images/video-player-button-white.svg); +} + +.slider-control__button { + cursor: pointer; + display: flex; + align-items: center; + background-color: transparent; + color: $whiteC; + border: none; + transition-duration: $effectDuration; + padding: 0; + + @include hover(scale, 1.1); + + &:hover { + color: $cyanC; + } +} + +.scroll-up__link { + display: none; + + @include on-tablet { + display: flex; + position: absolute; + bottom: 0; + right: 0; + width: 48px; + height: 48px; + } +} + +.scroll-up__button { + display: none; + + @include on-tablet { + display: flex; + width: 100%; + height: 100%; + transition-duration: $effectDuration; + + @include hover(scale, 1.1); + } +} diff --git a/src/styles/blocks/_contacts.scss b/src/styles/blocks/_contacts.scss new file mode 100644 index 00000000..b62b0d5d --- /dev/null +++ b/src/styles/blocks/_contacts.scss @@ -0,0 +1,14 @@ +.contacts { + &__contact { + display: flex; + flex-direction: column; + text-decoration: none; + color: $greyC; + transition-duration: $effectDuration; + width: max-content; + + &:hover { + color: $cyanC; + } + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 00000000..abc40e16 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,122 @@ +.form { + display: flex; + flex-direction: column; + + &__field--message { + height: 88px; + } + + &__field-place { + display: flex; + overflow: hidden; + resize: none; + background-color: transparent; + border: none; + height: 34px; + width: 100%; + padding: 0 2px 0 0; + transition: $effectDuration; + } + + &__field-place--message { + height: 67px; + padding-top: 2px; + } + + &__field { + display: flex; + flex-direction: column; + margin-bottom: 24px; + border-bottom: 1px solid $ralphLaurenC; + height: 55px; + transition-duration: $effectDuration; + + &-name { + height: 21px; + } + } + + &__button { + margin-top: 30px; + + @include on-tablet { + margin-top: 48px; + } + } + + &__field-place::placeholder { + color: $greyC; + } + + &__field-place:not(:placeholder-shown) { + color: $greyC; + font-weight: 700; + background-color: $blackBG; + } + + &__field-place:hover::placeholder { + color: $greyC; + } + + &__field-place:focus { + border: none; + outline: none; + border-bottom: 1px solid $cyanC; + color: $greyC; + font-weight: 600; + } + + &__field:hover { + .form__field-name { + color: $cyanC; + } + + .form__field-place { + border-bottom: 1px solid $cyanC; + } + + &:active { + height: 55px; + + .form__field-name { + color: $cyanC; + } + + .form__field-place { + border-bottom: 1px solid $cyanC; + } + } + } +} + +input:autofill, +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus { + -webkit-text-fill-color: $greyC; + -webkit-box-shadow: 0 0 0 1000px $blackBG inset; +} + +input:autofill:not(:placeholder-shown), +input:-webkit-autofill:not(:placeholder-shown) { + -webkit-text-fill-color: $greyC; +} + +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus { + -webkit-text-fill-color: $greyC; + -webkit-box-shadow: 0 0 0 1000px $blackBG inset; +} + +textarea:-webkit-autofill:not(:placeholder-shown) { + -webkit-text-fill-color: $greyC; +} + +.error { + color: $errorC; +} + +.error-field { + border-bottom: 1px solid $errorC; +} diff --git a/src/styles/blocks/_header-bottom.scss b/src/styles/blocks/_header-bottom.scss new file mode 100644 index 00000000..4aae9f44 --- /dev/null +++ b/src/styles/blocks/_header-bottom.scss @@ -0,0 +1,63 @@ +.bottom { + height: 39px; + align-items: center; + + @include on-desktop { + &__nav { + display: flex; + } + + &__list { + display: flex; + flex-direction: row; + gap: 39px; + } + + &__item { + display: flex; + } + + &__link { + color: $whiteC; + transition-duration: $effectDuration; + + @include hover(scale, 1.1); + + &:hover { + color: $cyanC; + } + } + + &__button-more { + display: flex; + flex-direction: column; + cursor: pointer; + background-color: transparent; + border: none; + align-items: center; + gap: 7px; + padding: 0; + transition-duration: $effectDuration; + + @include hover(scale, 1.1); + } + + &__button-text { + color: $cyanC; + } + + &__button-img { + width: 9px; + height: 6px; + } + + &__slider-control { + display: flex; + flex-direction: column; + } + + .slider-control__progress-bar { + width: 20%; + } + } +} diff --git a/src/styles/blocks/_icon.scss b/src/styles/blocks/_icon.scss new file mode 100644 index 00000000..48e3f6f1 --- /dev/null +++ b/src/styles/blocks/_icon.scss @@ -0,0 +1,49 @@ +.icon { + display: flex; + cursor: pointer; + height: 20px; + width: 20px; + justify-content: center; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition-duration: $effectDuration; + align-self: flex-end; + + @include hover(transform, scale(1.1)); + + &--menu { + background-image: url(../images/common-images/menu-icon.svg); + } + + &--left { + background-image: url(../images/common-images/arrow-left-icon.svg); + + @include on-desktop { + padding-top: 15px; + } + } + + &--close { + background-image: url(../images/common-images/menu-close-icon.svg); + max-height: 20px; + align-self: flex-end; + margin-left: auto; + } + + @include on-desktop { + display: none; + padding-top: 15px; + } + + &--close-video { + content: ''; + display: flex; + position: absolute; + right: 13px; + top: 15px; + z-index: 3; + background-color: transparent; + border: none; + } +} diff --git a/src/styles/blocks/_nav-menu.scss b/src/styles/blocks/_nav-menu.scss new file mode 100644 index 00000000..2033d10d --- /dev/null +++ b/src/styles/blocks/_nav-menu.scss @@ -0,0 +1,30 @@ +.nav { + display: flex; + + &__list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + } + + &__link { + display: flex; + color: $whiteC; + text-decoration: none; + transition-duration: $effectDuration; + } + + &__item { + transition-duration: $effectDuration; + + &:hover { + .nav__link { + @include hover(scale, 1.1); + + color: $cyanC; + } + } + } +} diff --git a/src/styles/blocks/_slider.scss b/src/styles/blocks/_slider.scss new file mode 100644 index 00000000..635ef46b --- /dev/null +++ b/src/styles/blocks/_slider.scss @@ -0,0 +1,118 @@ +.slider { + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + max-width: 100%; + + &__pagination-desktop { + display: none; + font-size: 18px; + font-weight: bold; + width: 21px; + + @include on-desktop { + display: flex; + } + } + + &__images { + display: flex; + justify-content: space-between; + box-sizing: border-box; + transition: transform $effectDuration ease-in-out; + } + + &__slide { + width: 100%; + height: 100%; + display: none; + box-sizing: border-box; + + @include on-desktop { + width: 430px; + } + + @include on-big-desktop { + width: 622px; + max-width: 622px; + } + } + + &__slide.active { + display: flex; + + @include on-desktop { + width: 430px; + max-width: 430px; + } + + @include on-big-desktop { + width: 622px; + max-width: 622px; + } + } + + &__pagination-count { + display: flex; + color: $cyanC; + } +} + +.slider-control { + padding-left: 45px; + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + align-items: center; + width: 205px; + gap: 10px; + } + + &__buttons { + display: flex; + width: 100%; + justify-content: space-between; + box-sizing: border-box; + } + + &__progress-line { + width: 207px; + height: 1px; + background-color: $grey21C; + position: relative; + } + + &__progress-bar { + width: 20%; + height: 100%; + background-color: $cyanC; + transition: width $effectDuration ease-in-out; + } +} + +.pagination-dots { + display: flex; + justify-content: center; + padding-bottom: 20px; + gap: 6px; + margin-top: 15px; + + @include on-desktop { + display: none; + } +} + +.dot { + cursor: pointer; + width: 4px; + height: 4px; + background-color: $notActiveC; + border-radius: 50%; +} + +.dot.active { + background-color: $whiteC; +} diff --git a/src/styles/blocks/_tech-specs-desktop.scss b/src/styles/blocks/_tech-specs-desktop.scss new file mode 100644 index 00000000..9ec94daf --- /dev/null +++ b/src/styles/blocks/_tech-specs-desktop.scss @@ -0,0 +1,114 @@ +.tech-specs { + &__desktop { + display: none; + + @include on-desktop { + display: flex; + margin: auto; + max-width: 1055px; + height: 355px; + position: relative; + } + + @include on-big-desktop { + width: 1175px; + max-width: 1175px; + } + } + + &__block { + display: flex; + flex-direction: row; + position: absolute; + height: max-content; + } + + &__block--first { + right: 50%; + } + + &__block--second { + gap: 17px; + left: 50%; + top: 125px; + transform: translateY(-50%); + + @include on-big-desktop { + left: 47%; + gap: 21px; + } + } + + &__block--third { + bottom: 14px; + right: 61%; + align-items: flex-end; + } + + &__information { + display: flex; + flex-direction: column; + width: max-content; + max-width: 344px; + gap: 21px; + } + + &__information--third { + margin-bottom: -17px; + margin-right: -60px; + } + + &__line-img { + display: flex; + background-size: contain; + background-repeat: no-repeat; + } + + &__line-img--top { + display: flex; + background-image: url(../images/tech-specs/up-line.svg); + background-position: left 6px; + min-height: 72px; + width: 403px; + z-index: 1; + margin-left: -80px; + + @include on-big-desktop { + width: 431px; + } + } + + &__line-img--right { + background-image: url(../images/tech-specs/right-line.svg); + background-position: left 8px; + width: 185px; + min-height: 245px; + + @include on-big-desktop { + background-image: url(../images/tech-specs/right-line-mask.svg); + background-position: right; + width: 283px; + min-height: 245px; + } + } + + &__line-img--bottom { + background-image: url(../images/tech-specs/bottom-line.svg); + width: 134px; + min-height: 113px; + margin-bottom: 80px; + + @include on-big-desktop { + background-image: url(../images/tech-specs/bottom-line-mask.svg); + width: 241px; + min-height: 113px; + } + } + + &__line-img--circle { + background-image: url(../images/tech-specs/circle-line.svg); + width: 40px; + min-height: 201px; + transform: rotate(-11deg); + } +} diff --git a/src/styles/blocks/_tech-specs-mob-tab.scss b/src/styles/blocks/_tech-specs-mob-tab.scss new file mode 100644 index 00000000..787960bb --- /dev/null +++ b/src/styles/blocks/_tech-specs-mob-tab.scss @@ -0,0 +1,126 @@ +.tech-specs { + &__detail { + cursor: pointer; + display: flex; + position: absolute; + width: 34px; + padding: 0; + height: 34px; + border-radius: 50%; + box-sizing: border-box; + border: 2px solid $white14C; + background-color: $cyanC; + background-image: url(../images/common-images/detail-plus-icon.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-position: center; + transition-duration: $effectDuration; + + @include on-tablet { + width: 62px; + height: 62px; + background-size: 22px 22px; + } + + @include on-desktop { + display: none; + } + + @include hover(scale, 1.1); + + &--first { + left: 69px; + top: 27px; + + @include on-tablet { + top: 25px; + left: 65px; + } + } + + &--second { + top: 50%; + transform: translateY(-50%); + right: 35px; + + @include on-tablet { + right: 50px; + } + } + + &--third { + left: 0; + bottom: 40px; + + @include on-tablet { + left: -30px; + bottom: 50px; + } + } + } + + &__information-active { + display: flex; + } + + &__info { + opacity: 0; + display: none; + position: absolute; + background-color: $darkBlueMagentaC; + color: $greyC; + width: max-content; + height: auto; + align-items: center; + justify-content: center; + padding: 17px 10px 22px 11px; + border-radius: 4px; + transition: opacity $effectDuration; + + @include on-desktop { + display: none; + } + + &--first { + left: 20px; + top: 25px; + + @include on-tablet { + top: 42px; + left: -10px; + } + } + + &--second { + top: -5px; + left: -30px; + + @include on-tablet { + inset: auto 0 0 auto; + } + } + + &--third { + bottom: 5px; + left: 25px; + + @include on-tablet { + bottom: 0; + left: 48px; + } + } + } +} + +.plus-active { + background-image: url(../images/common-images/detail-minus-icon.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-position: center; +} + +.tech-specs__info-active { + display: flex; + opacity: 1; + z-index: 2; +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 00000000..bb0c28bd --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,78 @@ +.top-bar { + display: flex; + position: sticky; + top: 0; + padding-block: 20px; + justify-content: space-between; + align-items: center; + + &__middle { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + justify-content: space-between; + width: 67%; + } + } + + &__language-switcher { + display: none; + cursor: pointer; + + @include on-desktop { + display: flex; + background-color: transparent; + color: $cyanC; + border: none; + width: 40px; + height: 21px; + transition-duration: $effectDuration; + + @include hover(scale, 1.1); + + &:focus { + .language-switcher__option { + appearance: none; + color: $whiteC; + background-color: $blackBG; + transition-duration: $effectDuration; + border: none; + outline: none; + } + + .language-switcher__option:hover { + background: $cyanC; + color: $whiteC; + } + } + } + } + + &__nav { + width: 315px; + } + + .nav__list { + flex-direction: row; + width: 100%; + justify-content: space-between; + } + + &__button { + display: none; + + @include on-desktop { + display: flex; + } + } + + &__icon { + display: flex; + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/_using-area.scss b/src/styles/blocks/_using-area.scss new file mode 100644 index 00000000..f8d2708f --- /dev/null +++ b/src/styles/blocks/_using-area.scss @@ -0,0 +1,38 @@ +.area { + transition-duration: $effectDuration; + box-sizing: border-box; + padding: 1px; + + @include on-tablet { + &:hover { + border: 1px solid $cyanC; + border-radius: 20px; + } + } + &__img { + display: none; + + @include on-tablet { + display: flex; + max-height: 84px; + } + } + + &__title { + text-align: left; + padding-bottom: 11px; + + @include on-tablet { + text-align: center; + padding: 30px 0 18px; + } + } + + &__text { + color: $greyC; + + @include on-tablet { + text-align: center; + } + } +} diff --git a/src/styles/blocks/_why-cat-loco-card.scss b/src/styles/blocks/_why-cat-loco-card.scss new file mode 100644 index 00000000..26feea6f --- /dev/null +++ b/src/styles/blocks/_why-cat-loco-card.scss @@ -0,0 +1,42 @@ +.cards { + justify-content: center; + + &__card { + display: flex; + flex-direction: column; + box-sizing: border-box; + transition-duration: $effectDuration; + padding: 1px; + + @include on-tablet { + &:hover { + border: 1px solid $cyanC; + border-radius: 20px; + } + } + } + + &__img { + display: none; + + @include on-tablet { + display: flex; + max-height: 80px; + } + } + + &__title { + padding-bottom: 11px; + + @include on-tablet { + text-align: center; + padding: 22px 0 27px; + } + } + + &__text { + @include on-tablet { + text-align: center; + } + } +} diff --git a/src/styles/blocks/_youtube-video.scss b/src/styles/blocks/_youtube-video.scss new file mode 100644 index 00000000..91cac648 --- /dev/null +++ b/src/styles/blocks/_youtube-video.scss @@ -0,0 +1,52 @@ +.hidden { + opacity: 0; + visibility: hidden; + transition: opacity $effectDuration ease-in-out visibility 0.3s ease-in-out; +} + +.video-container { + display: flex; + position: absolute; + z-index: 2; + width: 100%; + min-height: 207px; + top: 0; + transition: ease-in-out; + transition-duration: $effectDuration; + + @include on-tablet { + height: 55vh; + } + + @include on-desktop { + width: 68%; + left: 16%; + } +} + +.video-wrapper { + display: flex; + width: 100%; + min-height: 207px; + + @include on-tablet { + height: 55vh; + } +} + +.video-frame { + display: flex; + position: relative; + border: none; + width: 100%; + height: 207px; + + @include on-tablet { + height: 55vh; + } +} + +.icon--close-video { + position: absolute; + z-index: 2; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..b8307838 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'sections/page'; +@import 'blocks/buttons'; +@import 'blocks/icon'; +@import 'blocks/top-bar'; +@import 'blocks/slider'; +@import 'blocks/youtube-video'; +@import 'blocks/nav-menu'; +@import 'blocks/header-bottom'; +@import 'blocks/using-area'; +@import 'blocks/tech-specs-mob-tab'; +@import 'blocks/tech-specs-desktop'; +@import 'blocks/contacts'; +@import 'blocks/form'; +@import 'blocks/why-cat-loco-card'; +@import 'sections/header'; +@import 'sections/page-menu'; +@import 'sections/help'; +@import 'sections/about'; +@import 'sections/tech-specs'; +@import 'sections/why-cat-loco'; +@import 'sections/questions'; +@import 'sections/using-areas'; +@import 'sections/footer'; diff --git a/src/styles/sections/_about.scss b/src/styles/sections/_about.scss new file mode 100644 index 00000000..3b771702 --- /dev/null +++ b/src/styles/sections/_about.scss @@ -0,0 +1,219 @@ +.about { + background: $linearGradient; + + &__content { + display: flex; + flex-direction: column; + position: relative; + padding-block: 50px; + gap: 88px; + + @include on-tablet { + padding: 70px 0 50px; + gap: 84px; + } + + @include on-desktop { + padding: 100px 0 98px; + gap: 183px; + } + + @include on-big-desktop { + padding: 147px 0 156px; + gap: 175px; + } + } + + .section-title { + padding-bottom: 20px; + + @include on-tablet { + padding-bottom: 30px; + } + } + + .section-title--first { + display: flex; + + @include on-tablet { + display: none; + } + } + + .section-title--right { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-big-desktop { + height: 72px; + } + } + + .section-title--second { + padding-bottom: 22px; + + @include on-tablet { + padding-bottom: 32px; + } + } + + &__top { + display: flex; + flex-direction: column; + + @include on-tablet { + justify-content: space-between; + flex-direction: row; + gap: 20px; + } + + @include on-desktop { + gap: 107px; + } + } + + &__images { + gap: 23px; + height: 67vw; + + @include on-tablet { + min-width: 340px; + min-height: 270px; + height: 270px; + } + + @include on-desktop { + width: 430px; + min-width: 430px; + height: 290px; + max-height: 290px; + justify-self: right; + padding-bottom: 12px; + } + + @include on-big-desktop { + width: 622px; + min-width: 622px; + } + } + + &__product-info { + display: flex; + flex-direction: column; + + @include on-tablet { + width: 49%; + } + + @include on-desktop { + width: 31%; + } + + @include on-big-desktop { + width: 30%; + } + } + + &__button-play { + display: flex; + margin-top: 15px; + height: 71px; + width: 249px; + + @include on-desktop { + margin-top: 21px; + } + } + + &__slider { + width: 100%; + height: auto; + + @include on-tablet { + width: 50%; + height: 290px; + } + + @include on-desktop { + margin-left: auto; + width: 430px; + height: 336px; + } + + @include on-big-desktop { + width: 622px; + } + } + + &__bottom { + display: flex; + align-items: center; + + @include on-tablet { + height: 255px; + justify-content: space-between; + } + + @include on-desktop { + height: 346px; + gap: 101px; + } + } + + &__information { + display: flex; + flex-direction: column; + width: 100%; + + @include on-tablet { + max-width: 65%; + } + + @include on-desktop { + width: 41%; + } + + @include on-big-desktop { + width: 40%; + } + } + + &__img-container { + display: none; + + @include on-tablet { + display: flex; + flex-direction: row; + height: 100%; + width: 33%; + background-image: url(../images/about/about-us-text.png); + background-repeat: no-repeat; + background-size: auto 90%; + background-position: center; + } + + @include on-desktop { + width: 48%; + background-image: url(../images/about/about-us-text-desktop.png); + background-position: left; + } + + @include on-big-desktop { + width: 52%; + background-image: url(../images/about/about-us-text-big-desktop.png); + background-position: left; + } + } + + &__greeting { + color: $cyanC; + padding-bottom: 11px; + + @include on-desktop { + padding-bottom: 15px; + } + } +} diff --git a/src/styles/sections/_footer.scss b/src/styles/sections/_footer.scss new file mode 100644 index 00000000..0f003463 --- /dev/null +++ b/src/styles/sections/_footer.scss @@ -0,0 +1,130 @@ +.footer { + background-color: $totalBlackC; + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 45px 0 50px; + + @include on-tablet { + flex-direction: row; + padding-block: 21px; + align-items: center; + } + + @include on-desktop { + padding-block: 39px; + } + } + + &__main-info { + display: flex; + justify-content: space-between; + padding-top: 15px; + + @include on-tablet { + align-items: center; + padding: 0; + width: 100%; + } + } + + &__left { + display: flex; + flex-direction: column; + gap: 15px; + + @include on-tablet { + flex-direction: row; + margin: auto; + } + } + + &__logo-link { + height: 100%; + display: flex; + + &--mob { + @include on-tablet { + display: none; + } + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + } + } + } + + &__logo { + height: 14px; + width: auto; + } + + &__nav { + @include on-tablet { + width: 306px; + } + } + + &__list { + gap: 12px; + + @include on-tablet { + width: 100%; + flex-direction: row; + justify-content: space-between; + } + } + + &__right { + display: flex; + flex-direction: column; + gap: 22px; + + @include on-tablet { + flex-direction: row; + } + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 12px; + + @include on-tablet { + display: none; + } + } + + &__social-media { + display: flex; + gap: 23px; + height: 18px; + align-items: center; + + @include on-tablet { + gap: 18px; + } + + @include on-big-desktop { + gap: 28px; + } + } + + &__icon { + transition-duration: $effectDuration; + + @include hover(scale, 1.1); + + &:hover { + path { + fill: $cyanC; + } + } + } +} diff --git a/src/styles/sections/_header.scss b/src/styles/sections/_header.scss new file mode 100644 index 00000000..750f65a5 --- /dev/null +++ b/src/styles/sections/_header.scss @@ -0,0 +1,155 @@ +.header { + height: auto; + background: $linearGradient; + + @include on-desktop { + height: 100vh; + } + + &__content { + padding-bottom: 55px; + position: relative; + + @include on-tablet { + padding-bottom: 64px; + } + + @include on-desktop { + height: 100%; + padding-bottom: 0; + } + } + + &__middle { + width: 100%; + display: flex; + flex-direction: column-reverse; + position: relative; + + @include on-tablet { + padding-top: 25px; + align-items: center; + justify-content: space-between; + flex-direction: row; + } + + @include on-desktop { + padding: 52px 0 0; + } + } + + &__middle-info { + width: 100%; + display: flex; + flex-direction: column; + + @include on-tablet { + justify-content: flex-start; + width: 50%; + } + + @include on-desktop { + max-width: 479px; + } + } + + &-title { + padding-bottom: 17px; + + @include on-desktop { + padding-bottom: 19px; + } + } + + &__text { + padding-bottom: 8px; + + @include on-desktop { + padding-left: 92px; + } + } + + &__price { + display: flex; + text-align: center; + justify-content: center; + padding-bottom: 16px; + color: $whiteC; + + @include on-tablet { + text-align: left; + justify-content: left; + } + + @include on-desktop { + padding: 0 0 20px 92px; + } + } + + &__slider { + width: 100%; + + @include on-tablet { + width: 50%; + } + } + + &__slide { + width: 100%; + height: auto; + } + + &__bottom { + display: none; + + @include on-desktop { + position: absolute; + bottom: 84px; + display: flex; + width: 100%; + justify-content: space-between; + } + + @include on-big-desktop { + bottom: 107px; + } + } + + &__button-play { + justify-content: center; + width: 221px; + + @include on-tablet { + justify-self: left; + width: 258px; + background-position: left; + } + + @include on-desktop { + margin-left: 92px; + } + } + + &__button-link { + z-index: 1; + position: fixed; + bottom: 10px; + left: 20px; + right: 20px; + + @include on-tablet { + width: 458px; + bottom: 31px; + left: 50%; + transform: translateX(-50%); + } + + @include on-desktop { + display: none; + } + } + + &__button { + width: 100%; + } +} diff --git a/src/styles/sections/_help.scss b/src/styles/sections/_help.scss new file mode 100644 index 00000000..b8eca0c7 --- /dev/null +++ b/src/styles/sections/_help.scss @@ -0,0 +1,44 @@ +.help { + display: flex; + background-color: $darkBlueMagentaC; + + &__content { + display: flex; + flex-direction: column; + padding: 30px 0 73px; + gap: 30px; + } + + &__description { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__text { + text-align: left; + } + + &__text-link { + color: $cyanC; + } + + &__links { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + color: $cyanC; + transition-duration: $effectDuration; + + @include hover(transform, translateX(10px)); + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 11px; + } +} diff --git a/src/styles/sections/_page-menu.scss b/src/styles/sections/_page-menu.scss new file mode 100644 index 00000000..d6b74ea6 --- /dev/null +++ b/src/styles/sections/_page-menu.scss @@ -0,0 +1,70 @@ +.menu { + &__content { + display: flex; + position: relative; + } + + .container { + width: 100%; + } + + display: flex; + height: 568px; + background-color: $darkblue; + width: 100%; + min-height: 568px; + + @include on-desktop { + display: none; + } + + &__top-bar { + display: flex; + width: 100%; + } + + .icon--close { + display: flex; + justify-self: flex-end; + } + + &__nav { + display: flex; + flex-direction: column; + } + + &__list { + padding-left: 0; + width: 100%; + gap: 0; + position: absolute; + left: 0; + right: 0; + } + + .nav__link { + @include content-padding-inline; + + width: 100%; + + @include on-tablet { + padding-left: 122px; + } + } + + &__item { + height: 49px; + align-content: center; + width: 100%; + transition-duration: $effectDuration; + cursor: pointer; + + &:hover { + background-color: $deepBlueC; + + .nav__link { + @include hover(scale, 1); + } + } + } +} diff --git a/src/styles/sections/_page.scss b/src/styles/sections/_page.scss new file mode 100644 index 00000000..c985d8ca --- /dev/null +++ b/src/styles/sections/_page.scss @@ -0,0 +1,80 @@ +* { + margin: 0; + text-decoration: none; +} + +a { + cursor: pointer; + transition-duration: $effectDuration; +} + +.page { + scroll-behavior: smooth; + transition: $effectDuration; + + &__body { + background-color: $blackBG; + box-sizing: border-box; + min-width: 320px; + width: 100%; + margin: 0; + padding: 0; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + transition: all $effectDuration; + transform: translateX(-100%); + opacity: 1; + pointer-events: all; + + &:target { + opacity: 1; + z-index: 3; + transform: translateX(0); + pointer-events: all; + } + } + + &::before { + content: ''; + margin: 0; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + pointer-events: none; + transition: opacity $effectDuration; + } + + &:has(.page__menu:target)::before { + opacity: 1; + pointer-events: all; + } +} + +.page, +.page__body { + max-width: 100%; + overflow-x: hidden; +} + +.page:has(.page__menu:target) { + overflow: hidden; + pointer-events: all; +} + +.logo { + transition-duration: $effectDuration; + + @include hover(scale, 1.1); +} + +.main { + width: 100%; +} diff --git a/src/styles/sections/_questions.scss b/src/styles/sections/_questions.scss new file mode 100644 index 00000000..177eb527 --- /dev/null +++ b/src/styles/sections/_questions.scss @@ -0,0 +1,83 @@ +.questions { + &__content { + padding-block: 50px; + + @include on-tablet { + display: flex; + padding: 70px 0 130px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-big-desktop { + padding: 156px 0 205px; + } + } + + &__question { + color: $cyanC; + } + + &__mob { + display: flex; + flex-direction: column; + gap: 11px; + padding-bottom: 32px; + + @include on-tablet { + display: none; + } + } + + &__left { + display: none; + + @include on-tablet { + display: flex; + flex-direction: column; + width: 50%; + } + } + + &__right { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + + @include on-tablet { + width: 50%; + } + } + + &__tablet { + @include on-tablet { + display: flex; + flex-direction: column; + gap: 11px; + padding-bottom: 26px; + } + } + + &__note { + @include on-tablet { + padding-bottom: 76px; + } + } + + &__contacts { + gap: 11px; + } + + &__note--mobile { + display: flex; + flex-direction: column; + margin-top: 30px; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/sections/_tech-specs.scss b/src/styles/sections/_tech-specs.scss new file mode 100644 index 00000000..8bcc2790 --- /dev/null +++ b/src/styles/sections/_tech-specs.scss @@ -0,0 +1,70 @@ +.tech-specs { + &__content { + padding-block: 50px; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + padding-block: 80px; + min-height: 440px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-big-desktop { + padding-block: 160px; + } + } + + .section-title { + display: flex; + padding-bottom: 30px; + align-self: flex-start; + + @include on-desktop { + padding-bottom: 80px; + padding-right: 73px; + align-self: flex-end; + } + } + + &__mobtab { + display: flex; + position: relative; + width: 100%; + width: 214px; + background-image: url(../images/tech-specs/device-bg.png); + background-repeat: no-repeat; + background-size: 197px 195px; + min-height: 265px; + background-position: center; + + @include on-tablet { + height: 440px; + width: 419px; + background-size: 358px 354px; + } + + @include on-desktop { + display: none; + } + } + + &__desktop { + display: none; + position: relative; + width: 100%; + + @include on-desktop { + display: flex; + background-image: url(../images/tech-specs/device-bg.png); + background-size: 297px 294px; + background-repeat: no-repeat; + background-position: center bottom; + } + } +} diff --git a/src/styles/sections/_using-areas.scss b/src/styles/sections/_using-areas.scss new file mode 100644 index 00000000..a0502511 --- /dev/null +++ b/src/styles/sections/_using-areas.scss @@ -0,0 +1,78 @@ +.using-areas { + &__content { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-big-desktop { + padding-block: 158px; + } + } + + .section-title { + padding-bottom: 12px; + width: 100%; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + padding-bottom: 16px; + } + } + + &__text { + padding-bottom: 30px; + color: $cyanC; + width: 100%; + height: 30px; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + padding-bottom: 83px; + } + + @include on-big-desktop { + padding-bottom: 70px; + } + } + + &__areas { + width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-flow: row wrap; + justify-content: space-between; + row-gap: 40px; + } + } + + &__area { + display: flex; + flex-direction: column; + + @include on-tablet { + width: calc(50% - 20px); + flex: 0 0 calc(50% - 20px); + height: auto; + } + + @include on-desktop { + width: calc(25% - 20px); + flex: 0 0 calc(25% - 20px); + } + } +} diff --git a/src/styles/sections/_why-cat-loco.scss b/src/styles/sections/_why-cat-loco.scss new file mode 100644 index 00000000..d58392d5 --- /dev/null +++ b/src/styles/sections/_why-cat-loco.scss @@ -0,0 +1,69 @@ +.why-cat-loco { + background: $linearGradient; + + &__content { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding: 100px 0 102px; + } + + @include on-big-desktop { + padding-block: 160px; + } + } + + .section-title { + padding-bottom: 32px; + + @include on-tablet { + padding-bottom: 30px; + } + + @include on-desktop { + text-align: center; + padding-bottom: 84px; + } + } + + &__cards { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + box-sizing: border-box; + + @include on-tablet { + flex-direction: row; + } + + @include on-desktop { + padding-bottom: 79px; + } + } + + &__link { + @include on-desktop { + display: flex; + justify-self: center; + width: 200px; + height: 48px; + } + } + + &__button { + display: none; + + @include on-desktop { + display: flex; + } + + @include on-big-desktop { + display: none; + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..0073465b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,41 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-big-desktop { + @media (min-width: $big-desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + margin-inline: auto; + padding-inline: 110px; + } +} + +.container { + @include content-padding-inline; + + max-width: 1452px; + height: 100%; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..83a827c6 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,20 @@ -$c-gray: #eee; +$mobile-min-width: 320px; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$big-desktop-min-width: 1920px; +$effectDuration: 0.3s; +$fontFamilyInter: 'Inter', sans-serif; +$blackBG: #05040b; +$totalBlackC: #000; +$darkblue: #191536; +$cyanC: #05c2df; +$ralphLaurenC: #2f2f2f; +$grey21C: #212121; +$deepBlueC: #110e25; +$greyC: #929292; +$whiteC: #fff; +$white14C: #ffffff23; +$notActiveC: #484848; +$linearGradient: linear-gradient(to right, #191536, #000); +$darkBlueMagentaC: #191536; +$errorC: #860404;