diff --git a/src/images/Crazybaby.png b/src/images/Crazybaby.png new file mode 100644 index 000000000..dac1927a9 Binary files /dev/null and b/src/images/Crazybaby.png differ diff --git a/src/images/about-us.png b/src/images/about-us.png new file mode 100644 index 000000000..92bfe1bb7 Binary files /dev/null and b/src/images/about-us.png differ diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features-full.png b/src/images/features-full.png new file mode 100644 index 000000000..b6a6044f3 Binary files /dev/null and b/src/images/features-full.png differ diff --git a/src/images/features.png b/src/images/features.png new file mode 100644 index 000000000..6de6cd9f5 Binary files /dev/null and b/src/images/features.png differ diff --git a/src/images/icon-design.svg b/src/images/icon-design.svg new file mode 100644 index 000000000..805ad1d6d --- /dev/null +++ b/src/images/icon-design.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon-light.svg b/src/images/icon-light.svg new file mode 100644 index 000000000..1db23c760 --- /dev/null +++ b/src/images/icon-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon-speaker.svg b/src/images/icon-speaker.svg new file mode 100644 index 000000000..1d6f029f7 --- /dev/null +++ b/src/images/icon-speaker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon-wifi.svg b/src/images/icon-wifi.svg new file mode 100644 index 000000000..20764aa69 --- /dev/null +++ b/src/images/icon-wifi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..7095f3f42 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/presentation.png b/src/images/presentation.png new file mode 100644 index 000000000..3a611b4d8 Binary files /dev/null and b/src/images/presentation.png differ diff --git a/src/images/speaker.png b/src/images/speaker.png new file mode 100644 index 000000000..954bf409b Binary files /dev/null and b/src/images/speaker.png differ diff --git a/src/images/technology.png b/src/images/technology.png new file mode 100644 index 000000000..4060eca2d Binary files /dev/null and b/src/images/technology.png differ diff --git a/src/images/testimonials-avatar.png b/src/images/testimonials-avatar.png new file mode 100644 index 000000000..c66b5aae8 Binary files /dev/null and b/src/images/testimonials-avatar.png differ diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 000000000..453e2555c --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,93 @@ +.about-us { + margin-top: 180px; + margin-bottom: 160px; + + &__content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; + } + + &__image { + display: block; + width: 100%; + } + + &__title { + margin: 0 0 32px; + font-size: 52px; + line-height: 1.1; + text-transform: uppercase; + } + + &__text { + max-width: 360px; + margin: 0 0 32px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-gray; + } + + &__link { + position: relative; + + font-size: 12px; + font-weight: 700; + color: $c-accent; + text-transform: uppercase; + + @include hover(color, $c-dark); + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + left: 0; + + width: 60px; + height: 1px; + + background-color: $c-accent; + } + } + + // Tablet + @include on-tablet { + margin-top: 120px; + margin-bottom: 120px; + + &__content { + gap: 32px; + } + + &__title { + font-size: 40px; + } + } + + // Mobile + @media (max-width: 639px) { + margin-top: 80px; + margin-bottom: 80px; + + &__content { + grid-template-columns: 1fr; + gap: 40px; + } + + &__title { + font-size: 32px; + } + + &__text { + max-width: 100%; + } + + &__image { + order: -1; + } + } +} diff --git a/src/styles/blocks/_benefits.scss b/src/styles/blocks/_benefits.scss new file mode 100644 index 000000000..6d28d0b53 --- /dev/null +++ b/src/styles/blocks/_benefits.scss @@ -0,0 +1,59 @@ +.benefits { + margin-top: 140px; + margin-bottom: 120px; + + &__content { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 100px; + } + + @include on-tablet { + &__content { + grid-template-columns: repeat(2, 1fr); + gap: 60px; + } + } + + @media (max-width: 639px) { + margin-top: 80px; + margin-bottom: 80px; + + &__content { + grid-template-columns: 1fr; + gap: 48px; + } + } +} + +.benefit { + text-align: center; + + &__icon { + width: 42px; + height: 42px; + margin: 0 auto 40px; + } + + &__title { + margin-bottom: 22px; + + font-size: 24px; + font-weight: 700; + line-height: 1.2; + text-transform: uppercase; + } + + &__text { + margin: 0; + font-size: 14px; + line-height: 1.6; + color: $c-text-gray; + } + + @media (max-width: 639px) { + &__title { + font-size: 20px; + } + } +} diff --git a/src/styles/blocks/_container.scss b/src/styles/blocks/_container.scss new file mode 100644 index 000000000..94e5012d6 --- /dev/null +++ b/src/styles/blocks/_container.scss @@ -0,0 +1,13 @@ +.container { + max-width: 1280px; + margin: 0 auto; + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 0; + } +} diff --git a/src/styles/blocks/_features.scss b/src/styles/blocks/_features.scss new file mode 100644 index 000000000..f405907f3 --- /dev/null +++ b/src/styles/blocks/_features.scss @@ -0,0 +1,8 @@ +.features { + margin: 160px 0; + + &__image { + display: block; + width: 100%; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..628884fba --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,42 @@ +.footer { + position: relative; + padding: 120px 0 40px; + text-align: center; + + &__logo { + display: inline-block; + margin-bottom: 60px; + } + + &__logo-image { + width: 180px; + } + + &__social { + display: flex; + gap: 40px; + justify-content: center; + margin-bottom: 60px; + } + + &__social-link { + display: block; + transition: transform 0.3s; + + &:hover { + transform: translateY(-4px); + } + } + + &__copyright { + margin: 0; + font-size: 14px; + color: #bdbdbd; + } + + &__top { + position: absolute; + top: 120px; + right: 0; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..0f5f0eb04 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,82 @@ +.header { + padding-top: 40px; + + &__content { + display: flex; + align-items: center; + } + + &__logo { + margin-right: auto; + } + + &__logo-image { + width: 180px; + } + + &__nav { + margin-right: 48px; + } + + &__link, + &__language { + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + + @include hover(color, $c-accent); + } + + &__actions { + display: flex; + gap: 32px; + align-items: center; + } + + &__buy { + display: inline-block; + + padding: 16px 40px; + + font-size: 12px; + font-weight: 700; + color: $c-white; + text-transform: uppercase; + + background: $c-dark; + + @include hover(background-color, $c-accent); + } + + @include on-tablet { + &__logo-image { + width: 160px; + } + + &__actions { + gap: 24px; + } + } + + @media (max-width: 639px) { + &__nav { + display: none; + } + + &__language { + display: none; + } + + &__content { + justify-content: space-between; + } + + &__buy { + padding: 12px 28px; + } + + &__logo-image { + width: 140px; + } + } +} diff --git a/src/styles/blocks/_hero.scss b/src/styles/blocks/_hero.scss new file mode 100644 index 000000000..4c9b16afc --- /dev/null +++ b/src/styles/blocks/_hero.scss @@ -0,0 +1,82 @@ +.hero { + margin-top: 90px; + + &__content { + display: flex; + gap: 60px; + align-items: center; + justify-content: space-between; + } + + &__info { + max-width: 300px; + } + + &__title { + margin: 0 0 32px; + + font-size: 56px; + font-weight: 700; + line-height: 1; + text-transform: uppercase; + } + + &__text { + max-width: 280px; + margin: 0; + + font-size: 16px; + line-height: 1.5; + color: $c-text-gray; + } + + &__image { + width: 740px; + } + + @include on-tablet { + &__content { + gap: 40px; + } + + &__title { + font-size: 48px; + } + + &__image { + width: 520px; + } + } + + @include on-desktop { + &__content { + gap: 100px; + } + } + + @media (max-width: 639px) { + margin-top: 40px; + + &__content { + flex-direction: column; + gap: 32px; + } + + &__info { + max-width: 100%; + } + + &__title { + font-size: 40px; + } + + &__text { + max-width: 100%; + font-size: 14px; + } + + &__image { + width: 100%; + } + } +} diff --git a/src/styles/blocks/_page-nav.scss b/src/styles/blocks/_page-nav.scss new file mode 100644 index 000000000..01bc4d09b --- /dev/null +++ b/src/styles/blocks/_page-nav.scss @@ -0,0 +1,25 @@ +.page-nav { + display: flex; + gap: 84px; + justify-content: center; + + margin-top: 90px; + margin-bottom: 100px; + + &__link { + font-size: 12px; + font-weight: 700; + color: $c-text-gray; + text-transform: uppercase; + + &:first-child { + color: $c-dark; + } + + @include hover(color, $c-accent); + } + + @media (max-width: 639px) { + display: none; + } +} diff --git a/src/styles/blocks/_presentation.scss b/src/styles/blocks/_presentation.scss new file mode 100644 index 000000000..eaef42929 --- /dev/null +++ b/src/styles/blocks/_presentation.scss @@ -0,0 +1,20 @@ +.presentation { + margin-top: 120px; + margin-bottom: 160px; + + &__image { + display: block; + width: 100%; + height: auto; + } + + @include on-tablet { + margin-top: 100px; + margin-bottom: 120px; + } + + @media (max-width: 639px) { + margin-top: 60px; + margin-bottom: 80px; + } +} diff --git a/src/styles/blocks/_questions.scss b/src/styles/blocks/_questions.scss new file mode 100644 index 000000000..2ffc66215 --- /dev/null +++ b/src/styles/blocks/_questions.scss @@ -0,0 +1,62 @@ +.questions { + margin-bottom: 160px; + + &__content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 120px; + align-items: start; + } + + &__title { + margin: 0; + font-size: 56px; + line-height: 1.1; + text-transform: uppercase; + } + + &__form { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__input, + &__textarea { + width: 100%; + padding: 16px; + border: 1px solid #828282; + + font-family: inherit; + font-size: 14px; + + background-color: transparent; + outline: none; + } + + &__textarea { + resize: none; + min-height: 112px; + } + + &__input:focus, + &__textarea:focus { + border-color: $c-accent; + } + + &__button { + cursor: pointer; + + width: 102px; + height: 48px; + border: none; + + font-weight: 700; + color: $c-white; + text-transform: uppercase; + + background-color: $c-accent; + + @include hover(background-color, $c-dark); + } +} diff --git a/src/styles/blocks/_technology.scss b/src/styles/blocks/_technology.scss new file mode 100644 index 000000000..10835e962 --- /dev/null +++ b/src/styles/blocks/_technology.scss @@ -0,0 +1,55 @@ +.technology { + margin-bottom: 160px; + + &__content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 80px; + align-items: center; + } + + &__title { + margin: 0 0 32px; + font-size: 48px; + line-height: 1.1; + text-transform: uppercase; + } + + &__text { + max-width: 380px; + margin: 0 0 32px; + + font-size: 16px; + line-height: 1.5; + color: $c-text-gray; + } + + &__link { + position: relative; + + font-size: 12px; + font-weight: 700; + color: $c-accent; + text-transform: uppercase; + + @include hover(color, $c-dark); + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + left: 0; + + width: 60px; + height: 1px; + + background-color: $c-accent; + } + } + + &__image { + display: block; + width: 100%; + } +} diff --git a/src/styles/blocks/_testimonials.scss b/src/styles/blocks/_testimonials.scss new file mode 100644 index 000000000..b9bc49637 --- /dev/null +++ b/src/styles/blocks/_testimonials.scss @@ -0,0 +1,35 @@ +.testimonials { + margin-bottom: 160px; + + &__content { + max-width: 780px; + margin: 0 auto; + text-align: center; + } + + &__text { + margin: 0 0 32px; + font-size: 24px; + font-weight: 700; + line-height: 1.4; + } + + &__avatar { + width: 62px; + height: 62px; + margin: 0 auto 16px; + border-radius: 50%; + } + + &__name { + margin: 0 0 4px; + font-size: 16px; + font-weight: 700; + } + + &__position { + margin: 0; + font-size: 14px; + color: $c-text-gray; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..61b3071ad 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,36 @@ @import 'fonts'; @import 'typography'; +@import './blocks/container'; +@import './blocks/header'; +@import './blocks/hero'; +@import './blocks/page-nav'; +@import './blocks/benefits'; +@import './blocks/presentation'; +@import './blocks/about-us'; +@import './blocks/technology'; +@import './blocks/testimonials'; +@import './blocks/features'; +@import './blocks/questions'; +@import './blocks/footer'; + +html { + scroll-behavior: smooth; +} + body { + margin: 0; + font-family: Roboto, Arial, Helvetica, sans-serif; + color: $c-dark; background: $c-gray; } + +img { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..fcad00e9d 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,5 @@ %h1 { font-family: Roboto, sans-serif; - font-weight: 400; + font-weight: 700; + color: $c-dark; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..a05fa0195 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,19 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..253b7bed3 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,7 @@ -$c-gray: #eee; +$c-gray: #f7f7f7; +$c-dark: #333; +$c-black: #131313; +$c-white: #fff; +$c-light-gray: #f7f7f7; +$c-text-gray: #7c7c7c; +$c-accent: #0db2b3;