favicon title and hover fix

mate-academy · Oct 5, 2023 · f7da3e3 · f7da3e3
1 parent ef72d44
commit f7da3e3
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 69 deletions.
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,12 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Title</title>
+    <title>Creative Bakery</title>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="images/icons/icon-cookie.png"
+    >
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
@@ -21,9 +26,9 @@
         </a>
 
         <ul class="nav__list">
-          <li><a href="#" class="nav__link">Products</a></li>
-          <li><a href="#" class="nav__link">About Us</a></li>
-          <li><a href="#" class="nav__link">Blog</a></li>
+          <li><a href="#what-we-bake" class="nav__link">Products</a></li>
+          <li><a href="#about-us" class="nav__link">About Us</a></li>
+          <li><a href="https://www.instagram.com/sgcreativebakery/?hl=en" class="nav__link">Blog</a></li>
           <li><a href="tel:6295550129" class="nav__link nav__link--phone">Contact us</a></li>
         </ul>
 
@@ -49,15 +54,15 @@ <h1 class="header__title">Creative bakery</h1>
       </nav>
 
       <ul class="menu__list">
-        <li><a href="#" class="menu__link">Products</a></li>
-        <li><a href="#" class="menu__link">About Us</a></li>
-        <li><a href="#" class="menu__link">Blog</a></li>
+        <li><a href="#what-we-bake" class="menu__link">Products</a></li>
+        <li><a href="#about-us" class="menu__link">About Us</a></li>
+        <li><a href="https://www.instagram.com/sgcreativebakery/?hl=en" class="menu__link">Blog</a></li>
         <li><a href="tel:6295550129" class="menu__link menu__link--phone">Contact us</a></li>
       </ul>
 
     </aside>
     <main class="main">
-      <section class="what-we-bake main__what-we-bake">
+      <section class="what-we-bake main__what-we-bake" id="what-we-bake">
         <h2 class="section-title what-we-bake__title">What we bake</h2>
 
         <p class="info what-we-bake__info">We can customize our cookies right for your needs. Just imagine it</p>
@@ -137,7 +142,7 @@ <h3 class="product__title">Cakes</h3>
           </article>
         </div>
       </section>
-      <section class="about-us main__about-us">
+      <section class="about-us main__about-us" id="about-us">
 
         <h2 class="section-title about-us__title">Few words About us</h2>
 
@@ -214,17 +219,16 @@ <h2 class="section-title footer__title">Contact us</h2>
             <li><a href="mailto: [email protected]" class="footer__link">[email protected]</a></li>
           </ul>
         </div>
-
-        <div class="footer__socials">
-          <a href="#" class="icon icon--facebook icon--facebook--hover"></a>
-          <a href="#" class="icon icon--instagram icon--instagram--hover"></a>
-          <a href="#" class="icon icon--twitter icon--twitter--hover"></a>
-        </div>
-
-        <p class="footer__end">
-          © Bakerlab 2022
-        </p>
       </section>
+      <div class="footer__socials">
+        <a href="#" class="icon icon--facebook icon--facebook--hover"></a>
+        <a href="#" class="icon icon--instagram icon--instagram--hover"></a>
+        <a href="#" class="icon icon--twitter icon--twitter--hover"></a>
+      </div>
+
+      <p class="footer__end">
+        © Bakerlab 2022
+      </p>
     </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>

diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss
@@ -35,9 +35,5 @@
     @include onTablet {
       grid-column: span 4;
     }
-
-    @include onDesktop {
-
-    }
   }
 }
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
@@ -4,8 +4,16 @@
   @include pageGrid;
   row-gap: 64px;
 
+
+  @include onTablet {
+    padding: 88px 44px;
+  }
   &__navigation {
     grid-column: span 2;
+
+    @include onTablet {
+      grid-column: 1 / 4;
+    }
   }
 
   &__logo {
@@ -49,13 +57,31 @@
     line-height: 24px;
     letter-spacing: -0.01em;
     color: $white;
+
+
+    @include hoverUnderline {
+      background-color: $white;
+    }
   }
 
   &__contact {
     display: grid;
     row-gap: 40px;
     grid-column: span 2;
-}
+    margin-bottom: -24px;
+
+    @include onTablet {
+      grid-column: 5 / 8;
+    }
+
+    @include onDesktop {
+      grid-column: 5 / -1;
+    }
+
+    @include onDesktop {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
 
   &__title {
     grid-column: span 2;
@@ -64,16 +90,29 @@
 
   &__phone-num {
     grid-column: span 2;
+
+    @include onDesktop {
+      grid-column: span 1;
+    }
   }
 
   &__email {
     grid-column: span 2;
+
+    @include onDesktop {
+      grid-column: span 1;
+    }
   }
 
   &__socials {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 24px);
     column-gap: 32px;
+    margin-bottom: -24px;
+
+    @include onTablet {
+      grid-column: 1 / 4;
+    }
   }
 
   &__end {
@@ -84,6 +123,9 @@
     letter-spacing: -0.01em;
     text-align: left;
     color: $grey;
+
+    @include onTablet {
+      grid-column: 5 / -1;
+    }
   }
 }
-
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
@@ -124,7 +124,7 @@
     transition: 0.3s;
 
     &::before {
-      content: '';
+      content: "";
       background-image: url(../images/icons/icon-cookie.png);
       height: 24px;
       width: 24px;

diff --git a/src/styles/_items.scss b/src/styles/_items.scss
@@ -23,7 +23,7 @@
     }
 
     @include onDesktop {
-      grid-column:  span 2;
+      grid-column: span 2;
     }
   }
 

diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss
@@ -60,7 +60,7 @@
       color: $accentorange;
 
       &::before {
-        content: '';
+        content: "";
         background-image: url(../images/icons/icon-phone.png);
         height: 24px;
         width: 24px;

diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
@@ -33,7 +33,6 @@
   }
 
   &__link {
-    position: relative;
     text-decoration: none;
     font-family: inherit;
     font-size: 16px;
@@ -42,23 +41,8 @@
     letter-spacing: -0.01em;
     color: $black;
 
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: -4px;
-      display: block;
-      width: 100%;
-      height: 1px;
+    @include hoverUnderline {
       background-color: $black;
-
-      transform: scale(0);
-      transition: transform 0.3s;
-      transform-origin: left;
-    }
-
-    &:hover::after {
-      transform: scale(1);
-      transform-origin: left;
     }
 
     &--phone {
@@ -72,7 +56,7 @@
       color: $accentorange;
 
       &::before {
-        content: '';
+        content: "";
         background-image: url(../images/icons/icon-phone.png);
         height: 24px;
         width: 24px;

diff --git a/src/styles/_product.scss b/src/styles/_product.scss
@@ -25,7 +25,7 @@
 
     border-radius: 8px;
     margin-bottom: 16px;
-    
+
     @include onTablet {
       width: 328px;
       height: 424px;
@@ -50,20 +50,21 @@
   }
 
   &__info {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  text-align: left;
-  color: $black;
-
-  margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: -0.01em;
+    text-align: left;
+    color: $black;
+
+    margin-bottom: 16px;
   }
 
   &__button {
     display: flex;
     align-items: center;
     justify-content: start;
+    width: fit-content;
     gap: 4px;
 
     font-size: 16px;
@@ -75,11 +76,15 @@
     text-transform: uppercase;
     color: $accentorange;
 
-  &::before {
-    content: '';
-    height: 24px;
-    width: 24px;
-    background-image: url(../images/icons/icon-arrow.png);
-  }
+    &::before {
+      content: "";
+      height: 24px;
+      width: 24px;
+      background-image: url(../images/icons/icon-arrow.png);
+    }
+
+    @include hoverUnderline {
+      background-color: $accentorange;
+    }
   }
 }
diff --git a/src/styles/_section-title.scss b/src/styles/_section-title.scss
@@ -9,11 +9,11 @@
 
   @include onTablet {
     font-size: 56px;
-    line-height: 47.6px
+    line-height: 47.6px;
   }
 
   @include onDesktop {
     font-size: 72px;
-    line-height: 61.2px
+    line-height: 61.2px;
   }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -18,12 +18,19 @@
   box-sizing: border-box;
 }
 
-h1, h2, h3, h4, h5, h6, p {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
   margin: 0;
   padding: 0;
 }
 
 .page {
+  scroll-behavior: smooth;
   &__body {
     margin: 0;
     padding: 0;
@@ -49,5 +56,3 @@ h1, h2, h3, h4, h5, h6, p {
     }
   }
 }
-
-
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -37,7 +37,31 @@
 @mixin paddingInline {
   padding-inline: 16px;
 
-  @include onTablet{
+  @include onTablet {
     padding-inline: 44px;
   }
 }
+
+@mixin hoverUnderline {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    display: block;
+    width: 100%;
+    height: 1px;
+    @content;
+
+    transform: scale(0);
+    transition: transform 0.3s;
+    transform-origin: left;
+  }
+
+  &:hover::after {
+    transform: scale(1);
+    transform-origin: left;
+  }
+}
+
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -10,4 +10,4 @@ $white: #fff;
 $tablet-width: 744px;
 $desktop-width: 1200px;
 
-$font-family: 'Inter', sans-serif;
+$font-family: "Inter", sans-serif;
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ @@
         }
         @include onDesktop {
-          grid-column:  span 2;
+          grid-column: span 2;
         }
       }
@@ Expand Down @@