diff --git a/README.md b/README.md index a95e97afe..63a07ba08 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter 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/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 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/Kickstarter/) + [DEMO LINK](https://Oksigenka.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/images/.gitkeep b/src/images/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/images/Frame.png b/src/images/Frame.png new file mode 100644 index 000000000..62e2ff25e Binary files /dev/null and b/src/images/Frame.png differ diff --git a/src/images/Luna.png b/src/images/Luna.png new file mode 100644 index 000000000..d0653d0db Binary files /dev/null and b/src/images/Luna.png differ diff --git a/src/images/aboutUs.png b/src/images/aboutUs.png new file mode 100644 index 000000000..a7f7a2cf4 Binary files /dev/null and b/src/images/aboutUs.png differ diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/fon-favicon.svg b/src/images/fon-favicon.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/fon-favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/fon.png b/src/images/fon.png new file mode 100644 index 000000000..c60511ff1 Binary files /dev/null and b/src/images/fon.png differ diff --git a/src/images/icons/Frame.png b/src/images/icons/Frame.png new file mode 100644 index 000000000..ace6c0aa1 Binary files /dev/null and b/src/images/icons/Frame.png differ diff --git a/src/images/icons/arrowUp.svg b/src/images/icons/arrowUp.svg new file mode 100644 index 000000000..b89332513 --- /dev/null +++ b/src/images/icons/arrowUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/ava.svg b/src/images/icons/ava.svg new file mode 100644 index 000000000..1b66e9579 --- /dev/null +++ b/src/images/icons/ava.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/brek.svg b/src/images/icons/brek.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/icons/brek.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger-menu.svg b/src/images/icons/burger-menu.svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/icons/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/close-menu.svg b/src/images/icons/close-menu.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icons/close-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/futuristic.svg b/src/images/icons/futuristic.svg new file mode 100644 index 000000000..55b340246 --- /dev/null +++ b/src/images/icons/futuristic.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/insta.svg b/src/images/icons/insta.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icons/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/light.svg b/src/images/icons/light.svg new file mode 100644 index 000000000..634f3af0d --- /dev/null +++ b/src/images/icons/light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/sliderL.png b/src/images/icons/sliderL.png new file mode 100644 index 000000000..052e894c2 Binary files /dev/null and b/src/images/icons/sliderL.png differ diff --git a/src/images/icons/sliderLH.png b/src/images/icons/sliderLH.png new file mode 100644 index 000000000..c806e8070 Binary files /dev/null and b/src/images/icons/sliderLH.png differ diff --git a/src/images/icons/sliderR.png b/src/images/icons/sliderR.png new file mode 100644 index 000000000..0c4544050 Binary files /dev/null and b/src/images/icons/sliderR.png differ diff --git a/src/images/icons/sliderRH.png b/src/images/icons/sliderRH.png new file mode 100644 index 000000000..addc39fe1 Binary files /dev/null and b/src/images/icons/sliderRH.png differ diff --git a/src/images/icons/speaker.svg b/src/images/icons/speaker.svg new file mode 100644 index 000000000..e6aad8bc2 --- /dev/null +++ b/src/images/icons/speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twiter.svg b/src/images/icons/twiter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icons/twiter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wifi.svg b/src/images/icons/wifi.svg new file mode 100644 index 000000000..621302af1 --- /dev/null +++ b/src/images/icons/wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/meetLuna.png b/src/images/meetLuna.png new file mode 100644 index 000000000..68529d63d Binary files /dev/null and b/src/images/meetLuna.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..0685dc821 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,521 @@ - + - Title + CrazyBaby + - -

Hello Mate Academy

- + + +
+
+
+ + + +
+
+ + Specs + + +
+

+ EN +

+

/

+

+ UA +

+
+
+ + +
+
+ +
+ Luna + +
+

+ Futuristic Wireless Speaker +

+

+ Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctly more layered. +

+
+
+
+
+ + + +
+
+
+
+
+ + Futuristic +

Futuristic Design

+

+ To give Luna a truly flawless look, we specifically picked aircraft grade aluminum as its material and adopted both three-dimensional stretch-bending technology and a high precision cold forging technique. +

+
+ +
+ + Futuristic +

Tweeter Speaker System

+

+ To deliver a more layered sound performance better than + a sole full-range speaker, our team equipped Luna with + one more tweeter speaker responsible for high-frequency sound independently. +

+
+ +
+ + Futuristic +

Multiroom System

+

+ Luna is natively compatible with your home Wi-Fi. + Set up multiple speakers in different rooms to expand your music experience into the entire house. +

+
+ +
+ + Futuristic +

Intuitive Lighting System

+

+ An intuitive user interface allows you to adjust the hue + and saturation of color for lighting that fits any mood and situation. +

+
+
+
+ + + Futuristic + + +
+
+
+

+ Designed for the future +

+
+
+ + Portable speakers + +
+
+

+ Designed for the future +

+

In 2014, a group of geeky industrial designers, engineering veterans and acoustic experts formed crazybaby. This is a bunch of passionate people who are crazy enough to think they can challenge the industry with disruptive audio products.

+ + +

See more about us

+ +
+
+
+ +
+

+ Luna Eye +

+
+
+ + Portable speakers + +
+ +
+

+ Luna Eye +

+

Luna Eye is to the essence of this innovative light and audio system. It comprises an independent tweeter speaker, a light guiding component, a dome and a ring ornament.

+ + +

See more about us

+ +
+
+
+
+ +
+
+

+ “It really took me by surprise honestly to have such full beautiful sound that + coming out of this small compact device. And with the brush aluminum surface, + it feels so familiar. Like my iPhone.” +

+
+ +
+ about_us + +

Garrett Martin

+

Creative Director

+
+
+
+ +
+

Features

+
+
+

Sound & Music

+
    +
  • Feel-in-chest Base Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music Playback from Last Song Stopped
    • +
+
+
+

App Features

+
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Color Wheel
    • +
+
+
+

Connectivity

+
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • Wi-Fi 2.4 GHz (802.11 b/g/n)
    • +
  • Smart Multiroom System Set Up
    • +
  • Party Mode with 6.0 Units and above
    • +
  • MESHNET Multi Speaker Network
    • +
+
+ +
+
+
+
+
+
+ +
+

+ 1 +

+

/

+

+ 3 +

+
+
+ about_us +
+
+
+ +
+

Do you have any questions?

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

+ © 2019 All rights reserved. Terms of Use & Privacy Policy +

+
+ diff --git a/src/styles/blocks/aboutUs.scss b/src/styles/blocks/aboutUs.scss new file mode 100644 index 000000000..bbfc0795b --- /dev/null +++ b/src/styles/blocks/aboutUs.scss @@ -0,0 +1,165 @@ +.aboutUs { + &__wrapper { + @include content-padding-in-line; + + display: grid; + row-gap: 40px; + + @include on-tablet { + padding-inline: 0px; + row-gap: 56px; + } + + @include on-desktop { + @include content-padding-in-line; + } + } +} + +.about { + @include on-desktop { + display: flex; + justify-content: space-between; + } + + &__info { + @include on-tablet { + @include content-padding-in-line; + } + + @include on-desktop { + padding-inline: 0; + } + } + + &__photo { + margin: 0 0 20px; + width: 100%; + height: auto; + object-fit: cover; + + @include hover( + transform, + scale(1.08) + ); + + @include on-tablet { + width: 375px; + height: 415px; + } + + @include on-desktop { + width: 582px; + height: 388px; + } + } + + &__title { + margin: 0 0 30px; + font-size: 15px; + line-height: 22.5px; + color: $text-color-p; + + @include on-tablet { + font-size: 16px; + line-height: 24px; + } + } + + &__text { + position: relative; + font-size: 12px; + font-weight: 600; + line-height: 14px; + color: $green-color; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + border-radius: 50px; + height: 1.5px; + width: 15%; + background-color: $green-color; + + transition: width $effectDuration ease; + } + + &:hover { + &::after { + content: ''; + position: absolute; + width: 30%; + } + } + + @include on-tablet { + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + border-radius: 50px; + height: 1.5px; + width: 20%; + background-color: $green-color; + + transition: width $effectDuration ease; + } + + &:hover { + &::after { + content: ''; + position: absolute; + width: 30%; + } + } + } + + @include on-desktop { + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + border-radius: 50px; + height: 1.5px; + width: 10%; + background-color: $green-color; + + transition: width $effectDuration ease; + } + + &:hover { + &::after { + content: ''; + position: absolute; + width: 25%; + } + } + } + } + + &__content { + &--left { + @include on-tablet { + display: flex; + justify-content: space-between; + gap: 30px; + } + } + + &--right { + @include on-tablet { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + gap: 30px; + } + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..a009a8d26 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,83 @@ +.story { + @include content-padding-in-line; + + &__products { + @include on-tablet { + @include page-grid; + + row-gap: 40px; + } + } + + &__product { + grid-column: 1 / -1; + + @include on-tablet { + &--num1 { + grid-column: 1 / 5; + } + + &--num2 { + grid-column: 5 / -1; + } + } + + @include on-desktop { + &--num1, &--num2 { + grid-column: span 3; + } + } + } +} + +.product { + font-family: Inter, sans-serif; + text-align: center; + + &__disable { + display: none; + + @include on-tablet { + display: block; + } + } + + &__photo { + width: 50px; + height: 50px; + object-fit: contain; + text-align: center; + margin: 0 0 30px 0; + + transition: transform $effectDuration ease; + + &:hover { + transform: translateY(-10px); + } + } + + &__title { + margin: 0; + font-size: 22px; + line-height: 28px; + text-transform: uppercase; + margin-bottom: 20px; + + @include on-desktop { + font-size: 16px; + } + } + + &__category { + margin: 0; + font-size: 14px; + line-height: 21px; + color: $text-color-p; + margin-bottom: 12px; + } +} + +.photo { + margin: auto; + max-width: 1200px; +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 000000000..fa53b8c69 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,133 @@ +.contact { + @include content-padding-in-line; + + @include on-tablet { + display: flex; + @include page-grid; + // justify-content: space-between; + } + + @include on-desktop { + gap: 30px; + } + + &__title { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__form { + @include page-grid; + + display: grid; + row-gap: 40px; + padding-bottom: 48px; + + @include on-tablet { + row-gap: 56px; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__forms { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / -1; + } + } + + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus{ + border: 2px solid $green-color; + -webkit-text-fill-color: #010810; + -webkit-box-shadow: 0 0 0 1000px $background-color-top inset; + } + + &__input { + width: calc(100% - 22px); + background-color: $background-color; + border: 1px solid $text-color-p; + height: 28px; + padding: 10px; + font-family: Inter, sans-serif; + color: $input-color; + outline: none; + font-size: 16px; + line-height: 24px; + font-weight: 200; + + &:hover { + border: 1px solid $input-color; + } + + &:not(:placeholder-shown) { + font-family: Verdana, sans-serif; + border: 2px solid $green-color; + -webkit-text-fill-color: #010810; + -webkit-box-shadow: 0 0 0 1000px $background-color-top inset; + } + } + + &__message { + width: calc(100% - 22px); + background-color: $background-color; + border: 1px solid $text-color-p; + height: 118px; + margin-top: 10px; + padding: 10px; + resize: none; + padding-bottom: 32px; + font-family: Inter, sans-serif; + font-size: 16px; + line-height: 24px; + color: $input-color; + outline: none; + font-weight: 200; + + &:hover { + border: 1px solid $input-color; + } + + &:valid { + font-family: Verdana, sans-serif; + border: 2px solid $green-color; + -webkit-text-fill-color: #010810; + -webkit-box-shadow: 0 0 0 1000px $background-color-top inset; + } + } + + &__send { + width: 35%; + height: 40px; + background-color: $green-color; + border: 0; + color: $background-color-top; + text-align: center; + font-size: 16px; + cursor: pointer; + + &:hover { + background-color: $dark-green-color; + } + + &:active { + background-color: $active-green-color; + } + } + + +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..9fe0298e4 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,185 @@ +.features { + text-align: left; + + @include on-tablet { + @include content-padding-in-line; + } + + &__section { + @include content-padding-in-line; + font-size: 30px; + + @include on-tablet { + padding-inline: 0; + } + + @include on-desktop { + font-size: 40px; + margin-bottom: 15px + } + } + + &__container { + background-color: #D6ECEC; + padding: 20px 30px 0; + position: relative; + border-radius: 8px; + + @include on-tablet { + padding: 20px 90px 0; + } + + @include on-desktop { + padding: 20px 102px 0; + @include page-grid; + } + } + + &__title { + color: $dark-green-color; + font-size: 18px; + font-weight: 700; + margin-bottom: 20px; + text-transform: uppercase; + } + + &__list { + list-style: disc; + margin: 0 0 32px 20px; + padding: 0; + } + + &__item { + color: #1b2129; + font-size: 14px; + line-height: 24px; + margin-bottom: 8px; + font-family: "Helvetica Neue", sans-serif; + } + + &__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-bottom: 32px; + + &-arrow { + width: 24px; + height: 24px; + cursor: pointer; + transition: opacity 0.3s; + + &:hover { + opacity: 0.7; + } + } + + &-counter { + font-size: 14px; + font-weight: 600; + color: $green-color; + + span { + color: #999; + } + } + } + + &__down { + @include on-tablet { + display: flex; + justify-content: space-around; + } + } + + &__sld { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin-bottom: 0; + + @include on-desktop { + display: none; + } + } + + &__arrows { + display: flex; + justify-content: center; + align-items: center; + gap: 0; + } + + &__arrow { + width: 48px; + height: 13px; + background-size: contain; + background-repeat: no-repeat; + cursor: pointer; + + &--left { + background-image: url('../images/icons/sliderL.png'); + + &:hover { + background-image: url('../images/icons/sliderLH.png'); + } + } + + &--right { + background-image: url('../images/icons/sliderR.png'); + + &:hover { + background-image: url('../images/icons/sliderRH.png'); + } + } + } + + &__count { + display: flex; + align-items: center; + gap: 6px; + font-family: 'Helvetica Neue', sans-serif; + font-size: 14px; + } + + &__img { + display: block; + width: 100%; + max-width: 320px; + margin: 0 auto; + height: auto; + + @include on-tablet { + margin: 0; + max-width: 420px; + } + + @include hover( + transform, + scale(0.92) + ); + } +} + +.container { + &--item { + display: none; + + @include on-desktop { + display: block; + } + } + + @include on-desktop { + &--num1 { + grid-column: 1 / 6; + } + + &--num2 { + grid-column: 7 / -1; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9047c2096 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,40 @@ +.footer { + @include content-padding-in-line; + @include page-grid; + + &__head { + display: flex; + justify-content: space-between; + + grid-column: 2 / 4; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 6 / 8; + } + } + + &__down { + grid-column: 1 / -1; + + font-size: 14px; + line-height: 21px; + text-align: center; + color: $text-color-p; + + @include on-tablet { + grid-column: 3 / 7; + } + + @include on-desktop { + grid-column: 4 / 10; + } + } +} + +.head__link { + text-decoration: none; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..011919c2f --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,108 @@ +.header { + margin: 0; + width: 100%; + + &__image { + display: flex; + width: 100%; + background-size: cover; + background-position: center; + background-image: url(.././images/fon.png); + + @include on-tablet { + width: 50%; + } + + @include hover( + transform, + scale(0.95) + ); + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__main { + margin: 80px 0 0; + + @include on-tablet { + @include content-padding-in-line; + + margin: 120px 0 80px; + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + } + + @include on-desktop { + margin: 180px 0 150px; + } + } + + &__bottom { + @include content-padding-in-line; + + padding-bottom: 40px; + + @include on-tablet { + padding-inline: 0; + padding-bottom: 64px; + } + + &__title { + font-family: Inter, sans-serif; + color: $text-color; + font-size: 40px; + text-transform: uppercase; + font-weight: 700; + line-height: 52px; + text-align: left; + margin: 0; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + + @include on-desktop { + font-size: 50px; + line-height: 56px; + } + } + + &__paragraph { + font-family: Inter, sans-serif; + color: #4f4f4f; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + margin-top: 16px; + margin-bottom: 0; + + @include on-tablet { + font-size: 18px; + line-height: 28px; + max-width: 540px; + } + + @include on-desktop { + font-size: 22px; + line-height: 32px; + max-width: 540px; + } + } + + } +} + +.logo { + width: 152px; + height: 16px; + display: flex; +} + diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..248a6d5ae --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,29 @@ +.icon { + display: block; + height: 32px; + width: 32px; + background-size: cover; + background-position: center; + + @include hover(transform, scale(1.2)); + + @include on-desktop { + display: none; + } + + &--burger { + background-image: url(.././images/icons/burger-menu.svg); + + &:hover { + width: 35px; + } + } + + &--close { + background-image: url(.././images/icons/close-menu.svg); + + &:hover { + width: 35px; + } + } +} diff --git a/src/styles/blocks/index.scss b/src/styles/blocks/index.scss new file mode 100644 index 000000000..e3a7806bd --- /dev/null +++ b/src/styles/blocks/index.scss @@ -0,0 +1,24 @@ +@import '../utils'; +@import '../fonts'; +@import '../typography'; +@import '../utils/vars'; + +@import './header'; +@import './top-bar'; +@import './menu'; +@import './icons'; +@import './page'; +@import './main'; +@import './section-title'; +@import './benefits'; +@import './aboutUs'; +@import './testimonilas'; +@import './features'; +@import './contact'; +@import './logo'; +@import './footer'; + +body { + margin: 0; + background-color: $background-color; +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..53b0e6de6 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,34 @@ +.logo { + display: none; + + @include on-tablet { + display: flex; + width: 100%; + align-items: center; + + @include page-grid; + + &__favicon { + grid-column: 4 / 6; + + width: 184px; + } + + &__arrow { + width: 50px; + grid-column: 8 / -1; + + scroll-behavior: smooth; + } + } + + @include on-desktop { + &__favicon { + grid-column: 6 / 8; + } + + &__arrow { + grid-column: 11 / -1; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..84fb726ed --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,25 @@ +.main { + background-color: $background-color; + + &__content { + display: grid; + row-gap: 110px; + padding-block: 96px; + + @include on-tablet { + padding-block: 120px; + row-gap: 120px; + } + } +} + +.photo { + @include content-padding-in-line; + + &__img { + grid-column: 1 / -1; + width: 100%; + height: auto; + display: block; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..7b252dfa1 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,186 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: $background-color-top; + font-weight: 700; + text-transform: capitalize; + overflow: hidden; + + @include on-desktop { + height: auto; + } + + &__container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + } + + &__top { + margin-bottom: 32px; + position: sticky; + top: 0; + z-index: 1; + background-color: $background-color-top; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + margin: 0; + padding: 0; + } + } +} + +.menu_bottom { + @include content-padding-in-line; + + display: flex; + flex-direction: column; + justify-content: space-between; + flex-grow: 1; + + @include on-desktop { + flex-grow: 0; + margin-bottom: 60px; + } + + &__down { + display: flex; + flex-direction: column; + justify-content: flex-end; + flex-grow: 1; + + @include on-desktop { + display: none; + } + } + + &__info { + display: flex; + align-items: center; + gap: 20px; + position: relative; + text-decoration: none; + text-transform: uppercase; + font-size: 14px; + font-family: Inter, sans-serif; + font-weight: 400; + line-height: 20px; + color: $text-color; + + &:hover { + transform: scale(1); + } + } + + &__specs { + text-decoration: none; + font-family: 'Helvetica Neue', sans-serif; + font-size: 14px; + color: $text-color; + text-transform: uppercase; + cursor: pointer; + + @include on-tablet { + display: none; + } + + &:hover { + font-weight: 700; + } + } + + &__lang { + display: flex; + align-items: center; + gap: 6px; + font-family: 'Helvetica Neue', sans-serif; + font-size: 14px; + cursor: pointer; + + @include on-tablet { + display: none; + } + + &--en, &--ua { + &:hover { + font-weight: 700; + } + } + } + + &__button { + height: 46px; + width: 100%; + background-color: $text-color; + color: $background-color-top; + font-size: 12px; + text-transform: uppercase; + border: 1px solid $text-color; + cursor: pointer; + + margin-bottom: 30px; + + &:hover { + background-color: $text-color-active; + border: 1px solid $text-color-active; + } + + &:active { + background-color: $button-color-active; + border: 1px solid $button-color-active; + } + + @include on-tablet { + display: none; + } + } +} + +.nav { + margin-bottom: 48px; + + @include on-desktop { + margin: 0; + } + + .nav__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 25px; + + @include on-desktop { + flex-direction: row; + gap: 84px; + justify-content: center; + } + } + + .nav__link { + position: relative; + text-decoration: none; + text-transform: uppercase; + font-size: 14px; + font-family: Inter, sans-serif; + font-weight: 400; + line-height: 20px; + color: $text-color; + + @include on-desktop { + font-size: 20px; + } + + &:hover { + transform: scale(1); + color: $text-color-active; + font-weight: 700; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..6a92ec21b --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,42 @@ +.page { + font-family: Inter, sans-serif; + color: $text-color; + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: all $effectDuration; + opacity: 0; + transform: translateX(100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + + @include on-desktop { + position: static; + opacity: 1; + transform: none; + pointer-events: all; + height: auto; + background: none; + display: block; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..7135344f5 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,31 @@ +.section-title { + margin: 0 0 30px; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-align: left; + text-transform: uppercase; + + @include on-desktop { + font-size: 40px; + } + + &-disabled { + @include on-tablet { + display: none; + } + } + + &--table { + display: none; + + @include on-tablet { + display: block; + font-weight: 700; + font-size: 36px; + line-height: 46px; + text-align: left; + text-transform: uppercase; + } + } +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..d9e862a04 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,70 @@ +.quotes { + @include content-padding-in-line; + text-align: center; + margin-top: 60px; + + &__back { + position: relative; + padding: 50px 0 0; + + &::before { + content: ''; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 40vw; + max-width: 230px; + height: auto; + aspect-ratio: 1 / 1; + text-align: center; + background-image: url('.././images/icons/brek.svg'); + background-repeat: no-repeat; + background-size: contain; + opacity: 1; + z-index: 0; + } + + &__text { + @include content-padding-in-line; + position: relative; + z-index: 1; + margin-top: 50px; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + } + + @include on-tablet { + padding: 60px 0 0; + } + } + + &__other { + text-align: center; + margin: 30px 0 0; + + @include on-tablet { + margin-top: 40px; + } + + &--name { + font-size: 16px; + line-height: 22px; + color: $text-color-active; + margin: 0 0 5px; + } + + &--position { + font-size: 14px; + line-height: 21px; + color: $text-color-p; + margin: 0; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..9d6ebe8b9 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,115 @@ +.top_bar { + @include content-padding-in-line; + padding-block: 25px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 40px; + } + + @include on-desktop { + padding-block: 30px; + margin-inline: 0; + } + + &__icons { + display: flex; + align-items: center; + gap: 24px; + + &__info { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + gap: 20px; + } + } + + &__specs { + display: none; + + @include on-tablet { + display: block; + text-decoration: none; + font-family: 'Helvetica Neue', sans-serif; + font-size: 14px; + color: $text-color; + text-transform: uppercase; + cursor: pointer; + + &:hover { + font-weight: 700; + } + } + } + + &__lang { + display: none; + + @include on-tablet { + display: flex; + cursor: pointer; + align-items: center; + gap: 6px; + font-family: 'Helvetica Neue', sans-serif; + font-size: 14px; + + &--en, &--ua { + &:hover { + font-weight: 700; + } + } + } + } + + &--laptop { + display: none; + + @include on-tablet { + display: block; + height: 46px; + width: 100px; + background-color: $text-color; + font-size: 12px; + text-transform: uppercase; + border: 1px solid $text-color; + color: $background-color-top; + cursor: pointer; + + &:hover { + background-color: $text-color-active; + border: 1px solid $text-color-active; + } + + &:active { + background-color: $button-color-active; + border: 1px solid $button-color-active; + } + } + } + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 26px; + + @include on-tablet { + height: 24px; + } + + &--mob { + @include on-desktop { + display: none; + } + } + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..6d1e6e7e0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,8 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import '../styles/blocks/index'; body { - background: $c-gray; + margin: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..27abc83e2 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,52 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-in-line() { + padding-inline: 30px; + font-size: 36px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + margin: 0; + margin-inline: auto; + max-width: 1280px; + padding-inline: 123px; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration; &:hover { #{$_property}: $_toValue; } } + +@mixin page-grid { + --columns: 4; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..fc8d4334f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1080px; +$background-color: #F7F7F7; +$background-color-top: #F9F9F9; +$text-color: #333333; +$text-color-p: #7C7C7C; +$text-color-active: #131313; +$button-color-active: #D0D0D0; +$green-color: #0DB2B3; +$dark-green-color: #0C797A; +$active-green-color: #CFEFF0; +$input-color: #BDBDBD; +$effectDuration: 0.3s;