fixed solution 2.0 :)

mate-academy · Dec 11, 2024 · b44d059 · b44d059
1 parent f56d23b
commit b44d059
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 23 deletions.
diff --git a/src/index.html b/src/index.html
@@ -14,19 +14,25 @@
       rel="stylesheet"
       href="./styles/style.scss"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link
+    rel="preconnect"
+    href="https://fonts.googleapis.com"
+    >
     <link
     rel="preconnect"
     href="https://fonts.gstatic.com"
     crossorigin="anonymous"
     >
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    rel="stylesheet">
+    <link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet"
+    >
     <script src="scripts/main.js">
     </script>
   </head>
   <body>
     <header class="header">
+      <!-- #region Header -->
       <div class="container">
         <div class="nav__wrapper">
           <div class="nav__logo">
@@ -141,7 +147,7 @@ <h3>Intro</h3>
           </div>
         </div>
       </div>
-
+      <!-- #endregion -->
     </header>
     <main class="main">
       <!-- #region About us -->
@@ -384,7 +390,9 @@ <h2 class="service__title">
           <div class="components__information">
             We are sure that first-rate job is possible only if all three components are united.
           </div>
-          <button class="button"><a href="#contact-us">Apply</a></button>
+          <button class="components__button-apply--button">
+            <a href="#contact-us" class="components__button-apply">Apply</a>
+          </button>
         </section>
       </div>
       <!-- #endregion -->

diff --git 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
@@ -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
@@ -35,7 +35,9 @@
     &-learn-more{
       @extend %button;
 
+
     }
+
   }
 
   &__photo-block{

diff --git 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);
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,9 @@ @@
         &-learn-more{
           @extend %button;
         }
       }
       &__photo-block{
@@ Expand Down @@