diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 302783df5..16925cfd9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_KateVR/). + [DEMO LINK](https://notbelievable.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..3fc755e54 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,789 @@ - + - Title + KateVR + + + + - -

Hello Mate Academy

- + +
+ + logo-img + + +
+ En + +
+ + Buy Now + + + +
+ +
+
+
+
+ hero-img + hero-img + hero-img +
+
+ +
+

THE NEW START OF
+ + VR LOCOMOTION + +

+

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

+ 1200$ + + video-icon + + Buy Now +
+ +
+
+ FAQ + Help +
+ +
+ More +
+ +
+ Previous + Next +
+
+
+ +
+
+

MORE THAN + GAMING! +

+

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

+
+ +
+ gaming-img +

EDUCATION

+

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

+
+ +
+ gaming-img +

REAL ESTATE

+

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

+
+ +
+ gaming-img +

FITNESS

+

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

+
+ +
+ gaming-img +

SOCIAL INTERACTIONS

+

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

+
+ + Buy Now +
+
+ +
+
+

ABOUT + PRODUCT +

+ +
+
+
+ slider-img +
+
+ slider-img +
+
+ slider-img +
+
+ slider-img +
+
+ slider-img +
+
+ +
+ + + + + +
+ +
+ + +
+
+ +

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

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

+
+ about-img + about-img + about-img + about-img +
+
+ +
+ +
+

TECH + SPECS +

+ + tech-img + + tech-img + +
+ +
+

WHY + KAT LOCO? +

+ +
+
+ why-img +

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 +

+
+
+ why-img +

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

+
+
+ why-img +

WIRELESS SENSORS

+

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

+
+
+ + Buy Now +
+ +
+
+

Have any questions?

+

GET IN + TOUCH +

+
+ +
+ + + + + + + + + + + up-img + +
+ + +
+

+ Our manager will reply you within 15 minutes +

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

FREQUENTLY ASKED QUESTIONS

+ +
+

+ What makes KAT loco different from other systems? +

+

+ Despite being approached from many different angles, + all traditional VR Locomotion systems including roomscale, + teleportation, and free locomotion failed to provide + an optimal solution capable of integrating high immersion + with convenience. KAT loco does all of that without + repeating their flaws. Our system offers a complete + and versatile solution for an affordable price what + makes it a perfect choice for home-use. It is also + 100% user friendly, wireless, universally compatible, + and more! It even offers decoupled head and body + directions! +

+

Last updated: Wed, June 12 2019 7:07 PM UTC +03:00

+
+ +
+ Will it decrease my motion sickness? +
+
+ Which VR headsets is it compatible with? +
+
+ Is it compatible with Oculus Quest? +
+
+ +
+ More +
+
+ +
+
+ + +
+ +
+

HOW CAN WE HELP YOU?

+

+ Welcome to our help center. Our goal is to make + the process of getting acquainted and purchase + as easy and pleasant as possible. Need help with your + KAT VR loco product? Many product questions can be + resolved by reviewing our Product Support FAQs.

+ Please also feel free to Contact Us directly should + you need anything further. We’re happy to help. +

+ +
+ +
+ +
+
+
+
+ +
+
+ + logo-img + + +
    +
  • Place Order
    • +
  • Pay
    • +
  • Order Complete
    • +
+ + +
+ +
    +
  • Place Order
    • +
  • Pay
    • +
  • Order Complete
    • +
+ +
+ buy-now--img +
+ +
+
+ + +
+ Price + 1200$ +
+
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ Price + 1200$ +
+
+ +
+ + + + +
+ + + +
+
+ + + +
+ +
+
+

+ Thank you for + your + order! +

+

+ Your order has been placed and is being processed. + You will recive an email with the order details +

+ +
+
+
+ + diff --git a/package-lock.json b/package-lock.json index 87fcefd81..e0b0d490d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 7149ff15d..754178035 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 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 c9caaccd0..000000000 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 d5999d8ca..000000000 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 3b72bc1f8..000000000 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 b26c7892e..000000000 Binary files a/src/fonts/Quantum-400.otf and /dev/null differ diff --git a/src/images/34C1205D-2B3B-4207-9505-F8B53EEF704D.webp b/src/images/34C1205D-2B3B-4207-9505-F8B53EEF704D.webp new file mode 100644 index 000000000..4f26ccb7c Binary files /dev/null and b/src/images/34C1205D-2B3B-4207-9505-F8B53EEF704D.webp differ diff --git a/src/images/ABOUT US.png b/src/images/ABOUT US.png new file mode 100644 index 000000000..577ab1ba8 Binary files /dev/null and b/src/images/ABOUT US.png differ diff --git a/src/images/ABOUTUS-2.png b/src/images/ABOUTUS-2.png new file mode 100644 index 000000000..c681c53cc Binary files /dev/null and b/src/images/ABOUTUS-2.png differ diff --git a/src/images/ABOUTUS.png b/src/images/ABOUTUS.png new file mode 100644 index 000000000..36011ddc6 Binary files /dev/null and b/src/images/ABOUTUS.png differ diff --git a/src/images/ABOUTUS1.png b/src/images/ABOUTUS1.png new file mode 100644 index 000000000..d02c871c5 Binary files /dev/null and b/src/images/ABOUTUS1.png differ diff --git a/src/images/Group 4.png b/src/images/Group 4.png new file mode 100644 index 000000000..2a72a84c9 Binary files /dev/null and b/src/images/Group 4.png differ diff --git a/src/images/Group.png b/src/images/Group.png new file mode 100644 index 000000000..76271bf8e Binary files /dev/null and b/src/images/Group.png differ diff --git a/src/images/KatVR _FE students.zip b/src/images/KatVR _FE students.zip new file mode 100644 index 000000000..101829cdc Binary files /dev/null and b/src/images/KatVR _FE students.zip differ diff --git a/src/images/Kat_VR_Kat_Walk_C2-C2.jpg.webp b/src/images/Kat_VR_Kat_Walk_C2-C2.jpg.webp new file mode 100644 index 000000000..c96b02422 Binary files /dev/null and b/src/images/Kat_VR_Kat_Walk_C2-C2.jpg.webp differ diff --git a/src/images/Layer 1.1.png b/src/images/Layer 1.1.png new file mode 100644 index 000000000..f54e5fe50 Binary files /dev/null and b/src/images/Layer 1.1.png differ diff --git a/src/images/Logo.png b/src/images/Logo.png new file mode 100644 index 000000000..531128d03 Binary files /dev/null and b/src/images/Logo.png differ diff --git a/src/images/aasdc.png b/src/images/aasdc.png new file mode 100644 index 000000000..f0f66c9e0 Binary files /dev/null and b/src/images/aasdc.png differ diff --git a/src/images/acaac.png b/src/images/acaac.png new file mode 100644 index 000000000..d7c840f0d Binary files /dev/null and b/src/images/acaac.png differ diff --git a/src/images/acaca.png b/src/images/acaca.png new file mode 100644 index 000000000..5d1021d2c Binary files /dev/null and b/src/images/acaca.png differ diff --git a/src/images/asdas.png b/src/images/asdas.png new file mode 100644 index 000000000..f0c5647ee Binary files /dev/null and b/src/images/asdas.png differ diff --git a/src/images/back.png b/src/images/back.png new file mode 100644 index 000000000..eed250fb8 Binary files /dev/null and b/src/images/back.png differ diff --git a/src/images/button up.png b/src/images/button up.png new file mode 100644 index 000000000..e144d9aff Binary files /dev/null and b/src/images/button up.png differ diff --git a/src/images/c.png b/src/images/c.png new file mode 100644 index 000000000..10e7c61c1 Binary files /dev/null and b/src/images/c.png differ diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 000000000..b8810a0d3 Binary files /dev/null and b/src/images/close.png differ diff --git a/src/images/f.png b/src/images/f.png new file mode 100644 index 000000000..a57bbafe0 Binary files /dev/null and b/src/images/f.png differ diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 000000000..61cb0d549 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/image.png b/src/images/image.png new file mode 100644 index 000000000..2b8b88a85 Binary files /dev/null and b/src/images/image.png differ diff --git a/src/images/image1.png b/src/images/image1.png new file mode 100644 index 000000000..1d9762b1d Binary files /dev/null and b/src/images/image1.png differ diff --git a/src/images/kat-base-life-time-warranty-only-for-treadmill-purchaser-352849.webp b/src/images/kat-base-life-time-warranty-only-for-treadmill-purchaser-352849.webp new file mode 100644 index 000000000..98f038537 Binary files /dev/null and b/src/images/kat-base-life-time-warranty-only-for-treadmill-purchaser-352849.webp differ diff --git a/src/images/network.png b/src/images/network.png new file mode 100644 index 000000000..34f21a0c4 Binary files /dev/null and b/src/images/network.png differ diff --git a/src/images/select.png b/src/images/select.png new file mode 100644 index 000000000..fb380c430 Binary files /dev/null and b/src/images/select.png differ diff --git a/src/images/shus.webp b/src/images/shus.webp new file mode 100644 index 000000000..b5e6664fd Binary files /dev/null and b/src/images/shus.webp differ diff --git a/src/images/skyline.png b/src/images/skyline.png new file mode 100644 index 000000000..16d87edeb Binary files /dev/null and b/src/images/skyline.png differ diff --git a/src/images/tech.png b/src/images/tech.png new file mode 100644 index 000000000..9802b1dc8 Binary files /dev/null and b/src/images/tech.png differ diff --git a/src/images/tech2.png b/src/images/tech2.png new file mode 100644 index 000000000..b6822b003 Binary files /dev/null and b/src/images/tech2.png differ diff --git a/src/images/tw.png b/src/images/tw.png new file mode 100644 index 000000000..9ea676d44 Binary files /dev/null and b/src/images/tw.png differ diff --git a/src/images/vr.png b/src/images/vr.png new file mode 100644 index 000000000..470bc5555 Binary files /dev/null and b/src/images/vr.png differ diff --git a/src/images/y.png b/src/images/y.png new file mode 100644 index 000000000..b469fb9d0 Binary files /dev/null and b/src/images/y.png differ diff --git "a/src/images/\320\241\320\273\320\276\320\271 2.png" "b/src/images/\320\241\320\273\320\276\320\271 2.png" new file mode 100644 index 000000000..98402709a Binary files /dev/null and "b/src/images/\320\241\320\273\320\276\320\271 2.png" differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..e5a5d72a0 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,293 @@ -'use strict'; + 'use strict'; + + const menuOpen = document.querySelector('.header__menu--open'); + const menuClose = document.querySelectorAll('.menu-btn--close'); + const asideMenu = document.querySelector('.menu'); + const menuLanguage = document.querySelector('.language'); + const linkLanguage = document.querySelector('.language-link'); + const backBtn = document.querySelector('.menu-btn--back'); + const faqMenu = document.querySelector('.faq-box'); + const faqLink = document.querySelector('.faq-link'); + const helpMenu = document.querySelector('.help'); + const helpLink = document.querySelector('.help-link'); + const btnBuy = document.querySelectorAll('.btn-buy'); + const buyMenu = document.querySelector('.buy-now'); + + function openMenu() { + asideMenu.classList.add('menu--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + } + + function closeMenu() { + menuLanguage.classList.remove('language--open') + document.body.classList.remove('menu-overlay'); + buyMenu.classList.remove('buy-now--open'); + helpMenu.classList.remove('help--open'); + faqMenu.classList.remove('faq-box--open'); + asideMenu.classList.remove('menu--open'); + document.body.style.overflow = ''; + } + + function openFaq() { + faqMenu.classList.add('faq-box--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + } + + menuOpen.addEventListener('click', () => { + openMenu(); + }); + + + menuClose.forEach(btn => { + btn.addEventListener('click', () => { + closeMenu(); + }); + }); + + asideMenu.addEventListener('click', (e) => { + const link = e.target.closest('.nav__link'); + + if (!link) return; + + if ( + link.classList.contains('language-link') || + link.classList.contains('faq-link') || + link.classList.contains('help-link') + ) { + return; + } + + const href = link.getAttribute('href'); + + if (href && href.length > 1 && href.startsWith('#')) { + const target = document.querySelector(href); + + closeMenu(); + + if (target) { + setTimeout(() => { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }, 300); + } + } else { + closeMenu(); + } + }); + + + linkLanguage.addEventListener('click', () => { + menuLanguage.classList.add('language--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + }); + + backBtn.addEventListener('click', () => { + menuLanguage.classList.remove('language--open'); + document.body.style.overflow = ''; + }) + + + faqLink.addEventListener('click', () => { + openFaq(); + }); + + + helpLink.addEventListener('click', () => { + helpMenu.classList.add('help--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + }) + + + btnBuy.forEach(btn => { + btn.addEventListener('click', () => { + buyMenu.classList.add('buy-now--open'); + document.body.style.overflow = 'hidden'; + }); + }); + + const tabs = document.querySelectorAll('.buy-now__tab'); + const forms = document.querySelectorAll('.buy-now__form'); + const buyNowImage = document.querySelector('.buy-now__imgage'); + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('buy-now__tab--active')); + forms.forEach(f => f.classList.remove('buy-now__form--visible')); + tab.classList.add('buy-now__tab--active'); + + const target = tab.dataset.tab; + + document.querySelector(`.buy-now__form--${target}`) + .classList.add('buy-now__form--visible'); + + if (target === 'complete') { + buyNowImage.style.display = 'none'; + } else { + buyNowImage.style.display = ''; + } + }); + }); + + const btnHome = document.querySelector('.buy-now__btn--home'); + + btnHome.addEventListener('click', () => { + closeMenu(); + }); + + const btnLanguage = document.querySelector('.header__language'); + + btnLanguage.addEventListener('click', () => { + menuLanguage.classList.add('language--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + }); + + const linkFaq = document.querySelector('.hero__box-links--faq'); + const linkHelp = document.querySelector('.hero__box-links--help'); + + linkFaq.addEventListener('click', () => { + openFaq(); + }); + + linkHelp.addEventListener('click', () => { + helpMenu.classList.add('help--open'); + document.body.classList.add('menu-overlay'); + document.body.style.overflow = 'hidden'; + }); + + document.querySelectorAll('.about-product__slider').forEach((sliderEl) => { + + const wallpapers = sliderEl.querySelector('.about-product__slider-wallpapers'); + const slides = sliderEl.querySelectorAll('.about-product__slider-images'); + const dots = sliderEl.querySelectorAll('.about-product__slider-dot'); + const prevBtn = sliderEl.querySelector('.about-product__p--prev'); + const nextBtn = sliderEl.querySelector('.about-product__p--next'); + + let currentIndex = 0; + + function goToSlide(index) { + if (index < 0) index = 0; + if (index > slides.length - 1) index = slides.length - 1; + + slides[index].scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' }); + } + + function setActiveDot(index) { + currentIndex = index; + + dots.forEach((dot, i) => { + dot.classList.toggle('about-product__slider-dot--active', i === index); + }); + } + + dots.forEach((dot, i) => { + dot.addEventListener('click', () => { + goToSlide(i); + }); + }); + + if (prevBtn) { + prevBtn.addEventListener('click', () => { + goToSlide(currentIndex - 1); + }); + } + + if (nextBtn) { + nextBtn.addEventListener('click', () => { + goToSlide(currentIndex + 1); + }); + } + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = Array.from(slides).indexOf(entry.target); + setActiveDot(index); + } + }); + }, + { + root: wallpapers, + threshold: 0.6, + } + ); + + slides.forEach((slide) => observer.observe(slide)); +}); + +const faqLinkMore = document.querySelector('.faq-box__link'); + +faqLinkMore.addEventListener('click', () => { + closeMenu(); +}) + +document.querySelectorAll('.help__text-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const href = link.getAttribute('href'); + closeMenu(); + setTimeout(() => { + if (href === '#') { + openFaq(); + } else { + const target = document.querySelector(href); + if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }, 300); + }); +}); + +const heroSlides = document.querySelectorAll('.hero__img'); +const prevHero = document.querySelector('.hero__box-links--pad:first-child'); +const nextHero = document.querySelector('.hero__box-links--pad:last-child'); +const heroTrack = document.querySelector('.hero__slider-images'); + +let heroIndex = 0; + +function goToHeroSlide(index) { + if (index < 0) index = 0; + if (index > heroSlides.length - 1) index = heroSlides.length - 1; + heroIndex = index; + heroSlides[heroIndex].scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' }); +} + +prevHero.addEventListener('click', () => goToHeroSlide(heroIndex - 1)); +nextHero.addEventListener('click', () => goToHeroSlide(heroIndex + 1)); + +const buyNowForms = document.querySelectorAll('.buy-now__form'); + +buyNowForms.forEach(form => { + form.addEventListener('submit', (e) => { + e.preventDefault(); + form.reset(); + }); +}); + +const queForms = document.querySelectorAll('.questions__form'); + +queForms.forEach(form => { + form.addEventListener('submit', (e) => { + e.preventDefault(); + form.reset(); + }); +}); + +const quantitySelect = document.querySelector('.buy-now__select--1'); +const totalPriceDisplay = document.querySelector('.js-total-price'); +const BASE_PRICE = 1200; + +if (quantitySelect && totalPriceDisplay) { + quantitySelect.addEventListener('change', (e) => { + const quantity = parseInt(e.target.value, 10); + + const currentTotal = BASE_PRICE * quantity; + + // Обновляем текст на экране с сохранением знака доллара + totalPriceDisplay.textContent = `${currentTotal}$`; + }); + } + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 619b8c52b..000000000 --- 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 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/about-product.scss b/src/styles/about-product.scss new file mode 100644 index 000000000..266ef0bb3 --- /dev/null +++ b/src/styles/about-product.scss @@ -0,0 +1,264 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.about-product { + @include padd; + @include padd-b; + + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + background: linear-gradient(150deg, $dark-blue, $black2); + gap: 80px; + + @include tablet { + padding-block: 70px 50px; + } + + @include desktop { + padding-block: 100px; + gap: 183px; + } + + @include design { + padding-block: 147px 156px; + gap: 175px; + } + + &__item { + display: flex; + flex-direction: column; + justify-content: center; + + @include tablet { + @include grid; + } + } + + &__span { + display: flex; + flex-direction: column; + + @include tablet { + grid-column: 1/4; + align-self: end; + } + + @include desktop { + grid-column: 1/6; + } + + @include design { + grid-column: 2/6; + } + } + + &__title { + margin-bottom: 20px; + + @include tablet { + grid-column: 4/-1; + margin: 0; + } + + @include desktop { + grid-column: 9/-1; + } + + @include design { + grid-column: 11/-1; + } + } + + &__text { + color: $gray; + margin: 0; + + @include tablet { + grid-column: 4/-1; + + &--2 { + grid-column: 1/5; + } + } + + @include desktop { + grid-column: 9/-1; + + &--2 { + grid-column: 1/6; + } + } + + @include design { + grid-column: 11/-1; + + &--2 { + grid-column: 2/8; + } + } + } + + &__play-link { + padding-block: 40px 0; + + @include tablet { + grid-column: 4/-1; + padding: 0; + } + + @include desktop { + grid-column: 9/-1; + } + + @include design { + grid-column: 11/-1; + } + } + + &__box-img { + display: none; + + @include tablet { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + max-height: 253px; + gap: 20px; + grid-column: 5 / -1; + grid-row: 1/3; + } + + @include desktop { + grid-column: 7/11; + max-height: 337px; + } + + @include design { + grid-column: 9/13; + } + } + + &__images { + display: block; + height: 100%; + width: 100%; + object-fit: contain; + + &--4 { + display: none; + + @include desktop { + display: block; + } + } + } + + &__slider { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 20px; + + @include tablet { + grid-column: 1/4; + grid-row: 1 / span 4; + padding: 0; + } + + @include desktop { + grid-column: 3/8; + align-items: flex-start; + justify-content: center; + grid-row: 1 / span 3; + } + + @include design { + grid-column: 4/10; + } + + &-wallpapers { + display: flex; + width: 100%; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + } + + &-images { + flex: 0 0 100%; + width: 100%; + scroll-snap-align: start; + scroll-snap-stop: always; + } + + &-img { + height: 100%; + width: 100%; + display: block; + object-fit: contain; + + @include desktop { + max-height: 290px; + object-fit: cover; + } + } + + &-pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + margin-top: 14px; + + @include desktop { + display: none; + } + } + + &-dot { + border: none; + padding: 0; + border-radius: 50%; + height: 4px; + width: 4px; + background-color: $gray3; + cursor: pointer; + + &--active { + background-color: $white; + } + } + } + + &__p { + font-size: 16px; + color: $white; + text-decoration: none; + padding: 12px 0 9px; + border: none; + border-bottom: 1px solid $black; + background-color: inherit; + + &:hover { + border-bottom: 1px solid $blue; + color: $gray; + } + } + + &__hello { + font-size: 14px; + line-height: 100%; + color: $blue; + margin-bottom: 11px; + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 000000000..5d583d2be --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,174 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.html { + scroll-behavior: smooth; + font-family: Inter, sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 400; + letter-spacing: 0%; + color: $white; + background-color: $black; +} + +.body { + margin: 0; + + &::before { + content: ''; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 49; + opacity: 0; + visibility: hidden; + transition: + opacity 0.3s ease, + visibility 0.3s ease; + pointer-events: none; + } + + &.menu-overlay::before { + opacity: 1; + visibility: visible; + pointer-events: auto; + } +} + +.play-link { + padding-block: 25px 32px; + height: 66px; + width: 209px; + + @include tablet { + padding-bottom: 60px; + } + + @include desktop { + padding-bottom: 0; + } +} + +.play-img { + height: 100%; + width: 100%; + display: block; + object-fit: contain; +} + +.btn-buy { + height: 40px; + width: 100%; + font-size: 14px; + line-height: 130%; + font-weight: 500; + background-color: $blue; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + color: $white; + text-decoration: none; + + @include hover(null, $blue, $white); + @include tablet { + height: 48px; + } +} + +.box-flex { + display: none; + + @include desktop { + display: flex; + gap: 103px; + } +} + +.stiky__wrap { + position: relative; +} + +.title { + font-size: 21px; + font-weight: 900; + line-height: 100%; + margin: 0; + + &-span { + font-weight: 400; + color: $blue; + } + + @include desktop { + font-size: 36px; + } +} + +.item { + display: flex; + flex-direction: column; + gap: 11px; + + @include tablet { + gap: 18px; + } +} + +.rubric { + font-size: 16px; + line-height: 100%; + font-weight: 900; + margin: 0; + + @include tablet { + font-size: 18px; + } +} + +.description { + color: $gray; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.logo-img { + height: 12px; + width: 58px; + display: block; + object-fit: contain; + + @include hover(1.1); + @include desktop { + width: 77.5px; + height: 16px; + } +} + +.nav-span { + color: $blue; +} + +.contact { + &-list { + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; + } + + &-link { + text-decoration: none; + color: $gray; + line-height: 100%; + + @include hover(null, $blue); + } +} diff --git a/src/styles/buy-now.scss b/src/styles/buy-now.scss new file mode 100644 index 000000000..ed130553d --- /dev/null +++ b/src/styles/buy-now.scss @@ -0,0 +1,612 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.buy-now { + position: relative; + position: fixed; + box-sizing: border-box; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, $dark-blue, $black2); + transition: all 0.3s ease; + transform: translateX(100%); + color: $gray; + line-height: 130%; + overflow-y: auto; + padding-bottom: 37px; + + &--open { + transform: translateX(0); + } + + &__header { + @include desktop { + padding-top: 64px; + + .header__menu--close { + display: none; + } + } + } + + &__imgage { + display: none; + + @include tablet { + box-sizing: border-box; + display: flex; + padding-inline: 104px 140px; + height: 277px; + width: 100%; + padding-top: 40px; + } + + @include desktop { + position: absolute; + padding: 0; + width: 50%; + height: 280px; + top: 200px; + } + + @include design { + height: 447px; + top: 306px; + } + } + + &__img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; + } + + &__list { + list-style: none; + margin: 0; + padding: 10px 0 0; + display: flex; + align-items: center; + text-align: center; + + @include desktop { + display: none; + flex: 1; + } + + &-header { + display: none; + + @include desktop { + display: flex; + } + } + + @include tablet { + padding: 0; + } + } + + &__visa-img { + display: none; + + @include tablet { + display: block; + } + } + + &__tab { + color: $gray; + position: relative; + padding-bottom: 16.5px; + font-size: 12px; + line-height: 130%; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + flex: 1; + + @include tablet { + font-size: 14px; + } + + @include desktop { + padding-bottom: 7px; + } + + &-span { + display: none; + + @include desktop { + display: inline; + } + } + + &--active { + color: $blue; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: $blue; + + @include desktop { + width: 4px; + height: 4px; + border-radius: 50%; + left: 50%; + } + } + } + } + + &__btn { + margin-top: 10px; + height: 40px; + width: 100%; + border-radius: 4px; + background-color: $blue; + color: $white; + border: none; + font-size: 14px; + line-height: 130%; + font-weight: 500; + + @include tablet { + grid-column: 2/-2; + } + + @include desktop { + grid-column: 7/10; + max-width: 200px; + align-self: flex-end; + + &--home { + grid-column: 5/9; + width: 220px; + justify-self: center; + } + } + + @include design { + grid-column: 9/12; + } + } + + &__btn--pay { + @include design { + margin: 0; + grid-row: 4; + } + } + + &__btn--order { + @include design { + grid-row: 8; + margin: 0; + } + } + + &__btn--home { + @include design { + grid-column: 7/11; + justify-self: center; + width: 220px; + } + } + + &__form { + flex-direction: column; + gap: 30px; + display: none; + + @include padd; + + input, + select { + font-family: Inter, sans-serif; + line-height: 130%; + margin: 0; + outline: none; + width: 100%; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $white; + -webkit-box-shadow: 0 0 0 1000px #000 inset; + transition: background-color 5000s ease-in-out 0s; + } + + &--visible { + display: flex; + } + } + + &__input { + background-color: inherit; + color: $white; + padding: 0; + border: 0; + } + + &__box { + display: flex; + margin-top: 30px; + gap: 75px; + + @include tablet { + align-items: center; + } + + @include desktop { + justify-content: space-between; + align-items: flex-start; + } + } + + &__quantity-label { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + flex: 1; + + @include tablet { + gap: 20px; + flex: 0; + justify-content: space-between; + align-items: flex-start; + } + } + + &__price { + display: flex; + flex-direction: column; + align-items: center; + font-size: 16px; + gap: 10px; + flex: 1; + + @include tablet { + gap: 20px; + flex: 0; + justify-content: space-between; + align-items: flex-start; + } + + &-num { + font-size: 26px; + line-height: 100%; + font-weight: 500; + color: $blue; + + @include desktop { + font-size: 36px; + } + } + } + + &__label { + display: flex; + flex-direction: column; + width: 100%; + font-size: 14px; + gap: 13px; + padding: 0; + padding-bottom: 19px; + border-bottom: 1px solid rgba(47, 47, 47, 1); + + &:nth-child(6), + &:nth-child(7) { + border: none; + } + + @include tablet { + justify-self: flex-start; + } + } + + &__select { + color: $white; + background-color: $dark-blue; + height: 100%; + appearance: none; + -webkit-appearance: none; + background-image: url(../images/select.png); + background-repeat: no-repeat; + background-position: right 12px center; + border: 0; + + &--1 { + text-align: center; + font-size: 20px; + } + + &--2 { + padding-left: 20px !important; + font-size: 16px; + height: 47px; + } + } + + &__card { + display: flex; + flex-direction: column; + margin-top: 20px; + gap: 30px; + + @include tablet { + grid-column: 2/-2; + margin-block: 40px 74px; + } + + @include desktop { + margin-block: 105px 0; + grid-column: 7/-2; + grid-row: 1/4; + } + + @include design { + grid-column: 9/-3; + margin-block: 220px 65px; + grid-row: 1/ 4; + gap: 50px; + } + + &-label { + font-size: 14px; + line-height: 130%; + display: flex; + flex-direction: column; + gap: 12px; + + &--3 { + @include tablet { + max-width: 110px; + } + } + + &--4 { + flex: 1; + + @include tablet { + flex: 0; + } + } + + &:focus-within { + color: $blue; + } + } + + &-input { + box-sizing: border-box; + position: relative; + color: $white; + background-color: inherit; + padding: 0; + border: none; + border-bottom: 1px solid $gray4; + transition: all 0.3s ease; + font-size: 18px; + + &:focus { + border-bottom: 1px solid $blue; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $white; + -webkit-box-shadow: 0 0 0 1000px #000 inset; + transition: background-color 5000s ease-in-out 0s; + } + } + + &--input1 { + letter-spacing: 20%; + padding-bottom: 9px; + text-align: center; + + &::placeholder { + color: $gray4; + } + } + + &--input2 { + padding-bottom: 19px; + + &::placeholder { + font-size: 14px; + } + } + + &--input3 { + padding-bottom: 7px; + } + + &--input4 { + padding-bottom: 7px; + letter-spacing: 15%; + } + + &-date { + box-sizing: border-box; + display: flex; + align-items: center; + margin-right: 60px; + gap: 60px; + + @include tablet { + margin: 0; + max-width: 60%; + justify-content: space-between; + } + } + } + + &__input-box { + display: flex; + align-items: center; + gap: 20px; + + @include tablet { + gap: 30px; + } + } + + &__form--complete { + @include padd; + + padding-top: 90px; + + @include tablet { + padding-top: 180px; + } + } + + &__thank { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + @include tablet { + @include grid; + } + } + + &__title { + font-size: 26px; + color: $white; + text-transform: uppercase; + margin: 0; + + &--complete { + @include tablet { + font-size: 46px; + line-height: 130%; + grid-column: 1/-1; + max-width: 600px; + justify-self: center; + } + + @include desktop { + max-width: 100%; + } + } + } + + &__text { + margin-block: 16px 20px; + color: $white; + + &--complete { + @include tablet { + grid-column: 1/-1; + margin-top: 0; + line-height: 130%; + font-size: 18px; + } + + @include design { + margin-block: 36px 40px; + } + } + } + + &__form--order { + @include tablet { + &.buy-now__form--visible { + @include grid; + + display: grid; + } + } + + @include desktop { + margin-top: 72px; + } + + @include design { + margin-top: 217px; + } + } + + &__box--order { + @include tablet { + grid-column: 1/4; + margin: 0 0 28px; + justify-content: space-between; + } + + @include desktop { + grid-row: 5; + margin: 0; + } + + @include design { + grid-row: 8; + margin-top: 15px; + } + } + + &__label--order { + @include tablet { + grid-column: 1 / span 3; + } + + @include desktop { + grid-column: 7 / span 3; + } + + @include design { + grid-column: 9/13; + } + } + + &__label--order2 { + @include tablet { + grid-column: 4 / span 3; + } + + @include desktop { + grid-column: 10 / span 3; + } + + @include design { + grid-column: 13/-1; + } + } + + &__form--pay { + @include tablet { + &.buy-now__form--visible { + @include grid; + + display: grid; + } + } + } + + &__box--pay { + grid-column: 2/5; + justify-content: space-between; + margin: 30px 0 0; + + @include desktop { + grid-column: 1/4; + grid-row: 4; + margin: 10px 0 0; + } + } +} diff --git a/src/styles/faq.scss b/src/styles/faq.scss new file mode 100644 index 000000000..7b6c6d653 --- /dev/null +++ b/src/styles/faq.scss @@ -0,0 +1,134 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.faq-box { + box-sizing: border-box; + position: fixed; + width: 100vw; + height: 100vh; + z-index: 54; + inset: 0; + transition: all 0.3s ease; + transform: translateX(-200%); + background-color: $dark-blue; + + @include tablet { + display: flex; + flex-direction: column; + } + + @include desktop { + width: 880px; + height: 854px; + margin: auto; + inset: 0; + overflow-y: auto; + border-radius: 4px; + } + + @include design { + width: 1083px; + height: 793px; + } + + &__heder { + padding: 18px 18px 24px; + } + + &--open { + transform: translateX(0); + z-index: 100; + } + + &__link-box { + margin-top: 50px; + display: none; + + @include tablet { + display: flex; + align-self: center; + } + } + + &__link { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + color: $blue; + padding-bottom: 17px; + + background-image: url(../images/select.png); + background-position: center 35px; + background-repeat: no-repeat; + background-size: 9px 6px; + + @include hover(1.1); + } + + &__item { + @include padd; + + display: flex; + justify-content: center; + flex-direction: column; + gap: 13px; + + @include desktop { + gap: 15px; + padding-inline: 90px; + } + } + + &__title { + line-height: 130%; + margin-bottom: 17px; + + @include tablet { + max-width: 280px; + } + + @include desktop { + max-width: 520px; + margin-bottom: 35px; + } + + @include design { + max-width: 100%; + margin-bottom: 22px; + } + } + + &__text { + display: flex; + flex-direction: column; + justify-content: center; + padding: 20px 12px 12px; + border: 1px solid $blue; + border-radius: 4px; + } + + &__what { + margin: 0; + color: $blue; + } + + &__detaljer { + margin: 18px 0 10px; + color: $gray; + } + + &__update { + color: rgba(84, 84, 84, 1); + font-size: 12px; + margin: 0; + } + + &__questions { + padding: 18px 12px; + border: 1px solid $blue; + border-radius: 4px; + color: $blue; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..cba415768 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,80 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.footer { + @include padd; + @include padd-b; + + display: grid; + grid-template-columns: 1fr 1fr; + + @include tablet { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo-img { + height: 14px; + width: 69px; + } + + &__cell { + display: flex; + flex-direction: column; + gap: 22px; + + @include tablet { + flex-direction: row; + gap: 0; + } + } + + &__social { + display: flex; + align-items: center; + gap: 23px; + + &-link { + display: block; + object-fit: contain; + width: 18px; + height: 18px; + + @include hover(1.1); + } + } + + &__nav-list.nav__list { + margin-top: 15px; + + @include tablet { + flex-direction: row; + margin: 0; + gap: 35px; + + .footer__nav-link { + font-size: 14px; + + @include hover(null, $blue); + } + } + + @include desktop { + gap: 40px; + } + } + + &__contact-list { + margin: 15px 0 0; + + @include tablet { + display: none; + margin: 0; + } + } + + &__contact-link { + font-size: 13px; + } +} diff --git a/src/styles/gaming.scss b/src/styles/gaming.scss new file mode 100644 index 000000000..eb633b5eb --- /dev/null +++ b/src/styles/gaming.scss @@ -0,0 +1,97 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.gaming { + @include padd; + + position: relative; + padding-block: 30px 50px; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 20px; + + @include tablet { + @include grid; + + padding-block: 70px; + } + + @include desktop { + padding-block: 100px; + gap: 80px; + } + + @include design { + padding-block: 158px; + } + + &__img { + height: 85px; + width: 85px; + object-fit: contain; + display: none; + + @include tablet { + display: flex; + } + } + + &__item { + @include tablet { + grid-column: span 3; + align-items: center; + text-align: center; + } + + @include design { + grid-column: span 4; + } + } + + &__title-box { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 10px; + + @include tablet { + grid-column: 1/-1; + text-align: center; + } + } + + &__text { + font-size: 12px; + line-height: 100%; + color: $blue; + margin: 0; + } + + &__btn-buy { + display: none; + + @include tablet { + grid-column: 2/-2; + display: flex; + position: sticky; + bottom: 30px; + margin-top: 10px; + } + + @include desktop { + display: none; + } + } + + &__description { + line-height: 150%; + + @include tablet { + -webkit-line-clamp: none; + -webkit-box-orient: unset; + overflow: visible; + text-overflow: unset; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..4c7a3cd57 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,88 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.header { + @include padd; + + box-sizing: border-box; + padding-block: 20px 15px; + display: flex; + align-items: center; + justify-content: space-between; + + @include tablet { + padding-block: 30px; + } + + @include design { + padding-block: 45px; + } + + .menu-btn { + border: none; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + } + + &__menu--open { + background-image: url(../images/Group.png); + background-size: 20px 9px; + height: 9px; + width: 20px; + + @include desktop { + display: none; + } + } + + &__btn-buy { + display: none; + + @include desktop { + display: flex; + width: 200px; + height: 48px; + } + } + + &__nav { + display: none; + + @include desktop { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + padding-inline: 35px; + } + + &-link.nav__link { + @include desktop { + font-size: 16px; + line-height: 130%; + } + } + } + + &__nav-list.nav__list { + flex-direction: row; + align-items: center; + gap: 35px; + } + + &__language { + text-align: center; + color: $blue; + background-image: url(../images/select.png); + background-repeat: no-repeat; + background-position: 20px 14px; + background-size: 9px 6px; + padding-right: 14px; + cursor: pointer; + + @include hover(1.1, $white); + } +} diff --git a/src/styles/help.scss b/src/styles/help.scss new file mode 100644 index 000000000..df3712329 --- /dev/null +++ b/src/styles/help.scss @@ -0,0 +1,116 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.help { + box-sizing: border-box; + position: absolute; + z-index: 55; + top: 0; + bottom: 0; + right: 0; + height: 100vh; + width: 100vw; + background-color: $dark-blue; + transition: all 0.3s ease; + transform: translateY(-200%); + + @include tablet { + height: 70%; + } + + @include desktop { + height: 550px; + width: 880px; + margin: auto; + inset: 0; + border-radius: 4px; + } + + @include design { + height: 518px; + width: 1083px; + } + + &--open { + transform: translateY(0); + } + + &__box { + @include padd; + + display: flex; + flex-direction: column; + justify-content: center; + gap: 30px; + + @include tablet { + gap: 20px; + } + + @include desktop { + padding-inline: 88px; + } + } + + &__title { + padding-top: 10px; + line-height: 130%; + + @include tablet { + padding: 0; + margin-block: 0 10px; + } + + @include desktop { + margin-block: 0 30px; + } + } + + &__text { + color: $gray; + margin: 0; + + &-link { + color: $blue; + text-decoration: none; + } + } + + &__list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; + } + + &__contact-list { + @include desktop { + gap: 25px; + margin: 0; + } + } + + &__link { + text-decoration: none; + color: $blue; + } + + &__cell { + @include tablet { + display: flex; + align-items: center; + gap: 152px; + } + + @include desktop { + gap: 65px; + } + } + + &__heder { + padding: 18px 18px 24px; + } +} diff --git a/src/styles/hero.scss b/src/styles/hero.scss new file mode 100644 index 000000000..9635c62d9 --- /dev/null +++ b/src/styles/hero.scss @@ -0,0 +1,243 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.hero { + box-sizing: border-box; + display: flex; + flex-direction: column; + + @include tablet { + @include grid; + } + + @include desktop { + @include padd; + } + + &__slider { + box-sizing: border-box; + overflow: hidden; + width: 100%; + min-width: 0; + + @include tablet { + grid-column: 4/-1; + grid-row: 1; + } + + @include desktop { + padding-block: 42px 0; + grid-column: 7/-1; + grid-row: 1; + } + + &-images { + display: flex; + scroll-snap-type: x mandatory; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + + &__img { + flex: 0 0 100%; + width: 100%; + max-width: 100%; + min-width: 0; + scroll-snap-align: start; + object-fit: contain; + display: block; + } + + &__btn-buy.btn-buy { + @include tablet { + display: none; + } + } + + &__item { + @include padd; + @include tablet { + grid-column: 1/4; + grid-row: 1; + } + + @include desktop { + padding: 76px 0 0; + grid-column: 1/7; + grid-row: 1; + } + + box-sizing: border-box; + display: flex; + flex-direction: column; + } + + &__title { + font-size: 26px; + line-height: 130%; + font-weight: 900; + margin: 0; + + @include desktop { + font-size: 46px; + } + + @include design { + font-size: 54px; + } + + &-span { + font-weight: 400; + color: $blue; + } + } + + &__text { + font-weight: 500; + color: $gray; + margin: 17px 0 8px; + + @include tablet { + margin-bottom: 10px; + } + + @include desktop { + padding-inline: 92px; + margin-block: 19px 5px; + } + + @include design { + padding-inline: 92px 20px; + font-size: 20px; + line-height: 150%; + margin-block: 35px 30px; + } + } + + &__price { + text-align: center; + font-size: 18px; + line-height: 100%; + font-weight: 500; + + @include tablet { + text-align: start; + } + + @include desktop { + padding-inline: 92px; + } + + @include design { + font-size: 20px; + line-height: 100%; + } + } + + &__play-img { + @include desktop { + padding-inline: 92px; + } + } + + &__box { + grid-column: span 12; + display: none; + align-items: center; + justify-content: space-between; + + @include design { + grid-column: span 16; + padding-block: 220px 107px; + + &-flex { + &:nth-child(1) { + grid-column: 1/3; + } + + &:nth-child(2) { + grid-column: 8/10; + justify-self: center; + } + } + } + + @include desktop { + display: flex; + grid-column: 1/-1; + padding-block: 93px 87px; + + @include grid; + + &-flex { + display: flex; + align-items: center; + justify-content: space-between; + + &:nth-child(1) { + gap: 40px; + } + + &:nth-child(2) { + grid-column: 6/8; + justify-self: center; + + @include design { + grid-column: 8/10; + } + } + + &:nth-child(3) { + grid-column: 10/-1; + gap: 103px; + + @include design { + grid-column: 14/-1; + } + } + } + + &-links { + color: $white; + text-decoration: none; + line-height: 150%; + font-weight: 500; + align-items: flex-start; + padding-bottom: 9px; + + @include hover(null, $blue); + + &--color { + color: $blue; + height: 37px; + background-image: url(../images/select.png); + background-position: center 30px; + background-repeat: no-repeat; + background-size: 9px 6px; + padding: 0; + } + + &--pad { + border-bottom: 1px solid $black3; + + &:hover { + border-bottom: 1px solid $blue; + color: $gray; + } + + &:focus { + border-bottom: 1px solid $blue; + color: $gray; + } + } + } + } + } +} diff --git a/src/styles/language.scss b/src/styles/language.scss new file mode 100644 index 000000000..f2897fb40 --- /dev/null +++ b/src/styles/language.scss @@ -0,0 +1,46 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.language { + position: absolute; + z-index: 51; + height: 100vh; + width: 100vw; + top: 0; + bottom: 0; + left: 0; + background-color: $dark-blue; + transform: translateX(-100%); + transition: all 0.3s ease; + + @include tablet { + height: 70%; + } + + &--open { + transform: translateX(0); + } + + &-btn--close { + display: none; + + @include desktop { + display: block; + } + } + + &__list.nav__list { + gap: 20px; + margin-top: 10px; + + @include tablet { + padding-left: 130px; + } + } + + &__link.nav__link { + font-size: 21px; + font-weight: 500; + line-height: 130%; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..fd2beb100 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,15 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base'; +@use './header'; +@use './hero'; +@use './gaming'; +@use './about-product'; +@use './tech'; +@use './why'; +@use './questions'; +@use './footer'; +@use './nav'; +@use './menu'; +@use './faq'; +@use './language'; +@use './help'; +@use './buy-now'; diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..cd3c8da13 --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,69 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.menu { + position: absolute; + z-index: 50; + height: 100vh; + width: 100vw; + top: 0; + left: 0; + bottom: 0; + background-color: $dark-blue; + transform: translateY(-100%); + transition: all 0.3s ease; + + @include tablet { + height: 70%; + } + + &__heder { + padding-bottom: 45px; + } + + &--open { + transform: translateY(0); + } + + &-btn--close { + background-image: url(../images/close.png); + background-size: contain; + height: 17px; + width: 17px; + } + + &__nav { + @include padd; + + &-list { + gap: 22px; + + @include tablet { + padding-left: 152px; + } + } + + &-link { + font-size: 21px; + font-weight: 500; + line-height: 130%; + + @include hover(null, $blue); + } + } + + &__language-box { + @include padd; + } + + &-btn--back { + background-image: url(../images/back.png); + background-size: contain; + height: 17px; + width: 9px; + + @include desktop { + display: none; + } + } +} diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 000000000..46c9bcd46 --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,24 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.nav { + grid-column: 1; + + &__list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; + justify-content: center; + } + + &__link { + font-size: 13px; + color: $white; + text-decoration: none; + + @include hover(null, $blue); + } +} diff --git a/src/styles/questions.scss b/src/styles/questions.scss new file mode 100644 index 000000000..73288f944 --- /dev/null +++ b/src/styles/questions.scss @@ -0,0 +1,196 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.questions { + @include padd; + @include padd-b; + + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + gap: 30px; + + @include tablet { + @include grid; + + padding-block: 70px 130px; + } + + @include desktop { + padding-block: 100px; + } + + @include design { + padding-block: 156px 205px; + } + + &__up { + position: absolute; + right: 34px; + height: 48px; + width: 48px; + bottom: 130px; + display: none; + + @include tablet { + display: block; + } + + @include desktop { + right: 110px; + bottom: 100px; + } + + @include design { + right: 234px; + bottom: 205px; + } + + &-img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; + } + + @include hover(1.1); + } + + &__title-box { + grid-column: 1/3; + + @include desktop { + grid-column: 1/5; + } + } + + &__que { + font-size: 14px; + line-height: 100%; + color: $blue; + margin-block: 0 11px; + } + + &__form { + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 24px; + + @include tablet { + grid-column: 4/-1; + grid-row: span 3; + } + + @include desktop { + grid-column: 7/-1; + } + + @include design { + grid-column: 9/-1; + } + + &-input { + box-sizing: border-box; + padding: 0 0 25px; + } + + &-textarea { + padding: 0 0 66px; + } + + &-btn { + height: 40px; + width: 100%; + background-color: $blue; + color: $white; + border-radius: 4px; + border: none; + + @include hover(null, $blue, $white); + @include tablet { + height: 48px; + margin-top: 18px; + width: 200px; + } + + @include desktop { + margin-top: 60px; + } + + &:active { + background-color: $gray; + } + } + + &-textarea, + &-input { + background-color: transparent; + width: 100%; + border: none; + resize: none; + border-bottom: 1px solid rgba(47, 47, 47, 1); + color: $white; + + &:focus { + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $white; + -webkit-box-shadow: 0 0 0 1000px #000 inset; + transition: background-color 5000s ease-in-out 0s; + } + + &::placeholder { + font-size: 14px; + line-height: 150%; + } + } + } + + &__contact { + @include tablet { + grid-column: 1/4; + display: flex; + flex-direction: column; + gap: 76px; + margin-top: 50px; + } + + @include desktop { + grid-column: 1/6; + margin: 0; + } + } + + &__time { + font-size: 12px; + color: $gray; + margin: 0; + + @include tablet { + font-size: 16px; + } + } + + &__contact-list { + display: none; + margin: 0; + + @include tablet { + display: flex; + } + } + + &__contact-link { + @include tablet { + font-size: 16px; + line-height: 100%; + } + } +} diff --git a/src/styles/tech.scss b/src/styles/tech.scss new file mode 100644 index 000000000..3497fe382 --- /dev/null +++ b/src/styles/tech.scss @@ -0,0 +1,69 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.tech { + @include padd; + @include padd-b; + + display: flex; + flex-direction: column; + justify-content: center; + gap: 30px; + + @include tablet { + padding-block: 80px; + } + + @include desktop { + padding-block: 100px; + + @include grid; + } + + @include design { + padding-block: 160px; + } + + &__title { + @include desktop { + grid-column: 9/-1; + margin-bottom: 70px; + } + + @include design { + grid-column: 11/14; + padding-left: 30px; + text-align: center; + } + } + + &__img { + display: block; + height: 100%; + width: 205px; + margin-inline: auto; + object-fit: contain; + + &--1 { + display: none; + + @include desktop { + display: block; + grid-column: 1/-1; + width: 100%; + } + + @include design { + grid-column: 3/-2; + } + } + + @include tablet { + width: 358px; + } + + @include desktop { + display: none; + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- 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 index 80c79780d..0488cf6ac 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,72 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin padd() { + padding-inline: 20px; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 110px; + } + + @include design { + padding-inline: 234px; + } +} + +@mixin tablet() { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop() { + @media (min-width: 1280px) { + @content; + } +} + +@mixin design() { + @media (min-width: 1920px) { + @content; + } +} + +@mixin padd-b() { + padding-block: 50px; +} + +@mixin hover($scale: null, $color: null, $bk-color: null) { + transition: all 0.3s ease; + &:hover { - #{$_property}: $_toValue; + @if $scale { + transform: scale($scale); + } + + @if $color { + color: $color; + } + + @if $bk-color { + background-color: $bk-color; + } + } +} + +@mixin grid() { + display: grid; + + @include tablet { + grid-template-columns: repeat(6, 1fr); + gap: 20px; + } + + @include desktop { + grid-template-columns: repeat(12, 1fr); + } + + @include design { + grid-template-columns: repeat(16, 1fr); } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..5b0717315 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$white: rgba(255, 255, 255, 1); +$black: rgba(5, 4, 11, 1); +$black2: rgba(0, 0, 0, 1); +$black3: rgba(33, 33, 33, 1); +$blue: rgba(5, 194, 223, 1); +$gray: rgba(146, 146, 146, 1); +$gray2: rgba(171, 171, 171, 1); +$gray3: rgba(72, 72, 72, 1); +$gray4: rgba(47, 47, 47, 1); +$dark-blue: rgba(25, 21, 54, 1); diff --git a/src/styles/why.scss b/src/styles/why.scss new file mode 100644 index 000000000..e2d496041 --- /dev/null +++ b/src/styles/why.scss @@ -0,0 +1,130 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.why { + @include padd; + @include padd-b; + + display: flex; + flex-direction: column; + justify-content: center; + gap: 30px; + background: linear-gradient(150deg, $dark-blue, $black2); + + @include tablet { + @include grid; + + padding-block: 70px; + } + + @include desktop { + padding-block: 100px; + } + + @include design { + padding-block: 100px 175px; + } + + &__title { + @include tablet { + grid-column: 1/-1; + margin-bottom: 10px; + } + + @include desktop { + grid-column: 1/-1; + text-align: center; + margin-bottom: 60px; + } + } + + &-box { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 20px; + + &__img { + display: none; + margin-inline: auto; + width: 80px; + height: 80px; + object-fit: contain; + + @include tablet { + display: block; + } + } + + @include tablet { + @include grid; + + grid-column: 1/-1; + } + } + + &__item { + height: 100%; + + @include tablet { + text-align: center; + align-items: center; + grid-column: span 2; + } + + @include desktop { + grid-column: span 4; + } + + @include design { + grid-column: span 4; + justify-self: flex-start; + + &:nth-child(2) { + grid-column: 7/11; + } + + &:nth-child(3) { + grid-column: 13/-1; + } + } + } + + &__rubric { + @include tablet { + &--font { + font-size: 16px; + white-space: nowrap; + } + } + } + + &__description { + -webkit-line-clamp: 3; + + @include desktop { + -webkit-line-clamp: none; + -webkit-box-orient: unset; + overflow: visible; + text-overflow: unset; + } + } + + &__btn-buy { + grid-column: 5/9; + max-width: 200px; + justify-self: center; + margin-top: 70px; + display: none; + + @include desktop { + display: flex; + } + + @include design { + display: none; + } + } +}