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/about-background-img.svg b/src/images/about/about-background-img.svg new file mode 100644 index 00000000..575abef1 --- /dev/null +++ b/src/images/about/about-background-img.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/about/image-1.png b/src/images/about/image-1.png new file mode 100644 index 00000000..f56d564c Binary files /dev/null and b/src/images/about/image-1.png differ diff --git a/src/images/about/image-2.png b/src/images/about/image-2.png new file mode 100644 index 00000000..f56d564c Binary files /dev/null and b/src/images/about/image-2.png differ diff --git a/src/images/about/image-3.png b/src/images/about/image-3.png new file mode 100644 index 00000000..f56d564c Binary files /dev/null and b/src/images/about/image-3.png differ diff --git a/src/images/about/image-4.png b/src/images/about/image-4.png new file mode 100644 index 00000000..f56d564c Binary files /dev/null and b/src/images/about/image-4.png differ diff --git a/src/images/about/image-5.png b/src/images/about/image-5.png new file mode 100644 index 00000000..f56d564c Binary files /dev/null and b/src/images/about/image-5.png differ diff --git a/src/images/benefits/img-1.png b/src/images/benefits/img-1.png new file mode 100644 index 00000000..859c51de Binary files /dev/null and b/src/images/benefits/img-1.png differ diff --git a/src/images/benefits/img-1.svg b/src/images/benefits/img-1.svg new file mode 100644 index 00000000..30b6079b --- /dev/null +++ b/src/images/benefits/img-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/benefits/img-2.svg b/src/images/benefits/img-2.svg new file mode 100644 index 00000000..2b8b8069 --- /dev/null +++ b/src/images/benefits/img-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/benefits/img-3.svg b/src/images/benefits/img-3.svg new file mode 100644 index 00000000..60de1b3e --- /dev/null +++ b/src/images/benefits/img-3.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/header/header-img-2.png b/src/images/header/header-img-2.png new file mode 100644 index 00000000..674eb2b5 Binary files /dev/null and b/src/images/header/header-img-2.png differ diff --git a/src/images/header/header-img-3.jpg b/src/images/header/header-img-3.jpg new file mode 100644 index 00000000..d21b7617 Binary files /dev/null and b/src/images/header/header-img-3.jpg differ diff --git a/src/images/header/header-img-tablet.png b/src/images/header/header-img-tablet.png new file mode 100644 index 00000000..b184e43e Binary files /dev/null and b/src/images/header/header-img-tablet.png differ diff --git a/src/images/header/header-img.png b/src/images/header/header-img.png new file mode 100644 index 00000000..92b7cbba Binary files /dev/null and b/src/images/header/header-img.png differ diff --git a/src/images/hero/img-1.svg b/src/images/hero/img-1.svg new file mode 100644 index 00000000..196d7bf9 --- /dev/null +++ b/src/images/hero/img-1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/hero/img-2.svg b/src/images/hero/img-2.svg new file mode 100644 index 00000000..fa1c757f --- /dev/null +++ b/src/images/hero/img-2.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/hero/img-3.svg b/src/images/hero/img-3.svg new file mode 100644 index 00000000..a3c14f4c --- /dev/null +++ b/src/images/hero/img-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/hero/img-4.svg b/src/images/hero/img-4.svg new file mode 100644 index 00000000..272412bd --- /dev/null +++ b/src/images/hero/img-4.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon/icon-arrow.svg b/src/images/icon/icon-arrow.svg new file mode 100644 index 00000000..7c2a91c3 --- /dev/null +++ b/src/images/icon/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close-hover.svg b/src/images/icon/icon-close-hover.svg new file mode 100644 index 00000000..b5e21280 --- /dev/null +++ b/src/images/icon/icon-close-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 00000000..591ce38b --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/icon-facebook-hover.svg b/src/images/icon/icon-facebook-hover.svg new file mode 100644 index 00000000..83cb06e1 --- /dev/null +++ b/src/images/icon/icon-facebook-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-facebook.svg b/src/images/icon/icon-facebook.svg new file mode 100644 index 00000000..f1646ec5 --- /dev/null +++ b/src/images/icon/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-language-close-hover.svg b/src/images/icon/icon-language-close-hover.svg new file mode 100644 index 00000000..8f8dd42d --- /dev/null +++ b/src/images/icon/icon-language-close-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-language-close.svg b/src/images/icon/icon-language-close.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/icon/icon-language-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-menu-hover.svg b/src/images/icon/icon-menu-hover.svg new file mode 100644 index 00000000..7297bae2 --- /dev/null +++ b/src/images/icon/icon-menu-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/icon-menu.svg b/src/images/icon/icon-menu.svg new file mode 100644 index 00000000..8506fd7f --- /dev/null +++ b/src/images/icon/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/icon-more-arrow-hover.svg b/src/images/icon/icon-more-arrow-hover.svg new file mode 100644 index 00000000..a750c32e --- /dev/null +++ b/src/images/icon/icon-more-arrow-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-more-arrow.svg b/src/images/icon/icon-more-arrow.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icon/icon-more-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-reddit-hover.svg b/src/images/icon/icon-reddit-hover.svg new file mode 100644 index 00000000..13b3dc74 --- /dev/null +++ b/src/images/icon/icon-reddit-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-reddit.svg b/src/images/icon/icon-reddit.svg new file mode 100644 index 00000000..4304daf2 --- /dev/null +++ b/src/images/icon/icon-reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-scroll-up-hover.svg b/src/images/icon/icon-scroll-up-hover.svg new file mode 100644 index 00000000..6ddec889 --- /dev/null +++ b/src/images/icon/icon-scroll-up-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-scroll-up.svg b/src/images/icon/icon-scroll-up.svg new file mode 100644 index 00000000..2e498579 --- /dev/null +++ b/src/images/icon/icon-scroll-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-twitter-hover.svg b/src/images/icon/icon-twitter-hover.svg new file mode 100644 index 00000000..99f1c656 --- /dev/null +++ b/src/images/icon/icon-twitter-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-twitter.svg b/src/images/icon/icon-twitter.svg new file mode 100644 index 00000000..b0bdc7ca --- /dev/null +++ b/src/images/icon/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-youtube-hover.svg b/src/images/icon/icon-youtube-hover.svg new file mode 100644 index 00000000..c678f0af --- /dev/null +++ b/src/images/icon/icon-youtube-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/icon-youtube.svg b/src/images/icon/icon-youtube.svg new file mode 100644 index 00000000..efa5114f --- /dev/null +++ b/src/images/icon/icon-youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..163b27fc --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/play-video/arrow-play-video-hover.svg b/src/images/play-video/arrow-play-video-hover.svg new file mode 100644 index 00000000..d7e14469 --- /dev/null +++ b/src/images/play-video/arrow-play-video-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/play-video/arrow-play-video.svg b/src/images/play-video/arrow-play-video.svg new file mode 100644 index 00000000..9a2ff4ef --- /dev/null +++ b/src/images/play-video/arrow-play-video.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/play-video/btn-play-video.svg b/src/images/play-video/btn-play-video.svg new file mode 100644 index 00000000..9be748e0 --- /dev/null +++ b/src/images/play-video/btn-play-video.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/tech/tech-img-decktop.png b/src/images/tech/tech-img-decktop.png new file mode 100644 index 00000000..50d670ac Binary files /dev/null and b/src/images/tech/tech-img-decktop.png differ diff --git a/src/images/tech/tech-img.png b/src/images/tech/tech-img.png new file mode 100644 index 00000000..e8f1465c Binary files /dev/null and b/src/images/tech/tech-img.png differ diff --git a/src/images/tech/tech-minus.svg b/src/images/tech/tech-minus.svg new file mode 100644 index 00000000..5ed079ba --- /dev/null +++ b/src/images/tech/tech-minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/tech/tech-plus.svg b/src/images/tech/tech-plus.svg new file mode 100644 index 00000000..42f3a2af --- /dev/null +++ b/src/images/tech/tech-plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..ae1b99ed 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,1355 @@ - + - Title + KatVR + + + + + + + + + + + + - -

Hello Mate Academy

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

+ MORE THAN + GAMING! +

+ +

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

+ +
+
+
+ EDUCATION +
+ +

EDUCATION

+ +

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

+
+ +
+
+ REAL ESTATE +
+ +

REAL ESTATE

+ +

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

+
+ +
+
+ FITNESS +
+ +

FITNESS

+ +

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

+
+ +
+
+ SOCIAL INTERACTIONS +
+ +

+ SOCIAL INTERACTIONS +

+ +

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

+
+
+
+
+
+ +
+
+
+
+

+ ABOUT + PRODUCT! +

+ +
+
+ +
+
+
+ image-1 +
+
+ image-2 +
+
+ image-3 +
+
+ image-4 +
+
+ image-5 +
+
+
+
+
+
+ Previous +
+
Next
+
+
+
+ +
+
+ +

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

+ +
+ + +
+ + Play Video + + +
+ +
+

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

+ +
+
+
+ +
+

+ SENSOR +

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

+ CONNECTION +

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

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

+ WHY + KAT LOCO? +

+ +
+
+
+ UNIVERSALLY COMPATIBLE +
+ +

+ UNIVERSALLY COMPATIBLE +

+ +

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

+
+ +
+
+ VR/PC CONTROL PANEL +
+ +

VR/PC CONTROL PANEL

+ +

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

+
+ +
+
+ WIRELESS SENSORS +
+ +

WIRELESS SENSORS

+ +

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

+
+
+
+
+
+ +
+
+
+

Have any questions?

+ +

+ GET + IN TOUCH +

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

+ Our manager will reply you within 15 minutes +

+ +
+ +
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..6904d4b8 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,351 @@ 'use strict'; + +const body = document.body; +const page = document.documentElement; + +const menu = document.getElementById('menu'); +const openMenuButton = document.getElementById('menu-button'); +const closeMenuButton = document.getElementById('menu-close'); + +openMenuButton.addEventListener('click', () => { + openMenu() +}) + +closeMenuButton.addEventListener('click', () => { + closeMenu(); +}) + +function openMenu() { + menu.classList.add('menu--open'); + body.style.overflowY = "hidden"; + page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeMenu() { + menu.classList.remove('menu--open'); + body.style.overflowY = "auto"; + page.style.paddingRight = 0; +} + +document.addEventListener('click', function(e) { + const target = e.target; + + if (target.tagName === 'A' && target.href.includes('#')) { + e.preventDefault(); + closeMenu() + + const targetId = target.getAttribute('href'); + const targetElement = document.querySelector(targetId); + + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth' + }); + } + } +}); + + +const language = document.getElementById('language'); +const openLanguageButton = document.querySelector('.language-link'); +const closeLanguageButton = document.getElementById('language-close'); + +function openLanguage() { + language.classList.add('language--open'); + body.style.overflowY = "hidden"; + page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeLanguage() { + language.classList.remove('language--open'); + body.style.overflowY = "auto"; + page.style.paddingRight = 0; +} + +openLanguageButton.addEventListener('click', () => { + openLanguage(); +}) + +closeLanguageButton.addEventListener('click', () => { + closeLanguage(); +}) + + +language.addEventListener('click', (e) => { + if (e.target.closest('li')) { + closeLanguage(); + } + + e.stopPropagation(); +}); + + +document.addEventListener('click', (e) => { + if ( + !language.contains(e.target) + && language.classList.contains('language--open') + && e.target !== openLanguageButton + ) { + closeLanguage(); + return; + } +}); + +const dropdown = document.querySelector(".dropdown"); +const dropdownBtn = document.querySelector(".dropdown__btn"); +const dropdownContent = document.querySelector(".dropdown__content"); +const options = dropdownContent.querySelectorAll("li"); + +dropdownBtn.addEventListener("click", function () { + dropdown.classList.toggle("dropdown--active"); +}); + +document.addEventListener("click", function (event) { + if (!dropdown.contains(event.target)) { + dropdown.classList.remove("dropdown--active"); + } +}); + +options.forEach(option => { + option.addEventListener("click", function () { + dropdownBtn.textContent = this.textContent; + dropdown.classList.remove("dropdown--active"); + }); +}); + +const help = document.getElementById('help'); +const openHelpButtons = document.querySelectorAll('.help-link'); +const closeHelpButton = document.getElementById('help-close'); +const helpServiceBtn = help.querySelectorAll('.help__service-btn') + +function openHelp() { + help.classList.add('help--open'); + body.style.overflowY = "hidden"; + page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeHelp() { + help.classList.remove('help--open'); + body.style.overflowY = "auto"; + page.style.paddingRight = 0; +} + +openHelpButtons.forEach(btn => btn.addEventListener('click', () => { + openHelp();pageMenuContent +})); + +closeHelpButton.addEventListener('click', () => { + closeHelp(); +}) + +helpServiceBtn.forEach(btn => btn.addEventListener('click', () => { + closeHelp(); +})); + +const faq = document.getElementById('faq'); +const openFaqButtons = document.querySelectorAll('.faq-link'); +const closeFaqButton = document.getElementById('faq-close'); + +function openFaq() { + faq.classList.add('faq--open'); + body.style.overflowY = "hidden"; + page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeFaq() { + faq.classList.remove('faq--open'); + body.style.overflowY = "auto"; + page.style.paddingRight = 0; +} + +openFaqButtons.forEach(btn => btn.addEventListener('click', () => { + openFaq(); +})); + +closeFaqButton.addEventListener('click', () => { + closeFaq(); +}) + +const accordions = document.querySelectorAll(".accordion"); + +accordions.forEach(accordion => { + accordion.addEventListener("click", function () { + this.classList.toggle("accordion--open"); + }); +}); + + + +if (window.innerWidth >= 1280) { + const swiper = new Swiper('.swiper-header', { + loop: true, + autoplay: { + delay: 5000, + }, + + navigation: { + prevEl: '.slider__navigation--prev', + nextEl: '.slider__navigation--next', + }, + + scrollbar: { + el: ".header__swiper-scrollbar", + dragClass:"header__swiper-scrollbar-drag", + }, + }); +} + +const swiper = new Swiper('.about__swiper', { + loop: true, + autoplay: { + delay: 5000, + }, + + navigation: { + prevEl: '.slider__navigation--prev', + nextEl: '.slider__navigation--next', + }, + + scrollbar: { + el: ".about__swiper-scrollbar", + dragClass:"about__swiper-scrollbar-drag", + }, + + pagination: { + el: ".about__swiper-pagination--bullet", + clickable: true, + bulletActiveClass:"about__swiper-pagination-bullet-active", + bulletClass:"about__swiper-pagination-bullet", + }, + + breakpoints: { + 1280: { + pagination: { + el: '.about__slider-pagination--fraction', + type: 'fraction', + currentClass: 'pagination-current', + totalClass: 'pagination-total' + } + }, + } +}) + +const techSpecButtons = document.querySelectorAll(".tech__spec-button"); + +techSpecButtons.forEach(button => { + button.addEventListener("click", () => { + const parent = button.closest(".tech__spec"); + const info = parent.querySelector(".tech__spec-info"); + info.classList.toggle("tech__spec-info--show"); + this.classList.toggle("tech__spec-button--active"); + }); +}); + +const frm = document.forms.contact__form; + +const name = frm.name; +const nameLabel = document.querySelector('label[for="name"]'); +const nameLabelText = nameLabel.innerText; + +const email = frm.email; +const emailLabel = document.querySelector('label[for="email"]'); +const emailLabelText = emailLabel.innerText; + +const phone = frm.phone; +const phoneLabel = document.querySelector('label[for="phone"]'); +const phoneLabelText = phoneLabel.innerText; + +const submitBtn = document.querySelector('.form__submit-btn'); + +frm.addEventListener('submit', (e) => { + e.preventDefault(); + let err = false; + + if (!name.value) { + nameField.setError(nameField.msg); + err = true; + } + + if (!email.value) { + emailField.setError(emailField.msg); + err = true; + } + + if (!phone.value) { + phoneField.setError(phoneField.msg); + err = true; + } + + if (err) { + return; + } + + const elements = [...frm.elements]; + + elements.forEach(element => { + element.disabled = true; + }) + + const btnText = submitBtn.firstElementChild; + + const text = btnText.innerText; + + btnText.innerText = ''; + + wait() + .then(() => { + frm.reset(); + }) + .finally(() => { + elements.forEach(element => { + element.disabled = ''; + }) + btnText.innerText = text; + }) +}); + +function wait(delay) { + return new Promise(resolve => setTimeout(resolve, delay)); +} + +class Field { + constructor(input, label, labelText, msg) { + this.input = input; + this.label = label; + this.labelText = labelText; + this.errMsg = ''; + this.msg = msg; + } + + setError(msg) { + this.label.innerText = msg; + this.label.style.color = '#860404'; + this.input.style.borderBottomColor = '#860404'; + }; + + clearError() { + this.label.innerText = this.labelText; + this.label.style.color = ''; + this.input.style.borderBottomColor = ''; + }; +} + +const nameField = new Field(name, nameLabel, nameLabelText, 'Please, fill your name*'); +const emailField = new Field(email, emailLabel, emailLabelText, 'Please, fill your email*'); +const phoneField = new Field(phone, phoneLabel, phoneLabelText, 'Please, fill your phone*'); + +const createHandlers = (field) => { + field.input.addEventListener('blur', (e) => { + if (!e.target.value.trim()) { + field.setError(field.msg); + } + }); + + field.input.addEventListener('input', () => { + field.clearError(); + }); +} + +createHandlers(nameField); +createHandlers(emailField); +createHandlers(phoneField); 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/block/about.scss b/src/styles/block/about.scss new file mode 100644 index 00000000..978434bb --- /dev/null +++ b/src/styles/block/about.scss @@ -0,0 +1,216 @@ +.about { + background: $background-gradient; + background-repeat: no-repeat; + + @include section-padding-block; + + &__content { + display: grid; + row-gap: 100px; + + @include tablet { + row-gap: 80px; + } + } + + &__block { + @include grid-markup; + } + + &__headline { + margin-bottom: 20px; + grid-column: 1/-1; + + @include tablet { + margin-bottom: 32px; + } + + &--first { + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &--second { + position: relative; + + @include tablet { + padding-top: 50px; + grid-column: span 4; + } + + @include desktop { + grid-column: span 5; + margin-bottom: 0; + } + + &::before { + content: 'Hello,'; + margin: 0; + padding: 0; + font-size: 14px; + line-height: 120%; + font-weight: 400; + color: $contrast-color; + text-transform: capitalize; + position: absolute; + top: -25px; + + @include tablet { + top: 20px; + } + } + } + } + + &__img-wrapper { + height: 190px; + width: 100%; + overflow: hidden; + + @include tablet { + height: 270px; + } + } + + &__img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__slider { + padding-bottom: 18px; + margin-bottom: 20px; + grid-column: 1/-1; + width: 100%; + + @include tablet { + grid-area: span 4 / span 3; + order: -1; + margin-bottom: 15px; + } + + @include desktop { + grid-area: 1 / 3 / 4 / 8; + position: relative; + } + } + + &__slider-navigation-wrapper { + margin-top: 20px; + display: none; + + @include desktop { + display: flex; + } + } + + &__swiper-scrollbar { + position: unset !important; + display: block; + background-color: #212121; + height: 2px !important; + } + + &__swiper-scrollbar-drag { + background-color: $contrast-color; + height: 1px; + } + + &__slider-pagination--fraction { + position: absolute; + top: -2%; + left: -10%; + } + + &__swiper-pagination--bullet { + bottom: 0 !important; + display: flex; + justify-content: center; + gap: 6px; + position: unset; + padding-top: 15px; + } + + &__swiper-pagination-bullet { + width: 4px; + height: 4px; + display: block; + border-radius: 50%; + background-color: #484848; + } + + &__swiper-pagination-bullet-active { + background-color: #ababab; + } + + &__description { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + + &--first { + margin-bottom: 40px; + + @include tablet { + grid-column: span 3; + margin-bottom: 20px; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &--second { + @include tablet { + grid-column: span 4; + padding-bottom: 25px; + } + + @include desktop { + grid-column: span 5; + margin-top: 32px; + padding-bottom: 40px; + } + } + } + + &__button-play-video { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + margin-bottom: 0; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &__hello { + margin-bottom: 11px; + grid-column: 1/5; + } + + &__background { + @include tablet { + grid-area: span 3 / span 2; + background-image: url(../images/about/about-background-img.svg); + background-repeat: no-repeat; + background-size: cover; + } + + @include desktop { + grid-column: 7/-1; + } + } +} diff --git a/src/styles/block/accordion.scss b/src/styles/block/accordion.scss new file mode 100644 index 00000000..cf83c7f1 --- /dev/null +++ b/src/styles/block/accordion.scss @@ -0,0 +1,55 @@ +.accordion { + width: 100%; + padding: 12px 20px; + border-radius: 4px; + border: 1px solid $contrast-color; + box-sizing: border-box; + cursor: pointer; + + &__content { + max-height: 0; + overflow: hidden; + transition: $effectDuration; + } + + &--open &__content { + max-height: 1000px; + } + + &__title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__title { + color: $contrast-color; + } + + &__arrow { + height: 9px; + width: 6px; + background-size: cover; + background-position: center; + background-image: url(../images/icon/icon-arrow.svg); + transition: $effectDuration; + display: none; + + @include tablet { + display: block; + } + } + + &--open &__arrow { + transform: rotate(90deg); + } + + &__text { + margin: 18px 0 24px; + } + + &__date { + color: #545454; + line-height: 150%; + } +} diff --git a/src/styles/block/benefit.scss b/src/styles/block/benefit.scss new file mode 100644 index 00000000..f2dbed86 --- /dev/null +++ b/src/styles/block/benefit.scss @@ -0,0 +1,14 @@ +.benefit { + @include section-item-style; + @include hover(transform, scale(1), '.benefit__headline::after'); + + &__headline { + @include tablet { + min-height: 38px; + } + + @include desktop { + min-height: unset; + } + } +} diff --git a/src/styles/block/benefits.scss b/src/styles/block/benefits.scss new file mode 100644 index 00000000..84c3eee4 --- /dev/null +++ b/src/styles/block/benefits.scss @@ -0,0 +1,33 @@ +.benefits { + @include section-padding-block; + + background: $background-gradient; + background-repeat: no-repeat; + + &__headline { + margin-bottom: 32px; + + @include desktop { + margin-bottom: 84px; + text-align: center; + } + } + + &__items { + @include grid-markup; + + row-gap: 20px; + } + + &__benefit { + grid-column: 1/-1; + + @include tablet { + grid-column: span 2; + } + + @include desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/block/button-play-video.scss b/src/styles/block/button-play-video.scss new file mode 100644 index 00000000..f6a39d22 --- /dev/null +++ b/src/styles/block/button-play-video.scss @@ -0,0 +1,40 @@ +.button-play-video { + background-image: url(../images/play-video/btn-play-video.svg); + display: flex; + height: 66px; + background-repeat: no-repeat; + text-decoration: none; + cursor: pointer; + align-items: center; + gap: 45px; + padding-left: 7px; + width: 236px; + + @include hover(opacity, 0, '.button-play-video__arrow'); + @include hover(opacity, 1, '.button-play-video__arrow--hover'); + + &__arrow-wrapper { + position: relative; + } + + &__arrow { + display: flex; + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(../images/play-video/arrow-play-video.svg); + background-position: center; + background-repeat: no-repeat; + border: 1px solid $contrast-color; + background-position-x: 55%; + background-size: 19px; + + &--static { + background-image: url(../images/play-video/arrow-play-video.svg); + } + + &--hover { + @include accent(url(../images/play-video/arrow-play-video-hover.svg)); + } + } +} diff --git a/src/styles/block/button.scss b/src/styles/block/button.scss new file mode 100644 index 00000000..86cd3761 --- /dev/null +++ b/src/styles/block/button.scss @@ -0,0 +1,17 @@ +.button { + text-align: center; + background-color: $contrast-color; + border: none; + border-radius: 4px; + line-height: 40px; + text-decoration: none; + justify-content: center; + cursor: pointer; + + &--form { + line-height: 48px; + } + + @include hover(background-color, #fff); + @include hover(color, $contrast-color); +} diff --git a/src/styles/block/contact.scss b/src/styles/block/contact.scss new file mode 100644 index 00000000..4cddce52 --- /dev/null +++ b/src/styles/block/contact.scss @@ -0,0 +1,95 @@ +.contact { + background: $background-black; + + @include section-padding-block; + + &__content { + @include grid-markup; + + position: relative; + } + + &__label { + margin-bottom: 11px; + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + } + } + + &__headline { + margin-bottom: 32px; + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + margin-bottom: 50px; + } + + @include desktop { + grid-column: 1/7; + margin-bottom: 26px; + } + } + + &__form { + grid-column: 1/-1; + + @include tablet { + grid-area: span 4 / 4 / auto / -1; + } + + @include desktop { + grid-column: 7/-1; + } + } + + &__scroll-up-link { + position: absolute; + bottom: 0; + right: 0; + } + + &__icon-wrapper { + width: 48px; + height: 48px; + border: 1px solid $contrast-color; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + + @include hover(background-color, $contrast-color); + } + + &__description { + grid-column: 1/-1; + margin-top: 30px; + color: $text-color; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 6; + margin-top: 0; + } + } + + &__contacts { + display: none; + + @include tablet { + grid-column: 1/4; + display: flex; + margin-top: 76px; + } + } +} diff --git a/src/styles/block/contacts.scss b/src/styles/block/contacts.scss new file mode 100644 index 00000000..32643d51 --- /dev/null +++ b/src/styles/block/contacts.scss @@ -0,0 +1,34 @@ +.contacts { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + + &--help { + gap: 25px; + } + } + + &__contact { + font-size: 13px; + line-height: 130%; + font-weight: 400; + color: $text-color; + text-decoration: none; + + @include hover(color, #fff); + + &--help { + font-size: 16px; + line-height: 120%; + } + + &--contact { + font-size: 14px; + line-height: 120%; + } + } +} diff --git a/src/styles/block/dropdown.scss b/src/styles/block/dropdown.scss new file mode 100644 index 00000000..f9e1ad39 --- /dev/null +++ b/src/styles/block/dropdown.scss @@ -0,0 +1,72 @@ +.dropdown { + position: relative; + width: 45px; + + &__content { + background-color: #191536; + border-radius: 4px; + position: absolute; + width: 100%; + transition: $effectDuration; + top: 40px; + left: 5px; + padding: 10px 0; + box-sizing: border-box; + pointer-events: none; + border-right: 1px solid #014954; + overflow: hidden; + transform: translateY(-5%); + transform-origin: top center; + opacity: 0; + } + + &--active &__content { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + &__btn { + margin: 0; + padding: 0; + color: $contrast-color; + background-color: unset; + border: none; + cursor: pointer; + height: 100%; + width: 100%; + background-image: url(../images/icon/icon-more-arrow.svg); + background-position: right 60%; + background-repeat: no-repeat; + + @include hover(color, #fff); + @include hover( + background-image, + url(../images/icon/icon-more-arrow-hover.svg) + ); + } + + &--active &__btn { + color: #fff; + background-image: url(../images/icon/icon-more-arrow-hover.svg); + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + } + + &__item { + color: $contrast-color; + text-decoration: none; + display: block; + cursor: pointer; + + @include hover(color, #fff); + } +} diff --git a/src/styles/block/faq.scss b/src/styles/block/faq.scss new file mode 100644 index 00000000..8d7d3c63 --- /dev/null +++ b/src/styles/block/faq.scss @@ -0,0 +1,48 @@ +.faq { + @include aside-style; + + @include desktop { + display: flex; + align-items: center; + + @include grid-markup; + } + + &__container { + padding-bottom: 12px; + + @include tablet { + padding-bottom: 240px; + } + + @include desktop { + grid-column: 3/-3; + padding-bottom: 50px; + } + } + + &__top { + justify-content: right; + + @include aside-top-style; + } + + &__headline { + margin-bottom: 30px; + } + + &__articles { + display: flex; + flex-direction: column; + gap: 13px; + } + + &__more-button { + margin-top: 50px; + display: none; + + @include tablet { + display: flex; + } + } +} diff --git a/src/styles/block/footer.scss b/src/styles/block/footer.scss new file mode 100644 index 00000000..2ee22632 --- /dev/null +++ b/src/styles/block/footer.scss @@ -0,0 +1,59 @@ +.footer { + background-color: #000; + padding-block: 50px; + + @include tablet { + padding-block: 25px; + } + + @include desktop { + padding-block: 40px; + } + + &__content { + @include grid-markup; + + row-gap: 22px; + + @include tablet { + display: flex; + align-items: center; + justify-content: space-between; + } + } + + &__logo-link { + height: 14px; + width: 69px; + display: flex; + align-items: center; + grid-column: 1/-1; + + @include desktop { + height: 14px; + width: 72px; + } + } + + &__logo { + width: 100%; + height: 100%; + } + + &__nav { + grid-area: span 2 / span 1; + display: flex; + } + + &__contacts { + grid-area: span 1 / span 1; + + @include tablet { + display: none; + } + } + + &__socials { + grid-area: span 1 / span 1; + } +} diff --git a/src/styles/block/form.scss b/src/styles/block/form.scss new file mode 100644 index 00000000..b957dda2 --- /dev/null +++ b/src/styles/block/form.scss @@ -0,0 +1,63 @@ +.form { + &__fields { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__label { + transition: $effectDuration; + color: $text-color; + } + + &__input { + @include form-styles; + @include autofill; + + &:disabled { + cursor: not-allowed; + } + } + + &__textarea { + @include form-styles; + @include autofill; + + resize: none; + + &:disabled { + cursor: not-allowed; + } + } + + &__field { + display: flex; + flex-direction: column; + gap: 4px; + + &:focus-within .form__label { + color: $contrast-color; + } + + &:focus-within .form__input { + border-bottom-color: $contrast-color; + } + + &:focus-within .form__textarea { + border-bottom-color: $contrast-color; + } + } + + &__submit-btn { + margin-top: 30px; + + @include tablet { + width: 200px; + margin-top: 48px; + } + + @include desktop { + margin-top: 90px; + } + } +} diff --git a/src/styles/block/header.scss b/src/styles/block/header.scss new file mode 100644 index 00000000..a9e7daf2 --- /dev/null +++ b/src/styles/block/header.scss @@ -0,0 +1,260 @@ +.header { + background: $background-gradient; + background-repeat: no-repeat; + + @include desktop { + padding-bottom: 85px; + } + + &__top { + display: flex; + height: 48px; + align-items: center; + justify-content: space-between; + + @include tablet { + height: 74px; + } + + @include desktop { + height: 144px; + } + } + + &__top-right, + &__top-left { + display: flex; + align-items: center; + gap: 35px; + } + + &__logo { + height: 12px; + width: 58px; + display: flex; + align-items: center; + + @include tablet { + height: 14px; + width: 67px; + } + + @include desktop { + height: 16px; + width: 78px; + } + } + + &__dropdown { + display: none; + height: 40px; + align-items: center; + flex-direction: column; + + @include desktop { + display: flex; + } + } + + &__nav { + display: none; + height: 40px; + + @include desktop { + display: flex; + align-items: center; + height: 40px; + } + } + + &__button-top { + display: none; + + @include desktop { + display: flex; + width: 200px; + } + } + + &__center-wrapper { + background-image: url(../images/header/header-img.png); + background-repeat: no-repeat; + background-size: 100%; + + @include tablet { + background-image: url(../images/header/header-img-tablet.png); + background-position: center right; + background-size: 64%; + } + + @include desktop { + background-image: unset; + } + } + + &__center { + @include desktop { + @include grid-markup; + + padding-bottom: 10%; + } + } + + &__center-left { + @include grid-markup; + + padding-top: 60%; + + @include tablet { + padding-block: 25px; + } + + @include desktop { + padding: 0; + grid-column: span 6; + } + } + + &__img-wrapper { + height: 54%; + width: 100%; + overflow: hidden; + } + + &__img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__center-right { + grid-column: span 6; + } + + &__headline { + grid-column: 1/-1; + margin-bottom: 17px; + + @include tablet { + grid-column: 1/4; + } + + @include desktop { + grid-column: span 12; + margin-bottom: 20px; + } + } + + &__description-price-wrapper { + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + } + + @include desktop { + grid-column: 2/10; + } + } + + &__description { + grid-column: 1/-1; + + margin-bottom: 8px; + + @include tablet { + grid-column: 1/4; + margin-bottom: 18px; + } + } + + &__price { + grid-column: 1/-1; + + text-align: center; + margin-bottom: 16px; + + @include tablet { + text-align: start; + margin-bottom: 24px; + } + } + + &__button { + grid-column: 1/-1; + transform: translateY(50%); + display: flex; + + @include tablet { + grid-column: 2/-2; + transform: translateY(0); + margin-top: 25px; + } + + @include desktop { + display: none; + } + } + + &__button-play-video { + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + } + } + + &__slide-img-wrapper { + height: 320px; + width: 100%; + overflow: hidden; + } + + &__slide-img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__bottom-wrapper { + display: none; + justify-content: space-between; + height: 40px; + + @include desktop { + display: flex; + } + } + + &__bottom-left { + display: flex; + gap: 40px; + } + + &__faq, + &__help { + text-decoration: none; + + @include hover(color, $contrast-color); + } + + &__slider { + display: none; + + @include desktop { + display: block; + } + } + + &__swiper-scrollbar { + position: unset !important; + display: block; + background-color: #212121; + height: 2px !important; + } + + &__swiper-scrollbar-drag { + background-color: $contrast-color; + height: 1px; + } +} diff --git a/src/styles/block/help.scss b/src/styles/block/help.scss new file mode 100644 index 00000000..e260dee9 --- /dev/null +++ b/src/styles/block/help.scss @@ -0,0 +1,84 @@ +.help { + @include aside-style; + + @include desktop { + display: flex; + align-items: center; + + @include grid-markup; + } + + &__container { + @include tablet { + padding-bottom: 124px; + } + + @include desktop { + grid-column: 3/-3; + padding-bottom: 80px; + } + } + + &__top { + justify-content: right; + + @include aside-top-style; + } + + &__headline { + margin-bottom: 30px; + + @include desktop { + margin-bottom: 60px; + } + } + + &__description { + &--contact-us { + margin-top: 25px; + + @include tablet { + margin: 28px 0 30px; + } + } + } + + &__description-link { + color: $contrast-color; + text-decoration: none; + + @include hover(color, #fff); + } + + &__bottom { + @include tablet { + @include grid-markup; + } + } + + &__links { + margin-top: 32px; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 5; + } + } + + &__contacts { + margin-top: 30px; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 5; + } + } +} diff --git a/src/styles/block/hero-item.scss b/src/styles/block/hero-item.scss new file mode 100644 index 00000000..2d32a326 --- /dev/null +++ b/src/styles/block/hero-item.scss @@ -0,0 +1,4 @@ +.hero-item { + @include section-item-style; + @include hover(transform, scale(1), '.hero-item__headline::after'); +} diff --git a/src/styles/block/hero.scss b/src/styles/block/hero.scss new file mode 100644 index 00000000..8a31ff65 --- /dev/null +++ b/src/styles/block/hero.scss @@ -0,0 +1,44 @@ +.hero { + background: $background-black; + + @include section-padding-block; + + &__headline { + margin-bottom: 12px; + + @include tablet { + text-align: center; + } + } + + &__subtitle { + margin-bottom: 45px; + + @include tablet { + text-align: center; + margin-bottom: 55px; + } + + @include desktop { + margin-bottom: 83px; + } + } + + &__items { + @include grid-markup; + + row-gap: 20px; + + @include tablet { + row-gap: 40px; + } + } + + &__item { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + } +} diff --git a/src/styles/block/icon.scss b/src/styles/block/icon.scss new file mode 100644 index 00000000..4e0bdf72 --- /dev/null +++ b/src/styles/block/icon.scss @@ -0,0 +1,102 @@ +.icon { + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + &__wrapper { + position: relative; + + @include hover(opacity, 0, '.icon--static'); + @include hover(opacity, 1, '.icon--hover'); + } + + &--menu { + height: 20px; + width: 20px; + background-image: url(../images/icon/icon-menu.svg); + + @include tablet { + height: 30px; + width: 30px; + } + + @include desktop { + display: none; + } + } + + &--menu-hover { + @include accent(url(../images/icon/icon-menu-hover.svg)); + } + + &--close { + height: 17px; + width: 17px; + background-image: url(../images/icon/icon-close.svg); + } + + &--close-hover { + @include accent(url(../images/icon/icon-close-hover.svg)); + } + + &--language-close { + height: 17px; + width: 17px; + background-image: url(../images/icon/icon-language-close.svg); + } + + &--language-close-hover { + @include accent(url(../images/icon/icon-language-close-hover.svg)); + } + + &--social { + height: 15px; + width: 15px; + } + + &--facebook { + background-image: url(../images/icon/icon-facebook.svg); + } + + &--facebook-hover { + @include accent(url(../images/icon/icon-facebook-hover.svg)); + } + + &--twitter { + background-image: url(../images/icon/icon-twitter.svg); + } + + &--twitter-hover { + @include accent(url(../images/icon/icon-twitter-hover.svg)); + } + + &--youtube { + background-image: url(../images/icon/icon-youtube.svg); + } + + &--youtube-hover { + @include accent(url(../images/icon/icon-youtube-hover.svg)); + } + + &--reddit { + background-image: url(../images/icon/icon-reddit.svg); + } + + &--reddit-hover { + @include accent(url(../images/icon/icon-reddit-hover.svg)); + } + + &--scroll-up { + height: 9px; + width: 16px; + background-image: url(../images/icon/icon-scroll-up.svg); + } + + &--scroll-up-hover { + @include accent(url(../images/icon/icon-scroll-up-hover.svg)); + + top: unset; + } +} diff --git a/src/styles/block/language.scss b/src/styles/block/language.scss new file mode 100644 index 00000000..81faaccd --- /dev/null +++ b/src/styles/block/language.scss @@ -0,0 +1,42 @@ +.language { + @include aside-style; + + &__container { + @include tablet { + padding-bottom: 80px; + } + } + + &__top { + @include aside-top-style; + } + + &__center { + display: flex; + flex-direction: column; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + color: #fff; + height: 100%; + } + + &__item { + height: 100%; + } + + &__link { + display: flex; + align-items: center; + box-sizing: border-box; + height: 100%; + + @include aside-link-style; + @include hover(color, $contrast-color); + } +} diff --git a/src/styles/block/links.scss b/src/styles/block/links.scss new file mode 100644 index 00000000..2d9cb155 --- /dev/null +++ b/src/styles/block/links.scss @@ -0,0 +1,20 @@ +.links { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + font-size: 16px; + line-height: 150%; + font-weight: 400; + color: $contrast-color; + text-decoration: none; + + @include hover(color, #fff); + } +} diff --git a/src/styles/block/menu.scss b/src/styles/block/menu.scss new file mode 100644 index 00000000..fa16bacb --- /dev/null +++ b/src/styles/block/menu.scss @@ -0,0 +1,30 @@ +.menu { + @include aside-style; + + &__container { + @include tablet { + padding-bottom: 140px; + } + } + + &__top { + @include aside-top-style; + + justify-content: right; + } + + &__center { + display: flex; + flex-direction: column; + } + + &__nav { + margin-top: 18px; + } + + &__language, + &__faq, + &__help { + @include aside-link-style; + } +} diff --git a/src/styles/block/more-button.scss b/src/styles/block/more-button.scss new file mode 100644 index 00000000..887013dc --- /dev/null +++ b/src/styles/block/more-button.scss @@ -0,0 +1,36 @@ +.more-button { + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; + text-decoration: none; + cursor: pointer; + + @include hover(color, #fff, '.more-button__text'); + @include hover(opacity, 0, '.more-button__arrow--static'); + @include hover(opacity, 1, '.more-button__arrow--hover'); + + &__text { + color: $contrast-color; + } + + &__arrow-wrapper { + position: relative; + } + + &__arrow { + display: block; + height: 6px; + width: 9px; + background-size: cover; + background-position: center; + + &--static { + background-image: url(../images/icon/icon-more-arrow.svg); + } + + &--hover { + @include accent(url(../images/icon/icon-more-arrow-hover.svg)); + } + } +} diff --git a/src/styles/block/nav.scss b/src/styles/block/nav.scss new file mode 100644 index 00000000..281cee92 --- /dev/null +++ b/src/styles/block/nav.scss @@ -0,0 +1,52 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + color: #fff; + height: 100%; + + @include desktop { + flex-direction: row; + align-items: center; + } + + &--header { + @include desktop { + gap: 36px; + } + } + + &--footer { + gap: 15px; + + @include tablet { + flex-direction: row; + gap: 43px; + } + } + } + + &__item { + height: 100%; + } + + &__link { + display: flex; + align-items: center; + box-sizing: border-box; + height: 100%; + + @include hover(color, $contrast-color); + + &--menu { + @include aside-link-style; + + @include desktop { + padding-inline: 0; + } + } + } +} diff --git a/src/styles/block/page.scss b/src/styles/block/page.scss new file mode 100644 index 00000000..eacacf7f --- /dev/null +++ b/src/styles/block/page.scss @@ -0,0 +1,31 @@ +.page { + font-family: $font-inter; + color: $text-color; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + + &--no-scroll { + overflow: hidden; + height: 100vh; + } + } + + &__container { + @include container; + } + + &__mobile-hidden { + display: none; + + @include tablet { + display: block; + } + } +} diff --git a/src/styles/block/slider.scss b/src/styles/block/slider.scss new file mode 100644 index 00000000..8f9070be --- /dev/null +++ b/src/styles/block/slider.scss @@ -0,0 +1,21 @@ +.slider { + &__navigation-wrapper { + display: flex; + flex-direction: column; + gap: 15px; + width: 207px; + } + + &__navigation { + display: flex; + justify-content: space-between; + width: 207px; + + &--prev, + &--next { + cursor: pointer; + + @include hover(color, $contrast-color); + } + } +} diff --git a/src/styles/block/socials.scss b/src/styles/block/socials.scss new file mode 100644 index 00000000..506adf94 --- /dev/null +++ b/src/styles/block/socials.scss @@ -0,0 +1,14 @@ +.socials { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + + @include tablet { + gap: 18px; + } + } +} diff --git a/src/styles/block/tech.scss b/src/styles/block/tech.scss new file mode 100644 index 00000000..05a7e5d5 --- /dev/null +++ b/src/styles/block/tech.scss @@ -0,0 +1,203 @@ +.tech { + background: $background-black; + + @include section-padding-block; + + &__headline { + margin-bottom: 45px; + + @include tablet { + margin-bottom: 60px; + } + + @include desktop { + text-align: right; + } + } + + &__specs { + position: relative; + + @include desktop { + background-image: url('../images/tech/tech-img-decktop.png'); + background-repeat: no-repeat; + background-size: contain; + background-position: 32% bottom; + padding-bottom: 15px; + box-sizing: border-box; + + @include grid-markup; + } + } + + &__spec { + &--sensor { + @include desktop { + grid-column: 1/4; + } + } + + &--connection { + @include desktop { + grid-column: 2/5; + } + } + + &--batterries { + @include desktop { + grid-column: 10/-1; + grid-row: 2/-1; + } + } + } + + &__spec-button { + position: absolute; + width: 12%; + height: 17%; + cursor: pointer; + background-color: $contrast-color; + border: 2px solid rgba(255, 255, 255, 0.14); + border-radius: 50%; + box-sizing: border-box; + z-index: 3; + transition: opacity $effectDuration ease; + + @include tablet { + width: 9%; + height: 18%; + } + + @include desktop { + display: none; + } + + &--active { + background-color: #07798b; + } + + &::before, + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 41%; + transition: opacity $effectDuration ease; + } + + &::before { + background-image: url('../images/tech/tech-plus.svg'); + opacity: 1; + } + + &::after { + background-image: url('../images/tech/tech-minus.svg'); + opacity: 0; + } + + &--active::before { + opacity: 0; + } + + &--active::after { + opacity: 1; + } + + &--sensor { + top: -5%; + left: 36%; + } + + &--connection { + top: 78%; + left: 10%; + } + + &--batterries { + top: 40%; + left: 62%; + } + } + + &__spec-info { + position: absolute; + background-color: #191536; + padding: 17px 10px; + border-radius: 4px; + opacity: 0; + visibility: hidden; + transition: $effectDuration; + z-index: 2; + width: 51%; + max-width: 240px; + + @include desktop { + opacity: 1; + visibility: visible; + background-color: unset; + position: unset; + width: 100%; + padding: 0; + } + + &--sensor { + top: 14%; + left: 13%; + } + + &--connection { + bottom: 24%; + left: 11%; + } + + &--batterries { + right: 39%; + bottom: 13%; + } + + &--show { + opacity: 1; + visibility: visible; + z-index: 4; + } + } + + &__spec-heading { + display: none; + + @include desktop { + display: block; + margin-bottom: 21px; + } + } + + &__spec-list { + list-style: none; + color: #929292; + line-height: 150%; + } + + &__img-wrapper { + width: 70%; + overflow: hidden; + margin-inline: auto; + position: relative; + + @include tablet { + width: 51%; + } + + @include desktop { + display: none; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..26f6672f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,28 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'block/page'; +@import 'block/header'; +@import 'block/dropdown'; +@import 'block/icon'; +@import 'block/button'; +@import 'block/slider'; +@import 'block/more-button'; +@import 'block/menu'; +@import 'block/nav'; +@import 'block/language'; +@import 'block/faq'; +@import 'block/accordion'; +@import 'block/help'; +@import 'block/links'; +@import 'block/hero'; +@import 'block/hero-item'; +@import 'block/about'; +@import 'block/tech'; +@import 'block/benefits'; +@import 'block/benefit'; +@import 'block/button-play-video'; +@import 'block/contact'; +@import 'block/form'; +@import 'block/footer'; +@import 'block/contacts'; +@import 'block/socials'; diff --git a/src/styles/typography.scss b/src/styles/typography.scss new file mode 100644 index 00000000..ecb9a4ff --- /dev/null +++ b/src/styles/typography.scss @@ -0,0 +1,153 @@ +.headline-1 { + margin: 0; + padding: 0; + font-size: 26px; + line-height: 130%; + font-weight: 900; + color: #fff; + text-transform: uppercase; + + @include desktop { + font-size: 46px; + line-height: 130%; + } + + &--subtitle { + margin: 0; + padding: 0; + font-weight: 400; + color: $contrast-color; + } +} + +.headline-2 { + margin: 0; + padding: 0; + font-size: 21px; + line-height: 130%; + font-weight: 900; + color: #fff; + text-transform: uppercase; + + @include desktop { + font-size: 36px; + line-height: 130%; + } + + &--subtitle { + font-weight: 400; + color: $contrast-color; + } +} + +.headline-3 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 120%; + font-weight: 900; + color: #fff; + text-transform: uppercase; +} + +.headline-4 { + margin: 0; + padding: 0; + font-size: 18px; + line-height: 120%; + font-weight: 900; + color: #fff; + text-transform: uppercase; +} + +.text-1 { + margin: 0; + padding: 0; + font-size: 18px; + line-height: 120%; + font-weight: 500; + color: #fff; +} + +.text-2 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 150%; + font-weight: 500; +} + +.text-3 { + margin: 0; + padding: 0; + font-size: 12px; + line-height: 120%; + font-weight: 400; + color: $contrast-color; + + @include tablet { + font-size: 14px; + line-height: 120%; + } + + @include desktop { + font-size: 16px; + line-height: 150%; + } +} + +.text-4 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 150%; + font-weight: 400; +} + +.text-5 { + margin: 0; + padding: 0; + font-size: 14px; + line-height: 150%; + font-weight: 400; +} + +.text-buttons { + margin: 0; + padding: 0; + font-size: 14px; + line-height: 130%; + font-weight: 500; + color: #fff; + + @include desktop { + font-size: 16px; + line-height: 150%; + } +} + +.text-links { + margin: 0; + padding: 0; + font-size: 21px; + line-height: 130%; + font-weight: 500; + color: #fff; + text-decoration: none; + + @include desktop { + font-size: 16px; + line-height: 130%; + } + + &--footer { + font-weight: 400; + font-size: 13px; + line-height: 150%; + + @include desktop { + font-size: 14px; + line-height: 130%; + } + } +} diff --git a/src/styles/_utils.scss b/src/styles/utils.scss similarity index 64% rename from src/styles/_utils.scss rename to src/styles/utils.scss index 3280c3fe..f1078dce 100644 --- a/src/styles/_utils.scss +++ b/src/styles/utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; 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..56d02b92 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,229 @@ +@mixin tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin container() { + padding-inline: 20px; + margin: 0 auto; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 110px; + max-width: 1452px; + } +} + +@mixin grid-markup { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include tablet { + --columns: 6; + } + + @include desktop { + --columns: 12; + } +} + +@mixin section-padding-block { + padding-block: 50px; + + @include tablet { + padding-block: 70px; + } + + @include desktop { + padding-block: 100px; + } +} + +@mixin section-item-style { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + + &__headline { + margin-bottom: 11px; + position: relative; + align-self: center; + + &::after { + content: ''; + background-color: #fff; + width: 100%; + height: 3px; + transition: transform 0.3s; + display: block; + position: absolute; + bottom: -8px; + transform-origin: 0; + transform: scale(0); + } + + @include tablet { + margin-bottom: 20px; + text-align: center; + } + } + + &__img-wrapper { + width: 80px; + height: 80px; + display: none; + + @include tablet { + display: block; + margin-bottom: 25px; + } + } + + &__img { + width: 100%; + height: 100%; + object-position: center; + } + + &__description { + @include tablet { + text-align: center; + } + } +} + +@mixin aside-style { + background-color: #000000b3; + position: fixed; + inset: 0; + opacity: 0; + transform: translateX(-100%); + transition: $effectDuration ease-in-out; + z-index: 10; + box-sizing: border-box; + overflow-y: scroll; + + &--open { + transform: translateX(0); + opacity: 1; + visibility: visible; + } + + &__container { + background-color: $background-dark-blue; + min-height: 100vh; + + @include tablet { + min-height: auto; + } + } +} + +@mixin aside-top-style { + display: flex; + align-items: center; + padding: 20px 20px 32px; + + @include tablet { + padding: 34px 34px 32px 46px; + } + + @include desktop { + padding: 20px 20px 25px; + } +} + +@mixin aside-link-style { + display: flex; + align-items: center; + padding-inline: 20px; + height: 49px; + box-sizing: border-box; + + @include tablet { + padding-inline: 150; + } + + &:hover { + background-color: #110e25; + color: $contrast-color; + } +} + +@mixin hover($property, $toValue, $element: false) { + @if $element { + #{$element} { + transition: #{$property} $effectDuration; + } + &:hover #{$element} { + #{$property}: $toValue; + } + } @else { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } + } +} + +@mixin pressed($property, $toValue, $element: false) { + @if $element { + #{$element} { + transition: #{$property} 0.3s; + } + &:active #{$element} { + #{$property}: $toValue; + } + } @else { + transition: #{$property} 0.3s; + &:active { + #{$property}: $toValue; + } + } +} + +@mixin accent($bg-image) { + position: absolute; + top: 0; + background-image: $bg-image; + opacity: 0; +} + +@mixin autofill { + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } +} + +@mixin form-styles { + color: #fff; + background-color: #05040b; + border: none; + outline: none; + border-bottom: 1px solid $text-color; + padding-bottom: 6px; + transition: $effectDuration; + + &:focus-visible { + outline: none; + color: #fff; + border-bottom: 1px solid $text-color; + background-color: transparent; + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 00000000..fa105e64 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,10 @@ +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$font-inter: 'Inter', sans-serif; +$background-gradient: linear-gradient(90deg, #191536, #000); +$background-black: #05040b; +$background-dark-blue: #191536; +$contrast-color: #05c2df; +$dark-grey: #2f2f2f; +$text-color: #929292; +$effectDuration: 0.3s;