diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 00000000..0ba82305 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,43 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["master"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 00000000..8b5743ec --- /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/.gitignore b/.gitignore index 1558091f..ee0cacc3 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,8 @@ backstop_data dist .cache .parcel-cache + +# css map files + +src/styles/index.css.map +src/styles/reset.css.map diff --git a/README.md b/README.md index 302783df..bc84429d 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://O1ympus.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index 05ac5122..a7e4e51e 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": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", + "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", "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 83c8373c..c5bdf7be 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/about.jpg b/src/images/about.jpg new file mode 100644 index 00000000..36710e43 Binary files /dev/null and b/src/images/about.jpg differ diff --git a/src/images/anchor-left.svg b/src/images/anchor-left.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/anchor-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow-down.svg b/src/images/arrow-down.svg new file mode 100644 index 00000000..0f6a83db --- /dev/null +++ b/src/images/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 00000000..e8ff0f73 --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/education.svg b/src/images/education.svg new file mode 100644 index 00000000..196d7bf9 --- /dev/null +++ b/src/images/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 00000000..e4de883e --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/fitness.svg b/src/images/fitness.svg new file mode 100644 index 00000000..9c090945 --- /dev/null +++ b/src/images/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/new-start.png b/src/images/new-start.png new file mode 100644 index 00000000..bce2d31a Binary files /dev/null and b/src/images/new-start.png differ diff --git a/src/images/path-to-batteries-1280.svg b/src/images/path-to-batteries-1280.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/src/images/path-to-batteries-1280.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/path-to-batteries.svg b/src/images/path-to-batteries.svg new file mode 100644 index 00000000..69725c29 --- /dev/null +++ b/src/images/path-to-batteries.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/path-to-connection-1280.svg b/src/images/path-to-connection-1280.svg new file mode 100644 index 00000000..a1f02465 --- /dev/null +++ b/src/images/path-to-connection-1280.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/path-to-connection.svg b/src/images/path-to-connection.svg new file mode 100644 index 00000000..58bbd07a --- /dev/null +++ b/src/images/path-to-connection.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/path-to-sensor.svg b/src/images/path-to-sensor.svg new file mode 100644 index 00000000..0a169d2c --- /dev/null +++ b/src/images/path-to-sensor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/play-video.svg b/src/images/play-video.svg new file mode 100644 index 00000000..c6e46a89 --- /dev/null +++ b/src/images/play-video.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/plus.svg b/src/images/plus.svg new file mode 100644 index 00000000..2ba357da --- /dev/null +++ b/src/images/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/real-estate.svg b/src/images/real-estate.svg new file mode 100644 index 00000000..ed90a7fe --- /dev/null +++ b/src/images/real-estate.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/reddit.svg b/src/images/reddit.svg new file mode 100644 index 00000000..53bade5b --- /dev/null +++ b/src/images/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/single-vr.png b/src/images/single-vr.png new file mode 100644 index 00000000..cb8474e1 Binary files /dev/null and b/src/images/single-vr.png differ diff --git a/src/images/social-interactions.svg b/src/images/social-interactions.svg new file mode 100644 index 00000000..33b2e717 --- /dev/null +++ b/src/images/social-interactions.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/universaly.svg b/src/images/universaly.svg new file mode 100644 index 00000000..a5dcfffe --- /dev/null +++ b/src/images/universaly.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/vr-before.svg b/src/images/vr-before.svg new file mode 100644 index 00000000..b90496be --- /dev/null +++ b/src/images/vr-before.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/vr-pc.svg b/src/images/vr-pc.svg new file mode 100644 index 00000000..37d948d3 --- /dev/null +++ b/src/images/vr-pc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/wireless.svg b/src/images/wireless.svg new file mode 100644 index 00000000..317a889c --- /dev/null +++ b/src/images/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/youtube.svg b/src/images/youtube.svg new file mode 100644 index 00000000..59b97532 --- /dev/null +++ b/src/images/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..c25a9949 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,1362 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + KateVR - -

Hello Mate Academy

+ +
+
+
+ + + +
+ +
+ En + + + +
+
+ +
+ + + +
+
+
+
+
+

+ THE NEW START OF +
+ VR LOCOMOTION +

+

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

+ 1200$ + + Play Video + +
+
+
+
+
    +
  • + FAQ +
    • +
  • + Help +
    • +
+ + More + +
    +
  • + + Previous + +
    • +
  • + Next +
    • +
+
+
+
+
+

+ MORE THAN + GAMING! +

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

EDUCATION

+

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

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

REAL ESTATE

+

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

+
+
+ + + + + + +

FITNESS

+

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

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

SOCIAL INTERACTIONS

+

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

+
+
+
+
+
+
+
+ KAT loco +
+
+ Previous + Next +
+ +
+
+

+ ABOUT + PRODUCT +

+

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

+ + Play Video + +
+
+
+
+ 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 US

+

ABOUT US

+

ABOUT US

+

ABOUT US

+

ABOUT US

+

ABOUT US

+

ABOUT US

+
+
+
+
+

+ TECH + SPECS +

+
+
+ vr locomotion +
+
+

SENSOR

+

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

+
+
+

BATTERRIES

+

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

+
+
+

CONNECTION

+

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

+
+
+
+
+

+ WHY KAT + LOCO? +

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

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

+

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

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

WIRELESS SENSORS

+

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

+
+
+ + Buy Now + +
+
+
+ Have any questions? +

+ GET IN + TOUCH +

+

+ Our manager will reply you within 15 minutes +

+
    +
  • + +86-0571-86105373 +
    • +
  • + global@katvr.com +
    • +
  • + overseas@katvr.com +
    • +
+
+
+
+ +
+ +
+ +
+
+ +
+
+ + +
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..28a3c21f 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,44 @@ 'use strict'; + +const burgerMenu = document.querySelector('.burger-menu'); +const menu = document.querySelector('.header__navigation'); +const header = document.querySelector('.header'); +const body = document.body; + +const languageLink = document + .querySelector('.header__languages-link'); +const headerArrowRight = document + .querySelector('.header__arrow-right'); + +const darkWrapper = document + .querySelector('.dark-wrapper'); + +burgerMenu.addEventListener('click', () => { + body.classList.toggle('no-scroll'); + + burgerMenu.classList.toggle('burger-menu--active'); + header.classList.toggle('header--active'); + + menu.classList.toggle('header__navigation--active'); + darkWrapper.classList.toggle('dark-wrapper--active'); +}); + +languageLink.addEventListener('click', () => { + menu.scrollTo({ + left: window.innerWidth, + behavior: 'smooth', + }) + + headerArrowRight.classList.add('header__arrow-right--active'); + burgerMenu.style.display = 'none'; +}); + +headerArrowRight.addEventListener('click', () => { + menu.scrollTo({ + left: -window.innerWidth, + behavior: 'smooth', + }) + + headerArrowRight.classList.remove('header__arrow-right--active'); + burgerMenu.style.display = 'flex'; +}); diff --git a/src/styles/components/_about-greetings.scss b/src/styles/components/_about-greetings.scss new file mode 100644 index 00000000..0e450684 --- /dev/null +++ b/src/styles/components/_about-greetings.scss @@ -0,0 +1,332 @@ +@import '../utils'; + +.about-greetings { + padding: 147px 0 156px; + background: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); +} + +.about { + padding: 0 234px; + margin-bottom: 175px; + display: flex; + align-items: start; + justify-content: end; + gap: 110px; + + &__image-wrapper { + position: relative; + + &::before { + position: absolute; + content: '1/5'; + top: 0; + left: -23px; + transform: translateX(-100%); + color: $light-blue; + font-weight: 400; + font-size: 14px; + } + } + + &__image { + margin-bottom: 12px; + width: 622px; + height: 290px; + } + + &__info { + max-width: 435px; + } + + &__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 30px; + + &--blue { + color: $light-blue; + } + } + + &__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-bottom: 55px; + color: $gray; + } + + &__video-link { + font-weight: 500; + font-size: 16px; + line-height: 130%; + position: relative; + padding-left: 108px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + transform: translateY(-36%); + width: 225px; + height: 66px; + background: url('../images/play-video.svg') center/contain no-repeat; + } + } +} + +.switches { + width: 207px; + display: flex; + align-items: center; + gap: 103px; + font-weight: 500; + font-size: 16px; + line-height: 150%; + position: relative; + + &::before, + &::after { + position: absolute; + content: ''; + bottom: -10px; + height: 1px; + } + + &::before { + left: 0; + width: 33.33%; + background-color: $light-blue; + } + + &::after { + right: 0; + width: 66.67%; + background-color: #212121; + } +} + +.pagination { + display: none; + + &__switch { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #484848; + } + + &__switch--active { + background-color: #ababab; + } +} + +.greetings { + padding: 0 256px 0 327px; + display: flex; + align-items: start; + justify-content: start; + gap: 101px; + + &__subtitle { + margin-bottom: 15px; + font-weight: 400; + font-size: 14px; + color: $light-blue; + display: block; + } + + &__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 30px; + + &--blue { + color: $light-blue; + } + } + + &__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $gray; + max-width: 532px; + } + + &__print { + display: flex; + align-items: flex-start; + } + + &__rotating-title { + font-weight: 900; + font-size: 64px; + line-height: 130%; + writing-mode: vertical-rl; + color: $black; + -webkit-text-stroke: 1px $light-blue; + + &:nth-of-type(2) { + opacity: 0.5; + } + + &:nth-of-type(3) { + opacity: 0.2; + } + + &:nth-of-type(4) { + opacity: 0.1; + } + + &:nth-of-type(5) { + opacity: 0.05; + } + + &:nth-of-type(6) { + opacity: 0.03; + } + + &:nth-of-type(7) { + opacity: 0.02; + } + } + + &__rotating-title:nth-child(even) { + transform: rotate(180deg); + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .about { + padding: 0 110px 0 246px; + + &__image { + width: auto; + height: 290px; + aspect-ratio: 430 / 290; + } + } + + .switches-left { + color: #929292; + } + + .greetings { + padding: 0 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .about-greetings { + padding: 83px 0 50px; + } + + .about { + padding: 0 34px; + gap: 20px; + margin-bottom: 100px; + + &__title { + font-size: 21px; + } + + &__image-wrapper { + &::before { + display: none; + } + } + + &__image { + width: auto; + height: 270px; + aspect-ratio: 340 / 270; + } + } + + .switches { + display: none; + } + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } + + .greetings { + padding: 0 34px; + align-items: center; + + &__title { + font-size: 21px; + } + + &__rotating-title { + font-size: 48px; + } + + &__rotating-title:not(:nth-of-type(-n + 3)) { + display: none; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .about-greetings { + padding: 50px 0; + } + + .about { + padding: 0 20px; + flex-direction: column; + gap: 20px; + margin-bottom: 80px; + + &__title { + font-size: 21px; + } + + &__image-wrapper { + &::before { + display: none; + } + } + + &__image { + width: 100%; + height: auto; + aspect-ratio: 280 / 190; + } + } + + .switches { + display: none; + } + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } + + .greetings { + padding: 0 34px; + align-items: center; + + &__info { + padding-top: 50px; + } + + &__title { + font-size: 21px; + } + + &__print { + display: none; + } + } +} diff --git a/src/styles/components/_contact-form.scss b/src/styles/components/_contact-form.scss new file mode 100644 index 00000000..0c36e75a --- /dev/null +++ b/src/styles/components/_contact-form.scss @@ -0,0 +1,92 @@ +@import '../utils'; + +.contact-form { + width: 716px; + + &__name-wrapper, + &__email-wrapper, + &__phone-wrapper, + &__message-wrapper { + padding-bottom: 20px; + border-bottom: 1px solid #2f2f2f; + } + + &__name-wrapper, + &__email-wrapper, + &__phone-wrapper { + margin-bottom: 24px; + } + + &__message-wrapper { + margin-bottom: 50px; + } + + &__name, + &__email, + &__phone, + &__message { + background-color: transparent; + border: none; + outline: none; + } + + &__message { + height: 88px; + } + + &__button { + border: none; + color: white; + width: 200px; + padding: 12px 0; + background-color: $light-blue; + border-radius: 4px; + font-weight: 500; + font-size: 16px; + line-height: 130%; + } + + &__lower-part { + display: flex; + align-items: center; + justify-content: space-between; + } +} + +.scroll-up { + height: 48px; + width: 48px; + border-radius: 50%; + border: 1px solid $light-blue; + display: flex; + align-items: center; + justify-content: center; +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .contact-form { + width: 50%; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .contact-form { + width: 100%; + + &__button { + width: 100%; + } + } + + .contacts { + position: absolute; + font-size: 13px !important; + bottom: -230px; + right: 20px; + z-index: 2; + } + + .scroll-up { + display: none; + } +} diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss new file mode 100644 index 00000000..76c95d30 --- /dev/null +++ b/src/styles/components/_footer.scss @@ -0,0 +1,138 @@ +@import '../utils'; + +.footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: $black; + height: 100px; + padding: 0 234px; + + &__logo-navigation { + display: flex; + align-items: center; + gap: 127px; + justify-content: space-between; + width: 60%; + } + + &__list { + display: flex; + align-items: center; + justify-content: center; + gap: 43px; + } + + &__element { + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: #f2f2f2; + } + + &__socials { + display: flex; + align-items: center; + gap: 28px; + } + + &__facebook-icon { + width: 9.35px; + height: 19.1px; + } + + &__twitter-icon { + width: 23.38px; + height: 17.5px; + } + + &__youtube-icon { + width: 22.1px; + height: 17.9px; + } + + &__reddit-icon { + width: 21.82px; + height: 22.28px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .footer { + padding: 0 34px; + height: 64px; + + &__list { + gap: 37px; + } + + &__socials { + gap: 18px; + } + + &__facebook-icon { + width: 6px; + height: 12px; + } + + &__twitter-icon { + width: 15px; + height: 11px; + } + + &__youtube-icon { + width: 14.2px; + height: 10.8px; + } + + &__reddit-icon { + width: 14px; + height: 14px; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .footer { + padding: 100px 20px 50px; + align-items: end; + position: relative; + height: auto; + + &__logo-navigation { + flex-direction: column; + align-items: start; + gap: 15px; + } + + &__list { + flex-direction: column; + align-items: start; + gap: 12px; + } + + &__socials { + gap: 22.7px; + } + + &__facebook-icon { + width: 6px; + height: 12px; + } + + &__twitter-icon { + width: 15px; + height: 11px; + } + + &__youtube-icon { + width: 14.2px; + height: 10.8px; + } + + &__reddit-icon { + width: 14px; + height: 14px; + } + } +} diff --git a/src/styles/components/_gaming.scss b/src/styles/components/_gaming.scss new file mode 100644 index 00000000..7cb21f57 --- /dev/null +++ b/src/styles/components/_gaming.scss @@ -0,0 +1,128 @@ +@import '../utils'; + +.gaming { + background-color: $black; + padding: 158px 234px; + text-align: center; + + &__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 16px; + + &--blue { + color: $light-blue; + } + } + + &__subtitle { + display: block; + margin-bottom: 83px; + color: $light-blue; + font-weight: 400; + font-size: 14px; + } + + &__features { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 20px; + align-items: start; + } +} + +.feature { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + &__img { + margin-bottom: 32px; + height: 83px; + } + + &__title { + margin-bottom: 21px; + font-weight: 900; + font-size: 16px; + } + + &__text { + color: $gray; + font-weight: 400; + font-size: 16px; + line-height: 150%; + max-width: 348px; + text-align: center; + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .gaming { + padding: 100px 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .gaming { + padding: 30px 34px; + + &__title { + font-size: 21px; + margin-bottom: 12px; + } + + &__subtitle { + font-size: 12px; + } + + &__features { + grid-template-columns: repeat(2, 1fr); + row-gap: 40px; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .gaming { + padding: 50px 21px; + + &__title { + font-size: 21px; + margin-bottom: 12px; + text-align: left; + } + + &__subtitle { + margin-bottom: 30px; + font-size: 12px; + text-align: left; + } + + &__features { + grid-template-columns: 1fr; + row-gap: 20px; + } + } + + .feature { + &__title, + &__text { + text-align: left; + margin: 0 auto 11px 0; + } + + &__title { + margin: 0 auto 11px 0; + } + + &__text { + margin: 0 auto 0 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + } +} diff --git a/src/styles/components/_get-in-touch.scss b/src/styles/components/_get-in-touch.scss new file mode 100644 index 00000000..55bf4cbf --- /dev/null +++ b/src/styles/components/_get-in-touch.scss @@ -0,0 +1,80 @@ +@import '../utils'; + +.get-in-touch { + background-color: $black; + padding: 160px 235px 205px; + display: flex; + align-items: start; + justify-content: space-between; + + &__subtitle { + font-weight: 400; + font-size: 14px; + color: $light-blue; + margin-bottom: 13px; + display: block; + } + + &__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 26px; + + &--blue { + color: $light-blue; + } + } + + &__text, + .contacts { + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-bottom: 76px; + color: $gray; + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .get-in-touch { + padding: 100px 110px; + column-gap: 200px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .get-in-touch { + padding: 70px 34px 130px; + column-gap: 22px; + + &__title { + margin-bottom: 50px; + } + + &__info { + width: 50%; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .get-in-touch { + padding: 50px 20px; + flex-direction: column; + gap: 32px; + position: relative; + + &__title { + margin-bottom: 50px; + font-size: 21px; + } + + &__text { + position: absolute; + bottom: -80px; + left: 20px; + right: 20px; + font-size: 12px; + } + } +} diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss new file mode 100644 index 00000000..2786d41f --- /dev/null +++ b/src/styles/components/_header.scss @@ -0,0 +1,334 @@ +@import '../utils'; + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 60px 233px; + margin-bottom: 230px; + position: relative; + + &__arrow-right { + display: none; + height: 17px; + width: 8.5px; + } + + &__arrow-right--active { + display: block; + z-index: 30; + } + + &__logo-language { + display: flex; + gap: 34px; + align-items: center; + } + + &__language { + display: flex; + align-items: end; + gap: 3px; + } + + &__list { + display: flex; + align-items: center; + gap: 32px; + } + + &__list-item { + font-weight: 500; + font-size: 16px; + line-height: 130%; + + &:nth-of-type(n + 6) { + display: none; + } + + &:nth-of-type(5) { + background-color: #05c2df; + padding: 13px 0; + width: 200px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + } + } +} + +.languages-list { + display: none; +} + +.burger-menu { + display: none; + height: 16px; + width: 29.2px; + z-index: 20; + cursor: pointer; + + &__line { + display: block; + height: 1px; + background-color: white; + transition: transform 0.3s ease; + } + + &__line:first-of-type { + width: 23.8px; + } + + &__line:nth-of-type(2) { + width: 17.3px; + padding-right: 12px; + } + + &__line:last-of-type { + width: 23.8px; + } +} + +.burger-menu--active { + .burger-menu__line:nth-of-type(2) { + display: none; + } + + .burger-menu__line:first-of-type { + transform-origin: center center; + transform: rotate(-45deg) translateY(5px); + } + + .burger-menu__line:last-of-type { + transform-origin: center center; + transform: rotate(45deg) translateY(-5px); + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .header { + padding: 64px 110px; + margin-bottom: 100px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .header { + padding: 30px 34px; + margin-bottom: 55px; + + &::after { + content: ''; + background-color: #191536; + width: 100%; + height: 0; + position: absolute; + transition: background-color 0.3s ease; + left: 0; + z-index: 3; + } + + &__language { + display: none; + } + + &__navigation { + height: 0; + background-color: #191536; + overflow: hidden; + width: 100vw; + position: absolute; + left: 0; + right: 0; + top: 76.5px; + z-index: 10; + transition: height 0.3s ease; + display: flex; + } + + &__list { + flex-direction: column; + gap: 0; + } + + .header__list-link { + transition: color 0.3s ease; + width: 100%; + height: 100%; + line-height: 50px; + display: block; + padding-left: 150px; + } + + &__list-item { + height: 50px; + width: 100vw; + text-align: start; + transition: all 0.3s ease; + + &:hover { + background-color: #110e25; + + .header__list-link { + color: #05c2df; + } + } + + &:nth-of-type(n + 6) { + display: flex; + } + } + + &__list-item:nth-of-type(5) { + display: none; + } + + &__navigation--active { + height: 480px; + } + } + + .header--active { + position: relative; + + &::after { + height: 81.5px; + } + } + + .languages-list { + display: flex; + flex-direction: column; + } + + .burger-menu { + display: flex; + flex-direction: column; + gap: 6.5px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .header { + padding: 18px 20px; + margin-bottom: 14px; + + &::after { + content: ''; + background-color: #191536; + width: 100%; + height: 0; + position: absolute; + transition: background-color 0.3s ease; + left: 0; + z-index: 3; + } + + &__logo { + width: 58px; + height: 12px; + } + + &__language { + display: none; + } + + &__navigation { + height: 0; + background-color: #191536; + overflow: hidden; + width: 100vw; + position: absolute; + left: 0; + right: 0; + top: 65.5px; + z-index: 10; + transition: height 0.3s ease; + display: flex; + } + + &__list { + flex-direction: column; + gap: 0; + } + + .header__list-link { + transition: color 0.3s ease; + width: 100%; + height: 100%; + line-height: 50px; + display: block; + padding-left: 20px; + } + + &__list-item { + height: 50px; + width: 100vw; + text-align: start; + transition: all 0.3s ease; + + &:hover { + background-color: #110e25; + + .header__list-link { + color: #05c2df; + } + } + + &:nth-of-type(n + 6) { + display: flex; + } + } + + &__list-item:nth-of-type(5) { + display: none; + } + + &__navigation--active { + height: 480px; + } + } + + .header--active { + position: relative; + + &::after { + height: 81.5px; + } + } + + .languages-list { + display: flex; + flex-direction: column; + } + + .burger-menu { + width: 20px; + height: 20px; + display: flex; + align-items: end; + justify-content: center; + flex-direction: column; + gap: 4.4px; + + &__line:not(:nth-of-type(2)) { + width: 16.3px; + } + + &__line:nth-of-type(2) { + width: 11.8px; + margin-right: 8px; + } + } + + .burger-menu--active { + .burger-menu__line:first-of-type { + transform: rotate(-45deg) translateY(4px); + } + + .burger-menu__line:last-of-type { + transform: rotate(45deg) translateY(-4px); + } + } +} diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss new file mode 100644 index 00000000..98e32d58 --- /dev/null +++ b/src/styles/components/_main.scss @@ -0,0 +1,35 @@ +.body-main { + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + padding-bottom: 106px; + position: relative; +} + +.dark-wrapper { + position: absolute; + width: 100%; + background-color: rgba(0, 0, 0, 0); + transition: background-color 0.3s ease; + z-index: 2; +} + +.dark-wrapper--active { + background-color: rgba(0, 0, 0, 0.67); +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .footer { + padding: 0 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .body-main { + padding-bottom: 80px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .body-main { + padding-bottom: 45px; + } +} diff --git a/src/styles/components/_navigation.scss b/src/styles/components/_navigation.scss new file mode 100644 index 00000000..69f7ef34 --- /dev/null +++ b/src/styles/components/_navigation.scss @@ -0,0 +1,84 @@ +@import '../utils'; + +.navigation { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 235px; + + &__left, + &__right { + display: flex; + align-items: center; + + &__element { + font-weight: 500; + line-height: 150%; + font-size: 16px; + } + } + + &__left { + gap: 40px; + } + + &__right { + gap: 103px; + } + + &--active { + position: relative; + + &::before { + position: absolute; + content: ''; + width: 100%; + height: 1px; + bottom: -10px; + left: 0; + right: 0; + background-color: $light-blue; + } + } + + &__more { + font-weight: 500; + line-height: 150%; + font-size: 16px; + color: $light-blue; + position: relative; + + &::after { + position: absolute; + content: ''; + width: 9px; + height: 6px; + bottom: -7px; + left: 50%; + transform: translateX(-50%); + background: url('../images/arrow-down.svg') center/cover no-repeat; + } + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .navigation { + padding: 0 110px; + + &__right-item:first-of-type { + color: #929292; + } + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .navigation { + display: none; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .navigation { + display: none; + } +} diff --git a/src/styles/components/_new-start.scss b/src/styles/components/_new-start.scss new file mode 100644 index 00000000..136b4f61 --- /dev/null +++ b/src/styles/components/_new-start.scss @@ -0,0 +1,182 @@ +@import '../utils'; + +.new-start { + padding-left: 254px; + position: relative; + margin-bottom: 220px; + + &__title { + font-weight: 900; + font-size: 54px; + line-height: 130%; + margin-bottom: 35px; + } + + &__title-blue { + color: $light-blue; + } + + &__text, + &__price, + &__video-link { + padding-left: 92px; + } + + &__text { + color: $gray; + font-weight: 500; + font-size: 20px; + line-height: 150%; + margin-bottom: 30px; + max-width: 440px; + } + + &__price { + font-weight: 500; + font-size: 20px; + margin-bottom: 45px; + display: block; + } + + &__video-link { + font-weight: 500; + font-size: 16px; + line-height: 130%; + position: relative; + padding-left: 184px; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 92px; + transform: translateY(-36%); + width: 225px; + height: 66px; + background: url('../images/play-video.svg') center/contain no-repeat; + } + } + + &__visual { + position: absolute; + width: 60%; + height: 595px; + background: url('../images/new-start.png') center/contain no-repeat; + right: 234px; + top: -50px; + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .new-start { + padding: 0 110px; + margin-bottom: 84px; + + &__title { + font-size: 46px; + line-height: 130%; + margin-bottom: 19px; + } + + &__text { + font-size: 16px; + margin-bottom: 22px; + } + + &__visual { + right: 110px; + height: auto; + max-height: 1000px; + aspect-ratio: 1104 / 595; + } + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .new-start { + padding: 0 30px; + margin-bottom: 0; + + &__title { + font-size: 26px; + line-height: 130%; + margin-bottom: 19px; + } + + &__text { + font-size: 16px; + margin-bottom: 22px; + padding-left: 0; + max-width: 340px; + } + + &__price { + padding-left: 0; + } + + &__video-link { + padding-left: 110px; + + &::before { + left: 0; + } + } + + &__visual { + right: 32px; + height: 100%; + width: 60%; + aspect-ratio: 1104 / 595; + top: 50%; + transform: translateY(-50%); + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .new-start { + padding: 0 20px; + margin-bottom: 0; + display: flex; + flex-direction: column; + + &__info { + order: 2; + } + + &__title { + font-size: 26px; + line-height: 130%; + margin-bottom: 19px; + } + + &__text, + &__price, + &__video-link { + padding-left: 0; + } + + &__text { + font-size: 16px; + margin-bottom: 22px; + } + + &__video-link { + padding-left: 90px; + + &::before { + left: 0; + } + } + + &__visual { + position: static; + height: auto; + width: 100%; + aspect-ratio: 320 / 172; + order: 1; + background-size: 105% auto; + background-position: 300% center; + } + } +} diff --git a/src/styles/components/_tech-specs.scss b/src/styles/components/_tech-specs.scss new file mode 100644 index 00000000..cdd0e919 --- /dev/null +++ b/src/styles/components/_tech-specs.scss @@ -0,0 +1,328 @@ +@import '../utils'; + +.tech-specs { + padding: 160px 320px 160px 426px; + background-color: $black; + + &__inner { + margin: 0 auto; + width: 1175px; + display: block; + position: relative; + height: 354px; + } + + &__title { + text-align: right; + font-weight: 900; + font-size: 36px; + width: 1175px; + margin: 0 auto 80px; + + &--blue { + color: $light-blue; + } + } + + &__img-wrapper { + height: 294px; + width: 297.5px; + position: absolute; + left: 375px; + bottom: 0; + z-index: 10; + + &::before { + content: ''; + position: absolute; + left: -9px; + top: 46px; + background: url('../images/vr-before.svg') center/contain no-repeat; + width: 40px; + height: 201px; + transform: rotate(-3deg); + } + } + + &__img { + height: 100%; + width: 100%; + } +} + +.spec { + position: absolute; + + &__title { + font-weight: 900; + font-size: 18px; + margin-bottom: 21px; + } + + &__text { + color: $gray; + font-weight: 400; + font-size: 16px; + line-height: 150%; + } +} + +.spec--1, +.spec--2, +.spec--3 { + &::after { + content: ''; + position: absolute; + } +} + +.spec--1 { + top: 0; + left: 0; + max-width: 250px; + + &::after { + left: 91px; + top: 7px; + background: url('../images/path-to-sensor.svg') center/contain no-repeat; + width: 443px; + height: 72px; + } +} + +.spec--2 { + top: 0; + right: 0; + max-width: 340px; + + &::after { + right: 364px; + top: 7px; + background: url('../images/path-to-batteries.svg') center/contain no-repeat; + width: 276.5px; + height: 236.5px; + } +} + +.spec--3 { + bottom: 0; + left: 0; + max-width: 240px; + + &::after { + left: 137px; + bottom: 101px; + background: url('../images/path-to-connection.svg') center/contain no-repeat; + width: 235px; + height: 112.5px; + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .tech-specs { + padding: 100px 112px; + + &__title { + width: 1055px; + } + + &__inner { + margin: 0 auto; + width: 1055px; + } + + &__img-wrapper { + left: 358px; + } + &::before { + left: -18px; + } + } + + .spec--1 { + &::after { + width: 413px; + } + } + + .spec--2 { + &::after { + width: 186px; + height: 245px; + background: url('../images/path-to-batteries-1280.svg') center/contain + no-repeat; + z-index: 20; + } + } + + .spec--3 { + left: 86px; + + &::after { + left: 137px; + bottom: 101px; + background: url('../images/path-to-connection-1280.svg') center/contain + no-repeat; + width: 134px; + height: auto; + + aspect-ratio: 134 / 113; + } + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .tech-specs { + padding: 80px 32px; + margin-bottom: 30px; + + &__title, + &__inner { + width: 100%; + } + + &__title { + font-size: 21px; + text-align: start; + } + + &__inner { + display: flex; + align-items: center; + justify-content: center; + } + + &__img-wrapper { + position: static; + + &::before { + display: none; + } + } + } + + .spec { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 20; + width: 62px; + height: 62px; + border-radius: 50%; + background-color: #05c2df; + display: flex; + align-items: center; + justify-content: center; + + &::after, + &__title, + &__text { + display: none; + } + + &::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url('../images/plus.svg') center/cover no-repeat; + width: 22px; + height: 22px; + } + } + + .spec--1 { + left: calc(50% - 80px); + top: calc(50% - 140px); + } + + .spec--2 { + left: calc(50% - 170px); + top: calc(50% + 130px); + } + + .spec--3 { + left: calc(50% + 90px); + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .tech-specs { + padding: 50px 20px 100px; + + &__title, + &__inner { + width: 100%; + } + + &__title { + font-size: 21px; + text-align: start; + } + + &__inner { + display: flex; + align-items: center; + justify-content: center; + height: auto; + } + + &__img-wrapper { + position: static; + width: 197px; + height: 195px; + + &::before { + display: none; + } + } + } + + .spec { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 20; + width: 34px; + height: 34px; + border-radius: 50%; + background-color: #05c2df; + display: flex; + align-items: center; + justify-content: center; + + &::after, + &__title, + &__text { + display: none; + } + + &::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url('../images/plus.svg') center/cover no-repeat; + width: 22px; + height: 22px; + } + } + + .spec--1 { + left: calc(50% - 25px); + top: calc(50% - 90px); + } + + .spec--2 { + left: calc(50% - 100px); + top: calc(50% + 80px); + } + + .spec--3 { + left: calc(50% + 50px); + } +} diff --git a/src/styles/components/_why.scss b/src/styles/components/_why.scss new file mode 100644 index 00000000..71ca3a98 --- /dev/null +++ b/src/styles/components/_why.scss @@ -0,0 +1,92 @@ +@import '../utils'; + +.why { + background: linear-gradient(108.62deg, #191536 0%, #000 77.34%); + padding: 160px 234px; + + &__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 82px; + text-align: center; + + &--blue { + color: $light-blue; + } + } + + &__features { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 205px; + } + + &__buy-link { + display: none; + background-color: #05c2df; + padding: 13px 0; + width: 200px; + font-size: 16px; + line-height: 130%; + font-weight: 500; + border-radius: 4px; + } +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .why { + padding: 100px 110px; + + &__features { + gap: 23px; + } + + &__buy-link { + display: flex; + align-items: center; + justify-content: center; + margin: 80px auto 0; + } + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .why { + padding: 70px 34px; + + &__title { + font-size: 21px; + text-align: start; + margin-bottom: 30px; + } + + &__features { + gap: 15px; + align-items: start; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .why { + padding: 50px 20px; + + &__title { + font-size: 21px; + text-align: start; + margin-bottom: 30px; + } + + &__features { + gap: 20px; + display: flex; + flex-direction: column; + } + } + + .feature { + &__img { + display: none; + } + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 00000000..c7b1116d --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,1901 @@ +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@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; +} + +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +code, +del, +dfn, +em, +img, +q, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + box-sizing: border-box; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +:root { + background: #14112c; + color: white; + font-family: Inter, sans-serif; + scroll-behavior: smooth; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +li { + list-style: none; +} + +a { + text-decoration: none; + color: white; +} + +.no-scroll { + overflow: hidden; + max-height: 100vh; +} + +.about-greetings { + padding: 147px 0 156px; + background: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); +} + +.about { + padding: 0 234px; + margin-bottom: 175px; + display: flex; + align-items: start; + justify-content: end; + gap: 110px; +} + +.about__image-wrapper { + position: relative; +} + +.about__image-wrapper::before { + position: absolute; + content: '1/5'; + top: 0; + left: -23px; + transform: translateX(-100%); + color: #05c2df; + font-weight: 400; + font-size: 14px; +} + +.about__image { + margin-bottom: 12px; + width: 622px; + height: 290px; +} + +.about__info { + max-width: 435px; +} + +.about__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 30px; +} + +.about__title--blue { + color: #05c2df; +} + +.about__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-bottom: 55px; + color: #929292; +} + +.about__video-link { + font-weight: 500; + font-size: 16px; + line-height: 130%; + position: relative; + padding-left: 108px; +} + +.about__video-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + transform: translateY(-36%); + width: 225px; + height: 66px; + background: url('../images/play-video.svg') center/contain no-repeat; +} + +.switches { + width: 207px; + display: flex; + align-items: center; + gap: 103px; + font-weight: 500; + font-size: 16px; + line-height: 150%; + position: relative; +} + +.switches::before, +.switches::after { + position: absolute; + content: ''; + bottom: -10px; + height: 1px; +} + +.switches::before { + left: 0; + width: 33.33%; + background-color: #05c2df; +} + +.switches::after { + right: 0; + width: 66.67%; + background-color: #212121; +} + +.pagination { + display: none; +} + +.pagination__switch { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #484848; +} + +.pagination__switch--active { + background-color: #ababab; +} + +.greetings { + padding: 0 256px 0 327px; + display: flex; + align-items: start; + justify-content: start; + gap: 101px; +} + +.greetings__subtitle { + margin-bottom: 15px; + font-weight: 400; + font-size: 14px; + color: #05c2df; + display: block; +} + +.greetings__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 30px; +} + +.greetings__title--blue { + color: #05c2df; +} + +.greetings__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: #929292; + max-width: 532px; +} + +.greetings__print { + display: flex; + align-items: flex-start; +} + +.greetings__rotating-title { + font-weight: 900; + font-size: 64px; + line-height: 130%; + writing-mode: vertical-rl; + color: #05040b; + -webkit-text-stroke: 1px #05c2df; +} + +.greetings__rotating-title:nth-of-type(2) { + opacity: 0.5; +} + +.greetings__rotating-title:nth-of-type(3) { + opacity: 0.2; +} + +.greetings__rotating-title:nth-of-type(4) { + opacity: 0.1; +} + +.greetings__rotating-title:nth-of-type(5) { + opacity: 0.05; +} + +.greetings__rotating-title:nth-of-type(6) { + opacity: 0.03; +} + +.greetings__rotating-title:nth-of-type(7) { + opacity: 0.02; +} + +.greetings__rotating-title:nth-child(even) { + transform: rotate(180deg); +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .about { + padding: 0 110px 0 246px; + } + + .about__image { + width: auto; + height: 290px; + aspect-ratio: 430/290; + } + + .switches-left { + color: #929292; + } + + .greetings { + padding: 0 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .about-greetings { + padding: 83px 0 50px; + } + + .about { + padding: 0 34px; + gap: 20px; + margin-bottom: 100px; + } + + .about__title { + font-size: 21px; + } + + .about__image-wrapper::before { + display: none; + } + + .about__image { + width: auto; + height: 270px; + aspect-ratio: 340/270; + } + + .switches { + display: none; + } + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } + + .greetings { + padding: 0 34px; + align-items: center; + } + + .greetings__title { + font-size: 21px; + } + + .greetings__rotating-title { + font-size: 48px; + } + + .greetings__rotating-title:not(:nth-of-type(-n + 3)) { + display: none; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .about-greetings { + padding: 50px 0; + } + + .about { + padding: 0 20px; + flex-direction: column; + gap: 20px; + margin-bottom: 80px; + } + + .about__title { + font-size: 21px; + } + + .about__image-wrapper::before { + display: none; + } + + .about__image { + width: 100%; + height: auto; + aspect-ratio: 280/190; + } + + .switches { + display: none; + } + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + } + + .greetings { + padding: 0 34px; + align-items: center; + } + + .greetings__info { + padding-top: 50px; + } + + .greetings__title { + font-size: 21px; + } + + .greetings__print { + display: none; + } +} + +.contact-form { + width: 716px; +} + +.contact-form__name-wrapper, +.contact-form__email-wrapper, +.contact-form__phone-wrapper, +.contact-form__message-wrapper { + padding-bottom: 20px; + border-bottom: 1px solid #2f2f2f; +} + +.contact-form__name-wrapper, +.contact-form__email-wrapper, +.contact-form__phone-wrapper { + margin-bottom: 24px; +} + +.contact-form__message-wrapper { + margin-bottom: 50px; +} + +.contact-form__name, +.contact-form__email, +.contact-form__phone, +.contact-form__message { + background-color: transparent; + border: none; + outline: none; +} + +.contact-form__message { + height: 88px; +} + +.contact-form__button { + border: none; + color: white; + width: 200px; + padding: 12px 0; + background-color: #05c2df; + border-radius: 4px; + font-weight: 500; + font-size: 16px; + line-height: 130%; +} + +.contact-form__lower-part { + display: flex; + align-items: center; + justify-content: space-between; +} + +.scroll-up { + height: 48px; + width: 48px; + border-radius: 50%; + border: 1px solid #05c2df; + display: flex; + align-items: center; + justify-content: center; +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .contact-form { + width: 50%; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .contact-form { + width: 100%; + } + + .contact-form__button { + width: 100%; + } + + .contacts { + position: absolute; + font-size: 13px !important; + bottom: -230px; + right: 20px; + z-index: 2; + } + + .scroll-up { + display: none; + } +} + +.footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #05040b; + height: 100px; + padding: 0 234px; +} + +.footer__logo-navigation { + display: flex; + align-items: center; + gap: 127px; + justify-content: space-between; + width: 60%; +} + +.footer__list { + display: flex; + align-items: center; + justify-content: center; + gap: 43px; +} + +.footer__element { + font-size: 14px; + line-height: 150%; + font-weight: 400; + color: #f2f2f2; +} + +.footer__socials { + display: flex; + align-items: center; + gap: 28px; +} + +.footer__facebook-icon { + width: 9.35px; + height: 19.1px; +} + +.footer__twitter-icon { + width: 23.38px; + height: 17.5px; +} + +.footer__youtube-icon { + width: 22.1px; + height: 17.9px; +} + +.footer__reddit-icon { + width: 21.82px; + height: 22.28px; +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .footer { + padding: 0 34px; + height: 64px; + } + + .footer__list { + gap: 37px; + } + + .footer__socials { + gap: 18px; + } + + .footer__facebook-icon { + width: 6px; + height: 12px; + } + + .footer__twitter-icon { + width: 15px; + height: 11px; + } + + .footer__youtube-icon { + width: 14.2px; + height: 10.8px; + } + + .footer__reddit-icon { + width: 14px; + height: 14px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .footer { + padding: 100px 20px 50px; + align-items: end; + position: relative; + height: auto; + } + + .footer__logo-navigation { + flex-direction: column; + align-items: start; + gap: 15px; + } + + .footer__list { + flex-direction: column; + align-items: start; + gap: 12px; + } + + .footer__socials { + gap: 22.7px; + } + + .footer__facebook-icon { + width: 6px; + height: 12px; + } + + .footer__twitter-icon { + width: 15px; + height: 11px; + } + + .footer__youtube-icon { + width: 14.2px; + height: 10.8px; + } + + .footer__reddit-icon { + width: 14px; + height: 14px; + } +} + +.gaming { + background-color: #05040b; + padding: 158px 234px; + text-align: center; +} + +.gaming__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 16px; +} + +.gaming__title--blue { + color: #05c2df; +} + +.gaming__subtitle { + display: block; + margin-bottom: 83px; + color: #05c2df; + font-weight: 400; + font-size: 14px; +} + +.gaming__features { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 20px; + align-items: start; +} + +.feature { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} + +.feature__img { + margin-bottom: 32px; + height: 83px; +} + +.feature__title { + margin-bottom: 21px; + font-weight: 900; + font-size: 16px; +} + +.feature__text { + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 150%; + max-width: 348px; + text-align: center; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .gaming { + padding: 100px 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .gaming { + padding: 30px 34px; + } + + .gaming__title { + font-size: 21px; + margin-bottom: 12px; + } + + .gaming__subtitle { + font-size: 12px; + } + + .gaming__features { + grid-template-columns: repeat(2, 1fr); + row-gap: 40px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .gaming { + padding: 50px 21px; + } + + .gaming__title { + font-size: 21px; + margin-bottom: 12px; + text-align: left; + } + + .gaming__subtitle { + margin-bottom: 30px; + font-size: 12px; + text-align: left; + } + + .gaming__features { + grid-template-columns: 1fr; + row-gap: 20px; + } + + .feature__title, + .feature__text { + text-align: left; + margin: 0 auto 11px 0; + } + + .feature__title { + margin: 0 auto 11px 0; + } + + .feature__text { + margin: 0 auto 0 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } +} + +.get-in-touch { + background-color: #05040b; + padding: 160px 235px 205px; + display: flex; + align-items: start; + justify-content: space-between; +} + +.get-in-touch__subtitle { + font-weight: 400; + font-size: 14px; + color: #05c2df; + margin-bottom: 13px; + display: block; +} + +.get-in-touch__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 26px; +} + +.get-in-touch__title--blue { + color: #05c2df; +} + +.get-in-touch__text, +.get-in-touch .contacts { + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-bottom: 76px; + color: #929292; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .get-in-touch { + padding: 100px 110px; + column-gap: 200px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .get-in-touch { + padding: 70px 34px 130px; + column-gap: 22px; + } + + .get-in-touch__title { + margin-bottom: 50px; + } + + .get-in-touch__info { + width: 50%; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .get-in-touch { + padding: 50px 20px; + flex-direction: column; + gap: 32px; + position: relative; + } + + .get-in-touch__title { + margin-bottom: 50px; + font-size: 21px; + } + + .get-in-touch__text { + position: absolute; + bottom: -80px; + left: 20px; + right: 20px; + font-size: 12px; + } +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 60px 233px; + margin-bottom: 230px; + position: relative; +} + +.header__arrow-right { + display: none; + height: 17px; + width: 8.5px; +} + +.header__arrow-right--active { + display: block; + z-index: 30; +} + +.header__logo-language { + display: flex; + gap: 34px; + align-items: center; +} + +.header__language { + display: flex; + align-items: end; + gap: 3px; +} + +.header__list { + display: flex; + align-items: center; + gap: 32px; +} + +.header__list-item { + font-weight: 500; + font-size: 16px; + line-height: 130%; +} + +.header__list-item:nth-of-type(n + 6) { + display: none; +} + +.header__list-item:nth-of-type(5) { + background-color: #05c2df; + padding: 13px 0; + width: 200px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.languages-list { + display: none; +} + +.burger-menu { + display: none; + height: 16px; + width: 29.2px; + z-index: 20; + cursor: pointer; +} + +.burger-menu__line { + display: block; + height: 1px; + background-color: white; + transition: transform 0.3s ease; +} + +.burger-menu__line:first-of-type { + width: 23.8px; +} + +.burger-menu__line:nth-of-type(2) { + width: 17.3px; + padding-right: 12px; +} + +.burger-menu__line:last-of-type { + width: 23.8px; +} + +.burger-menu--active .burger-menu__line:nth-of-type(2) { + display: none; +} + +.burger-menu--active .burger-menu__line:first-of-type { + transform-origin: center center; + transform: rotate(-45deg) translateY(5px); +} + +.burger-menu--active .burger-menu__line:last-of-type { + transform-origin: center center; + transform: rotate(45deg) translateY(-5px); +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .header { + padding: 64px 110px; + margin-bottom: 100px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .header { + padding: 30px 34px; + margin-bottom: 55px; + } + + .header::after { + content: ''; + background-color: #191536; + width: 100%; + height: 0; + position: absolute; + transition: background-color 0.3s ease; + left: 0; + z-index: 3; + } + + .header__language { + display: none; + } + + .header__navigation { + height: 0; + background-color: #191536; + overflow: hidden; + width: 100vw; + position: absolute; + left: 0; + right: 0; + top: 76.5px; + z-index: 10; + transition: height 0.3s ease; + display: flex; + } + + .header__list { + flex-direction: column; + gap: 0; + } + + .header .header__list-link { + transition: color 0.3s ease; + width: 100%; + height: 100%; + line-height: 50px; + display: block; + padding-left: 150px; + } + + .header__list-item { + height: 50px; + width: 100vw; + text-align: start; + transition: all 0.3s ease; + } + + .header__list-item:hover { + background-color: #110e25; + } + + .header__list-item:hover .header__list-link { + color: #05c2df; + } + + .header__list-item:nth-of-type(n + 6) { + display: flex; + } + + .header__list-item:nth-of-type(5) { + display: none; + } + + .header__navigation--active { + height: 480px; + } + + .header--active { + position: relative; + } + + .header--active::after { + height: 81.5px; + } + + .languages-list { + display: flex; + flex-direction: column; + } + + .burger-menu { + display: flex; + flex-direction: column; + gap: 6.5px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .header { + padding: 18px 20px; + margin-bottom: 14px; + } + + .header::after { + content: ''; + background-color: #191536; + width: 100%; + height: 0; + position: absolute; + transition: background-color 0.3s ease; + left: 0; + z-index: 3; + } + + .header__logo { + width: 58px; + height: 12px; + } + + .header__language { + display: none; + } + + .header__navigation { + height: 0; + background-color: #191536; + overflow: hidden; + width: 100vw; + position: absolute; + left: 0; + right: 0; + top: 65.5px; + z-index: 10; + transition: height 0.3s ease; + display: flex; + } + + .header__list { + flex-direction: column; + gap: 0; + } + + .header .header__list-link { + transition: color 0.3s ease; + width: 100%; + height: 100%; + line-height: 50px; + display: block; + padding-left: 20px; + } + + .header__list-item { + height: 50px; + width: 100vw; + text-align: start; + transition: all 0.3s ease; + } + + .header__list-item:hover { + background-color: #110e25; + } + + .header__list-item:hover .header__list-link { + color: #05c2df; + } + + .header__list-item:nth-of-type(n + 6) { + display: flex; + } + + .header__list-item:nth-of-type(5) { + display: none; + } + + .header__navigation--active { + height: 480px; + } + + .header--active { + position: relative; + } + + .header--active::after { + height: 81.5px; + } + + .languages-list { + display: flex; + flex-direction: column; + } + + .burger-menu { + width: 20px; + height: 20px; + display: flex; + align-items: end; + justify-content: center; + flex-direction: column; + gap: 4.4px; + } + + .burger-menu__line:not(:nth-of-type(2)) { + width: 16.3px; + } + + .burger-menu__line:nth-of-type(2) { + width: 11.8px; + margin-right: 8px; + } + + .burger-menu--active .burger-menu__line:first-of-type { + transform: rotate(-45deg) translateY(4px); + } + + .burger-menu--active .burger-menu__line:last-of-type { + transform: rotate(45deg) translateY(-4px); + } +} + +.body-main { + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + padding-bottom: 106px; + position: relative; +} + +.dark-wrapper { + position: absolute; + width: 100%; + background-color: rgba(0, 0, 0, 0); + transition: background-color 0.3s ease; + z-index: 2; +} + +.dark-wrapper--active { + background-color: rgba(0, 0, 0, 0.67); +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .footer { + padding: 0 110px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .body-main { + padding-bottom: 80px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .body-main { + padding-bottom: 45px; + } +} + +.navigation { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 235px; +} + +.navigation__left, +.navigation__right { + display: flex; + align-items: center; +} + +.navigation__left__element, +.navigation__right__element { + font-weight: 500; + line-height: 150%; + font-size: 16px; +} + +.navigation__left { + gap: 40px; +} + +.navigation__right { + gap: 103px; +} + +.navigation--active { + position: relative; +} + +.navigation--active::before { + position: absolute; + content: ''; + width: 100%; + height: 1px; + bottom: -10px; + left: 0; + right: 0; + background-color: #05c2df; +} + +.navigation__more { + font-weight: 500; + line-height: 150%; + font-size: 16px; + color: #05c2df; + position: relative; +} + +.navigation__more::after { + position: absolute; + content: ''; + width: 9px; + height: 6px; + bottom: -7px; + left: 50%; + transform: translateX(-50%); + background: url('../images/arrow-down.svg') center/cover no-repeat; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .navigation { + padding: 0 110px; + } + + .navigation__right-item:first-of-type { + color: #929292; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .navigation { + display: none; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .navigation { + display: none; + } +} + +.new-start { + padding-left: 254px; + position: relative; + margin-bottom: 220px; +} + +.new-start__title { + font-weight: 900; + font-size: 54px; + line-height: 130%; + margin-bottom: 35px; +} + +.new-start__title-blue { + color: #05c2df; +} + +.new-start__text, +.new-start__price, +.new-start__video-link { + padding-left: 92px; +} + +.new-start__text { + color: #929292; + font-weight: 500; + font-size: 20px; + line-height: 150%; + margin-bottom: 30px; + max-width: 440px; +} + +.new-start__price { + font-weight: 500; + font-size: 20px; + margin-bottom: 45px; + display: block; +} + +.new-start__video-link { + font-weight: 500; + font-size: 16px; + line-height: 130%; + position: relative; + padding-left: 184px; +} + +.new-start__video-link::before { + content: ''; + position: absolute; + top: 0; + left: 92px; + transform: translateY(-36%); + width: 225px; + height: 66px; + background: url('../images/play-video.svg') center/contain no-repeat; +} + +.new-start__visual { + position: absolute; + width: 60%; + height: 595px; + background: url('../images/new-start.png') center/contain no-repeat; + right: 234px; + top: -50px; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .new-start { + padding: 0 110px; + margin-bottom: 84px; + } + + .new-start__title { + font-size: 46px; + line-height: 130%; + margin-bottom: 19px; + } + + .new-start__text { + font-size: 16px; + margin-bottom: 22px; + } + + .new-start__visual { + right: 110px; + height: auto; + max-height: 1000px; + aspect-ratio: 1104/595; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .new-start { + padding: 0 30px; + margin-bottom: 0; + } + + .new-start__title { + font-size: 26px; + line-height: 130%; + margin-bottom: 19px; + } + + .new-start__text { + font-size: 16px; + margin-bottom: 22px; + padding-left: 0; + max-width: 340px; + } + + .new-start__price { + padding-left: 0; + } + + .new-start__video-link { + padding-left: 110px; + } + + .new-start__video-link::before { + left: 0; + } + + .new-start__visual { + right: 32px; + height: 100%; + width: 60%; + aspect-ratio: 1104/595; + top: 50%; + transform: translateY(-50%); + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .new-start { + padding: 0 20px; + margin-bottom: 0; + display: flex; + flex-direction: column; + } + + .new-start__info { + order: 2; + } + + .new-start__title { + font-size: 26px; + line-height: 130%; + margin-bottom: 19px; + } + + .new-start__text, + .new-start__price, + .new-start__video-link { + padding-left: 0; + } + + .new-start__text { + font-size: 16px; + margin-bottom: 22px; + } + + .new-start__video-link { + padding-left: 90px; + } + + .new-start__video-link::before { + left: 0; + } + + .new-start__visual { + position: static; + height: auto; + width: 100%; + aspect-ratio: 320/172; + order: 1; + background-size: 105% auto; + background-position: 300% center; + } +} + +.tech-specs { + padding: 160px 320px 160px 426px; + background-color: #05040b; +} + +.tech-specs__inner { + margin: 0 auto; + width: 1175px; + display: block; + position: relative; + height: 354px; +} + +.tech-specs__title { + text-align: right; + font-weight: 900; + font-size: 36px; + width: 1175px; + margin: 0 auto 80px; +} + +.tech-specs__title--blue { + color: #05c2df; +} + +.tech-specs__img-wrapper { + height: 294px; + width: 297.5px; + position: absolute; + left: 375px; + bottom: 0; + z-index: 10; +} + +.tech-specs__img-wrapper::before { + content: ''; + position: absolute; + left: -9px; + top: 46px; + background: url('../images/vr-before.svg') center/contain no-repeat; + width: 40px; + height: 201px; + transform: rotate(-3deg); +} + +.tech-specs__img { + height: 100%; + width: 100%; +} + +.spec { + position: absolute; +} + +.spec__title { + font-weight: 900; + font-size: 18px; + margin-bottom: 21px; +} + +.spec__text { + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 150%; +} + +.spec--1::after, +.spec--2::after, +.spec--3::after { + content: ''; + position: absolute; +} + +.spec--1 { + top: 0; + left: 0; + max-width: 250px; +} + +.spec--1::after { + left: 91px; + top: 7px; + background: url('../images/path-to-sensor.svg') center/contain no-repeat; + width: 443px; + height: 72px; +} + +.spec--2 { + top: 0; + right: 0; + max-width: 340px; +} + +.spec--2::after { + right: 364px; + top: 7px; + background: url('../images/path-to-batteries.svg') center/contain no-repeat; + width: 276.5px; + height: 236.5px; +} + +.spec--3 { + bottom: 0; + left: 0; + max-width: 240px; +} + +.spec--3::after { + left: 137px; + bottom: 101px; + background: url('../images/path-to-connection.svg') center/contain no-repeat; + width: 235px; + height: 112.5px; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .tech-specs { + padding: 100px 112px; + } + + .tech-specs__title { + width: 1055px; + } + + .tech-specs__inner { + margin: 0 auto; + width: 1055px; + } + + .tech-specs__img-wrapper { + left: 358px; + } + + .tech-specs::before { + left: -18px; + } + + .spec--1::after { + width: 413px; + } + + .spec--2::after { + width: 186px; + height: 245px; + background: url('../images/path-to-batteries-1280.svg') center/contain + no-repeat; + z-index: 20; + } + + .spec--3 { + left: 86px; + } + + .spec--3::after { + left: 137px; + bottom: 101px; + background: url('../images/path-to-connection-1280.svg') center/contain + no-repeat; + width: 134px; + height: auto; + aspect-ratio: 134/113; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .tech-specs { + padding: 80px 32px; + margin-bottom: 30px; + } + + .tech-specs__title, + .tech-specs__inner { + width: 100%; + } + + .tech-specs__title { + font-size: 21px; + text-align: start; + } + + .tech-specs__inner { + display: flex; + align-items: center; + justify-content: center; + } + + .tech-specs__img-wrapper { + position: static; + } + + .tech-specs__img-wrapper::before { + display: none; + } + + .spec { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 20; + width: 62px; + height: 62px; + border-radius: 50%; + background-color: #05c2df; + display: flex; + align-items: center; + justify-content: center; + } + + .spec::after, + .spec__title, + .spec__text { + display: none; + } + + .spec::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url('../images/plus.svg') center/cover no-repeat; + width: 22px; + height: 22px; + } + + .spec--1 { + left: calc(50% - 80px); + top: calc(50% - 140px); + } + + .spec--2 { + left: calc(50% - 170px); + top: calc(50% + 130px); + } + + .spec--3 { + left: calc(50% + 90px); + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .tech-specs { + padding: 50px 20px 100px; + } + + .tech-specs__title, + .tech-specs__inner { + width: 100%; + } + + .tech-specs__title { + font-size: 21px; + text-align: start; + } + + .tech-specs__inner { + display: flex; + align-items: center; + justify-content: center; + height: auto; + } + + .tech-specs__img-wrapper { + position: static; + width: 197px; + height: 195px; + } + + .tech-specs__img-wrapper::before { + display: none; + } + + .spec { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 20; + width: 34px; + height: 34px; + border-radius: 50%; + background-color: #05c2df; + display: flex; + align-items: center; + justify-content: center; + } + + .spec::after, + .spec__title, + .spec__text { + display: none; + } + + .spec::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: url('../images/plus.svg') center/cover no-repeat; + width: 22px; + height: 22px; + } + + .spec--1 { + left: calc(50% - 25px); + top: calc(50% - 90px); + } + + .spec--2 { + left: calc(50% - 100px); + top: calc(50% + 80px); + } + + .spec--3 { + left: calc(50% + 50px); + } +} + +.why { + background: linear-gradient(108.62deg, #191536 0%, #000 77.34%); + padding: 160px 234px; +} + +.why__title { + font-weight: 900; + font-size: 36px; + margin-bottom: 82px; + text-align: center; +} + +.why__title--blue { + color: #05c2df; +} + +.why__features { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 205px; +} + +.why__buy-link { + display: none; + background-color: #05c2df; + padding: 13px 0; + width: 200px; + font-size: 16px; + line-height: 130%; + font-weight: 500; + border-radius: 4px; +} + +@media screen and (min-width: 1280px) and (max-width: 1919px) { + .why { + padding: 100px 110px; + } + + .why__features { + gap: 23px; + } + + .why__buy-link { + display: flex; + align-items: center; + justify-content: center; + margin: 80px auto 0; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { + .why { + padding: 70px 34px; + } + + .why__title { + font-size: 21px; + text-align: start; + margin-bottom: 30px; + } + + .why__features { + gap: 15px; + align-items: start; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .why { + padding: 50px 20px; + } + + .why__title { + font-size: 21px; + text-align: start; + margin-bottom: 30px; + } + + .why__features { + gap: 20px; + display: flex; + flex-direction: column; + } + + .feature__img { + display: none; + } +} + +/*# sourceMappingURL=index.css.map */ diff --git a/src/styles/index.css.map b/src/styles/index.css.map new file mode 100644 index 00000000..727f0e19 --- /dev/null +++ b/src/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/_extends.scss","_fonts.scss","reset.scss","utils/_vars.scss","components/_about-greetings.scss","components/_contact-form.scss","components/_footer.scss","components/_gaming.scss","components/_get-in-touch.scss","components/_header.scss","components/_main.scss","components/_navigation.scss","components/_new-start.scss","components/_tech-specs.scss","components/_why.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;;ACJF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EA2CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,YC9DW;ED+DX;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AFtFF;EACE;EACA;;;AIAF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,ODvBO;ECwBP;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE,OD7CO;;ACiDX;EACE;EACA;EACA;EACA;EACA,ODrDG;;ACwDL;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,kBDlGS;;ACqGX;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,ODtIS;ECuIT;;AAGF;EACE;EACA;EACA;;AAEA;EACE,ODhJO;;ACoJX;EACE;EACA;EACA;EACA,ODvJG;ECwJH;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,ODpKI;ECqKJ;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAIA;IACE;;EAIJ;IACE;IACA;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;;;AAKN;EACE;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAIA;IACE;;EAIJ;IACE;IACA;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;;;AJxUN;EACE;EACA;;;AKAF;EACE;;AAEA;EAIE;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EAIE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,kBFxCS;EEyCT;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;;ALzFJ;EACE;EACA;;;AMAF;EACE;EACA;EACA;EACA,kBHHM;EGIN;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;ANtIN;EACE;EACA;;;AOAF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OJZO;;AIgBX;EACE;EACA;EACA,OJnBS;EIoBT;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE,OJjDG;EIkDH;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAKF;IAEE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AP5HN;EACE;EACA;;;AQAF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OLXS;EKYT;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE,OLtBO;;AK0BX;AAAA;EAEE;EACA;EACA;EACA;EACA,OL/BG;;;AKmCP;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;;AR5EN;EACE;EACA;;;ASAF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;;EAIJ;IACE;;EAIJ;IACE;;EAGF;IACE;;EAIJ;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;;EAIJ;IACE;;EAIJ;IACE;;EAGF;IACE;;EAIJ;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;;EAKF;IACE;;EAGF;IACE;;;AC1UN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AVhCJ;EACE;EACA;;;AWAF;EACE;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBRtCO;;AQ0CX;EACE;EACA;EACA;EACA,OR9CS;EQ+CT;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;IACE;;EAEA;IACE;;;AAKN;EACE;IACE;;;AAIJ;EACE;IACE;;;AXjFJ;EACE;EACA;;;AYAF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE,OTdS;;ASiBX;EAGE;;AAGF;EACE,OTvBG;ESwBH;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AAKN;EACE;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;;EAGF;IAGE;;EAGF;IACE;IACA;;EAGF;IACE;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AZlLN;EACE;EACA;;;AaAF;EACE;EACA,kBVDM;;AUGN;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,OVrBO;;AUyBX;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE,OV5DG;EU6DH;EACA;EACA;;;AAOF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAEF;IACE;;EAKF;IACE;;EAKF;IACE;IACA;IACA;IAEA;;EAIJ;IACE;;EAEA;IACE;IACA;IACA;IAEA;IACA;IAEA;;;AAKN;EACE;IACE;IACA;;EAEA;IAEE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;;EAKN;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IAGE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAEA;IAEE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAKN;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IAGE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;;AbrUJ;EACE;EACA;;;AcAF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE,OXZO;;AWgBX;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAKF;IACE","file":"index.css"} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 00000000..261d2269 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,15 @@ +@import './utils'; +@import './fonts'; +@import './typography'; +@import './reset'; +@import 'components/about-greetings'; +@import 'components/contact-form'; +@import 'components/footer'; +@import 'components/gaming'; +@import 'components/get-in-touch'; +@import 'components/header'; +@import 'components/main'; +@import 'components/navigation'; +@import 'components/new-start'; +@import 'components/tech-specs'; +@import 'components/why'; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d1..00000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/reset.css b/src/styles/reset.css new file mode 100644 index 00000000..a5623f2c --- /dev/null +++ b/src/styles/reset.css @@ -0,0 +1,74 @@ +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +code, +del, +dfn, +em, +img, +q, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + box-sizing: border-box; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +a { + text-decoration: none; + color: black; +} + +/*# sourceMappingURL=reset.css.map */ diff --git a/src/styles/reset.css.map b/src/styles/reset.css.map new file mode 100644 index 00000000..d6e3cd73 --- /dev/null +++ b/src/styles/reset.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["reset.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EA2CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAIF;EACE;EACA","file":"reset.css"} \ No newline at end of file diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 00000000..d99ee7a1 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,88 @@ +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +code, +del, +dfn, +em, +img, +q, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + box-sizing: border-box; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +:root { + background: $background; + color: white; + font-family: Inter, sans-serif; + scroll-behavior: smooth; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +li { + list-style: none; +} + +a { + text-decoration: none; + color: white; +} + +.no-scroll { + overflow: hidden; + max-height: 100vh; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..af169db2 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ -$c-gray: #eee; +$background: #14112c; +$light-blue: #05c2df; +$gray: #929292; +$black: #05040b;