improvements completed

mate-academy · Dec 23, 2023 · 06ffbe8 · 06ffbe8
1 parent 7136d1c
commit 06ffbe8
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 32 deletions.
diff --git a/src/images/icons/icon-arrow-hover.svg b/src/images/icons/icon-arrow-hover.svg
diff --git a/src/index.html b/src/index.html
@@ -30,7 +30,7 @@
             <nav class="menu__navigation">
               <ul class="menu__list">
                 <li class="menu__item">
-                  <a href="#product" class="menu__link">Products</a>
+                  <a href="#products" class="menu__link">Products</a>
                 </li>
 
                 <li class="menu__item">
@@ -110,7 +110,7 @@ <h1 class="header__title">Creative bakery</h1>
 
     <main class="page__main">
       <!-- #region PRODUCT -->
-      <section id="product" class="product">
+      <section id="products" class="product">
         <h2 class="product__title">What we bake</h2>
         <p class="product__description">We can customize our cookies right for your needs. Just imagine it</p>
 

diff --git a/src/styles/blocks/_card.scss b/src/styles/blocks/_card.scss
@@ -8,6 +8,8 @@
     border-radius: 8px;
     width: 100%;
     margin-bottom: 16px;
+
+    @include transition;
   }
 
   &__title {
@@ -52,12 +54,10 @@
       color: $focused;
 
       @include transition;
-
-      &::before {
-        content: url("../images/icons/icon-arrow-hover.svg");
-
-        @include transition;
-      }
     }
   }
 }
+
+.card:hover .card__image {
+  transform: scale(1.03);
+}
diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss
@@ -19,6 +19,12 @@
     background-size: contain;
     grid-column: 1 / -1;
 
+    @include transition;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
     @include on-tablet {
       grid-row: 1 / 2;
       grid-column: 1 / 3;

diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
@@ -134,15 +134,6 @@
       }
     }
 
-    &:focus {
-      border: 2px solid $focused;
-      background-color: $focused;
-
-      &::before {
-        content: url("../images/icons/header-btn-hover.svg");
-      }
-    }
-
     @include on-tablet {
       grid-column: 3 / 7;
       margin-top: 210px;

diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss
@@ -43,13 +43,13 @@
       pointer-events: none;
       width: 50%;
       height: 1px;
-      background-color: #F9512E;
+      background-color: $main-color;
 
       @include transition;
     }
 
     &:hover {
-      color: #F9512E;
+      color: $main-color;
 
       @include transition;
 
@@ -60,7 +60,7 @@
     }
 
     &--focus {
-      color: #F9512E;
+      color: $main-color;
       text-transform: uppercase;
       display: flex;
       align-items: center;
@@ -69,7 +69,7 @@
 
       &::after {
         content: "";
-        background-color: #F9512E;
+        background-color: $main-color;
         bottom: -8px;
       }
 
@@ -112,7 +112,7 @@
     &--close {
       &::before {
         content: url("../images/icons/icon-close.svg");
-        
+
         @include transition;
       }
 

diff --git a/src/styles/blocks/_product.scss b/src/styles/blocks/_product.scss
@@ -72,12 +72,6 @@
     @include on-middle-display {
       grid-column: span 3;
     }
-
-    &:hover {
-      transform: scale(1.05);
-
-      @include transition;
-    }
   }
 }
 

diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss
@@ -1,6 +1,6 @@
 .top-bar {
   @include on-padding-page;
-  
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -17,6 +17,12 @@
     height: 32px;
     line-height: 32px;
 
+    @include transition;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
     &-image {
       background-size: cover;
     }