diff --git a/README.md b/README.md index a95e97afe..928a13f4b 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://Alex-redman.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/fonts/HelveticaNeueBlack.otf b/src/fonts/HelveticaNeueBlack.otf new file mode 100644 index 000000000..868f7f051 Binary files /dev/null and b/src/fonts/HelveticaNeueBlack.otf differ diff --git a/src/fonts/HelveticaNeueBlackItalic.otf b/src/fonts/HelveticaNeueBlackItalic.otf new file mode 100644 index 000000000..225c827d1 Binary files /dev/null and b/src/fonts/HelveticaNeueBlackItalic.otf differ diff --git a/src/fonts/HelveticaNeueBold.otf b/src/fonts/HelveticaNeueBold.otf new file mode 100644 index 000000000..f44af6408 Binary files /dev/null and b/src/fonts/HelveticaNeueBold.otf differ diff --git a/src/fonts/HelveticaNeueBoldItalic.otf b/src/fonts/HelveticaNeueBoldItalic.otf new file mode 100644 index 000000000..7355edf85 Binary files /dev/null and b/src/fonts/HelveticaNeueBoldItalic.otf differ diff --git a/src/fonts/HelveticaNeueHeavy.otf b/src/fonts/HelveticaNeueHeavy.otf new file mode 100644 index 000000000..63053ce6b Binary files /dev/null and b/src/fonts/HelveticaNeueHeavy.otf differ diff --git a/src/fonts/HelveticaNeueHeavyItalic.otf b/src/fonts/HelveticaNeueHeavyItalic.otf new file mode 100644 index 000000000..6d5628b83 Binary files /dev/null and b/src/fonts/HelveticaNeueHeavyItalic.otf differ diff --git a/src/fonts/HelveticaNeueItalic.ttf b/src/fonts/HelveticaNeueItalic.ttf new file mode 100644 index 000000000..cc2c6f449 Binary files /dev/null and b/src/fonts/HelveticaNeueItalic.ttf differ diff --git a/src/fonts/HelveticaNeueLight.otf b/src/fonts/HelveticaNeueLight.otf new file mode 100644 index 000000000..de55b685a Binary files /dev/null and b/src/fonts/HelveticaNeueLight.otf differ diff --git a/src/fonts/HelveticaNeueLightItalic.otf b/src/fonts/HelveticaNeueLightItalic.otf new file mode 100644 index 000000000..553492208 Binary files /dev/null and b/src/fonts/HelveticaNeueLightItalic.otf differ diff --git a/src/fonts/HelveticaNeueMedium.otf b/src/fonts/HelveticaNeueMedium.otf new file mode 100644 index 000000000..1a2a9df34 Binary files /dev/null and b/src/fonts/HelveticaNeueMedium.otf differ diff --git a/src/fonts/HelveticaNeueMediumItalic.otf b/src/fonts/HelveticaNeueMediumItalic.otf new file mode 100644 index 000000000..4b6b4ba74 Binary files /dev/null and b/src/fonts/HelveticaNeueMediumItalic.otf differ diff --git a/src/fonts/HelveticaNeueRoman.otf b/src/fonts/HelveticaNeueRoman.otf new file mode 100644 index 000000000..4961505b6 Binary files /dev/null and b/src/fonts/HelveticaNeueRoman.otf differ diff --git a/src/fonts/HelveticaNeueThin.otf b/src/fonts/HelveticaNeueThin.otf new file mode 100644 index 000000000..df1e8b1b1 Binary files /dev/null and b/src/fonts/HelveticaNeueThin.otf differ diff --git a/src/fonts/HelveticaNeueThinItalic.otf b/src/fonts/HelveticaNeueThinItalic.otf new file mode 100644 index 000000000..648fe542a Binary files /dev/null and b/src/fonts/HelveticaNeueThinItalic.otf differ diff --git a/src/fonts/HelveticaNeueUltraLight.otf b/src/fonts/HelveticaNeueUltraLight.otf new file mode 100644 index 000000000..7f5180de4 Binary files /dev/null and b/src/fonts/HelveticaNeueUltraLight.otf differ diff --git a/src/fonts/HelveticaNeueUltraLightItalic.otf b/src/fonts/HelveticaNeueUltraLightItalic.otf new file mode 100644 index 000000000..d0fe231c7 Binary files /dev/null and b/src/fonts/HelveticaNeueUltraLightItalic.otf differ diff --git a/src/images/Vectors/bg-testimonials.svg b/src/images/Vectors/bg-testimonials.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/Vectors/bg-testimonials.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-benefist-1.svg b/src/images/Vectors/logo-benefist-1.svg new file mode 100644 index 000000000..55b340246 --- /dev/null +++ b/src/images/Vectors/logo-benefist-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-benefist-2.svg b/src/images/Vectors/logo-benefist-2.svg new file mode 100644 index 000000000..e6aad8bc2 --- /dev/null +++ b/src/images/Vectors/logo-benefist-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-benefist-3.svg b/src/images/Vectors/logo-benefist-3.svg new file mode 100644 index 000000000..621302af1 --- /dev/null +++ b/src/images/Vectors/logo-benefist-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-benefist-4.svg b/src/images/Vectors/logo-benefist-4.svg new file mode 100644 index 000000000..634f3af0d --- /dev/null +++ b/src/images/Vectors/logo-benefist-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/Vectors/logo-crazybaby.svg b/src/images/Vectors/logo-crazybaby.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/Vectors/logo-crazybaby.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/Vectors/logo-cross.svg b/src/images/Vectors/logo-cross.svg new file mode 100644 index 000000000..321870d6e --- /dev/null +++ b/src/images/Vectors/logo-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-facebook.svg b/src/images/Vectors/logo-facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/Vectors/logo-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-features-arrow-left.svg b/src/images/Vectors/logo-features-arrow-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/Vectors/logo-features-arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/Vectors/logo-features-arrow-right-hover.svg b/src/images/Vectors/logo-features-arrow-right-hover.svg new file mode 100644 index 000000000..037f13419 --- /dev/null +++ b/src/images/Vectors/logo-features-arrow-right-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/Vectors/logo-features-arrow-right.svg b/src/images/Vectors/logo-features-arrow-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/Vectors/logo-features-arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/Vectors/logo-footer-arrow-up.svg b/src/images/Vectors/logo-footer-arrow-up.svg new file mode 100644 index 000000000..ed07452a1 --- /dev/null +++ b/src/images/Vectors/logo-footer-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-instagram.svg b/src/images/Vectors/logo-instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/Vectors/logo-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-menu.svg b/src/images/Vectors/logo-menu.svg new file mode 100644 index 000000000..17a0e5baa --- /dev/null +++ b/src/images/Vectors/logo-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vectors/logo-twitter.svg b/src/images/Vectors/logo-twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/Vectors/logo-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon 3.png b/src/images/favicon 3.png new file mode 100644 index 000000000..d73605794 Binary files /dev/null and b/src/images/favicon 3.png differ diff --git a/src/images/img-about-us.png b/src/images/img-about-us.png new file mode 100644 index 000000000..a9ba087e3 Binary files /dev/null and b/src/images/img-about-us.png differ diff --git a/src/images/img-features.png b/src/images/img-features.png new file mode 100644 index 000000000..c720c523e Binary files /dev/null and b/src/images/img-features.png differ diff --git a/src/images/img-header.png b/src/images/img-header.png new file mode 100644 index 000000000..b745795c2 Binary files /dev/null and b/src/images/img-header.png differ diff --git a/src/images/img-presentation.png b/src/images/img-presentation.png new file mode 100644 index 000000000..153f96b88 Binary files /dev/null and b/src/images/img-presentation.png differ diff --git a/src/images/img-technolohy.png b/src/images/img-technolohy.png new file mode 100644 index 000000000..c0561d66e Binary files /dev/null and b/src/images/img-technolohy.png differ diff --git a/src/images/img-testimonilas.png b/src/images/img-testimonilas.png new file mode 100644 index 000000000..497c01499 Binary files /dev/null and b/src/images/img-testimonilas.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..a9625c2ca 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,555 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Kickstarter_FE + - -

Hello Mate Academy

- + + + + + +
+
+ + OUR STORY + + + + ABOUT US + + + + FEATURES + + + + GET IN TOUCH + +
+ +
+
+ calipers-icon + +

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

+
+ +
+ loudspeaker-icon + +

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

+
+ +
+ wifi-icon + +

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

+
+ +
+ sun-icon + +

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

+
+
+
+ +
+ presentation-img +
+ +
+

DESIGNED FOR THE FUTURE

+ + about-us-img + +
+

+ 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

+ + technology-img + +
+

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

+ +
+ photo-man + +
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 +
    • +
+
+ +
+

App Features

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

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 from Last Song Stopped +
    • +
+
+ +
+
+ +
+
+ +
+ 01 + + / + + 03 +
+
+ + features-img +
+
+ +
+

DO YOU HAVE ANY QUESTIONS?

+ +
+
+ + + + + +
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..3190bc265 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,13 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-family: Inter, sans-serif; + src: url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: Helvetica-Neue, sans-serif; + src: url('./../fonts/HelveticaNeueBlack.otf') format('otf'); font-weight: normal; font-style: normal; } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..5e7d79354 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,102 @@ +.about-us { + display: flex; + flex-direction: column; + padding: 0 30px; + margin-bottom: 110px; + + @include on-tablet { + padding: 0; + margin-bottom: 140px; + flex-wrap: wrap; + height: 415px; + } + + @include on-desktop { + padding: 0 123px; + height: 388px; + margin-bottom: 170px; + } + + &__title { + margin: 0; + margin-bottom: 30px; + color: $colorTextMain; + + @extend %h2-mobile; + + @include on-tablet { + order: 2; + width: 340px; + + @include h2-tablet; + } + + @include on-desktop { + width: 582px; + + @include h2-desktop; + } + } + + &__img { + object-fit: cover; + margin-bottom: 20px; + height: 210px; + width: 260px; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + order: 1; + height: 415px; + width: 374px; + } + + @include on-desktop { + width: 582px; + height: 388px; + margin: 0; + margin-right: 30px; + } + } + + &__group { + display: flex; + flex-direction: column; + + @include on-tablet { + order: 3; + width: 340px; + } + + @include on-desktop { + width: 582px; + } + + &-description { + color: $colorTextSecondary; + margin: 0; + margin-bottom: 30px; + + @extend %secondary; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + @include main; + } + } + + &-link { + width: max-content; + text-decoration: none; + display: block; + + @extend %link-line; + @extend %button; + @include hover(transform, scale(1.2)); + } + } +} diff --git a/src/styles/blocks/benefist.scss b/src/styles/blocks/benefist.scss new file mode 100644 index 000000000..20ff614c3 --- /dev/null +++ b/src/styles/blocks/benefist.scss @@ -0,0 +1,150 @@ +.benefits { + padding: 0 30px; + margin-bottom: 110px; + + @include on-tablet { + padding: 0 34px; + margin-bottom: 140px; + } + + @include on-desktop { + padding: 0; + margin-bottom: 170px; + } + + &__links { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + justify-content: space-between; + width: 578px; + margin-left: auto; + margin-right: auto; + margin-bottom: 90px; + } + + &-title { + color: rgba(19, 19, 19, 1); + text-decoration: none; + + @extend %h6-desktop; + @include hover-text(transform, scale(1.2)); + } + + &-1 { + color: $colorTextMain; + text-decoration: none; + + @extend %thirdary; + @include hover-text(transform, scale(1.2)); + } + + &-2 { + color: $colorTextMain; + text-decoration: none; + + @extend %thirdary; + @include hover-text(transform, scale(1.2)); + } + + &-3 { + color: $colorTextMain; + text-decoration: none; + + @extend %thirdary; + @include hover-text(transform, scale(1.2)); + } + } + + &__groups { + display: flex; + flex-flow: wrap; + flex-direction: row; + + @include on-tablet { + gap: 65px 20px; + } + + @include on-desktop { + padding: 0 123px; + column-gap: 30px; + justify-content: center; + } + } + + &__group { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @include on-tablet { + width: 340px; + } + + @include on-desktop { + width: 276px; + justify-content: start; + } + + &-img { + height: 40px; + width: 50px; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &-title { + margin: 0; + margin-bottom: 20px; + color: $colorTextMain; + + @extend %h4-desktop; + + @include on-desktop { + text-align: center; + } + } + + &-description { + margin: 0; + color: $colorTextSecondary; + text-align: center; + + @extend %secondary; + } + } + + &-2 { + display: none; + + @include on-tablet { + display: flex; + } + } + + &-3 { + display: none; + + @include on-tablet { + display: flex; + } + } + + &-4 { + display: none; + + @include on-tablet { + display: flex; + } + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..7df5b5542 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,196 @@ +.features { + display: flex; + flex-direction: column; + margin-bottom: 90px; + + @include on-tablet { + padding: 0 34px; + margin-bottom: 140px; + } + + @include on-desktop { + padding: 0 123px; + margin-bottom: 170px; + } + + &__title { + margin: 0 auto; + margin-bottom: 32px; + width: calc(100% - 60px); + color: $colorTextMain; + + @extend %h2-mobile; + + @include on-tablet { + margin: 0; + margin-bottom: 30px; + } + + @include on-desktop { + @include h2-desktop; + } + } + + &__set { + padding-top: 30px; + background: $colorBgFeatures; + + @include on-tablet { + height: 535px; + padding-top: 60px; + } + + @include on-desktop { + display: flex; + flex-flow: wrap; + flex-direction: column; + height: 642px; + padding-top: 60px; + padding-left: 102px; + } + } + + &__groups { + &-1 { + display: none; + + @include on-desktop { + display: flex; + width: 786px; + justify-content: space-between; + } + } + + &-2 { + padding: 0 30px; + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + padding-left: 90px; + width: 260px; + align-items: start; + } + + @include on-desktop { + padding: 0; + width: 378px; + align-items: start; + } + } + } + + &__group { + margin-bottom: 50px; + + &-title { + margin: 0; + color: $colorHoverWhite; + + @extend %h3-mobile; + + @include on-tablet { + width: 260px; + } + + @include on-desktop { + width: max-content; + + @include h3-desktop; + } + } + + &-lists { + display: flex; + flex-direction: column; + row-gap: 10px; + padding-left: 16px; + } + + &-list { + color: $colorTextMain; + margin: 0; + + @extend %secondary; + } + } + + &__switcher { + display: flex; + margin-bottom: 10px; + + @include on-desktop { + display: none; + } + + &-arrow-left { + height: 14px; + width: 48px; + background-image: url(./../images/Vectors/logo-features-arrow-left.svg); + background-repeat: no-repeat; + } + + &-arrow-right { + height: 14px; + width: 48px; + background-image: url(./../images/Vectors/logo-features-arrow-right.svg); + background-repeat: no-repeat; + + @include hover(transform, scale(1.1)); + &:hover { + cursor: pointer; + background-image: url(./../images/Vectors/logo-features-arrow-right-hover.svg); + } + } + + &-num { + @include on-desktop { + display: none; + } + + &-active { + color: $colorTextMain; + height: 24px; + width: 18px; + + @extend %main; + } + + &-inactive { + color: $colorHoverWhite; + height: 13px; + width: 14px; + font-family: Inter, sans-serif; + font-size: 11px; + font-weight: 400; + line-height: 13.31px; + text-align: left; + } + } + } + + &__img { + height: 174px; + width: 100%; + object-fit: cover; + background: $colorBgFeatures; + + @include on-tablet { + display: flex; + position: relative; + width: 416px; + height: 225px; + margin-left: auto; + top: -60px; + } + + @include on-desktop { + margin: 0; + height: 301px; + width: 543px; + left: -400px; + top: 340px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..7af73bed8 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,80 @@ +.footer { + display: flex; + flex-direction: column; + align-items: center; + + &__title { + display: none; + + @include on-tablet { + display: block; + margin-bottom: 61px; + } + + &-img { + height: 25px; + width: 184px; + + @include hover(transform, scale(1.1)); + } + } + + &__links { + display: flex; + justify-content: space-between; + width: 152px; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 60px; + } + } + + &__link { + display: flex; + height: 24px; + width: 24px; + align-items: center; + justify-content: center; + + @include hover(transform, scale(1.3)); + } + + &__text { + width: 260px; + text-align: center; + color: $colorTextSecondary; + margin: 0; + margin-bottom: 20px; + + @extend %secondary; + + @include on-tablet { + width: 100%; + font-weight: 300; + } + } + + &__arrow { + display: none; + + @include on-tablet { + display: flex; + height: 50px; + width: 50px; + align-items: center; + justify-content: center; + position: relative; + align-self: flex-end; + margin-right: 35px; + bottom: 220px; + } + + &-img { + width: 25px; + height: 21px; + + @include hover(transform, scale(1.3)); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..b58095169 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,200 @@ +.header { + display: flex; + flex-direction: column; + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 25px 30px; + width: calc(100% - 60px); + + @include on-tablet { + padding: 30px 34px; + width: calc(100% - 68px); + margin-bottom: 100px; + } + + @include on-desktop { + padding: 30px 123px; + width: calc(100% - 246px); + margin-bottom: 90px; + } + + &-group { + @include on-tablet { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 292px; + } + } + + &-title { + &-img { + height: 26px; + width: 161px; + + @include hover(transform, scale(1.1)); + } + } + + &-link { + display: none; + text-decoration: none; + color: rgba(79, 79, 79, 1); + font-weight: 300; + font-family: Helvetica-Neue, sans-serif; + font-size: 14px; + line-height: 17px; + + @include hover-text(transform, scale(1.1)); + + @include on-tablet { + display: block; + } + } + + &-swithcer { + display: none; + + @include on-tablet { + display: block; + } + + &-active { + color: $colorTextMain; + font-family: Helvetica-Neue, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + text-decoration: none; + } + + &-inactive { + color: $colorTextSecondary; + font-family: Helvetica-Neue, sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 18px; + text-decoration: none; + + @include hover-text(transform, scale(1.1)); + } + } + + &-button { + display: none; + width: 100px; + height: 48px; + + @include hover(transform, scale(1.1)); + @extend %button-full-dark; + + @include on-tablet { + display: block; + } + } + + &-menu { + display: flex; + align-items: center; + justify-content: center; + height: 32px; + width: 32px; + + @include on-desktop { + display: none; + } + + &-img { + height: 16px; + width: 24px; + + @include hover(transform, scale(1.2)); + } + } + } + + &__group { + @include on-tablet { + display: flex; + flex-flow: wrap; + flex-direction: column; + height: 336px; + padding: 0 34px; + } + + @include on-desktop { + padding: 0 123px; + height: 465px; + } + + &-img { + height: 245px; + width: 100%; + margin-bottom: 40px; + object-fit: cover; + object-position: left; + + @include on-tablet { + order: 2; + position: relative; + height: 317px; + width: 430px; + margin: 0; + } + + @include on-desktop { + height: 464px; + width: 816px; + } + } + + &-title { + color: $colorTextMain; + width: 260px; + margin: 0 auto; + margin-bottom: 20px; + + @extend %h1-mobile; + + @include on-tablet { + order: 1; + margin: 0; + margin-bottom: 30px; + + @include h1-tablet; + } + + @include on-desktop { + width: 378px; + + @include h1-desktop; + } + } + + &-description { + color: $colorTextMain; + width: 260px; + margin: 0 auto; + + @extend %main; + + @include on-tablet { + order: 1; + margin: 0; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..d7b45cd6e --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,188 @@ +.menu { + padding: 0 30px; + height: 100vh; + display: flex; + flex-direction: column; + background: $colorBgPage; + opacity: 0; + position: absolute; + pointer-events: none; + transition: transform 0.3s ease-in-out; + transform: translateY(-100%); + + @include on-tablet { + padding: 0 34px; + } + + &:target { + position: absolute; + transform: translateY(0); + transition: transform 0.3s ease-in-out; + opacity: 1; + inset: 0; + pointer-events: all; + overflow: hidden; + } + + &__nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 25px 0; + margin-bottom: 31px; + + @include on-tablet { + padding: 37px 0; + margin-bottom: 27px; + } + + &-title { + &-img { + height: 26px; + width: 161px; + + @include hover(transform, scale(1.1)); + } + } + + &-cross { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + + &-img { + height: 16px; + width: 16px; + + @include hover(transform, scale(1.2)); + } + } + } + + &__links { + display: flex; + flex-direction: column; + row-gap: 25px; + margin-bottom: 50px; + + &-title { + text-decoration: none; + width: max-content; + color: rgba(19, 19, 19, 1); + + @extend %h6-desktop; + @include hover-text(transform, scale(1.1)); + + @include on-tablet { + @include h4-desktop; + } + } + + &-1 { + text-decoration: none; + width: max-content; + color: $colorTextMain; + + @extend %thirdary; + @include hover-text(transform, scale(1.1)); + + @include on-tablet { + font-weight: 400; + font-size: 22px; + line-height: 28px; + } + } + + &-2 { + text-decoration: none; + width: max-content; + color: $colorTextMain; + + @extend %thirdary; + @include hover-text(transform, scale(1.1)); + + @include on-tablet { + font-weight: 400; + font-size: 22px; + line-height: 28px; + } + } + + &-3 { + text-decoration: none; + width: max-content; + color: $colorTextMain; + + @extend %thirdary; + @include hover-text(transform, scale(1.1)); + + @include on-tablet { + font-weight: 400; + font-size: 22px; + line-height: 28px; + } + } + } + + &__group { + display: flex; + align-items: center; + width: max-content; + margin-bottom: auto; + + @include on-tablet { + display: none; + } + } + + &__swithcer { + display: block; + + &-active { + color: $colorTextMain; + font-family: Helvetica-Neue, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + text-decoration: none; + } + + &-inactive { + color: $colorTextSecondary; + font-family: Helvetica-Neue, sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 18px; + text-decoration: none; + + @include hover-text(transform, scale(1.1)); + } + } + + &__link { + margin-right: 20px; + text-decoration: none; + color: rgba(79, 79, 79, 1); + font-weight: 300; + font-family: Helvetica-Neue, sans-serif; + font-size: 14px; + line-height: 17px; + + @include hover-text(transform, scale(1.1)); + } + + &__button { + height: 48px; + width: 260px; + margin-bottom: 30px; + + @extend %button-full-dark; + @include hover(transform, scale(1.1)); + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..30694a335 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,12 @@ +html { + scroll-behavior: smooth; +} + +.page { + background: $colorBgPage; + margin: 0; +} + +.page:has(.menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..04b06c1a2 --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,31 @@ +.presentation { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__img { + height: 195px; + width: 296px; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + height: 430px; + width: 700px; + } + + @include on-desktop { + height: 520px; + width: 846px; + } + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..defa75c34 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,136 @@ +.questions { + display: flex; + flex-direction: column; + padding: 0 30px; + margin-bottom: 110px; + + @include on-tablet { + padding: 0 34px; + flex-direction: row; + justify-content: space-between; + margin-bottom: 140px; + } + + @include on-desktop { + padding: 0 123px; + margin-bottom: 170px; + } + + &__title { + color: $colorTextMain; + margin: 0; + margin-bottom: 27px; + + @extend %h2-mobile; + + @include on-tablet { + width: 340px; + + @include h2-tablet; + } + + @include on-desktop { + width: 584px; + + @include h2-desktop; + } + } + + &__group { + &-form { + @include on-tablet { + width: 340px; + } + + @include on-desktop { + width: 582px; + } + } + + &-email { + height: 24px; + width: calc(100% - 40px); + padding: 12px 20px; + outline: none; + border: 1px solid $colorBorder; + margin-bottom: 20px; + background-color: $colorBgPage; + + color: $colorTextMain; + font-size: 14px; + line-height: 24px; + + @include main; + @include hover(transform, scale(1.05)); + + @include on-tablet { + padding: 12px 30px; + width: calc(100% - 60px); + } + + @include on-desktop { + padding: 12px 36px; + width: calc(100% - 72px); + } + + &:focus { + border-color: $colorHoverWhite; + } + + &:valid { + border-color: $colorBorderSuccess; + } + } + + &-text { + height: 104px; + width: calc(100% - 40px); + padding: 12px 20px; + outline: none; + resize: none; + border: 1px solid $colorBorder; + margin-bottom: 30px; + background-color: $colorBgPage; + + color: $colorTextMain; + font-size: 14px; + line-height: 24px; + + @include main; + @include hover(transform, scale(1.05)); + + @include on-tablet { + height: 177px; + padding: 12px 30px; + width: calc(100% - 60px); + } + + @include on-desktop { + padding: 12px 36px; + width: calc(100% - 72px); + } + + &:focus { + border-color: $colorHoverWhite; + } + + &:valid { + border-color: $colorBorderSuccess; + } + } + + &-button { + height: 40px; + width: 102px; + + @include hover(transform, scale(1.05)); + @extend %button-full-white; + @extend %button; + + @include on-desktop { + height: 48px; + width: 124px; + } + } + } +} diff --git a/src/styles/blocks/technology.scss b/src/styles/blocks/technology.scss new file mode 100644 index 000000000..653321564 --- /dev/null +++ b/src/styles/blocks/technology.scss @@ -0,0 +1,102 @@ +.technology { + display: flex; + flex-direction: column; + padding: 0 30px; + margin-bottom: 110px; + + @include on-tablet { + padding: 0; + margin-bottom: 140px; + flex-wrap: wrap; + height: 415px; + } + + @include on-desktop { + margin-bottom: 170px; + padding: 0 123px; + } + + &__title { + margin: 0; + margin-bottom: 20px; + color: $colorTextMain; + + @include h2-tablet; + + @include on-tablet { + order: 1; + width: 340px; + margin-bottom: 30px; + padding-left: 34px; + } + + @include on-desktop { + width: 582px; + padding: 0; + margin-right: 30px; + + @include h2-desktop; + } + } + + &__img { + object-fit: cover; + margin-bottom: 20px; + height: 210px; + width: 260px; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + order: 3; + height: 415px; + width: 374px; + } + + @include on-desktop { + height: 488px; + width: 582px; + margin: 0; + } + } + + &__group { + display: flex; + flex-direction: column; + + @include on-tablet { + order: 2; + width: 340px; + padding-left: 34px; + } + + @include on-desktop { + padding: 0; + width: 582px; + } + + &-description { + color: $colorTextSecondary; + margin: 0; + margin-bottom: 30px; + + @extend %main; + + @include on-tablet { + margin-bottom: 60px; + + @include main; + } + } + + &-link { + width: max-content; + text-decoration: none; + display: block; + + @extend %link-line; + @extend %button; + @include hover(transform, scale(1.2)); + } + } +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..e66ff7f46 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,77 @@ +.testimonilas { + display: flex; + flex-direction: column; + justify-content: end; + height: 320px; + background-image: url(./../images/Vectors/bg-testimonials.svg); + background-repeat: no-repeat; + background-position: top; + padding: 0 30px; + margin-bottom: 110px; + + @include on-tablet { + padding: 0 34px; + height: 374px; + margin-bottom: 140px; + } + + @include on-desktop { + padding: 0 123px; + width: 786px; + height: 310px; + margin-bottom: 170px; + margin-left: auto; + margin-right: auto; + } + + &__text { + margin: 0; + margin-bottom: 30px; + text-align: center; + color: $colorTextMain; + + @extend %quote-mobile; + + @include on-tablet { + margin-bottom: 40px; + + @include quote-desktop; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &__group { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &-img { + height: 62px; + width: 62px; + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &-name { + margin: 0; + margin-bottom: 5px; + color: $colorTextMain; + + @extend %h5-desktop; + } + + &-job { + margin: 0; + color: $colorTextSecondary; + + @extend %secondary; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..6c45001bf 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,13 @@ @import 'utils'; @import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/about-us'; +@import 'blocks/benefist'; +@import 'blocks/features'; +@import 'blocks/footer'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/page'; +@import 'blocks/presentation'; +@import 'blocks/questions'; +@import 'blocks/technology'; +@import 'blocks/testimonilas'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..c82150709 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,159 @@ -%h1 { - font-family: Roboto, sans-serif; +%h1-mobile { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 40px; + line-height: 52px; + text-transform: uppercase; +} + +%h2-mobile { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; +} + +%h3-mobile { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; +} + +%quote-mobile { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 20px; +} + +%h4-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 22px; + line-height: 28px; + text-transform: uppercase; +} + +%h5-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 22px; +} + +%h6-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; +} + +%button { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; +} + +%main { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +%secondary { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; +} + +%thirdary { + font-family: Inter, sans-serif; font-weight: 400; + font-size: 14px; + line-height: 21px; + text-transform: uppercase; +} + +%button-full-dark { + cursor: pointer; + color: $colorBgPage; + background-color: $colorButtonDark; + border: 0; + + &:hover { + background-color: $colorHoverDark; + } + + &:disabled { + background-color: $colorDisabledDark; + } +} + +%button-full-white { + cursor: pointer; + color: $colorBgPage; + background-color: $colorButtonWhite; + border: 0; + + &:hover { + background-color: $colorHoverWhite; + } + + &:disabled { + background-color: $colorDisabledWhite; + } +} + +%button-empty-white { + cursor: pointer; + color: $colorButtonWhite; + background-color: $colorBgPage; + border: 1px solid $colorButtonWhite; + + &:hover { + color: $colorBgPage; + background-color: $colorHoverWhite; + border: 0; + } +} + +%button-empty-dark { + cursor: pointer; + color: $colorButtonDark; + background-color: $colorBgPage; + border: 1px solid $colorButtonDark; + + &:hover { + color: $colorBgPage; + background-color: $colorButtonWhite; + border: 0; + } +} + +%link-line { + color: $colorButtonWhite; + + &:hover { + border-bottom: 1px solid $colorButtonWhite; + } +} + +%button-return { + cursor: pointer; + color: $colorButtonDark; + background-color: $colorBgPage; + + &:hover { + color: $colorHoverDark; + border: 1px solid $colorHoverDark; + background-color: $colorBgPage; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..9c5b105fe 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,93 @@ #{$_property}: $_toValue; } } + +@mixin hover-text($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + color: $colorHoverWhite; + } +} + +@mixin on-tablet { + @media (min-width: $minWidthTablet) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $minWidthDesktop) { + @content; + } +} + +@mixin h1-tablet { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 62px; + text-transform: uppercase; +} + +@mixin h2-tablet { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 46px; + text-transform: uppercase; +} + +@mixin h3-tablet { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 30px; + text-transform: uppercase; +} + +@mixin h1-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 64px; + line-height: 78px; + text-transform: uppercase; +} + +@mixin h2-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 56px; + line-height: 70px; + text-transform: uppercase; +} + +@mixin h3-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 34px; + line-height: 42px; + text-transform: uppercase; +} + +@mixin h4-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 22px; + line-height: 28px; + text-transform: uppercase; +} + +@mixin quote-desktop { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 36px; +} + +@mixin main { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..bcca50ae0 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +$minWidthTablet: 576px; +$minWidthDesktop: 976px; +$colorBgPage: rgba(247, 247, 247, 1); +$colorHoverWhite: rgba(12, 121, 122, 1); +$colorHoverDark: rgba(19, 19, 19, 1); +$colorButtonWhite: rgba(57, 190, 191, 1); +$colorButtonDark: rgba(51, 51, 51, 1); +$colorDisabledWhite: rgba(207, 239, 240, 1); +$colorDisabledDark: rgba(208, 208, 208, 1); +$colorTextMain: rgba(51, 51, 51, 1); +$colorTextSecondary: rgba(124, 124, 124, 1); +$colorBgFeatures: rgba(214, 236, 236, 1); +$colorBorder: rgba(130, 130, 130, 1); +$colorBorderSuccess: rgba(235, 87, 87, 1);