diff --git a/README.md b/README.md index a95e97afe..2b395636b 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://ViraMMM.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/images/designe/photo-2.jpg b/src/images/designe/photo-2.jpg new file mode 100644 index 000000000..0edcd46b6 Binary files /dev/null and b/src/images/designe/photo-2.jpg differ diff --git a/src/images/designe/photo1.jpg b/src/images/designe/photo1.jpg new file mode 100644 index 000000000..6274edd6e Binary files /dev/null and b/src/images/designe/photo1.jpg differ diff --git a/src/images/favicon-32x32.png b/src/images/favicon-32x32.png new file mode 100644 index 000000000..2c09e39bc Binary files /dev/null and b/src/images/favicon-32x32.png differ diff --git a/src/images/fetures/bullet.svg b/src/images/fetures/bullet.svg new file mode 100644 index 000000000..63cbb5c13 --- /dev/null +++ b/src/images/fetures/bullet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/fetures/photo-1.png b/src/images/fetures/photo-1.png new file mode 100644 index 000000000..7f9920c6a Binary files /dev/null and b/src/images/fetures/photo-1.png differ diff --git a/src/images/fetures/photo-2.png b/src/images/fetures/photo-2.png new file mode 100644 index 000000000..af3ed2051 Binary files /dev/null and b/src/images/fetures/photo-2.png differ diff --git a/src/images/fetures/photo-3.png b/src/images/fetures/photo-3.png new file mode 100644 index 000000000..4c73fd955 Binary files /dev/null and b/src/images/fetures/photo-3.png differ diff --git a/src/images/fetures/photo-4.png b/src/images/fetures/photo-4.png new file mode 100644 index 000000000..efa3eb41c Binary files /dev/null and b/src/images/fetures/photo-4.png differ diff --git a/src/images/hedaer/header-photo-tablet.jpg b/src/images/hedaer/header-photo-tablet.jpg new file mode 100644 index 000000000..3f6e6a328 Binary files /dev/null and b/src/images/hedaer/header-photo-tablet.jpg differ diff --git a/src/images/hedaer/header__photo-2.jpg b/src/images/hedaer/header__photo-2.jpg new file mode 100644 index 000000000..51c6b37f1 Binary files /dev/null and b/src/images/hedaer/header__photo-2.jpg differ diff --git a/src/images/hedaer/logo.svg b/src/images/hedaer/logo.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/hedaer/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/hedaer/photo_header.jpg b/src/images/hedaer/photo_header.jpg new file mode 100644 index 000000000..5ac82651f Binary files /dev/null and b/src/images/hedaer/photo_header.jpg differ diff --git a/src/images/icon/Group-number.png b/src/images/icon/Group-number.png new file mode 100644 index 000000000..50840204c Binary files /dev/null and b/src/images/icon/Group-number.png differ 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/arrow-hover-music1.svg b/src/images/icon/arrow-hover-music1.svg new file mode 100644 index 000000000..037f13419 --- /dev/null +++ b/src/images/icon/arrow-hover-music1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow-hover-music2.svg b/src/images/icon/arrow-hover-music2.svg new file mode 100644 index 000000000..385ae0a37 --- /dev/null +++ b/src/images/icon/arrow-hover-music2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow-music-1.svg b/src/images/icon/arrow-music-1.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/icon/arrow-music-1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow-music-2.svg b/src/images/icon/arrow-music-2.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icon/arrow-music-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..fbeee204a --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/footer-logo.svg b/src/images/icon/footer-logo.svg new file mode 100644 index 000000000..748e633ce --- /dev/null +++ b/src/images/icon/footer-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/footer__icon.svg b/src/images/icon/footer__icon.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/icon/footer__icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon1.svg b/src/images/icon/icon1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icon/icon1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon2.svg b/src/images/icon/icon2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icon/icon2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon3.svg b/src/images/icon/icon3.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icon/icon3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon4.svg b/src/images/icon/icon4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon/icon4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/instagram.svg b/src/images/icon/instagram.svg new file mode 100644 index 000000000..b969568ed --- /dev/null +++ b/src/images/icon/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram2.svg b/src/images/icon/instagram2.svg new file mode 100644 index 000000000..9c7b45248 --- /dev/null +++ b/src/images/icon/instagram2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/languages.svg b/src/images/icon/languages.svg new file mode 100644 index 000000000..5ac755af2 --- /dev/null +++ b/src/images/icon/languages.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/image-2.jpg b/src/images/image-2.jpg new file mode 100644 index 000000000..39873bb73 Binary files /dev/null and b/src/images/image-2.jpg differ diff --git a/src/images/image-3.jpg b/src/images/image-3.jpg new file mode 100644 index 000000000..c0f838239 Binary files /dev/null and b/src/images/image-3.jpg differ diff --git a/src/images/image-4.jpg b/src/images/image-4.jpg new file mode 100644 index 000000000..765d4b31e Binary files /dev/null and b/src/images/image-4.jpg differ diff --git a/src/images/people/Ellipse.jpg b/src/images/people/Ellipse.jpg new file mode 100644 index 000000000..79399edb3 Binary files /dev/null and b/src/images/people/Ellipse.jpg differ diff --git a/src/images/people/Ellipse.png b/src/images/people/Ellipse.png new file mode 100644 index 000000000..6ee2c6176 Binary files /dev/null and b/src/images/people/Ellipse.png differ diff --git a/src/images/people/Vector-bg.svg b/src/images/people/Vector-bg.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/people/Vector-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 5d357bd69..3db00f9ca 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,441 @@ - Title + Kickstarter + + + + - -

Hello Mate Academy

+ + +
+
+ + +
+
+

SPECS

+ +
+ Buy + +
+
+ Photo +
+
+

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 +

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 +

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 +

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 +

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

DESIGNED FOR THE FUTURE

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

+ + Photo + +

Garrett Martin

+

Creative Director

+
+
+
+
+ +
+

FEATURES

+
+
+
+

FEATURES

+
+ +
+
+

Connectivity

+
    +
  • +
    +

    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

    +
    • +
+
+
+
+ + +
+

01 / 03

+
+
+
+ +
+

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

    +
    • +
+
+
+
+ + +
+

01 / 03

+
+
+
+
+ +
+
+

App Features

+
    +
  • +
    +

    Customize Music Schedule

    +
    • +
  • +
    +

    Wake Up with Favorite Songs

    +
    • +
  • +
    +

    Home Detection Auto Wake Up

    +
    • +
  • +
    +

    Color Wheel

    +
    • +
+
+
+
+ + +
+

01 / 03

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

DO YOU HAVE ANY QUESTIONS?

+ +
+ + + + +
+
+
+
+
+
+ + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..e1c0807d8 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,20 @@ h1 { @extend %h1; } +@import url("https://fonts.cdnfonts.com/css/helvetica-neue-55"); + +h1, +h2, +h3 { + margin: 0; +} + +p { + margin: 0; +} + +ul, +li { + margin: 0; + padding: 0; +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..c96909e2c --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,62 @@ +.card { + &--hide { + display: none; + + @include onTablet { + display: block; + } + } + + &__img { + height: 40px; + width: 50px; + margin: 0 auto; + display: block; + padding-bottom: 40px; + + @include onTablet { + padding-bottom: 50px; + } + + @include onSmallDesktop { + padding-bottom: 40px; + } + } + + &__tittle { + color: $main-text-color; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-transform: uppercase; + text-align: center; + padding-bottom: 20px; + + @include onSmallDesktop { + padding-bottom: 52px; + } + } + + &__subtittle { + color: $third-text-color; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + + &--two { + padding-bottom: 65px; + + @include onSmallDesktop { + padding-bottom: 0; + } + } + } + + &__big { + @include onSmallDesktop { + padding-bottom: 24px; + } + } + +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 000000000..f0ade4c22 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,15 @@ +.categories { + &__content { + @include onTablet { + @include pageGrid; + } + } + + &__card { + grid-column: span 4; + + @include onSmallDesktop { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..ac7178b4d --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,12 @@ +.container { + padding-inline: 30px; + + @include onTablet { + margin-inline: auto; + padding-inline: 34px; + } + + @include onSmallDesktop { + padding-inline: 123px; + } +} diff --git a/src/styles/blocks/content.scss b/src/styles/blocks/content.scss new file mode 100644 index 000000000..52eec765f --- /dev/null +++ b/src/styles/blocks/content.scss @@ -0,0 +1,136 @@ +.content { + @include onTablet { + @include pageGrid; + } + + &__img { + height: 210px; + width: 100%; + padding-bottom: 20px; + + @include onTablet { + height: 374px; + width: 415px; + grid-column: 1 / 5; + } + + @include onSmallDesktop { + grid-column: 1 / 7; + height: 388px; + width: 582px; + } + + &--two { + grid-column: 5 / -1; + + @include onSmallDesktop { + grid-column: 7 / 13; + } + } + } + + &__wrap { + grid-column: 5 / 9; + + @include onSmallDesktop { + grid-column: 7 / 13; + + } + + &--two { + grid-column: 1 / 5; + grid-row: 1; + + @include onSmallDesktop { + grid-column: 1 / 7; + } + } + } + + &__tittle { + display: none; + + @include onTablet { + display: inline-block; + } + + &--two { + grid-column: 1 / 5; + + @include onSmallDesktop { + grid-column: 1 / 7; + } + } + + &--three { + @include onTablet { + display: none; + } + } + } + + &__subtittle { + color: $third-text-color; + font-size: 14px; + font-weight: 400; + line-height: 24px; + padding-bottom: 30px; + + @include onTablet { + padding-bottom: 60px; + font-size: 16px; + grid-column: 5 / 9; + } + + @include onSmallDesktop { + grid-column: 7 / 13; + } + + &--two { + grid-column: 1 / 5; + + @include onSmallDesktop { + grid-column: 1 / 7; + } + } + } + + &__link { + color: $main-item-color; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; + text-decoration: none; + position: relative; + transition: 0.4s ease-in-out; + grid-column: 5 / 8; + + &::after { + content: ""; + height: 1px; + width: 53px; + background-color: $main-item-color; + position: absolute; + left: 0; + bottom: -5px; + transition: 0.4s ease-in-out; + } + + &:hover::after { + width: 100%; + } + + @include onSmallDesktop { + grid-column: 7 / 13; + } + + &--two { + grid-column: 1 / 5; + + @include onSmallDesktop { + grid-column: 1 / 7; + } + } + } +} diff --git a/src/styles/blocks/designe.scss b/src/styles/blocks/designe.scss new file mode 100644 index 000000000..4c46feddf --- /dev/null +++ b/src/styles/blocks/designe.scss @@ -0,0 +1,17 @@ +.designe { + &__wrapper { + padding-inline: 30px; + + @include onTablet { + padding-inline: 0 34px; + width: 733px; + margin: 0 auto; + } + + @include onSmallDesktop { + padding-inline: 123px; + width: 1194px; + margin: 0 auto; + } + } +} diff --git a/src/styles/blocks/eye.scss b/src/styles/blocks/eye.scss new file mode 100644 index 000000000..d1de9b9d4 --- /dev/null +++ b/src/styles/blocks/eye.scss @@ -0,0 +1,17 @@ +.eye { + &__wrapper { + padding-inline: 30px; + + @include onTablet { + padding-inline: 34px 0; + width: 733px; + margin: 0 auto; + } + + @include onSmallDesktop { + padding-inline: 123px; + width: 1194px; + margin: 0 auto; + } + } +} diff --git a/src/styles/blocks/fetures.scss b/src/styles/blocks/fetures.scss new file mode 100644 index 000000000..4d14f9946 --- /dev/null +++ b/src/styles/blocks/fetures.scss @@ -0,0 +1,104 @@ +.fetures { + &__tittle { + padding-inline: 30px; + + @include onTablet { + display: none; + } + + &--two { + display: none; + padding-inline: 0; + + @include onTablet { + display: inline-block; + } + } + } + + &__content { + background-color: $third-bg-color; + position: relative; + + @include onTablet { + background-color: $main-bg-color; + } + } + + &__items { + @include onTablet { + background-color: $third-bg-color; + position: relative; + + @include pageGrid; + } + } + + &__img { + background-image: url(../images/fetures/photo-2.png); + background-repeat: no-repeat; + display: block; + height: 174px; + width: 320px; + position: absolute; + bottom: 0; + right: 0; + + @include onTablet { + display: none; + } + } + + &__photo { + @include onTablet { + background-image: url(../images/fetures/photo-3.png); + background-repeat: no-repeat; + display: block; + height: 226px; + width: 435px; + position: absolute; + right: -20px; + bottom: 0; + } + + @include onSmallDesktop { + background-image: url(../images/fetures/photo-4.png); + height: 302px; + width: 582px; + right: 0; + } + } + + &__block { + padding-block: 30px 173px; + + @include onTablet { + padding-block: 60px 123px; + grid-column: 2 / 5; + } + + @include onSmallDesktop { + padding-block: 60px; + grid-column: 2 / 6; + } + + &--two { + display: none; + + @include onSmallDesktop { + display: block; + grid-column: 7 / 12; + } + } + } + + &__music { + &--block { + display: none; + + @include onSmallDesktop { + display: block; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..a3a0c3360 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,70 @@ +.footer { + padding-bottom: 20px; + + @include onTablet { + padding-bottom: 30px; + } + + &__content { + position: relative; + } + + &__arrow { + background-image: url(../images/icon/footer__icon.svg); + background-position: center; + background-repeat: no-repeat; + display: block; + height: 50px; + width: 50px; + position: absolute; + top: 0; + right: 0; + } + + &__logo { + @include onTablet { + background-image: url(../images/icon/footer-logo.svg); + background-position: center; + background-repeat: no-repeat; + display: block; + height: 25px; + width: 184px; + margin: 0 auto; + margin-bottom: 60px; + } + } + + &__icon { + display: flex; + gap: 40px; + justify-content: center; + padding-bottom: 30px; + + @include onTablet { + padding-bottom: 60px; + gap: 50px; + } + + @include onSmallDesktop { + gap: 40px; + } + } + + &__link { + height: 24px; + width: 24px; + transition: 0.4s ease-in-out; + + &:hover { + transform: scale(1.07); + } + } + + &__copyrighter { + color: $input-txet-color; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..5913e0887 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,78 @@ +.form { + &__label { + display: block; + padding-bottom: 20px; + + &--two { + padding-bottom: 30px; + } + } + + &__input { + padding: 12px 0 12px 20px; + width: 100%; + border: 1px solid $third-item-color; + background-color: $main-bg-color; + outline: none; + box-sizing: border-box; + + color: $main-text-color; + font-size: 14px; + font-weight: 500; + line-height: 24px; + + @include onTablet { + padding: 12px 0 12px 30px; + } + + @include onSmallDesktop { + padding: 12px 0 12px 36px; + } + + &::placeholder { + color: $input-txet-color; + font-size: 16px; + font-weight: 400; + line-height: 24px; + } + + &:focus { + border: 1px solid rgba(12, 121, 122, 1); + } + + &--text { + resize: none; + padding: 8px 0 80px 20px; + + @include onTablet { + padding: 8px 0 150px 30px; + } + + @include onSmallDesktop { + padding: 8px 0 80px 36px; + } + } + } + + &__button { + text-decoration: none; + outline: none; + border: none; + display: block; + background-color: $main-item-color; + width: 100px; + color: $second-text-color; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + font-family: "Helvetica Neue", sans-serif; + padding-block: 13px; + text-align: center; + cursor: pointer; + transition: 0.4s ease-in-out; + + &:hover { + background-color: rgba(12, 121, 122, 1); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..40d0ff967 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,193 @@ +.header { + &__top { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 25px; + padding-inline: 30px; + + @include onTablet { + padding-top: 40px; + padding-inline: 0; + } + } + + &__logo { + background-image: url(../images/hedaer/logo.svg); + display: block; + height: 26px; + width: 161px; + } + + &__menu { + background-image: url(../images/icon/Icon-Burger-menu.svg); + background-repeat: no-repeat; + background-position: center; + display: block; + height: 32px; + width: 32px; + transition: 0.4s ease-in-out; + + &:hover { + transform: scale(1.08); + } + + @include onTablet { + display: none; + } + + &--two { + background-image: url(../images/icon/Icon-Burger-menu.svg); + background-repeat: no-repeat; + background-position: center; + display: block; + height: 32px; + width: 32px; + + @include onSmallDesktop { + display: none; + } + } + } + + &__wrap { + display: flex; + align-items: center; + gap: 30px; + + @include onSmallDesktop { + gap: 24px; + } + } + + &__block { + display: none; + + @include onTablet { + display: flex; + align-items: center; + gap: 30px; + + @include onSmallDesktop { + gap: 47px; + } + } + } + + &__languges { + background-image: url(../images/icon/languages.svg); + background-repeat: no-repeat; + background-position: center; + display: block; + height: 20px; + width: 53px; + transition: 0.4s ease-in-out; + + &:hover { + transform: scale(1.08); + } + } + + &__button { + text-decoration: none; + display: block; + background-color: $main-text-color; + width: 100px; + color: $second-text-color; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + font-family: "Helvetica Neue", sans-serif; + padding-block: 16px; + text-align: center; + transition: 0.4s ease-in-out; + + &:hover { + background-color: $second-item-color; + } + } + + &__bg { + width: 100%; + padding-bottom: 40px; + + @include onTablet { + display: none; + } + } + + &__bottom { + padding-inline: 30px; + + @include onTablet { + @include pageGrid; + padding-top: 140px; + margin-inline: auto; + padding-inline: 0; + } + + @include onSmallDesktop { + padding-top: 180px; + } + } + + &__inform { + grid-column: 1 / 5; + z-index: 2; + } + + &__tittle { + color: $main-text-color; + font-family: "Inter", sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; + padding-bottom: 20px; + text-align: left; + + @include onTablet { + font-size: 48px; + line-height: 62px; + padding-bottom: 30px; + } + + @include onSmallDesktop { + font-size: 62px; + line-height: 78px; + } + } + + &__subtittle { + color: $main-text-color; + font-size: 16px; + font-weight: 400; + line-height: 24px; + width: 260px; + text-align: left; + } + + &__big-img { + display: none; + background-image: url(../images/hedaer/photo_header.jpg); + background-repeat: no-repeat; + height: 317px; + width: 430px; + + @include onTablet { + background-image: url(../images/hedaer/header-photo-tablet.jpg); + background-repeat: no-repeat; + display: block; + grid-row: 1; + grid-column: 5 / 9; + } + + @include onSmallDesktop { + background-image: url(../images/hedaer/header__photo-2.jpg); + background-repeat: no-repeat; + width: 816px; + height: 464px; + grid-column: 6 / 13; + } + } +} diff --git a/src/styles/blocks/luna.scss b/src/styles/blocks/luna.scss new file mode 100644 index 000000000..2515c960c --- /dev/null +++ b/src/styles/blocks/luna.scss @@ -0,0 +1,24 @@ +.luna { + &__img { + background-image: url(../images/image-2.jpg); + background-repeat: no-repeat; + display: block; + height: 195px; + width: 296px; + margin: 0 auto; + + @include onTablet { + background-image: url(../images/image-3.jpg); + background-repeat: no-repeat; + height: 430px; + width: 700px; + } + + @include onSmallDesktop { + background-image: url(../images/image-4.jpg); + background-repeat: no-repeat; + height: 520px; + width: 846px; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..fcbcaaa1c --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,15 @@ +.main { + display: grid; + padding-block: 110px; + row-gap: 110px; + + @include onTablet { + padding-block: 140px; + row-gap: 140px; + } + + @include onSmallDesktop { + padding-block: 170px; + row-gap: 170px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..554794a0d --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,83 @@ +.menu { + height: 100vh; + background-color: $second-bg-color; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 24px; + } + + &__logo { + background-image: url(../images/hedaer/logo.svg); + display: block; + height: 26px; + width: 161px; + } + + &__close { + background-image: url(../images/icon/Icon-Close.svg); + display: block; + height: 24px; + width: 24px; + transition: 0.4s ease-in-out; + + &:hover { + transform: scale(1.08); + } + } + + &__nav { + padding-block: 55px 50px; + } + + &__block { + display: flex; + align-items: center; + gap: 20px; + + @include onTablet { + display: none; + } + } + + &__languages { + background-image: url(../images/icon/languages.svg); + background-repeat: no-repeat; + background-position: center; + display: block; + height: 20px; + width: 53px; + transition: 0.4s ease-in-out; + + &:hover { + transform: scale(1.08); + } + } + + &__content { + position: relative; + height: 100vh; + } + + &__button { + text-decoration: none; + display: block; + background-color: $main-text-color; + width: 100%; + color: $second-text-color; + font-size: 12px; + font-weight: 400; + text-transform: uppercase; + font-family: "Helvetica Neue", sans-serif; + padding-block: 16px; + text-align: center; + position: absolute; + bottom: 30px; + + @include onTablet { + display: none; + } + } +} diff --git a/src/styles/blocks/music.scss b/src/styles/blocks/music.scss new file mode 100644 index 000000000..c82b69f2f --- /dev/null +++ b/src/styles/blocks/music.scss @@ -0,0 +1,128 @@ +.music { + &__tittle { + color: $forth-text-color; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-transform: uppercase; + padding-bottom: 20px; + + @include onSmallDesktop { + font-size: 34px; + line-height: 42px; + padding-bottom: 30px; + } + } + + &__list { + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + padding-bottom: 50px; + } + + &__item { + display: flex; + gap: 10px; + } + + &__dot { + background-image: url(../images/fetures/bullet.svg); + background-repeat: no-repeat; + background-position: center; + display: inline-block; + height: 6px; + width: 6px; + padding-block: 7px; + } + + &__text { + color: $main-text-color; + font-size: 14px; + font-weight: 400; + line-height: 21px; + } + + &__slider { + display: flex; + flex-direction: column; + align-items: center; + + @include onTablet { + align-items: start; + } + + @include onSmallDesktop { + display: none; + } + } + + &__arrows { + display: flex; + } + + &__arrow { + background-image: url(../images/icon/arrow-music-1.svg); + background-repeat: no-repeat; + display: block; + height: 14px; + width: 48px; + transition: 0.4s ease-in-out; + + &:hover { + background-image: url(../images/icon/arrow-hover-music2.svg); + background-repeat: no-repeat; + display: block; + height: 14px; + width: 48px; + } + + &--two { + background-image: url(../images/icon/arrow-music-2.svg); + background-repeat: no-repeat; + display: block; + height: 14px; + width: 48px; + transition: 0.4s ease-in-out; + + &:hover { + background-image: url(../images/icon/arrow-hover-music1.svg); + background-repeat: no-repeat; + display: block; + height: 14px; + width: 48px; + } + } + } + + &__wrap { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + } + + &__number { + color: $main-text-color; + font-size: 14px; + font-weight: 400; + line-height: 21px; + } + + &__line { + color: $forth-text-color; + display: inline-block; + font-size: 11px; + font-weight: 400; + transform: translateY(2px); + } + + &__second { + color: $forth-text-color; + display: inline-block; + font-size: 11px; + font-weight: 400; + transform: translateY(3px); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..e0b0488bf --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,43 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + &--main { + flex-direction: row; + gap: 84px; + justify-content: center; + padding-block: 28px; + } + } + + &__item { + list-style: none; + } + + &__link { + text-decoration: none; + color: $main-text-color; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-transform: uppercase; + transition: 0.4s ease-in-out; + + &:hover { + color: $second-item-color; + text-shadow: 0.5px 0.5px 0; + } + + @include onTablet { + font-size: 22px; + line-height: 28px; + } + } + + &__links { + font-size: 14px; + } + +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 000000000..aa14db257 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,10 @@ +.navigation { + &__nav { + display: none; + + @include onSmallDesktop { + display: block; + padding-bottom: 62px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..3234eef7c --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,36 @@ +* { + scroll-behavior: smooth; +} + +.page { + background-color: $main-bg-color; + font-family: "Inter", sans-serif; + font-size: 16px; + margin: 0 auto; + padding: 0; + box-sizing: border-box; + + &__menu { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: 2; + + opacity: 0; + transition: all 0.4s; + transform: translateX(-100% ); + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/people.scss b/src/styles/blocks/people.scss new file mode 100644 index 000000000..074f8264e --- /dev/null +++ b/src/styles/blocks/people.scss @@ -0,0 +1,73 @@ +.people { + position: relative; + + &__bg { + background-image: url(../images/people/Vector-bg.svg); + background-repeat: no-repeat; + display: block; + height: 171px; + width: 208px; + position: absolute; + top: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + + @include onTablet { + height: 189px; + width: 233px; + } + } + + &__text { + color: $main-text-color; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + padding-block: 50px 30px; + + @include onTablet { + font-size: 24px; + line-height: 36px; + width: 700px; + padding-block: 60px 40px; + } + + @include onSmallDesktop { + width: 786px; + margin: 0 auto; + padding-block: 42px; + } + } + + &__img { + display: block; + height: 62px; + width: 62px; + padding-bottom: 10px; + margin: 0 auto; + + @include onTablet { + padding-bottom: 20px; + } + } + + &__name { + color: $main-text-color; + font-size: 16px; + font-weight: 700; + line-height: 22px; + text-align: center; + padding-bottom: 5px; + } + + &__category { + color: $third-text-color; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..0873f4ce7 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,23 @@ +.questions { + &__content { + @include onTablet { + @include pageGrid; + } + } + + &__tittle { + grid-column: 1 / 5; + + @include onSmallDesktop { + grid-column: 1 / 7; + } + } + + &__form { + grid-column: 5 / 9; + + @include onSmallDesktop { + grid-column: 7 / 13; + } + } +} diff --git a/src/styles/blocks/tittle.scss b/src/styles/blocks/tittle.scss new file mode 100644 index 000000000..652b5c15e --- /dev/null +++ b/src/styles/blocks/tittle.scss @@ -0,0 +1,19 @@ +.tittle { + color: $main-text-color; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + padding-bottom: 30px; + text-align: left; + + @include onTablet { + font-size: 36px; + line-height: 46px; + } + + @include onSmallDesktop { + font-size: 56px; + line-height: 70px; + } +} diff --git a/src/styles/blocks/wrapper.scss b/src/styles/blocks/wrapper.scss new file mode 100644 index 000000000..b8c62f5b0 --- /dev/null +++ b/src/styles/blocks/wrapper.scss @@ -0,0 +1,11 @@ +.wrapper { + margin: 0 auto; + + @include onTablet { + width: 700px; + } + + @include onSmallDesktop { + width: 1194px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d..8ad13f8b6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,24 @@ @import "fonts"; @import "typography"; -body { - background: $c-gray; -} +@import "blocks/page.scss"; +@import "blocks/container.scss"; +@import "blocks/wrapper.scss"; +@import "blocks/header.scss"; +@import "blocks/menu.scss"; +@import "blocks/nav.scss"; +@import "blocks/main.scss"; +@import "blocks/navigation.scss"; +@import "blocks/categories.scss"; +@import "blocks/card.scss"; +@import "blocks/luna.scss"; +@import "blocks/tittle.scss"; +@import "blocks/designe.scss"; +@import "blocks/content.scss"; +@import "blocks/eye.scss"; +@import "blocks/people.scss"; +@import "blocks/fetures.scss"; +@import "blocks/music.scss"; +@import "blocks/questions.scss"; +@import "blocks/form.scss"; +@import "blocks/footer.scss"; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..00198fe4b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,32 @@ #{$_property}: $_toValue; } } + +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onSmallDesktop { + @media (min-width: $smallDesktop-min-width) { + @content; + } +} + +@mixin pageGrid { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include onTablet { + --columns: 8; + column-gap: 20px; + } + + @include onSmallDesktop() { + --columns: 12 ; + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a99c944c9 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ $c-gray: #eee; +$tablet-min-width: 768px; +$smallDesktop-min-width: 1440px; + +$main-bg-color: #f7f7f7; +$second-bg-color: #f9f9f9; +$third-bg-color: #d6ecec; + +$main-text-color: #333; +$second-text-color: #fff; +$third-text-color: #7c7c7c; +$forth-text-color: #0c797a; +$input-txet-color: #bdbdbd; + +$main-item-color: #0db2b3; +$second-item-color: #131313; +$third-item-color: #828282;