diff --git a/README.md b/README.md index a95e97afe..fd27f26c3 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ # 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]() - Use BEM and SCSS -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 - Desktop 1280px - Tablet 640px @@ -18,7 +19,6 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 1. Implement `Questions` block 1. Implement the footer. - ## Github flow 1. **Fork** the repo. @@ -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://KazymyrYan.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/images/about-us-1.png b/src/images/about-us-1.png new file mode 100644 index 000000000..f87e3cc34 Binary files /dev/null and b/src/images/about-us-1.png differ diff --git a/src/images/about-us-2.png b/src/images/about-us-2.png new file mode 100644 index 000000000..65768e45c Binary files /dev/null and b/src/images/about-us-2.png differ diff --git a/src/images/avatar.png b/src/images/avatar.png new file mode 100644 index 000000000..6bdae6e83 Binary files /dev/null and b/src/images/avatar.png differ diff --git a/src/images/banner-desktop.png b/src/images/banner-desktop.png new file mode 100644 index 000000000..0e76ce664 Binary files /dev/null and b/src/images/banner-desktop.png differ diff --git a/src/images/banner-mobile.png b/src/images/banner-mobile.png new file mode 100644 index 000000000..13c04427a Binary files /dev/null and b/src/images/banner-mobile.png differ diff --git a/src/images/banner-tablet.png b/src/images/banner-tablet.png new file mode 100644 index 000000000..43e0d0af1 Binary files /dev/null and b/src/images/banner-tablet.png differ diff --git a/src/images/banner.png b/src/images/banner.png new file mode 100644 index 000000000..0e76ce664 Binary files /dev/null and b/src/images/banner.png differ diff --git a/src/images/features-bg-clear.png b/src/images/features-bg-clear.png new file mode 100644 index 000000000..cce7022e6 Binary files /dev/null and b/src/images/features-bg-clear.png differ diff --git a/src/images/features-bg.png b/src/images/features-bg.png new file mode 100644 index 000000000..d512cf75d Binary files /dev/null and b/src/images/features-bg.png differ diff --git a/src/images/features-img-hover.png b/src/images/features-img-hover.png new file mode 100644 index 000000000..bb1e9cade Binary files /dev/null and b/src/images/features-img-hover.png differ diff --git a/src/images/features-img.png b/src/images/features-img.png new file mode 100644 index 000000000..dd8590d18 Binary files /dev/null and b/src/images/features-img.png differ diff --git a/src/images/header-img-desktop.png b/src/images/header-img-desktop.png new file mode 100644 index 000000000..8c0ade625 Binary files /dev/null and b/src/images/header-img-desktop.png differ diff --git a/src/images/header-img-mobile.png b/src/images/header-img-mobile.png new file mode 100644 index 000000000..fd0965b47 Binary files /dev/null and b/src/images/header-img-mobile.png differ diff --git a/src/images/header-img-tablet.png b/src/images/header-img-tablet.png new file mode 100644 index 000000000..80fa1e6d9 Binary files /dev/null and b/src/images/header-img-tablet.png differ diff --git a/src/images/header-img.png b/src/images/header-img.png new file mode 100644 index 000000000..8c0ade625 Binary files /dev/null and b/src/images/header-img.png differ diff --git a/src/images/icon/arrow.svg b/src/images/icon/arrow.svg new file mode 100644 index 000000000..b89332513 --- /dev/null +++ b/src/images/icon/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/benefits-icon-1.svg b/src/images/icon/benefits-icon-1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icon/benefits-icon-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/benefits-icon-2.svg b/src/images/icon/benefits-icon-2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icon/benefits-icon-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/benefits-icon-3.svg b/src/images/icon/benefits-icon-3.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icon/benefits-icon-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/benefits-icon-4.svg b/src/images/icon/benefits-icon-4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon/benefits-icon-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/facebook-icon.svg b/src/images/icon/facebook-icon.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/favicon.svg b/src/images/icon/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/icon/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/icon-burger-menu.svg b/src/images/icon/icon-burger-menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/icon/icon-burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram-icon.svg b/src/images/icon/instagram-icon.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter-icon.svg b/src/images/icon/twitter-icon.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..9801c53e5 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/testimonilas-bg.png b/src/images/testimonilas-bg.png new file mode 100644 index 000000000..03986a7fb Binary files /dev/null and b/src/images/testimonilas-bg.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..014184218 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,606 @@ - + - Title + Crazybaby + + + + - -

Hello Mate Academy

+ + +
+
+
+ + + +
+
+ + SPECS + + + EN + / + UA + + + BUY + +
+ +
+
+ +
+ header-img + header-img + header-img + +
+

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

+
+
+
+
+ + + + + + + +
+
+ +
+
+
+
+ icon-1 + +

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

+
+ +
+ icon-2 + +

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

+
+ +
+ icon-3 + +

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

+
+ +
+ icon-4 + +

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

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

+ DESIGNED FOR THE FUTURE +

+
+ photo +
+
+

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

+
+ photo +
+
+

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

+ avatar +

Garrett Martin

+

Creative Director

+
+
+
+ + +
+
+

FEATURES

+
+
+
+

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 +
    • +
+ img +
+ +
+

App Features

+
    +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Color Wheel
    • +
+ img +
+ +
+

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 +
    • +
+
+ +
+ + bottom-img +
+ bottom-img +
+
+
+ + +
+
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+ +
+
+ +
+
+
+ + + +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+

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

+ + +
+
+
+ diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..695d0382f --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,160 @@ +.about-us { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__content { + @include page-grid; + + row-gap: 110px; + + @include on-tablet { + row-gap: 140px; + } + + @include on-desktop { + row-gap: 170px; + } + } + + &__item { + grid-column: 1 / -1; + + @include on-tablet { + @include page-grid; + } + } + + &__card { + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__title--mobile { + @include on-tablet { + display: none; + } + } + + &__title--card { + display: none; + + @include on-tablet { + display: block; + } + } + + &__title { + margin: 0 0 30px; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: $color-dark-gray; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + margin-bottom: 30px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__text { + margin: 0 0 30px; + margin-top: 20px; + font-size: 14px; + line-height: 21px; + color: $color-gray; + + @include on-tablet { + margin-bottom: 60px; + margin-top: 0; + font-size: 16px; + line-height: 24px; + } + } + + &__btn { + width: 100%; + max-width: 128px; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + color: $color-main; + text-decoration: none; + + @include about-us-link-hover; + } + + &__img-wrapper { + align-self: start; + height: auto; + min-height: 0; + + @include on-tablet { + grid-column: 1 / 5; + + margin-left: -34px; // зсув ліворуч за контейнер + } + + @include on-desktop { + grid-column: 1 / 7; + margin-left: 0; + } + } + + &__img { + display: block; + width: 100%; + height: 415px; + object-fit: cover; + + @include animation-pulse; + @include shadow; + } + + &__item--reverse { + @include on-tablet { + .about-us__card { + grid-column: 1 / 5; + grid-row: 1; + } + + .about-us__img-wrapper { + grid-column: 5 / -1; + grid-row: 1; + + margin-right: -34px; // зсув ліворуч за контейнер + margin-left: 0; + } + } + + @include on-desktop { + .about-us__card { + grid-column: 1 / 7; + } + + .about-us__img-wrapper { + grid-column: 7 / -1; + margin-right: 0; + } + } + } +} diff --git a/src/styles/blocks/banner.scss b/src/styles/blocks/banner.scss new file mode 100644 index 000000000..143477489 --- /dev/null +++ b/src/styles/blocks/banner.scss @@ -0,0 +1,32 @@ +.banner { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__content { + display: block; + } + + &__img { + display: block; + margin-left: -18px; + margin-right: -18px; + width: calc(100% + 36px); + height: auto; + min-width: 320px; + + @include on-tablet { + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 846px; + max-height: 520px; + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..27c1b23eb --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,93 @@ +.benefits { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__content { + @include page-grid; + + row-gap: 64px; + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + + &--2, + &--3, + &--4 { + display: none; + + @include on-tablet { + display: flex; + } + } + + transition: all ($animation-speed * 2) ease; + + &:hover { + img { + transform: scale(1.3) rotate(360deg); + } + } + } + + &__img { + width: 50px; + height: 40px; + + transition: all $animation-speed ease; + + @include on-desktop { + width: 70px; + height: 50px; + } + } + + &__title { + margin-top: 40px; + margin-bottom: 0; + font-weight: 700; + font-size: 22px; + line-height: 28px; + text-transform: uppercase; + text-align: center; + + min-height: 56px; // для однакової висоти у сітці + + @include on-desktop { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 30px; + } + } + + &__text { + margin-top: 20px; + margin-bottom: 0; + text-align: center; + + @include on-desktop { + margin-top: 24px; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..e5d5fb15b --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,3 @@ +.container { + @include container-padding-inline; +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..8d6f3ad66 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,188 @@ +.features { + margin-bottom: 110px; + + @include on-tablet { + bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__title { + margin: 0; + margin-bottom: 32px; + font-weight: 700; + font-size: 30px; + line-height: 40px; + color: $color-dark-gray; + } + + &__wrapper { + // margin-inline: -34px; + margin-left: -34px; + margin-right: -34px; + background: #d6ecec; + + @include on-tablet { + // margin-inline: 0; + margin-left: 0; + margin-right: 0; + background-image: url(../images/features-bg-clear.png); + background-repeat: no-repeat; + background-position: right bottom; + background-size: 400px auto; + } + + @include on-desktop { + background-position-x: calc(50% + 300px); + background-size: auto; + } + } + + &__content { + // margin-inline: 34px; + margin-left: 34px; + margin-right: 34px; + + @include on-tablet { + margin-left: 90px; + } + + @include on-desktop { + @include page-grid; + + row-gap: 56px; + margin: 0; + } + } + + &__card { + display: flex; + flex-direction: column; + + &--1, + &--2 { + display: none; + + @include on-desktop { + display: block; + margin-top: 60px; + } + } + + &--1 { + grid-column: 2 / 7; + grid-row: 1; + } + + &--2 { + grid-column: 7 / 12; + grid-row: 1; + } + + &--3 { + grid-column: 2 / 7; + grid-row: 2; + + @include on-desktop { + margin-bottom: 60px; + } + } + } + + &__desktop-img { + display: none; + } + + &__subtitle { + margin: 0; + margin-bottom: 20px; + padding-top: 30px; + font-weight: 700; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + color: $color-btn; + + @include on-tablet { + padding-top: 60px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + padding-top: 0; + } + } + + &__list { + margin: 0; + margin-bottom: 50px; + padding-left: 0; + display: flex; + flex-direction: column; + gap: 10px; + list-style: none; + + @include on-desktop { + margin-bottom: 0; + } + } + + &__item { + display: flex; + align-items: center; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: $color-dark-gray; + + &::before { + content: '•'; + margin-right: 11px; + font-size: 14px; + line-height: 1; + color: $color-dark-gray; + } + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + + &__img { + width: 93px; + height: 47px; + align-self: center; + background-image: url(../images/features-img.png); + background-size: 100%; + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + + &:hover { + background-image: url(../images/features-img-hover.png); + } + + @include on-tablet { + align-self: flex-start; + margin-bottom: 123px; + } + + @include on-desktop { + display: none; + } + } + + &__bottom-img { + width: 100%; + height: auto; + object-fit: cover; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..82890423b --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,73 @@ +.footer { + &__content { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + position: relative; + + @include on-tablet { + gap: 60px; + } + } + + &__logo { + display: none; + + @include logo-hover; + + @include on-tablet { + display: block; + height: 25px; + width: 184px; + } + + @include on-desktop { + height: 26px; + width: 161px; + } + } + + &__links-list { + margin: 0; + padding: 0; + display: flex; + gap: 40px; + list-style: none; + + @include on-tablet { + gap: 50px; + } + } + + &__copyright { + margin-top: 0; + margin-bottom: 20px; + text-align: center; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: $color-light-gray; + cursor: default; + + @include on-tablet { + margin-bottom: 30px; + font-weight: 300; + } + + @include on-desktop { + font-weight: 400; + } + } + + &__arrow { + display: none; + + @include on-tablet { + display: block; + position: absolute; + right: 0; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..0e4786715 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,235 @@ +.header { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + // HEADER__TOP-BAR + &__top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 22px; + + @include on-tablet { + padding-block: 0; + } + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 26px; + width: 161px; + + @include logo-hover; + } + + &__actions { + display: flex; + align-items: center; + gap: 30px; + } + + &__hidden { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + gap: 30px; + } + } + + &__specs { + font-size: 14px; + font-weight: 300; + color: $color-middle-gray; + text-decoration: none; + + transition: all $animation-speed; + + &:hover { + font-weight: 400; + color: $color-dark-gray; + } + } + + &__lang { + font-size: 14px; + text-decoration: none; + + transition: all $animation-speed; + + &--en { + font-weight: 400; + color: $color-dark-gray; + transition: all $animation-speed; + } + + &--slash { + font-weight: 400; + color: $color-dark-gray; + } + + &--ua { + font-weight: 300; + color: $color-icon-hover; + transition: all $animation-speed; + } + + &:hover { + .header__lang--en { + font-weight: 300; + color: $color-icon-hover; + } + + .header__lang--ua { + font-weight: 400; + color: $color-dark-gray; + } + } + } + + &__buy { + width: 100px; + height: 48px; + text-align: center; + align-content: center; + text-decoration: none; + background-color: $color-dark-gray; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + color: $color-white; + + transition: all $animation-speed; + + &:hover { + background-color: $color-black; + } + + &:disabled { + background-color: $color-max-ligh-gray; + } + } + + &__menu { + @include on-desktop { + display: none; + } + } + + // HEADER__BOTTOM + &__bottom { + align-items: end; + + @include page-grid; + + @include on-tablet { + margin-top: 130px; + } + + @include on-desktop { + margin-top: 90px; + } + } + + &__img { + @include blink; + } + + &__img--mobile { + display: block; + + // margin-inline: -30px; + margin-left: -30px; + margin-right: -30px; + width: calc(100% + 60px); + height: auto; + min-width: 320px; + grid-column: 1 / -1; + + @include on-tablet { + display: none; + } + } + + &__img--tablet { + display: none; + + @include on-tablet { + display: block; + width: 100%; + height: auto; + grid-column: 4 / -1; + grid-row: 1; + } + + @include on-desktop { + display: none; + } + } + + &__img--desktop { + display: none; + + @include on-desktop { + display: block; + width: 100%; + height: auto; + grid-column: 5 / -1; + grid-row: 1; + } + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + } + + @include on-desktop { + grid-column: 1 / 5; + grid-row: 1; + } + } + + &__title { + margin: 0; + margin-bottom: 20px; + font-weight: 700; + font-size: 40px; + line-height: 52px; + color: $color-dark-gray; + text-transform: uppercase; + + @include on-tablet { + margin-bottom: 30px; + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } + } + + &__description { + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $color-dark-gray; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..bf602f0cf --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,50 @@ +.icon { + display: block; + width: 32px; + height: 32px; + + &--menu { + background-image: url(../images/icon/icon-burger-menu.svg); + + @include hover(transform, scale(1.2)); + } + + &--close { + background-image: url(../images/icon/icon-close.svg); + width: 24px; + height: 24px; + + @include hover(transform, scale(1.2)); + } + + &--social { + width: 24px; + height: 24px; + } + + &--facebook { + background-image: url(../images/icon/facebook-icon.svg); + + @include social-link-hover; + } + + &--twitter { + background-image: url(../images/icon/twitter-icon.svg); + + @include social-link-hover; + } + + &--instagram { + background-image: url(../images/icon/instagram-icon.svg); + + @include social-link-hover; + } + + &--arrow { + background-image: url(../images/icon/arrow.svg); + height: 50px; + width: 50px; + + @include social-link-hover; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..f5856c054 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,92 @@ +.menu { + overflow: auto; + display: flex; + flex-direction: column; + height: 100vh; + box-sizing: border-box; + + &__top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 24px; + + @include on-tablet { + padding-top: 36px; + } + } + + &__content { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: auto; + } + + &__logo { + @include logo-hover; + } + + &__list { + @include list-column(25px); + + margin-top: 30px; + } + + &__link { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: $color-dark-gray; + text-decoration: none; + + &:hover { + font-weight: 700; + } + + @include about-us-link-hover; + &::after { + transform: scaleX(0); + } + } + + &__middle { + margin-top: 50px; + display: flex; + gap: 20px; + + @include on-tablet { + display: none; + } + } + + &__buy { + display: block; + margin-top: auto; + margin-bottom: 30px; + width: 100%; + height: 48px; + text-align: center; + align-content: center; + text-decoration: none; + background-color: $color-dark-gray; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + color: $color-white; + + transition: all $animation-speed; + + &:hover { + background-color: $color-black; + } + + &:disabled { + background-color: $color-max-ligh-gray; + } + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..384748c49 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,32 @@ +.nav { + display: none; + + @include on-desktop { + display: block; + margin-bottom: 62px; + } + &__list { + @include nav-style; + + // margin-inline: auto; + margin-left: auto; + margin-right: auto; + } + + &__link { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: $color-dark-gray; + text-decoration: none; + + &:hover { + font-weight: 700; + } + + @include about-us-link-hover; + &::after { + transform: scaleX(0); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..b811ec05d --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,67 @@ +.page { + font-family: Inter, sans-serif; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + background-color: $color-off-white; + margin: 0; + + @include on-tablet { + margin-top: 30px; + } + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + + transform: translateY(-100%); + background-color: #f9f9f9; + + opacity: 0; + transition: + transform ($animation-speed * 2) ease-in-out, + opacity $animation-speed ease; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + ul { + li { + opacity: 0; + transform: translateY(20px); + transition: all 0.6s ease; + } + } + + &:target ul li { + opacity: 1; + transform: translateY(0); + } + + &:target ul li:nth-child(1) { + transition-delay: ($animation-speed * 2); + } + &:target ul li:nth-child(2) { + transition-delay: ($animation-speed * 2 + 0.1); + } + &:target ul li:nth-child(3) { + transition-delay: ($animation-speed * 2 + 0.2); + } + &:target ul li:nth-child(4) { + transition-delay: ($animation-speed * 2 + 0.3); + } + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..0fee0467a --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,125 @@ +.questions { + margin-bottom: 100px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__title { + margin-top: 0; + margin-bottom: 27px; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: $color-dark-gray; + + @include on-tablet { + margin-bottom: 0; + font-size: 36px; + line-height: 46px; + + grid-column: 1 / 5; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + + grid-column: 1 / 7; + } + } + + &__form { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__input { + display: block; + width: 100%; + font-family: inherit; + padding: 12px 20px; + border: 1px solid $color-icon-hover; + font-weight: 400; + font-size: 16px; + line-height: 24px; + box-sizing: border-box; + height: auto; + + &::placeholder { + color: $color-light-gray; + opacity: 1; + } + + &--email { + height: 48px; + margin-bottom: 20px; + + @include input-hover; + } + + &--text { + height: 128px; + margin-bottom: 30px; + resize: none; + + @include text-area-hover; + + @include on-tablet { + height: 201px; + } + + @include on-desktop { + height: 128px; + } + } + } + + &__btn { + width: 102px; + height: 40px; + background-color: $color-main; + border: none; + padding: 0; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + color: $color-white; + cursor: pointer; + + transition: all $animation-speed; + + &:hover { + background-color: $color-btn; + } + + &:disabled { + background-color: $color-secondary; + } + + @include on-desktop { + width: 124px; + height: 48px; + } + } +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..71b115225 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,77 @@ +.testimonilas { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__content { + background-image: url(../images/testimonilas-bg.png); + background-position-x: center; + background-position-y: top; + background-repeat: no-repeat; + text-align: center; + max-width: 768px; + + // margin-inline: auto; + margin-left: auto; + margin-right: auto; + } + + &__text { + margin: 0; + margin-bottom: 40px; + padding-top: 50px; + font-weight: 700; + font-size: 14px; + line-height: 20px; + color: $color-dark-gray; + + @include on-tablet { + margin-bottom: 40px; + padding-top: 60px; + font-size: 24px; + line-height: 36px; + } + + @include on-desktop { + margin-bottom: 30px; + padding-top: 42px; + } + } + + &__avatar { + width: 62px; + height: 62px; + margin-bottom: 10px; + border-radius: 50%; + + @include hover(transform, scale(1.2)); + @include shadow; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &__name { + margin: 0; + margin-bottom: 5px; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-dark-gray; + } + + &__position { + margin: 0; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: $color-gray; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..4c7f0160d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/icon'; +@import './blocks/header'; +@import './blocks/container'; +@import './blocks/page'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/benefits'; +@import './blocks/banner'; +@import './blocks/about-us'; +@import './blocks/testimonilas'; +@import './blocks/features'; +@import './blocks/questions'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..574b2642f 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,216 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin container-padding-inline { + min-width: 320px; + + // padding-inline: $container-padding-inline; + padding-left: $container-padding-inline; + padding-right: $container-padding-inline; + + @include on-tablet { + // padding-inline: 34px; + padding-left: 34px; + padding-right: 34px; + } + + @include on-desktop { + // padding-inline: 123px; + padding-left: 123px; + padding-right: 123px; + + // margin-inline: auto; + margin-left: auto; + margin-right: auto; + max-width: 1440px; + } +} + +@mixin page-grid { + display: grid; + grid-template-columns: repeat($grid-column-mobile, 1fr); + column-gap: $grid-gap-mobile; + + @include on-tablet { + grid-template-columns: repeat($grid-column-tablet, 1fr); + column-gap: $grid-gap-tablet; + } + + @include on-desktop { + grid-template-columns: repeat($grid-column-desktop, 1fr); + column-gap: $grid-gap-desktop; + } +} + +@mixin list-column($gap: 25px) { + display: flex; + flex-direction: column; + gap: $gap; + margin: 0; + padding: 0; + list-style: none; +} + +@mixin nav-style { + display: flex; + justify-content: center; + gap: 84px; + margin: 0; + padding: 0; + list-style: none; +} + +@mixin about-us-link-hover { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + left: 0; + transform-origin: left; + transform: scaleX(0.5); + display: block; + width: 100%; + height: 1px; + + background-color: $color-main; + + transition: transform $animation-speed ease-in-out; + } + &:hover::after { + transform: scaleX(1); + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} $animation-speed; + &:hover { + #{$property}: $toValue; + } +} + +@mixin logo-hover { + display: inline-block; + + &:hover { + animation: jump ($animation-speed * 3) ease; + } +} + +@keyframes jump { + 0% { + transform: translateY(0); + } + 25% { + transform: translateY(-6px); + } + 50% { + transform: translateY(0); + } + 75% { + transform: translateY(-4px); + } + 100% { + transform: translateY(0); + } +} + +@mixin input-hover { + transition: all $animation-speed; + + // &:hover, + &:focus, + &:active { + outline: none; + border-color: $color-btn; + &::placeholder { + color: $color-dark-gray; + } + } + + &:valid { + outline: none; + border-color: $color-ogange; + &::placeholder { + color: $color-ogange; + } + } +} + +@mixin text-area-hover { + transition: all $animation-speed; + + &:valid, + &:focus, + &:active { + outline: none; + &::placeholder { + color: $color-dark-gray; + } + } +} + +@mixin social-link-hover { + transition: all $animation-speed ease; + + &:hover { + filter: invert(58%) sepia(75%) saturate(4500%) hue-rotate(155deg) + brightness(95%) contrast(90%); + transform: scale(1.2); + } +} + +@mixin blink { + cursor: pointer; + &:hover { + animation: blink ($animation-speed * 5) infinite ease-in-out; + } +} + +@keyframes blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.6; + } +} + +@mixin animation-pulse { + cursor: pointer; + &:hover { + animation: pulse ($animation-speed * 3) infinite; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } +} + +@mixin shadow { + transition: all $animation-speed; + &:hover { - #{$_property}: $_toValue; + box-shadow: 0 0 20px $color-main; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a546faeed 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,28 @@ -$c-gray: #eee; +// grid +$grid-column-mobile: 4; +$grid-column-tablet: 8; +$grid-column-desktop: 12; +$grid-gap-mobile: 20px; +$grid-gap-tablet: 20px; +$grid-gap-desktop: 30px; + +// container +$container-padding-inline: 30px; + +// animation +$animation-speed: 0.3s; + +// colors +$color-main: #0db2b3; +$color-secondary: #cfeff0; +$color-black: #131313; +$color-dark-gray: #333; +$color-middle-gray: #4f4f4f; +$color-gray: #7c7c7c; +$color-light-gray: #bdbdbd; +$color-max-ligh-gray: #d0d0d0; +$color-off-white: #f7f7f7; +$color-white: #fff; +$color-btn: #0c797a; +$color-icon-hover: #828282; +$color-ogange: #eb5757;