diff --git a/README.md b/README.md index 302783df..e6500a7a 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 @@ -9,9 +9,8 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl - Tablet 640px - Mobile (> 320px) - - ## Github flow + 1. **Fork** the repo. 2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) 3. Run `npm install` (or just `npm i`). @@ -25,7 +24,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://arthurogunfiye.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-greetings-big.svg b/src/images/about/about-greetings-big.svg new file mode 100644 index 00000000..25145dc3 --- /dev/null +++ b/src/images/about/about-greetings-big.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/about/about-greetings.svg b/src/images/about/about-greetings.svg new file mode 100644 index 00000000..c3273765 --- /dev/null +++ b/src/images/about/about-greetings.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/about/image_1.png b/src/images/about/image_1.png new file mode 100644 index 00000000..2c624f7b Binary files /dev/null and b/src/images/about/image_1.png differ diff --git a/src/images/about/image_2.png b/src/images/about/image_2.png new file mode 100644 index 00000000..7befaaba Binary files /dev/null and b/src/images/about/image_2.png differ diff --git a/src/images/about/image_3.png b/src/images/about/image_3.png new file mode 100644 index 00000000..30215c41 Binary files /dev/null and b/src/images/about/image_3.png differ diff --git a/src/images/about/image_4.png b/src/images/about/image_4.png new file mode 100644 index 00000000..c1c28882 Binary files /dev/null and b/src/images/about/image_4.png differ diff --git a/src/images/about/image_5.png b/src/images/about/image_5.png new file mode 100644 index 00000000..705d77c2 Binary files /dev/null and b/src/images/about/image_5.png differ diff --git a/src/images/arrow-down-hover.svg b/src/images/arrow-down-hover.svg new file mode 100644 index 00000000..bed5e5f0 --- /dev/null +++ b/src/images/arrow-down-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/arrow-down.svg b/src/images/arrow-down.svg new file mode 100644 index 00000000..1782f2a7 --- /dev/null +++ b/src/images/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/batterries-line.svg b/src/images/batterries-line.svg new file mode 100644 index 00000000..f47de02d --- /dev/null +++ b/src/images/batterries-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/buttom-minus.svg b/src/images/buttom-minus.svg new file mode 100644 index 00000000..6fee4ce3 --- /dev/null +++ b/src/images/buttom-minus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/buttom-plus.svg b/src/images/buttom-plus.svg new file mode 100644 index 00000000..8e7c26ba --- /dev/null +++ b/src/images/buttom-plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/connection-line.svg b/src/images/connection-line.svg new file mode 100644 index 00000000..a1f02465 --- /dev/null +++ b/src/images/connection-line.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/dot.svg b/src/images/dot.svg new file mode 100644 index 00000000..fcb9b841 --- /dev/null +++ b/src/images/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/footer/discord.svg b/src/images/footer/discord.svg new file mode 100644 index 00000000..1edf2f77 --- /dev/null +++ b/src/images/footer/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 00000000..94093dc8 --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter.svg b/src/images/footer/twitter.svg new file mode 100644 index 00000000..9d7d50b6 --- /dev/null +++ b/src/images/footer/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/youtube.svg b/src/images/footer/youtube.svg new file mode 100644 index 00000000..fdcb8d04 --- /dev/null +++ b/src/images/footer/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/header/image-des.png b/src/images/header/image-des.png new file mode 100644 index 00000000..3c34c0d3 Binary files /dev/null and b/src/images/header/image-des.png differ diff --git a/src/images/header/image-mob.png b/src/images/header/image-mob.png new file mode 100644 index 00000000..92b7cbba Binary files /dev/null and b/src/images/header/image-mob.png differ diff --git a/src/images/header/image-tab.png b/src/images/header/image-tab.png new file mode 100644 index 00000000..50b4dd51 Binary files /dev/null and b/src/images/header/image-tab.png differ diff --git a/src/images/icon-close-hover.svg b/src/images/icon-close-hover.svg new file mode 100644 index 00000000..b5e21280 --- /dev/null +++ b/src/images/icon-close-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon-close.svg b/src/images/icon-close.svg new file mode 100644 index 00000000..9ebfb1b9 --- /dev/null +++ b/src/images/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon-play.svg b/src/images/icon-play.svg new file mode 100644 index 00000000..9d697267 --- /dev/null +++ b/src/images/icon-play.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logo-menu-hover.svg b/src/images/logo-menu-hover.svg new file mode 100644 index 00000000..f637e481 --- /dev/null +++ b/src/images/logo-menu-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/logo-menu.svg b/src/images/logo-menu.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/src/images/logo-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..1a27e41c --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/more/education.svg b/src/images/more/education.svg new file mode 100644 index 00000000..fecbf2c6 --- /dev/null +++ b/src/images/more/education.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/more/fitness.svg b/src/images/more/fitness.svg new file mode 100644 index 00000000..a3c14f4c --- /dev/null +++ b/src/images/more/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/more/real-estate.svg b/src/images/more/real-estate.svg new file mode 100644 index 00000000..93c0adef --- /dev/null +++ b/src/images/more/real-estate.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/more/social.svg b/src/images/more/social.svg new file mode 100644 index 00000000..272412bd --- /dev/null +++ b/src/images/more/social.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/order/image-des.png b/src/images/order/image-des.png new file mode 100644 index 00000000..7c83a881 Binary files /dev/null and b/src/images/order/image-des.png differ diff --git a/src/images/order/image-mob.png b/src/images/order/image-mob.png new file mode 100644 index 00000000..92b7cbba Binary files /dev/null and b/src/images/order/image-mob.png differ diff --git a/src/images/order/image-tab.png b/src/images/order/image-tab.png new file mode 100644 index 00000000..eda6ae4c Binary files /dev/null and b/src/images/order/image-tab.png differ diff --git a/src/images/order/visa.png b/src/images/order/visa.png new file mode 100644 index 00000000..a5dd6bb2 Binary files /dev/null and b/src/images/order/visa.png differ diff --git a/src/images/order/visa.svg b/src/images/order/visa.svg new file mode 100644 index 00000000..66975d2e --- /dev/null +++ b/src/images/order/visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/row-back.svg b/src/images/row-back.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/row-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/section-title/gaming.svg b/src/images/section-title/gaming.svg new file mode 100644 index 00000000..b82beb37 --- /dev/null +++ b/src/images/section-title/gaming.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/section-title/kat-loco.svg b/src/images/section-title/kat-loco.svg new file mode 100644 index 00000000..451b940e --- /dev/null +++ b/src/images/section-title/kat-loco.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/semi-round.svg b/src/images/semi-round.svg new file mode 100644 index 00000000..86595c33 --- /dev/null +++ b/src/images/semi-round.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sensore-line.svg b/src/images/sensore-line.svg new file mode 100644 index 00000000..dfc56f6d --- /dev/null +++ b/src/images/sensore-line.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/top-button-hover.svg b/src/images/top-button-hover.svg new file mode 100644 index 00000000..9ebe47f9 --- /dev/null +++ b/src/images/top-button-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/top-button.svg b/src/images/top-button.svg new file mode 100644 index 00000000..b05a6f2c --- /dev/null +++ b/src/images/top-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/why/universally.svg b/src/images/why/universally.svg new file mode 100644 index 00000000..9948bf98 --- /dev/null +++ b/src/images/why/universally.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/why/vr-pc.svg b/src/images/why/vr-pc.svg new file mode 100644 index 00000000..a1ac8643 --- /dev/null +++ b/src/images/why/vr-pc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/why/wireless.svg b/src/images/why/wireless.svg new file mode 100644 index 00000000..5ec035c7 --- /dev/null +++ b/src/images/why/wireless.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..7be1c1de 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,2658 @@ - + - Title + KateVR + + + + -

Hello Mate Academy

+ +
+
+
+
+
+ + +
+ + +
+
+ +
+ + + +
+ + +
+
+
+ +
+
+ + + + + Header image + + +

+ THE NEW START OF + VR LOCOMOTION +

+

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

+

1200$

+ +
+ + + + +
+
+ + +
+
+
+ + + +
+ + +
+ + More + +
+ +
+
Previous
+
Next
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

+ MORE THAN + + GAMING! + +

+

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

+
+
+ Education +

EDUCATION

+
+

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

+
+
+
+ Real estate +

REAL ESTATE

+
+

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

+
+
+
+ Fitness +

FITNESS

+
+

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

+
+
+
+ +

SOCIAL INTERACTIONS

+
+

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

+
+
+
+
+
+ + +
+
+
+

+ ABOUT + PRODUCT +

+ +
1/5
+ +
+ + + + + + +
+
+ katvrWithJeans +
+
+ katvrAudioSistem +
+
+ katvrSoldier +
+
+ katvrBeat +
+
+ katvrSystem +
+
+ +
+ + + + + +
+
+ +
+
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. +

+ + + + About Us + +
+
+
+ + +
+
+
+

+ TECH + SPECS +

+
+ katvrBeat +
+
+ + + +

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

+ +
+

SENSOR

+
+ +
+ + + +

+ Type: Lithium-ion 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 +

+
+

+ BATTERRIES +

+
+ +
+ + + +

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

+
+

+ CONNECTION +

+
+
+
+
+
+ + +
+
+
+

+ WHY + + KAT LOCO? + +

+ +
+
+ Universally +

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 +

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 +

WIRELESS SENSORS

+
+

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

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

Have any questions?

+

+ GET IN + TOUCH +

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

+ Our manager will reply you within 15 minutes +

+ +
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+
+
+
+ + + diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss new file mode 100644 index 00000000..4b91dbc6 --- /dev/null +++ b/src/styles/blocks/_about.scss @@ -0,0 +1,135 @@ +.about { + &__content-top { + @include on-tablet { + @include page-grid; + } + } + + &__info { + font-weight: 400; + line-height: 24px; + text-align: left; + color: $c-text; + margin-bottom: 48px; + + @include on-tablet { + grid-column: 4 / -1; + margin-bottom: 30px; + } + + @include on-desktop { + grid-column: 9 / -1; + } + + @include on-design { + grid-column: 12 / -1; + } + + &--greetings { + margin: 0; + margin-top: 22px; + + @include on-tablet { + grid-column: span 4; + margin: 0; + margin-bottom: 22px; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-design { + grid-column: 2 / 8; + } + } + } + + &__slider-number { + display: none; + + @include on-desktop { + color: $c-accent; + display: block; + font-size: 14px; + font-weight: 400; + line-height: 16.94px; + grid-column: 1 / 3; + justify-self: flex-end; + } + + @include on-design { + grid-column: 1 / 4; + } + } + + &__slider { + display: none; + + @include on-desktop { + display: flex; + grid-area: 4 / 3 / 5 / 8; + width: 207px; + justify-content: space-between; + } + + @include on-design { + grid-area: 4 / 4 / 5 / 11; + } + } + + &__hello { + font-size: 14px; + font-weight: 400; + line-height: 16.94px; + color: $c-accent; + margin-block: 88px 11px; + + @include on-tablet { + grid-column: span 4; + margin-block: 24px 11px; + } + + @include on-desktop { + grid-column: span 6; + margin-block: 43px 15px; + } + + @include on-design { + grid-column: 2 / 8; + } + } + + &__content-bottom { + @include on-tablet { + @include page-grid; + + padding-top: 84px; + } + + @include on-desktop { + padding-top: 184px; + } + + @include on-design { + padding-top: 175px; + } + } + + &__svg { + display: none; + + @include on-tablet { + display: block; + grid-area: 1 / 5 / 4 / -1; + } + + @include on-desktop { + grid-area: 1 / 7 / 4 / -1; + } + + @include on-design { + grid-area: 1 / 8 / 4 / -1; + } + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 00000000..6a5c056a --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,191 @@ +.button { + width: 100%; + background-color: $c-accent; + display: flex; + justify-content: center; + align-items: center; + height: 37px; + border-radius: 4px; + border: none; + cursor: pointer; + + &--buy { + width: 280px; + height: 40px; + + @include on-tablet { + width: 458px; + height: 48px; + } + + @include on-desktop { + display: none; + } + } + + @include on-tablet { + height: 48px; + } + + @include on-desktop { + font-size: 16px; + } + + &:hover { + background-color: $c-white; + } + + &__buy { + color: $c-white; + text-align: center; + font-size: 14px; + line-height: 18.2px; + height: 37px; + width: 100%; + align-content: center; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + display: none; + } + } + + &__purchase { + color: $c-white; + text-align: center; + font-size: 14px; + line-height: 18.2px; + margin-block: 40px 37px; + cursor: pointer; + background-color: $c-accent; + + @include on-tablet { + grid-column: 2 / 6; + margin-block: 58px 43px; + } + + @include on-desktop { + grid-column: 7 / -1; + width: 199px; + margin-block: 68px 97px; + } + } + + &__purchase-link { + font-size: 14px; + line-height: 18.2px; + color: $c-white; + width: 100%; + height: 37px; + text-align: center; + align-content: center; + + @include on-tablet { + height: 48px; + } + + @include on-desktop { + font-size: 16px; + } + + &:hover { + color: $c-accent; + } + + .forminput:valid, + select:valid & { + background-color: $c-accent; + cursor: pointer; + } + } + + &__back { + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + width: 218px; + grid-column: 1 / -1; + justify-self: center; + } + } + + &__more { + line-height: 24px; + color: $c-accent; + background-color: transparent; + border: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; + + &:hover { + color: $c-white; + } + + &::after { + content: ''; + background-image: url('../images/arrow-down.svg'); + width: 9px; + height: 6px; + background-repeat: no-repeat; + } + + &:hover::after { + background-image: url('../images/arrow-down-hover.svg'); + } + } + + &__top-bar { + display: none; + + @include on-desktop { + width: 200px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + color: $c-white; + line-height: 20.8px; + font-size: 16px; + } + + &--why { + @include on-desktop { + margin-top: 90px; + } + } + + &:hover { + color: $c-accent; + } + } + + &__contact { + color: $c-white; + margin-block: 30px; + + @include on-tablet { + width: 200px; + margin: 0; + } + } + + &__contacts { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: white; + + &:hover { + color: $c-accent; + } + } +} diff --git a/src/styles/blocks/_contact-info.scss b/src/styles/blocks/_contact-info.scss new file mode 100644 index 00000000..100d631b --- /dev/null +++ b/src/styles/blocks/_contact-info.scss @@ -0,0 +1,75 @@ +.contact-info { + display: flex; + flex-direction: column; + gap: 11px; + + &--help { + padding-bottom: 73px; + + @include on-tablet { + grid-column: span 3; + gap: 20px; + } + + @include on-desktop { + grid-column: 5 / 8; + padding: 0; + } + } + + &--contact { + display: none; + + @include on-tablet { + grid-area: 4 / 1 / 5 / 4; + font-size: 16px; + font-weight: 400; + line-height: 19.36px; + text-align: left; + display: flex; + flex-direction: column; + gap: 11px; + margin-bottom: 97px; + } + + @include on-desktop { + grid-area: 4 / 1 / 5 / 7; + margin-bottom: 139px; + } + } + + &--footer { + display: flex; + gap: 12px; + + @include on-tablet { + display: none; + } + } + + &__link { + font-weight: 400; + line-height: 19.36px; + text-align: left; + color: $c-text; + + @include on-tablet { + line-height: 24px; + } + + &--contact { + @include on-tablet { + line-height: 19.36px; + } + } + + &--footer { + font-size: 13px; + line-height: 15.73px; + } + + &:hover { + color: $c-accent; + } + } +} diff --git a/src/styles/blocks/_contact.scss b/src/styles/blocks/_contact.scss new file mode 100644 index 00000000..a980b476 --- /dev/null +++ b/src/styles/blocks/_contact.scss @@ -0,0 +1,81 @@ +.contact { + background-color: rgba(5, 4, 11, 1); + + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__question { + font-size: 14px; + font-weight: 400; + line-height: 16.94px; + color: $c-accent; + margin-bottom: 11px; + + @include on-tablet { + grid-area: 1 / 1 / 2/ 4; + } + + @include on-desktop { + grid-area: 1 / 1 / 2 / 7; + margin-bottom: 13px; + } + } + + &__input { + @include on-tablet { + grid-area: 1 / 4 / 5 / -1; + } + + @include on-desktop { + grid-area: 1 / 7 / 5 / -1; + } + } + + &__text { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $c-text; + + @include on-tablet { + grid-area: 3 / 1 / 4 / 4; + margin-bottom: 76px; + font-size: 16px; + line-height: 24px; + } + + @include on-desktop { + grid-area: 3 / 1 / 4 / 7; + } + } + + &__button-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 48px; + } + + &__button-top { + display: none; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + background-image: url('../images/top-button.svg'); + width: 48px; + height: 48px; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; + + &:hover { + background-image: url('../images/top-button-hover.svg'); + } + } + } +} diff --git a/src/styles/blocks/_faq.scss b/src/styles/blocks/_faq.scss new file mode 100644 index 00000000..f4fc78bd --- /dev/null +++ b/src/styles/blocks/_faq.scss @@ -0,0 +1,113 @@ +.faq { + background: rgba(0, 0, 0, 0.7); + overflow: auto; + width: 100vw; + height: 100vh; + + &__main { + background-color: rgba(25, 21, 54, 1); + height: 100%; + + @include on-desktop { + width: 880px; + height: fit-content; + margin: auto; + margin-bottom: 127px; + } + } + + &__conteiner { + @include on-tablet { + @include page-grid; + } + + @include on-desktop { + grid-template-columns: repeat(10, 70px); + margin-inline: -110px; + } + } + + &__content { + max-height: 0; + overflow: hidden; + transition: max-height 0.1s; + } + + &__toggle { + display: none; + + &:checked ~ .faq__content { + max-height: 100%; + } + + &:checked ~ .faq__button-more label { + display: inline-block; + } + } + + &__bocks { + border: 1px solid $c-accent; + border-radius: 4px; + padding: 20px 12px; + margin-bottom: 13px; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 2 / -2; + } + } + + &__question { + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: $c-accent; + margin-bottom: 18px; + cursor: pointer; + display: block; + } + + &__answer { + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: $c-text; + margin-bottom: 40px; + } + + &__date { + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: rgba(84, 84, 84, 1); + } + + &__button-more { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / -1; + justify-self: center; + margin-top: 50px; + } + + @include on-desktop { + margin-bottom: 49px; + } + + &--bottom { + margin: 0; + + &:hover { + color: $c-white; + } + } + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 00000000..25e2e85e --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,43 @@ +.footer { + background-color: rgba(0, 0, 0, 1); + padding-block: 45px 50px; + + &__content { + @include page-grid; + + @include on-tablet { + align-items: center; + } + } + + &__socials { + grid-column: 2 / -1; + display: flex; + justify-content: space-between; + margin-top: 22px; + align-items: center; + + @include on-tablet { + grid-column: -2 / -1; + margin: 0; + } + + @include on-desktop { + grid-column: -3 / -1; + justify-content: flex-end; + gap: 18px; + } + } + + &__link { + &:hover { + @include hover(transform, scale(1.2)); + } + } + + &__svg { + &:hover { + fill: $c-accent; + } + } +} diff --git a/src/styles/blocks/_form-select.scss b/src/styles/blocks/_form-select.scss new file mode 100644 index 00000000..c59a334f --- /dev/null +++ b/src/styles/blocks/_form-select.scss @@ -0,0 +1,39 @@ +.form-select { + display: flex; + flex-direction: column; + gap: 13px; + position: relative; + + @include on-tablet { + grid-column: span 3; + row-gap: 40px; + } + + &::after { + content: ''; + background-image: url('../images/arrow-down.svg'); + width: 9px; + height: 6px; + position: absolute; + bottom: 19%; + right: 16px; + pointer-events: none; + background-repeat: no-repeat; + } + + &:has(select:valid) .form__subtitle { + color: $c-accent; + } + + &__list { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 100%; + height: 44px; + background-color: rgba(25, 21, 54, 1); + border: none; + color: $c-white; + outline: none; + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 00000000..78f3f1f3 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,86 @@ +.form { + display: flex; + flex-direction: column; + gap: 30px; + + @include on-tablet { + @include page-grid; + } + + &--contact { + @include on-tablet { + display: flex; + gap: 24px; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + + &--contact { + height: 40px; + } + + &--textarea { + height: 88px; + } + + @include on-tablet { + grid-column: span 3; + } + } + + @include on-desktop { + grid-template-columns: repeat(6, 1fr); + } + + &__input { + width: 100%; + height: 23px; + background-color: transparent; + border: none; + border-bottom: 1px solid $c-dark-gray; + font-size: 14px; + font-weight: 400; + line-height: 23px; + text-align: left; + position: relative; + outline: none; + color: $c-white; + box-sizing: border-box; + + &:focus { + border-bottom: 1px solid $c-accent; + } + + &:invalid:not(:focus, :placeholder-shown) { + border-bottom: 1px solid rgba(134, 4, 4, 1); + } + } + + &__input-textarea { + resize: none; + height: 74px; + } + + &__subtitle { + font-size: 14px; + font-weight: 400; + line-height: 18.2px; + color: $c-text; + height: 18px; + + &--contact { + height: 21px; + } + + &:has(+ .form__input:focus) { + color: $c-accent; + } + + &:has(+ .form__input:invalid:not(:focus, :placeholder-shown)) { + color: rgba(134, 4, 4, 1); + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 00000000..64806dc7 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,106 @@ +.header { + &__content { + height: 100vh; + + @include on-tablet { + @include page-grid; + + position: relative; + padding-bottom: 70px; + height: auto; + } + + @include on-desktop { + padding: 0; + } + } + + &__img { + width: 100%; + + @include on-tablet { + top: 0; + position: absolute; + max-width: 486px; + right: 0; + } + + @include on-desktop { + max-width: 810.7px; + max-height: 688px; + } + } + + &__title { + font-size: 26px; + font-weight: 900; + line-height: 33.8px; + color: $c-white; + word-spacing: -2.5px; + margin-bottom: 17px; + + &--accent { + font-weight: 400; + color: $c-accent; + } + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-area: 1 / span 6 / 2; + font-size: 46px; + line-height: 59.8px; + margin-bottom: 19px; + } + } + + &__text { + line-height: 24px; + color: $c-text; + margin-bottom: 8px; + + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 10px; + } + + @include on-desktop { + grid-column: 2 / 6; + margin-bottom: 16px; + } + } + + &__price { + font-size: 18px; + line-height: 21.78px; + text-align: center; + color: $c-white; + margin-bottom: 16px; + + @include on-tablet { + grid-column: 1 / 4; + justify-self: flex-start; + margin-bottom: 33px; + } + + @include on-desktop { + grid-column: 2 / 4; + } + } + + &__bottom { + display: none; + + @include on-desktop { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; + margin-top: 222px; + margin-bottom: 84px; + } + } +} diff --git a/src/styles/blocks/_help.scss b/src/styles/blocks/_help.scss new file mode 100644 index 00000000..f9eafa8f --- /dev/null +++ b/src/styles/blocks/_help.scss @@ -0,0 +1,89 @@ +.help { + background: #000000b3; + width: 100vw; + min-width: 320px; + height: 100vh; + overflow: auto; + + &__content { + background-color: #191536; + width: 100%; + height: 100%; + + @include on-desktop { + width: 880px; + height: fit-content; + margin: auto; + margin-bottom: 127px; + } + } + + &__main-info { + @include on-tablet { + @include page-grid; + } + + @include on-desktop { + grid-template-columns: repeat(10, 70px); + margin-inline: -110px; + padding-bottom: 74px; + } + } + + &__title { + font-size: 21px; + font-weight: 900; + line-height: 27.3px; + text-align: left; + color: $c-white; + margin-bottom: 30px; + + &--accent { + font-weight: 400; + color: $c-accent; + } + } + + &__text { + font-weight: 400; + line-height: 24px; + text-align: left; + color: $c-text; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 2 / -2; + margin-bottom: 20px; + } + } + + &__link { + font-weight: 400; + line-height: 24px; + color: $c-accent; + + &:hover { + color: $c-white; + } + } + + &__links { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 30px; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: 2 / 5; + margin: 0; + } + } +} diff --git a/src/styles/blocks/_language-switcher.scss b/src/styles/blocks/_language-switcher.scss new file mode 100644 index 00000000..e68bc6b1 --- /dev/null +++ b/src/styles/blocks/_language-switcher.scss @@ -0,0 +1,53 @@ +.language-switcher { + display: none; + + @include on-desktop { + width: 33px; + height: 21px; + position: relative; + display: inline-block; + + &::after { + content: ''; + background-image: url('../images/arrow-down.svg'); + width: 9px; + height: 6px; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + background-repeat: no-repeat; + } + + &:hover::after { + background-image: url('../images/arrow-down-hover.svg'); + } + } + + &__select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 33px; + height: 21px; + background-color: transparent; + border: none; + color: $c-accent; + outline: none; + + &:focus { + outline: none; + } + + &:hover { + color: $c-white; + } + } + + &__option { + background-color: #191536; + color: inherit; + border: 1px solid $c-accent; + } +} diff --git a/src/styles/blocks/_language.scss b/src/styles/blocks/_language.scss new file mode 100644 index 00000000..ca3cf9b9 --- /dev/null +++ b/src/styles/blocks/_language.scss @@ -0,0 +1,3 @@ +.language { + background: rgba(25, 21, 54, 1); +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 00000000..888904b0 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,62 @@ +.menu { + min-height: 568px; + background: rgba(0, 0, 0, 0.7); + width: 100vw; + min-width: 320px; + height: 100vh; + overflow: auto; + + &__content { + background-color: rgba(25, 21, 54, 1); + + @include on-tablet { + min-height: 568px; + width: 100%; + background-color: rgba(25, 21, 54, 1); + } + } + + &__list { + display: flex; + flex-direction: column; + font-size: 21px; + line-height: 27.3px; + + @include on-tablet { + grid-column: 2 / -1; + } + } + + &__item { + padding-block: 11px; + position: relative; + cursor: pointer; + + &:hover { + background-color: rgba(17, 14, 37, 1); + margin-inline: -16px; + padding-inline: 16px; + + @include on-tablet { + margin-inline: -34px; + padding-inline: 34px; + } + } + + @include on-tablet { + @include page-grid; + } + } + + &__link { + color: $c-white; + + &:hover { + color: $c-accent; + } + + @include on-tablet { + grid-column: 2 / -1; + } + } +} diff --git a/src/styles/blocks/_more-why.scss b/src/styles/blocks/_more-why.scss new file mode 100644 index 00000000..c185c138 --- /dev/null +++ b/src/styles/blocks/_more-why.scss @@ -0,0 +1,142 @@ +.more-why { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + @include page-grid; + + row-gap: 40px; + } + + &__block { + display: flex; + flex-direction: column; + gap: 11px; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + grid-column: span 3; + align-items: center; + gap: 20px; + + &--why { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + } + + @include on-desktop { + @include hover(transform, scale(1.2)); + } + + @include on-design { + grid-column: span 4; + } + } + + &__icon { + display: none; + + @include on-tablet { + display: block; + width: 100%; + + &--edc { + width: 98px; + height: 81px; + } + + &--real { + width: 84px; + height: 84px; + } + + &--fit { + width: 110px; + height: 80.44px; + } + + &--social { + width: 83px; + height: 83px; + } + + &--uni { + width: 80px; + height: 79.45px; + } + + &--vr-pc { + width: 89px; + height: 80.91px; + } + + &--wireless { + width: 105.31px; + height: 75.32px; + } + } + + @include on-desktop { + margin-bottom: 12px; + } + } + + &__subtitle { + font-weight: 900; + line-height: 19.36px; + text-transform: uppercase; + color: $c-white; + + @include on-tablet { + text-align: center; + } + } + + &__info-wrapper { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + cursor: pointer; + position: relative; + + &:hover { + -webkit-line-clamp: unset; + white-space: normal; + overflow: visible; + } + + @include on-tablet { + -webkit-line-clamp: unset; + } + + &--why { + -webkit-line-clamp: 3; + + @include on-tablet { + -webkit-line-clamp: 3; + } + + @include on-desktop { + -webkit-line-clamp: unset; + } + } + } + + &__info { + font-weight: 400; + line-height: 24px; + color: $c-text; + + @include on-tablet { + text-align: center; + } + } +} diff --git a/src/styles/blocks/_more.scss b/src/styles/blocks/_more.scss new file mode 100644 index 00000000..f7cec4fa --- /dev/null +++ b/src/styles/blocks/_more.scss @@ -0,0 +1,21 @@ +.more { + background-color: rgba(5, 4, 11, 1); + + &__text { + font-size: 12px; + font-weight: 400; + line-height: 14.52px; + color: $c-accent; + margin-bottom: 30px; + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + font-size: 14px; + line-height: 16.94px; + margin-bottom: 83px; + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 00000000..91ee3c4c --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,52 @@ +.nav { + display: none; + + &__footer { + display: inline-block; + grid-area: 2 / 1 / 4 / 2; + + @include on-tablet { + grid-column: 2 / -2; + grid-row: 1 / 2; + } + + @include on-desktop { + grid-area: 1 / 5 / 2 / 9; + } + } + + @include on-desktop { + display: block; + } + + &__list { + display: flex; + gap: 36px; + + &--footer { + flex-direction: column; + gap: 12px; + + @include on-tablet { + flex-direction: row; + justify-content: space-around; + } + } + } + + &__link { + color: $c-white; + line-height: 20.8px; + + &--footer { + font-size: 13px; + font-weight: 400; + line-height: 19.5px; + text-align: left; + } + + &:hover { + color: $c-accent; + } + } +} diff --git a/src/styles/blocks/_order.scss b/src/styles/blocks/_order.scss new file mode 100644 index 00000000..d0138c15 --- /dev/null +++ b/src/styles/blocks/_order.scss @@ -0,0 +1,261 @@ +.order { + background: linear-gradient(100.83deg, #191536 0.67%, #000 100%); + box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.25); + width: 100vw; + height: 100vh; + + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__picture { + display: none; + + @include on-tablet { + display: flex; + grid-column: 1 / 6; + } + + &--pay { + @include on-tablet { + grid-column: 2 / 6; + } + } + + @include on-desktop { + grid-column: 1 / 7; + position: absolute; + width: 701px; + margin-left: -110px; + } + } + + &__img { + width: 100%; + } + + &__top-menu { + box-sizing: border-box; + width: 100%; + height: 33px; + display: flex; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 / -1; + margin-bottom: 40px; + } + + @include on-desktop { + display: none; + } + } + + &__top-menu-desk { + display: none; + + @include on-desktop { + display: flex; + width: 647px; + justify-content: space-between; + align-items: flex-start; + } + } + + &__block { + width: calc(100% / 3); + display: flex; + justify-content: center; + color: $c-text; + font-size: 12px; + line-height: 15.6px; + flex-direction: column; + align-items: center; + gap: 7px; + + @include on-desktop { + font-size: 14px; + line-height: 18.2px; + text-align: left; + } + + &--active { + color: $c-accent; + border-bottom: 1px solid $c-accent; + } + + &--active-desk { + color: $c-accent; + + &::after { + content: ''; + background-image: url('../images/dot.svg'); + width: 4px; + height: 4px; + } + } + } + + &__qty-price { + display: flex; + justify-content: center; + gap: 75px; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 / -1; + justify-content: flex-start; + gap: 148px; + margin-bottom: 48px; + } + + @include on-desktop { + grid-column: 1 / 5; + grid-row: 2 / 3; + margin-top: 32px; + } + + &--pay { + @include on-tablet { + grid-column: 2 / -1; + } + + @include on-desktop { + grid-area: 2 / 1 / auto / 5; + } + } + } + + &__qty { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + } + + &__subtitle { + font-weight: 400; + line-height: 20.8px; + color: $c-text; + } + + &__qty-form { + width: 90px; + height: 41px; + position: relative; + display: inline-block; + + &::after { + content: ''; + background-image: url('../images/arrow-down.svg'); + width: 9px; + height: 6px; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + background-repeat: no-repeat; + } + } + + &__qty-number { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 90px; + height: 41px; + background-color: rgba(25, 21, 54, 1); + border: none; + color: $c-white; + text-align: center; + outline: none; + } + + &__price { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + } + + &__amounts { + font-size: 26px; + line-height: 31.47px; + color: $c-accent; + font-weight: 500; + } + + &__input { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + grid-column: 1 / -1; + } + + &--pay { + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-area: 1 / 7 / 3 / -1; + } + } + + @include on-desktop { + grid-area: 1 / 7 / auto / -1; + } + } + + &__complete-title { + font-size: 26px; + font-weight: 900; + line-height: 33.8px; + text-align: center; + color: $c-white; + margin-top: 90px; + width: 218px; + margin-inline: auto; + + &--accent { + font-weight: 400; + color: $c-accent; + } + + @include on-tablet { + font-size: 46px; + line-height: 59.8px; + width: 100%; + margin-top: 180px; + grid-column: 1 / -1; + } + + @include on-desktop { + margin: 0; + } + } + + &__complete-text { + font-weight: 400; + line-height: 20.8px; + text-align: center; + color: $c-white; + margin-block: 16px 30px; + + @include on-tablet { + margin-block: 20px 50px; + font-size: 18px; + line-height: 23.4px; + grid-column: 1 / -1; + } + + @include on-desktop { + margin-block: 36px 50px; + } + } +} diff --git a/src/styles/blocks/_overlay.scss b/src/styles/blocks/_overlay.scss new file mode 100644 index 00000000..12f396c6 --- /dev/null +++ b/src/styles/blocks/_overlay.scss @@ -0,0 +1,33 @@ +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + justify-content: center; + align-items: center; + z-index: 100; + + &__content { + display: flex; + justify-content: center; + position: relative; + } + + &__icon-close { + cursor: pointer; + position: absolute; + right: 0; + width: 20px; + height: 20px; + } + + &__video { + max-width: 90%; + max-height: 80%; + border-radius: 8px; + border: none; + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 00000000..c837f396 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,65 @@ +.page { + scroll-behavior: smooth; + + &__button-buy { + transition: all 0.3s; + position: fixed; + bottom: 10px; + z-index: 2; + opacity: 1; + left: 50%; + transform: translate(-50%); + } + + &:has(.page__aside:target) { + overflow: hidden; + } + + &__button-link { + width: 100%; + height: 100%; + color: $c-white; + font-size: 14px; + line-height: 18.2px; + display: flex; + justify-content: center; + align-items: center; + + @include on-tablet { + font-size: 16px; + line-height: 20.8px; + } + + &:hover { + color: $c-accent; + } + } + + &__aside { + z-index: 3; + position: fixed; + inset: 0; + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + overflow-y: auto; + box-sizing: border-box; + + @include on-desktop { + padding-top: 134px; + } + + &--buy { + @include on-desktop { + padding-top: 0; + } + } + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/_pay-order.scss b/src/styles/blocks/_pay-order.scss new file mode 100644 index 00000000..832ec379 --- /dev/null +++ b/src/styles/blocks/_pay-order.scss @@ -0,0 +1,128 @@ +.pay-order { + @include page-grid; + + row-gap: 30px; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 104px; + } + + @include on-desktop { + margin: 0; + gap: 40px 20px; + grid-template-columns: repeat(6, 1fr); + } + + &__card-num { + display: flex; + flex-direction: column; + gap: 17px; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / -2; + } + } + + &__numbrs { + display: flex; + box-sizing: border-box; + justify-content: space-between; + } + + &__input { + box-sizing: border-box; + width: 100%; + color: $c-white; + background-color: transparent; + border: none; + border-bottom: 1px solid $c-dark-gray; + outline: none; + padding: 0; + font-size: 18px; + line-height: 23.4px; + display: block; + + &::placeholder { + color: $c-dark-gray; + } + + &--num { + letter-spacing: 0.1em; + width: 56px; + height: 32px; + padding-bottom: 9px; + text-align: center; + } + + &--date { + letter-spacing: 0.1em; + width: 90px; + height: 31px; + padding-bottom: 7px; + } + + &--cvv { + letter-spacing: 0.1em; + width: 41px; + height: 31px; + padding-bottom: 7px; + } + } + + &__icon-card { + display: none; + + @include on-desktop { + display: block; + width: 54px; + height: 34px; + } + } + + &__img-card { + width: 100%; + height: 100%; + } + + &__name { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + + @include on-desktop { + grid-column: 1 / -2; + } + } + + &__date { + grid-column: span 1; + display: flex; + flex-direction: column; + gap: 17px; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 3; + } + } + + &__cvv { + grid-column: span 1; + display: flex; + flex-direction: column; + gap: 17px; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/_play.scss b/src/styles/blocks/_play.scss new file mode 100644 index 00000000..853b9649 --- /dev/null +++ b/src/styles/blocks/_play.scss @@ -0,0 +1,52 @@ +.play { + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 2 / 6; + } + + &__about { + @include on-tablet { + grid-area: 3 / 4 / 4 / -1; + } + + @include on-desktop { + grid-area: 3 / 9 / 4 / -1; + } + + @include on-design { + grid-area: 3 / 12 / 4 / -1; + } + } + + &__label { + cursor: pointer; + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 66px; + + &:hover .play__icon--arrow { + fill: $c-white; + } + } + + &__icon { + position: absolute; + left: 0; + } + + &__text { + color: $c-white; + margin-left: 106px; + line-height: 20.8px; + text-align: left; + } + + &__video-toggle:checked ~ .overlay { + display: flex; + } +} diff --git a/src/styles/blocks/_section-title.scss b/src/styles/blocks/_section-title.scss new file mode 100644 index 00000000..d5c475f1 --- /dev/null +++ b/src/styles/blocks/_section-title.scss @@ -0,0 +1,28 @@ +.section-title { + font-size: 21px; + font-weight: 900; + line-height: 25.41px; + text-align: left; + color: $c-white; + + &--accent { + font-weight: 400; + color: $c-accent; + } + + &--aside { + line-height: 27.3px; + margin-bottom: 30px; + grid-column: 1 / 4; + + @include on-desktop { + grid-column: 2 / 8; + margin-bottom: 50px; + } + } + + @include on-desktop { + font-size: 36px; + line-height: 46.8px; + } +} diff --git a/src/styles/blocks/_slider-about.scss b/src/styles/blocks/_slider-about.scss new file mode 100644 index 00000000..15c6e17d --- /dev/null +++ b/src/styles/blocks/_slider-about.scss @@ -0,0 +1,118 @@ +.slider-about { + position: relative; + overflow: hidden; + max-width: 100%; + padding-bottom: 38px; + margin-top: 20px; + + @include on-tablet { + grid-area: 1 / 1 / 4 / 4; + margin: 0; + padding-bottom: 15px; + } + + @include on-desktop { + grid-area: 1 / 3 / 4 / 8; + padding-bottom: 12px; + } + + @include on-design { + grid-area: 1 / 4 / 4 / 11; + } + + &__track { + display: flex; + transition: transform 0.3s ease-in-out; + width: 100%; + } + + &__item { + flex: 0 0 100%; + width: 100%; + box-sizing: border-box; + } + + &__img { + height: 189px; + width: 100%; + object-fit: contain; + + @include on-tablet { + min-height: 270px; + } + + @include on-desktop { + min-height: 290px; + } + + &--1, + &--2 { + @include on-tablet { + object-fit: cover; + } + } + } + + input { + display: none; + } +} + +input.slick-1:checked ~ .slider-about__track { + transform: translateX(0); +} + +input.slick-2:checked ~ .slider-about__track { + transform: translateX(calc(-100%)); +} + +input.slick-3:checked ~ .slider-about__track { + transform: translateX(calc(-200%)); +} + +input.slick-4:checked ~ .slider-about__track { + transform: translateX(calc(-300%)); +} + +input.slick-5:checked ~ .slider-about__track { + transform: translateX(calc(-400%)); +} + +.slick-navigation { + position: absolute; + transform: translateX(-50%); + display: flex; + gap: 6px; + left: 50%; + bottom: 20px; + + @include on-tablet { + bottom: 0; + } + + @include on-desktop { + display: none; + } + + label { + width: 4px; + height: 4px; + background: rgba(72, 72, 72, 1); + border-radius: 50%; + cursor: pointer; + + &:hover, + &:active, + &:focus { + background: rgba(171, 171, 171, 1); + } + } + + input.slick-1:checked ~ .slick-navigation label:nth-child(1), + input.slick-2:checked ~ .slick-navigation label:nth-child(2), + input.slick-3:checked ~ .slick-navigation label:nth-child(3), + input.slick-4:checked ~ .slick-navigation label:nth-child(4), + input.slick-5:checked ~ .slick-navigation label:nth-child(5) { + background: $c-accent; + } +} diff --git a/src/styles/blocks/_slider.scss b/src/styles/blocks/_slider.scss new file mode 100644 index 00000000..4b186cb4 --- /dev/null +++ b/src/styles/blocks/_slider.scss @@ -0,0 +1,34 @@ +.slider { + color: $c-white; + display: flex; + gap: 103px; + line-height: 24px; + position: relative; + + &::before { + content: ''; + width: 100%; + height: 1px; + background-color: $c-dark-gray; + position: absolute; + bottom: -10px; + } + + &::after { + content: ''; + width: calc(100% / 3); + height: 1px; + background-color: $c-accent; + position: absolute; + bottom: -10px; + } + + &__previous { + color: $c-text; + } + + &__previous, + &__next { + cursor: pointer; + } +} diff --git a/src/styles/blocks/_tech.scss b/src/styles/blocks/_tech.scss new file mode 100644 index 00000000..2239ca19 --- /dev/null +++ b/src/styles/blocks/_tech.scss @@ -0,0 +1,258 @@ +.tech { + background-color: rgba(5, 4, 11, 1); + + &__content { + @include on-desktop { + @include page-grid; + } + } + + &__wrapper-img { + width: 197px; + height: 194.7px; + margin-inline: auto; + position: relative; + + @include on-tablet { + width: 357.95px; + height: 353.78px; + } + + @include on-desktop { + width: 297.48px; + height: 294.01px; + grid-column: 1 / -1; + } + } + + &__img { + width: 100%; + height: 100%; + + @include on-desktop { + position: relative; + } + } + + &__semi-circle { + @include on-desktop { + background-image: url('../images/semi-round.svg'); + width: 40px; + height: 201px; + position: absolute; + background-position: 50%; + background-repeat: no-repeat; + background-size: contain; + bottom: 53px; + left: -15px; + } + } + + &__wrapper-buttom { + position: absolute; + + &--sensor { + top: -11px; + left: 60px; + + @include on-tablet { + top: -27px; + left: 65px; + } + } + + &--batterries { + top: 80px; + right: 29px; + + @include on-tablet { + right: 49px; + top: 145px; + } + } + + &--connection { + bottom: 7.7px; + left: -17px; + + @include on-tablet { + left: -58px; + top: 273px; + } + } + + @include on-desktop { + position: relative; + top: 0; + left: 0; + } + } + + &__buttom { + background-image: url('../images/buttom-plus.svg'); + width: 34px; + height: 34px; + cursor: pointer; + background-repeat: no-repeat; + background-size: cover; + border: none; + border-radius: 50%; + outline: none; + display: block; + + @include on-tablet { + width: 61.68px; + height: 61.68px; + } + + @include on-desktop { + display: none; + } + } + + &__line { + display: none; + + @include on-desktop { + display: block; + position: absolute; + background-repeat: no-repeat; + background-position: 50%; + background-size: contain; + } + + &--sensore { + @include on-desktop { + background-image: url('../images/sensore-line.svg'); + width: 403px; + height: 72px; + right: 150.48px; + bottom: 274.01px; + } + } + + &--batterries { + @include on-desktop { + background-image: url('../images/batterries-line.svg'); + width: 191.5px; + height: 244.96px; + bottom: 102px; + right: -46px; + } + } + + &--connection { + @include on-desktop { + background-image: url('../images/connection-line.svg'); + width: 133.92px; + height: 113px; + bottom: 122px; + left: -133.92px; + } + } + } + + &__subtitle { + display: none; + + @include on-desktop { + display: block; + font-size: 18px; + font-weight: 900; + line-height: 21.78px; + color: $c-white; + text-transform: uppercase; + position: absolute; + } + + &--sensore { + @include on-desktop { + top: -355px; + left: -381px; + } + } + + &--batterries { + top: -353px; + right: -162.45px; + } + + &--connection { + bottom: 116px; + left: -290px; + } + } + + &__info { + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: $c-text; + z-index: 1; + box-sizing: border-box; + background-color: rgba(25, 21, 54, 1); + border-radius: 4px; + padding: 17px 11px; + display: none; + position: absolute; + top: 100%; + right: -12px; + width: 168px; + height: fit-content; + + @include on-tablet { + font-size: 16px; + line-height: 24px; + } + + @include on-desktop { + display: block; + background-color: transparent; + } + + &--sensore { + @include on-desktop { + width: max-content; + padding: 0; + top: -312px; + right: 493px; + } + } + + &--batterries { + width: 200px; + top: -100px; + right: 100%; + + @include on-desktop { + padding: 0; + width: 338px; + top: -292px; + left: 347px; + } + } + + &--connection { + inset: auto auto 100% -100%; + + @include on-desktop { + padding: 0; + width: max-content; + bottom: 14px; + left: -289px; + } + } + } + + &__checkbox { + display: none; + + &:checked + .tech__buttom { + background-image: url('../images/buttom-minus.svg'); + + & + .tech__info { + display: block; + } + } + } +} diff --git a/src/styles/blocks/_title-section.scss b/src/styles/blocks/_title-section.scss new file mode 100644 index 00000000..36e1d41a --- /dev/null +++ b/src/styles/blocks/_title-section.scss @@ -0,0 +1,145 @@ +.title-section { + font-size: 21px; + font-weight: 900; + line-height: 25.41px; + color: $c-white; + margin-bottom: 12px; + + &--more { + @include on-tablet { + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + } + + @include on-desktop { + gap: 12px; + } + } + + @include on-tablet { + text-align: center; + } + + @include on-desktop { + font-size: 36px; + line-height: 43.57px; + margin-bottom: 16px; + } + + &__accent { + font-weight: 400; + line-height: 25.41px; + color: $c-accent; + + &--gaming { + @include on-tablet { + background-image: url('../images/section-title/gaming.svg'); + color: transparent; + background-repeat: no-repeat; + background-size: contain; + width: 94px; + height: 15px; + } + + @include on-desktop { + width: 160px; + height: 26px; + } + } + + &--kat-loco { + @include on-tablet { + background-image: url('../images/section-title/kat-loco.svg'); + color: transparent; + background-repeat: no-repeat; + background-size: contain; + width: 133px; + height: 25px; + background-position-y: center; + } + + @include on-desktop { + width: 226px; + height: 43px; + } + } + } + + &--about { + @include on-tablet { + grid-area: 1 / 4 / 2 / -1; + margin-bottom: 30px; + text-align: left; + } + + @include on-desktop { + grid-area: 1 / 9 / 2 / -1; + } + + @include on-design { + grid-area: 1 / 12 / 2 / -1; + } + } + + &--greetings { + @include on-tablet { + text-align: left; + grid-column: span 4; + margin-bottom: 32px; + } + + @include on-desktop { + grid-column: span 6; + } + + @include on-design { + grid-column: 2 / 8; + } + } + + &--tech { + margin-bottom: 57px; + text-align: left; + + @include on-desktop { + grid-column: 1 / -1; + justify-self: flex-end; + margin-bottom: 141px; + } + } + + &--why { + margin-bottom: 32px; + text-align: left; + + @include on-tablet { + margin-bottom: 30px; + display: flex; + align-items: center; + gap: 14px; + } + + @include on-desktop { + text-align: center; + margin-bottom: 84px; + gap: 26px; + } + } + + &--contact { + margin-bottom: 32px; + text-align: left; + + @include on-tablet { + grid-area: 2 / 1 / 3 / 4; + margin-bottom: 50px; + } + + @include on-desktop { + grid-area: 2 / 1 / 3 / 7; + margin-bottom: 26px; + } + } +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 00000000..ee7dcb8f --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,197 @@ +.top-bar { + &__content { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 18px 6px; + + @include on-tablet { + padding-block: 30px 55px; + } + + @include on-desktop { + padding-block: 47px 101px; + } + + &--aside { + padding-block: 19px 31px; + + @include on-tablet { + padding-block: 30px; + } + + @include on-desktop { + display: none; + } + } + + &--desktop { + display: none; + + @include on-desktop { + padding-block: 65px 114px; + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &--menu { + justify-content: end; + padding-block: 20px 38px; + + @include on-tablet { + padding-block: 34px 57px; + } + } + + &--language { + padding-block: 20px 38px; + + @include on-tablet { + padding-block: 34px 57px; + } + } + + &--help { + padding-block: 20px 31px; + justify-content: end; + + @include on-tablet { + padding-block: 34px 51px; + } + + @include on-desktop { + margin-inline: -110px; + padding-block: 18px 25px; + padding-inline: 18px; + } + } + + &--faq { + padding-block: 20px 31px; + justify-content: end; + + @include on-tablet { + padding-block: 34px 57px; + } + + @include on-desktop { + padding-block: 18px 25px; + padding-inline: 18px; + margin-inline: -110px; + } + } + } + + &__left { + display: flex; + align-items: center; + gap: 35px; + } + + &__right { + display: flex; + align-items: center; + gap: 37px; + } + + &__logo { + width: 58px; + height: 12px; + display: flex; + + @include hover(transform, scale(1.2)); + + &--footer { + grid-column: 1 / -1; + margin-bottom: 15px; + + @include on-tablet { + grid-column: 1 / 2; + margin: 0; + width: 69px; + height: 14px; + } + + @include on-desktop { + width: 74px; + height: 14px; + } + } + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-desktop { + width: 78px; + height: 16px; + } + } + + &__logo-img { + width: 58px; + height: 12px; + + @include on-tablet { + width: 67px; + height: 14px; + } + } + + &__logo-menu { + background-image: url('../images/logo-menu.svg'); + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-size: contain; + + @include on-tablet { + width: 29.25px; + height: 20px; + } + + @include on-desktop { + display: none; + } + + @include hover(transform, scale(1.2)); + + &:hover { + background-image: url('../images/logo-menu-hover.svg'); + } + } + + &__menu-img { + @include on-tablet { + width: 29.25px; + height: 20px; + } + } + + &__logo-close { + background-image: url('../images/icon-close.svg'); + width: 17px; + height: 17px; + background-repeat: no-repeat; + background-size: cover; + + &:hover { + background-image: url('../images/icon-close-hover.svg'); + } + + @include hover(transform, scale(1.2)); + } + + &__logo-row { + @include hover(transform, scale(1.2)); + } + + &__logo-row-svg { + &:hover { + stroke: $c-accent; + } + } +} diff --git a/src/styles/blocks/_why.scss b/src/styles/blocks/_why.scss new file mode 100644 index 00000000..652329f4 --- /dev/null +++ b/src/styles/blocks/_why.scss @@ -0,0 +1,9 @@ +.why { + &__content { + @include on-desktop { + display: flex; + flex-direction: column; + align-items: center; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..362519b6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,81 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './blocks/page'; +@import './blocks/top-bar'; +@import './blocks/header'; +@import './blocks/overlay'; +@import './blocks/play'; +@import './blocks/button'; +@import './blocks/order'; +@import './blocks/form'; +@import './blocks/form-select'; +@import './blocks/pay-order'; +@import './blocks/menu'; +@import './blocks/language'; +@import './blocks/help'; +@import './blocks/contact-info'; +@import './blocks/section-title'; +@import './blocks/faq'; +@import './blocks/nav'; +@import './blocks/language-switcher'; +@import './blocks/slider'; +@import './blocks/more'; +@import './blocks/title-section'; +@import './blocks/about'; +@import './blocks/slider-about'; +@import './blocks/tech'; +@import './blocks/more-why'; +@import './blocks/why'; +@import './blocks/contact'; +@import './blocks/footer'; body { - background: $c-gray; + background: linear-gradient(100.83deg, #191536 0.67%, #000 100%); + box-shadow: 4px 4px 40px 0 rgba(0, 0, 0, 0.25); + font-family: Inter, serif; + font-optical-sizing: auto; + font-style: normal; + font-size: 16px; + font-weight: 500; + margin: 0; + padding: 0; + box-sizing: border-box; + overflow: auto; + + &:has(.play__video-toggle:checked) { + overflow: hidden; + } +} + +p, +h1, +h2, +h3, +ul, +li { + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +input { + background-color: transparent !important; + outline: none; +} + +input:-webkit-autofill, +textarea:-webkit-autofill, +select:-webkit-autofill { + background-color: transparent !important; + color: $c-text !important; + -webkit-text-fill-color: $c-text !important; + transition: background-color 5000s ease-in-out 0s; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..5e7f7ce6 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,81 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-width) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 110px; + } + + @include on-design { + padding-inline: 234px; + } +} + +@mixin padding-block { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-desktop { + padding-block: 100px; + } + + @include on-design { + padding-block: 158px; + } +} + +.container { + @include padding-inline; +} + +.section-container { + @include padding-block; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } + + @include on-design { + --columns: 16; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..e5381cb4 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ $c-gray: #eee; +$c-accent: rgba(5, 194, 223, 1); +$c-black: rgba(5, 4, 11, 1); +$c-dark-gray: rgba(47, 47, 47, 1); +$c-text: rgba(146, 146, 146, 1); +$c-white: rgba(255, 255, 255, 1); +$tablet-width: 768px; +$desktop-width: 1280px; +$design-width: 1920px;