diff --git a/README.md b/README.md index 302783df..6cd83a3c 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://prokopenkooleh.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/about/about-us.svg b/src/images/about/about-us.svg new file mode 100644 index 00000000..c3273765 --- /dev/null +++ b/src/images/about/about-us.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/about/dots.svg b/src/images/about/dots.svg new file mode 100644 index 00000000..4d16fbdd --- /dev/null +++ b/src/images/about/dots.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/about/video-photo.png b/src/images/about/video-photo.png new file mode 100644 index 00000000..c54222dd Binary files /dev/null and b/src/images/about/video-photo.png differ diff --git a/src/images/button/button-dots.svg b/src/images/button/button-dots.svg new file mode 100644 index 00000000..df456b5b --- /dev/null +++ b/src/images/button/button-dots.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/button/button-left.svg b/src/images/button/button-left.svg new file mode 100644 index 00000000..3aa9497f --- /dev/null +++ b/src/images/button/button-left.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/header/bg/bg-image.png b/src/images/header/bg/bg-image.png new file mode 100644 index 00000000..62754982 Binary files /dev/null and b/src/images/header/bg/bg-image.png differ diff --git a/src/images/header/select.svg b/src/images/header/select.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/header/select.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-arrow-down.svg b/src/images/icons/icon-arrow-down.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/icons/icon-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-arrow-top.svg b/src/images/icons/icon-arrow-top.svg new file mode 100644 index 00000000..ae74eeda --- /dev/null +++ b/src/images/icons/icon-arrow-top.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-back.svg b/src/images/icons/icon-back.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/icons/icon-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-burger-menu.svg b/src/images/icons/icon-burger-menu.svg new file mode 100644 index 00000000..4f8cca58 --- /dev/null +++ b/src/images/icons/icon-burger-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-close-menu.svg b/src/images/icons/icon-close-menu.svg new file mode 100644 index 00000000..1e31cd1d --- /dev/null +++ b/src/images/icons/icon-close-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 00000000..390e3693 --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-reddit.svg b/src/images/icons/icon-reddit.svg new file mode 100644 index 00000000..cf084739 --- /dev/null +++ b/src/images/icons/icon-reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 00000000..084900b8 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-youtube.svg b/src/images/icons/icon-youtube.svg new file mode 100644 index 00000000..38a9ffdc --- /dev/null +++ b/src/images/icons/icon-youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/logo/katvr-logo.svg b/src/images/logo/katvr-logo.svg new file mode 100644 index 00000000..163b27fc --- /dev/null +++ b/src/images/logo/katvr-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/gaming/education.svg b/src/images/main/gaming/education.svg new file mode 100644 index 00000000..ebd73b9d --- /dev/null +++ b/src/images/main/gaming/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/main/gaming/fitness.svg b/src/images/main/gaming/fitness.svg new file mode 100644 index 00000000..b84079b4 --- /dev/null +++ b/src/images/main/gaming/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/main/gaming/real-estate.svg b/src/images/main/gaming/real-estate.svg new file mode 100644 index 00000000..9d68212e --- /dev/null +++ b/src/images/main/gaming/real-estate.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/main/gaming/social.svg b/src/images/main/gaming/social.svg new file mode 100644 index 00000000..8d37db9c --- /dev/null +++ b/src/images/main/gaming/social.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/main/tech/bg-mobile.png b/src/images/main/tech/bg-mobile.png new file mode 100644 index 00000000..fd035ca7 Binary files /dev/null and b/src/images/main/tech/bg-mobile.png differ diff --git a/src/images/main/tech/left.svg b/src/images/main/tech/left.svg new file mode 100644 index 00000000..58bbd07a --- /dev/null +++ b/src/images/main/tech/left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main/tech/minus.svg b/src/images/main/tech/minus.svg new file mode 100644 index 00000000..6fee4ce3 --- /dev/null +++ b/src/images/main/tech/minus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main/tech/plus.svg b/src/images/main/tech/plus.svg new file mode 100644 index 00000000..c1c91e51 --- /dev/null +++ b/src/images/main/tech/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/main/tech/right.svg b/src/images/main/tech/right.svg new file mode 100644 index 00000000..69725c29 --- /dev/null +++ b/src/images/main/tech/right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main/tech/tech.png b/src/images/main/tech/tech.png new file mode 100644 index 00000000..e99cd203 Binary files /dev/null and b/src/images/main/tech/tech.png differ diff --git a/src/images/main/tech/top.svg b/src/images/main/tech/top.svg new file mode 100644 index 00000000..0a169d2c --- /dev/null +++ b/src/images/main/tech/top.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main/why/universally.svg b/src/images/main/why/universally.svg new file mode 100644 index 00000000..43b518d2 --- /dev/null +++ b/src/images/main/why/universally.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/main/why/vr-pc.svg b/src/images/main/why/vr-pc.svg new file mode 100644 index 00000000..6927580a --- /dev/null +++ b/src/images/main/why/vr-pc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/why/wireless.svg b/src/images/main/why/wireless.svg new file mode 100644 index 00000000..45fd1e34 --- /dev/null +++ b/src/images/main/why/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/play.svg b/src/images/play.svg new file mode 100644 index 00000000..3220562e --- /dev/null +++ b/src/images/play.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/selected-play.svg b/src/images/selected-play.svg new file mode 100644 index 00000000..9b21cdf6 --- /dev/null +++ b/src/images/selected-play.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..4063514e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,899 @@ + - + - Title + KATVR + + + + - -

Hello Mate Academy

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

+ MORE THAN + GAMING! +

+

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

+
+ +
+
+
+

EDUCATION

+

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

+

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

+
+ +
+
+

REAL ESTATE

+

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

+

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

+
+ +
+
+

FITNESS

+

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

+

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

+
+ +
+ +

SOCIAL INTERACTIONS

+

+ Hang out with your friends in the virtual world when you + can’t... +

+

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

+
+
+
+
+ +
+
+
+

+ ABOUT + PRODUCT +

+
+ photo +
+
+
Previous
+
Next
+
+
+

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

+ +

+ + Hello, + +
+ NICE TO MEET + YOU! +

+

+ KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and solutions. + Founded in 2013, we have quickly grown to become one of the + world’s leading professional suppliers of VR games’ & simulations’ + equipment +

+
+
+
+
+ +
+
+

+ TECH + SPECS +

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

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

+

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

+

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

+
+ +
+
+

VR/PC CONTROL PANEL

+

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

+

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

+

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

+
+ +
+
+

WIRELESS SENSORS

+

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

+

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

+

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

+
+
+
+
+ +
+
+
+

+ + 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..c0ba2d23 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,96 @@ 'use strict'; +const buttonTop = document.getElementById('button-top'); +const sensor = document.getElementById('sensor'); + +buttonTop.addEventListener('click', () => { + sensor.classList.toggle('visible'); + +}); + +const buttonLeft = document.getElementById('button-left'); +const connection = document.getElementById('connection'); + +buttonLeft.addEventListener('click', () => { + connection.classList.toggle('visible'); +}); + +const buttonRight = document.getElementById('button-right'); +const batteries = document.getElementById('batteries'); + +buttonRight.addEventListener('click', () => { + batteries.classList.toggle('visible'); +}); + +const techButtons = document.querySelectorAll('.tech__plus'); + +techButtons.forEach((techButton) => { + techButton.addEventListener('click', () => { + techButton.classList.toggle('active'); // Перемикаємо клас active при кліку + }); +}); + +// Функція для обчислення висоти menu__bottom для кожного меню +function setMenuBottomHeight(menuSelector) { + const menuTop = document.querySelector(`${menuSelector} .menu__top`); + const menuBottom = document.querySelector(`${menuSelector} .menu__bottom`); + + // Перевіряємо ширину екрана перед виконанням + if (window.innerWidth < 768) { + return; // Виходимо з функції, якщо ширина екрана менше або дорівнює 768px + } + + if (menuTop && menuBottom) { + // Отримуємо висоту верхньої частини + const heightMenuTop = menuTop.offsetHeight; + + // Обчислюємо висоту нижньої частини як залишок від екрану + const heightMenuBottom = window.innerHeight - heightMenuTop; + + // Встановлюємо висоту нижньої частини меню + menuBottom.style.height = `${heightMenuBottom}px`; + } +} + +// Викликаємо функцію для кожного меню +setMenuBottomHeight('#menu'); +setMenuBottomHeight('#language'); +setMenuBottomHeight('#help'); + +// Якщо потрібно, можна додати слухачі подій для зміни висоти при зміні розміру вікна +window.addEventListener('resize', () => { + setMenuBottomHeight('#menu'); + setMenuBottomHeight('#language'); + setMenuBottomHeight('#help'); +}); + + +const headerButtons = document.querySelectorAll('.btn-toggle__button'); + +headerButtons.forEach(button => { + button.addEventListener('click', () => { + // Видаляємо клас active з усіх елементів + document.querySelector('.btn-toggle__button.active')?.classList.remove('active'); + + // Додаємо клас active до натиснутого елемента + button.classList.add('active'); + }); +}); + +const fixed = document.getElementById('fixed'); + +const scrollThreshold = 300; + +// Додаємо обробник події скролу +window.addEventListener('scroll', () => { + // Визначаємо кількість прокручених пікселів + const scrolled = window.scrollY || document.documentElement.scrollTop; + + // Перевіряємо, чи прокручено достатньо + if (scrolled > scrollThreshold) { + fixed.classList.remove('fixed--hidden'); + } else { + fixed.classList.add('fixed--hidden'); + } +}); + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 619b8c52..00000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe..f1078dce 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..89bc3703 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,119 @@ +.about { + padding-block: 50px; + background: $bg-purple-and-black-color; + + @include on-desktop { + padding-block: 150px; + } + + &__grid { + @include page-grid; + } + + &__slider { + display: flex; + flex-direction: column; + align-items: center; + gap: 14px; + grid-column: 1/-1; + margin-bottom: 20px; + + @include on-tablet { + grid-column: span 3; + grid-row: 1/4; + margin-bottom: 0; + gap: 15px; + } + + @include on-desktop { + grid-column: 4/11; + grid-row: 1/5; + align-items: flex-start; + gap: 12px; + margin-bottom: 175px; + } + } + + &__photo { + display: flex; + height: 189px; + width: 100%; + object-fit: cover; + + @include on-tablet { + height: 270px; + } + + @include on-desktop { + height: 290px; + } + } + + &__dots { + background-image: url(../images/about/dots.svg); + height: 4px; + width: 44px; + + @include on-desktop { + display: none; + } + } + + &__btn-toggle { + display: none; + + @include on-desktop { + display: block; + } + } + + &__text { + margin-bottom: 24px; + grid-column: 1/-1; + + &--top { + height: 176px; + + @include on-tablet { + grid-column: 4/-1; + margin-bottom: 30px; + height: fit-content; + } + + @include on-desktop { + grid-column: -6/-1; + grid-row: 2/3; + margin-bottom: 42px; + } + } + + &--bottom { + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: 2/8; + } + } + } + + &__bg-img { + display: none; + + @include on-tablet { + display: block; + background-image: url(../images/about/about-us.svg); + background-repeat: no-repeat; + background-position: -13px; + grid-column: 5/7; + grid-row: 4/6; + height: 256.71px; + } + + @include on-desktop { + grid-column: 10/-1; + grid-row: 5/7; + } + } +} diff --git a/src/styles/blocks/btn-toggle.scss b/src/styles/blocks/btn-toggle.scss new file mode 100644 index 00000000..fef7cd9f --- /dev/null +++ b/src/styles/blocks/btn-toggle.scss @@ -0,0 +1,28 @@ +.btn-toggle { + display: flex; + gap: 103px; + padding-bottom: 10px; + border-bottom: 1px rgba(33, 33, 33, 1) solid; + + &__button { + position: relative; + cursor: pointer; + color: white; + + @include hover(text-shadow, 0 4px 15px rgba(11, 186, 230, 0.88)); + + &.active { + color: $main-text-color; + } + + &.active::after { + content: ''; + position: absolute; + bottom: -10px; + width: 100%; + left: 0; + height: 1px; + background-color: $blue-text-color; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..fa2ada26 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,35 @@ +.button { + border-radius: 4px; + text-decoration: none; + height: 40px; + background-color: $blue-text-color; + display: grid; + place-items: center; + color: $white-text-color; + font-weight: 500; + font-size: 14px; + line-height: 18.2px; + outline: none; + border: none; + + @include on-tablet { + height: 48px; + width: 200px; + } + + @include hover(background-color, rgb(190, 190, 240)); + + &--header { + transform: translateY(23px); + grid-column: 1/-1; + + @include on-tablet { + display: none; + } + } + + &:focus { + background-color: white; + color: $blue-text-color; + } +} diff --git a/src/styles/blocks/fixed.scss b/src/styles/blocks/fixed.scss new file mode 100644 index 00000000..317cc8af --- /dev/null +++ b/src/styles/blocks/fixed.scss @@ -0,0 +1,22 @@ +.fixed { + @include on-tablet { + width: 48px; + height: 48px; + background-image: url(../images/icons/icon-arrow-top.svg); + background-size: cover; + position: fixed; + bottom: 200px; + right: 34px; + + @include hover(transform, scale(1.2)); + } + + @include on-desktop { + bottom: 330px; + right: 110px; + } + + &--hidden { + display: none; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..f6d91dca --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,41 @@ +.footer { + background-color: #000; + padding-block: 45px 50px; + + @include on-desktop { + padding-block: 39px; + } + + &__grid { + @include page-grid; + + @include on-tablet { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &__logo { + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__nav { + grid-column: 1/2; + grid-row: 2/4; + } + + &__icon { + width: 130px; + height: 22px; + display: flex; + gap: 15px; + align-items: end; + grid-column: 2/3; + grid-row: 3/4; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 00000000..0b1d3773 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,56 @@ +.form { + display: flex; + flex-direction: column; + gap: 24px; + margin-bottom: 30px; + + &__element { + color: white; + background-color: $bg-black-color; + border: none; + border-bottom: 1px solid #2f2f2f; + outline: none; + padding-bottom: 19px; + + &::placeholder { + font-size: 14px; + line-height: 21px; + } + + &:focus { + border-bottom: 1px solid $blue-text-color; + &::placeholder { + color: $blue-text-color; + } + } + + &:user-invalid { + border-bottom: 1px solid red; + &::placeholder { + color: red; + } + } + } + + &__message { + resize: none; + padding-bottom: 67px; + margin-bottom: 30px; + } +} + +/* Change autocomplete styles in WebKit */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + border-bottom: 1px solid $blue-text-color; + -webkit-text-fill-color: $blue-text-color; + -webkit-box-shadow: 0 0 0 1000px #000 inset; + transition: background-color 5000s ease-in-out 0s; +} diff --git a/src/styles/blocks/gaming.scss b/src/styles/blocks/gaming.scss new file mode 100644 index 00000000..a1c9084f --- /dev/null +++ b/src/styles/blocks/gaming.scss @@ -0,0 +1,56 @@ +.gaming { + background-color: $bg-black-color; + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } + + &__item { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__info { + height: 30px; + font-weight: 400; + color: $blue-text-color; + font-size: 12px; + line-height: 14.52px; + + @include on-desktop { + font-size: 14px; + line-height: 16.94px; + } + } + + &__top { + margin-bottom: 30px; + text-align: center; + + @include on-desktop { + margin-bottom: 83px; + } + } + + &__bottom { + @include page-grid; + + row-gap: 20px; + + @include on-tablet { + row-gap: 40px; + } + } +} diff --git a/src/styles/blocks/get.scss b/src/styles/blocks/get.scss new file mode 100644 index 00000000..4bc8d628 --- /dev/null +++ b/src/styles/blocks/get.scss @@ -0,0 +1,43 @@ +.get { + background-color: $bg-black-color; + padding-block: 50px; + + @include on-desktop { + padding-block: 150px 200px; + } + + &__info { + font-size: 12px; + line-height: 14px; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 76px; + font-size: 16px; + line-height: 24px; + } + + @include on-desktop { + grid-column: span 6; + margin-bottom: 76px; + } + } + + &__grid { + @include on-tablet { + @include page-grid; + } + } + + &__form { + @include on-tablet { + grid-column: 4/-1; + grid-row: 2/3; + grid-row: span 4; + } + + @include on-desktop { + grid-column: 9/-1; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..aad2b1f5 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,160 @@ +.header { + background: $bg-purple-and-black-color; + + &__bg { + background-image: url(../images/header/bg/bg-image.png); + display: block; + background-repeat: no-repeat; + background-size: 149%; + background-position: -81px center; + overflow: hidden; + top: 44px; + position: absolute; + height: 172px; + width: 280px; + + @include on-tablet { + height: 100%; + width: 486px; + top: 0; + right: 0; + background-size: cover; + background-position: left center; + } + + @include on-desktop { + width: 811px; + } + } + + &__grid { + @include page-grid; + } + + &__top-bar { + z-index: 1; + grid-column: 1/-1; + padding-top: 18px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 186px; + + @include on-tablet { + margin-bottom: 55px; + padding-top: 30px; + } + + @include on-desktop { + padding-top: 47px; + } + } + + &__bottom-bar { + display: none; + + @include on-desktop { + display: flex; + justify-content: space-between; + align-items: center; + grid-column: 1/-1; + margin-bottom: 84px; + } + } + + &__link { + display: block; + text-decoration: none; + color: $blue-text-color; + font-weight: 500; + position: relative; + margin-left: 100px; + + @include hover(transform, scale(1.2)); + + &::after { + content: ''; + position: absolute; + bottom: -9px; /* Відступ вниз */ + left: 50%; /* Вирівнювання по центру */ + transform: translateX(-50%); + + /* Створення трикутника */ + width: 0; + height: 0; + border-left: 4.5px solid transparent; /* Половина width (9px / 2) */ + border-right: 4.5px solid transparent; /* Половина width (9px / 2) */ + border-top: 6px solid $blue-text-color; /* Висота трикутника */ + } + } + + &__description { + grid-column: 1/-1; + margin-bottom: 8px; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 2/6; + font-weight: 500; + margin-bottom: 5px; + } + } + + &__price { + grid-column: 1/-1; + + color: $white-text-color; + font-size: 18px; + line-height: 21.78px; + font-weight: 500; + text-align: center; + margin-bottom: 38px; + + @include on-tablet { + justify-self: start; + grid-column: 1/2; + } + + @include on-desktop { + grid-column: 2/3; + margin-bottom: 29px; + } + } + + &__play { + grid-column: 1/-1; + margin-bottom: 12px; + + @include on-tablet { + grid-column: 1/4; + margin-bottom: 71px; + } + + @include on-desktop { + margin-bottom: 93px; + grid-column: 2/5; + } + } + + &__top-left { + display: flex; + justify-content: space-between; + width: 100%; + + @include on-desktop { + gap: 34.5px; + } + } + + &__top-right { + display: none; + + @include on-desktop { + display: flex; + gap: 36px; + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..5b80ab66 --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,22 @@ +.help { + font-size: 16px; + font-weight: 400; + line-height: 24px; + display: grid; + row-gap: 30px; + + &__space { + display: block; + padding-block: 16px; + } + + &__links { + display: grid; + row-gap: 20px; + } + + &__link { + color: $blue-text-color; + text-decoration: none; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..01757b92 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,58 @@ +.icon { + width: 20px; + height: 20px; + background-repeat: no-repeat; + display: flex; + background-size: contain; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(../images/icons/icon-burger-menu.svg); + + @include on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/icon-close-menu.svg); + margin-bottom: 38px; + justify-self: end; + + @include on-tablet { + margin-bottom: 46px; + } + } + + &--closehelp { + background-image: url(../images/icons/icon-close-menu.svg); + justify-self: end; + } + + &--back { + background-image: url(../images/icons/icon-back.svg); + margin-bottom: 38px; + } + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + } + + &--youtube { + background-image: url(../images/icons/icon-youtube.svg); + + height: 16px; + } + + &--twitter { + background-image: url(../images/icons/icon-twitter.svg); + align-self: end; + + height: 16px; + } + + &--reddit { + background-image: url(../images/icons/icon-reddit.svg); + } +} diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss new file mode 100644 index 00000000..769a76e3 --- /dev/null +++ b/src/styles/blocks/info.scss @@ -0,0 +1,47 @@ +.info { + display: grid; + row-gap: 9px; + line-height: 19.36px; + + @include on-tablet { + margin-bottom: 30px; + } + + &--get { + display: none; + + @include on-tablet { + display: grid; + grid-row: 3/4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &--footer { + margin-bottom: 22px; + grid-column: 2/3; + grid-row: 2/3; + font-size: 13px; + line-height: 15.73px; + row-gap: 12px; + + @include on-tablet { + display: none; + } + } + + &__link { + text-decoration: none; + color: inherit; + + @include hover(color, white); + } + + &--menu { + margin-bottom: 20px; + } +} diff --git a/src/styles/blocks/interest.scss b/src/styles/blocks/interest.scss new file mode 100644 index 00000000..5f639b95 --- /dev/null +++ b/src/styles/blocks/interest.scss @@ -0,0 +1,144 @@ +.interest { + &__photo { + background-repeat: no-repeat; + background-size: cover; + + &--education { + @include on-tablet { + background-image: url(../images/main/gaming/education.svg); + width: 98px; + height: 81px; + display: flex; + justify-self: center; + margin-bottom: 34px; + } + + @include on-desktop { + margin-bottom: 32px; + } + } + + &--real { + @include on-tablet { + background-image: url(../images/main/gaming/real-estate.svg); + display: flex; + justify-self: center; + width: 84px; + height: 84px; + margin-bottom: 30px; + } + } + + &--fitness { + @include on-tablet { + background-image: url(../images/main/gaming/fitness.svg); + display: flex; + justify-self: center; + width: 110px; + height: 81px; + margin-bottom: 34px; + } + } + + &--social { + @include on-tablet { + background-image: url(../images/main/gaming/social.svg); + display: flex; + justify-self: center; + width: 83px; + height: 83px; + margin-bottom: 31px; + } + } + + &--universally { + @include on-tablet { + background-image: url(../images/main/why/universally.svg); + display: flex; + justify-self: center; + width: 90px; + height: 80px; + margin-bottom: 25px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &--panel { + @include on-tablet { + background-image: url(../images/main/why/vr-pc.svg); + display: flex; + justify-self: center; + width: 100px; + height: 80px; + margin-bottom: 25px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &--wireless { + @include on-tablet { + background-image: url(../images/main/why/wireless.svg); + display: flex; + justify-self: center; + width: 105px; + height: 75px; + margin-bottom: 25px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + } + + &__info { + &--mobile-gaming { + @include on-tablet { + display: none; + } + } + + &--tablet-gaming { + display: none; + + @include on-tablet { + display: block; + text-align: center; + } + } + + &--mobile-why { + @include on-tablet { + display: none; + } + } + + &--tablet-why { + display: none; + + @include on-tablet { + display: block; + text-align: center; + } + + @include on-desktop { + display: none; + } + } + + &--desktop-why { + display: none; + + @include on-desktop { + display: block; + text-align: center; + } + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..1ae96ad7 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,21 @@ +.logo { + display: flex; + + &__img { + object-fit: contain; + width: 58px; + height: 12px; + + @include on-tablet { + width: 64px; + height: 14px; + } + + @include on-desktop { + width: 77.5px; + height: 16px; + } + } + + @include hover(transform, scale(1.2)); +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 00000000..c793dc29 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,3 @@ +.main { + background-color: $bg-black-color; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..7fdf2062 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,30 @@ +.menu { + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 100vh; + overflow: auto; + + &__top { + height: 100vh; + background: $bg-purple-color; + padding-top: 20px; + font-weight: 500; + font-size: 21px; + line-height: 27.3px; + + @include on-tablet { + padding-top: 34px; + height: fit-content; + } + } + + &__bottom { + display: none; + + @include on-tablet { + display: block; + background: rgba(0, 0, 0, 0.7); + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..b25d2c81 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,70 @@ +.nav { + &--language { + @include on-tablet { + margin-bottom: 26px; + } + } + + &--link { + @include on-tablet { + margin-bottom: 138px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + + &--desktop { + flex-direction: row; + align-items: center; + gap: 36px; + line-height: 48px; + } + + &--footer { + font-size: 13px; + line-height: 19.5px; + gap: 12px; + + @include on-tablet { + flex-direction: row; + font-size: 14px; + gap: 43px; + } + + @include on-desktop { + line-height: 21px; + gap: 37px; + } + } + } + + &__item { + &--top { + @include hover(background-color, $menu-hover-color); + @include hover(color, $blue-text-color); + } + + &--bottom { + @include hover(color, $blue-text-color); + } + } + + &__link { + display: block; + color: $white-text-color; + text-decoration: none; + + &--padding { + padding-block: 11px; + } + + &:hover { + color: $blue-text-color; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..4e2a325f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,46 @@ +* { + margin: 0; + padding: 0; +} + +button, +a, +select:hover { + cursor: pointer; +} + +.page { + font-family: Inter, serif; + line-height: 24px; + color: $main-text-color; + scroll-behavior: smooth; + + &__body { + min-width: 320px; + } + + &__relative { + position: relative; + } + + &__menu { + position: fixed; + left: 0; + right: 0; + top: 0; + z-index: 1; + + transition: opacity $effect-duration; + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/play-video.scss b/src/styles/blocks/play-video.scss new file mode 100644 index 00000000..600ba0c4 --- /dev/null +++ b/src/styles/blocks/play-video.scss @@ -0,0 +1,43 @@ +.play-video { + color: $white-text-color; + position: relative; + display: flex; + box-sizing: border-box; + align-items: center; + text-decoration: none; + padding-left: 97px; + line-height: 20.8px; + font-weight: 500; + width: 209px; + height: 48px; + + @include on-tablet { + width: 236px; + } + + &::before { + content: url(../images/play.svg); + position: absolute; + left: 0; + top: -22%; + } + + &:hover::before { + content: url(../images/selected-play.svg); + } + + &__about { + margin-bottom: 88px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/-1; + margin-bottom: 112px; + } + + @include on-desktop { + grid-column: -6/-3; + grid-row: 3/4; + } + } +} diff --git a/src/styles/blocks/select.scss b/src/styles/blocks/select.scss new file mode 100644 index 00000000..ec38ee39 --- /dev/null +++ b/src/styles/blocks/select.scss @@ -0,0 +1,28 @@ +.select { + display: none; + + @include on-desktop { + appearance: none; /* Видаляє стандартну стрілочку */ + -webkit-appearance: none; /* Для Safari/Chrome */ + -moz-appearance: none; /* Для Firefox */ + background-color: inherit; + color: $blue-text-color; + outline: none; + border: none; + font-weight: 500; + line-height: 21px; + + background-image: url(../images/header/select.svg); + background-repeat: no-repeat; + background-position: right 60%; + background-size: 8px; + padding-right: 10px; + + @include hover(transform, scale(1.2)); + + option { + background-color: $bg-purple-color; + color: $blue-text-color; + } + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 00000000..60a9be8f --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,211 @@ +.tech { + background-color: $bg-black-color; + padding-block: 50px 80px; + + @include on-desktop { + padding-block: 160px; + } + + &__desktop-relative { + position: relative; + + @include on-desktop { + height: 479px; + } + } + + &__bg-img { + background-image: url(../images/main/tech/bg-mobile.png); + position: relative; + margin-inline: auto; + background-size: cover; + width: 214px; + height: 206px; + + @include on-tablet { + width: 300px; + height: 300px; + } + + @include on-desktop { + background-image: url(../images/main/tech/tech.png); + + width: 313px; + height: 294px; + bottom: -189; + } + } + + &__text { + font-size: 12px; + width: 168px; + background-color: $bg-purple-color; + padding: 17px 10px 22px; + + @include on-tablet { + font-size: 15px; + } + + @include on-desktop { + font-size: 16px; + background-color: inherit; + width: max-content; + padding: 0; + } + } + + &__plus { + display: block; + cursor: pointer; + position: absolute; + background-size: cover; + width: 34px; + height: 34px; + background-image: url(../images/main/tech/plus.svg); + + @include on-tablet { + width: 40px; + height: 40px; + } + + @include on-desktop { + display: none; + } + + &.active { + background-image: url(../images/main/tech/minus.svg); + } + + &--top { + top: -10px; + left: 69px; + + @include hover(transform, scale(1.2)); + } + + &--right { + top: 86px; + left: 144px; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + top: 130px; + left: 212px; + } + } + + &--left { + bottom: 8px; + left: -8px; + + @include hover(transform, scale(1.2)); + } + } + + &__specs { + position: relative; + } + + &__spec { + z-index: 1; + position: absolute; + display: none; + opacity: 0; + + &.visible { + display: block; + opacity: 1; + } + + &--top { + top: -186px; + + @include on-tablet { + left: 400px; + top: -394px; + } + + @include on-desktop { + display: block; + opacity: 1; + top: -365px; + left: 18px; + } + } + + &--right { + top: -240px; + + @include on-tablet { + left: 490px; + top: -310px; + } + + @include on-desktop { + display: block; + opacity: 1; + top: -365px; + left: 761px; + } + } + + &--left { + top: -178px; + + @include on-tablet { + left: 19px; + top: -229px; + } + + @include on-desktop { + display: block; + opacity: 1; + top: -142px; + left: 18px; + } + } + } + + &__line { + display: none; + position: absolute; + background-repeat: no-repeat; + background-size: contain; + + &--top { + @include on-desktop { + display: block; + background-image: url(../images/main/tech/top.svg); + top: -69px; + right: 149px; + width: 431px; + height: 72px; + } + } + + &--right { + @include on-desktop { + display: block; + background-image: url(../images/main/tech/right.svg); + clip-path: inset(0 0 0 209px); + z-index: 1; + width: 276.5px; + height: 235.5px; + top: -69px; + left: 100px; + } + } + + &--left { + @include on-desktop { + display: block; + background-image: url(../images/main/tech/left.svg); + width: 236.5px; + height: 107px; + left: -218px; + top: 55px; + } + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 00000000..f37a5c34 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,185 @@ +.title { + font-weight: 900; + color: $white-text-color; + + &--header { + grid-column: 1/-1; + font-size: 26px; + line-height: 33.8px; + margin-bottom: 17px; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + font-size: 46px; + line-height: 60px; + grid-column: span 7; + margin-bottom: 19px; + } + } + + &--help { + text-align: center; + font-size: 21px; + line-height: 27.3px; + } + + &--tech { + font-size: 21px; + line-height: 25.41px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + text-align: right; + margin-right: 195px; + margin-bottom: 80px; + } + } + + &--spec { + font-size: 12px; + + @include on-tablet { + font-size: 14px; + margin-bottom: 4px; + } + + @include on-desktop { + font-weight: 900; + font-size: 18px; + line-height: 21.78px; + margin-bottom: 21px; + } + } + + &--gaming { + line-height: 25.41px; + margin-bottom: 12px; + + @include on-desktop { + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + margin-bottom: 16px; + } + } + + &--interest { + margin-bottom: 11px; + line-height: 19.36px; + + @include on-tablet { + text-align: center; + margin-bottom: 37px; + font-size: 15px; + } + + @include on-desktop { + font-weight: 900; + font-size: 16px; + line-height: 19.36px; + margin-bottom: 20px; + } + } + + &--about { + font-size: 21px; + margin-bottom: 20px; + line-height: 25.41px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/-1; + margin-bottom: 30px; + } + + @include on-desktop { + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + grid-column: -6/-1; + } + } + + &--hello { + font-size: 21px; + line-height: 25.41px; + margin-bottom: 22px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 4; + grid-row: 1/2; + } + + @include on-desktop { + grid-column: 2/8; + grid-row: 5/6; + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + margin-bottom: 30px; + } + } + + &--why { + margin-bottom: 32px; + line-height: 25.41px; + font-size: 21px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 82px; + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + text-align: center; + } + } + + &__blue { + color: $blue-text-color; + + &--small { + font-weight: 400; + } + + &--hello { + font-size: 14px; + line-height: 16.94px; + padding-bottom: 11px; + display: inline-block; + } + } + + &--questions { + margin-bottom: 32px; + line-height: 25.41px; + font-size: 21px; + + @include on-tablet { + grid-column: span 2; + margin-bottom: 50px; + } + + @include on-desktop { + font-weight: 900; + font-size: 36px; + line-height: 43.57px; + margin-bottom: 26px; + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/why.scss b/src/styles/blocks/why.scss new file mode 100644 index 00000000..4011ce8c --- /dev/null +++ b/src/styles/blocks/why.scss @@ -0,0 +1,45 @@ +.why { + background: $bg-purple-and-black-color; + padding-block: 50px; + + @include on-desktop { + padding-block: 160px 175px; + } + + &__bottom { + @include page-grid; + + row-gap: 20px; + + @include on-tablet { + row-gap: 40px; + } + } + + &__item { + background: none; + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 2; + } + + &--left { + @include on-desktop { + grid-column: span 4; + } + } + + &--mid { + @include on-desktop { + grid-column: 7/11; + } + } + + &--right { + @include on-desktop { + grid-column: 13/-1; + } + } + } +} diff --git a/src/styles/helpers/container.scss b/src/styles/helpers/container.scss new file mode 100644 index 00000000..244ccc35 --- /dev/null +++ b/src/styles/helpers/container.scss @@ -0,0 +1,3 @@ +.container { + @include content-padding-inline; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..186f9b22 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,25 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'helpers/container'; +@import 'blocks/header'; +@import 'blocks/logo'; +@import 'blocks/icon'; +@import 'blocks/title'; +@import 'blocks/play-video'; +@import 'blocks/button'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/help'; +@import 'blocks/gaming'; +@import 'blocks/interest'; +@import 'blocks/about'; +@import 'blocks/tech'; +@import 'blocks/why'; +@import 'blocks/get'; +@import 'blocks/form'; +@import 'blocks/footer'; +@import 'blocks/info'; +@import 'blocks/main'; +@import 'blocks/fixed'; +@import 'blocks/select'; +@import 'blocks/btn-toggle'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..eb111482 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,43 @@ #{$_property}: $_toValue; } } + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + max-width: 1060px; + margin-inline: auto; + padding-inline: 110px; + } +} + +@mixin page-grid { + display: grid; + column-gap: 20px; + grid-template-columns: repeat($columns-on-mobile, 1fr); + + @include on-tablet { + grid-template-columns: repeat($columns-on-tablet, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat($columns-on-desktop, 1fr); + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..c8f044a7 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$main-text-color: #929292; +$white-text-color: #fff; +$blue-text-color: #05c2df; +$bg-purple-color: #191536; +$bg-purple-and-black-color: linear-gradient(107.56deg, #191536 0%, #000 100%); +$bg-menu-color: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); +$menu-hover-color: #110e25; +$bg-black-color: #05040b; +$columns-on-mobile: 2; +$columns-on-tablet: 6; +$columns-on-desktop: 16; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$big-desktop-min-width: 1400px; +$effect-duration: 0.3s;