From b44d059b70e231d684bf7fd1c2edc098f6ff7776 Mon Sep 17 00:00:00 2001 From: Vitalii Date: Wed, 11 Dec 2024 19:44:23 +0000 Subject: [PATCH] fixed solution 2.0 :) --- src/index.html | 18 +++++++++++----- src/styles/blocks/components.scss | 35 ++++++++++++++++--------------- src/styles/blocks/footer.scss | 7 +++++++ src/styles/blocks/header.scss | 2 ++ src/styles/utils/_extends.scss | 30 +++++++++++++++++++++++++- 5 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/index.html b/src/index.html index f303b883b..21e2f5575 100644 --- a/src/index.html +++ b/src/index.html @@ -14,19 +14,25 @@ rel="stylesheet" href="./styles/style.scss" /> - + - +
+
- +
@@ -384,7 +390,9 @@

We are sure that first-rate job is possible only if all three components are united.
- + diff --git a/src/styles/blocks/components.scss b/src/styles/blocks/components.scss index 7a542db08..9e3b0e4ed 100644 --- a/src/styles/blocks/components.scss +++ b/src/styles/blocks/components.scss @@ -52,27 +52,28 @@ } } - & button{ - @extend %button; + &__button-apply{ + color: #fff; + text-decoration: none; + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; - grid-column: 1 / -1; + &--button{ + @extend %button; - @include on-tablet{ - grid-column: 2 / -2; - } + grid-column: 1 / -1; - @include on-small-desktop{ - grid-column: 3 / -3; - } + @include on-tablet{ + grid-column: 2 / -2; + } + + @include on-small-desktop{ + grid-column: 3 / -3; + } - & a{ - color: #fff; - text-decoration: none; - display: flex; - height: 100%; - width: 100%; - align-items: center; - justify-content: center; } } } diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss index 109b816df..5bd53cb95 100644 --- a/src/styles/blocks/footer.scss +++ b/src/styles/blocks/footer.scss @@ -60,11 +60,18 @@ &-link{ color: #fff; text-decoration: none; + } &-item{ @extend %nav-decoration; + + margin-bottom: 24px; + + @include on-tablet{ + margin-bottom: 0; + } } } diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 047eb5052..e5f0a4e3e 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -35,7 +35,9 @@ &-learn-more{ @extend %button; + } + } &__photo-block{ diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index 54a30f8e7..5195ce7f4 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -4,7 +4,7 @@ } %button{ - width: 264px; + width: 100%; height: 56px; border-radius: 8px; background-color: #2060F6; @@ -15,6 +15,13 @@ font-weight: 600; font-family: poppins, Arial, Helvetica, sans-serif; + @include on-tablet{ + width: 264px; + } + &:hover, &:hover a{ + background-color: #fff; + color: #2060F6; + } } %nav-decoration{ @@ -26,5 +33,26 @@ line-height: 150%; font-weight: 700; letter-spacing: 3px; + position: relative; + + + &::after{ + position: absolute; + content: ''; + display: block; + height: 2px; + bottom: -8px; + width: 100%; + background-color: #2060F6; + + + transition: transform .3s; + transform: scale(0); + + } + + &:hover::after{ + transform: scale(1); + } }