add task solution

mate-academy · Oct 30, 2023 · e0e83a1 · e0e83a1
1 parent b058623
commit e0e83a1
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 23 deletions.
diff --git a/src/index.html b/src/index.html
@@ -26,18 +26,18 @@
           <nav class="nav menu">
             <ul class="nav__list">
               <li class="nav__item">
-                <a class="nav__link" href="#">Products</a>
+                <a class="nav__link" href="#products">Products</a>
               </li>
               <li class="nav__item">
-                <a class="nav__link" href="#">About as</a>
+                <a class="nav__link" href="#about-us">About as</a>
               </li>
               <li class="nav__item">
                 <a class="nav__link" href="#">Blog</a>
               </li>
               <li class="nav__item phone">
-                <a href="tel:+17045550127" class="nav__phone">
-                  <img src="images/icon-phone.svg" alt="icon">
-                   Contact us
+                <a href="tel:+17045550127" class="order">
+                  <img src="images/icon-phone.svg" alt="arrow">
+                  Contact us
                 </a>
               </li>
             </ul>
@@ -54,10 +54,7 @@ <h1 class="header__title">Creative bakery</h1>
               alt="cookie">
           </div>
           <a href="#" class="header__button">
-            <img
-              src="images/vector.svg"
-              class="header__button__img"
-              alt="vc">
+            <img src="images/vector.svg" alt="cookie">
             Learn more
           </a>
         </div>
@@ -76,10 +73,10 @@ <h1 class="header__title">Creative bakery</h1>
       <nav class="nav__menu aside">
         <ul class="aside__list">
           <li class="aside__item">
-            <a class="aside__link" href="#">Products</a>
+            <a class="aside__link" href="#products">Products</a>
           </li>
           <li class="aside__item">
-            <a class="aside__link" href="#">About as</a>
+            <a class="aside__link" href="#about-us">About as</a>
           </li>
           <li class="aside__item">
             <a class="aside__link" href="#">Blog</a>
@@ -95,7 +92,7 @@ <h1 class="header__title">Creative bakery</h1>
     </aside>
 
     <main class="main">
-      <section class="products">
+      <section class="products" id="products">
 
         <h1 class="products__title">What we bake</h1>
         <p class="products__description">We can customize our cookies right for your needs. Just imagine it</p>
@@ -174,7 +171,7 @@ <h1 class="products__title">What we bake</h1>
         </article>
       </section>
 
-      <section class="about-us">
+      <section class="about-us" id="about-us">
         <div class="about-us__title">
           <h1 class="f_word">Few words About us</h1>
           <p class="f_word__description">Like many design teams, Onfido made the transition from Abstract + Sketch, to Figma in the last couple of years. One of the common resistance points internally before making that switch, was Figma’s lack of Git-style branching that Abstract enabled. The design team had come to rely on branching and had built a lot of our processes around it.</p>
@@ -239,13 +236,13 @@ <h2 class="contact__title">Contact us</h2>
             <a class="footer__link gray" href="#">Call us</a>
           </li>
           <li class="footer__item">
-            <a class="footer__link" href="tel:(629) 555-0129">(629) 555-0129</a>
+            <a class="footer__link" href="tel:(629)555-0129">(629) 555-0129</a>
           </li>
           <li class="footer__item">
-            <a class="footer__link" href="tel:(603) 555-0123">(603) 555-0123</a>
+            <a class="footer__link" href="tel:(603)555-0123">(603) 555-0123</a>
           </li>
           <li class="footer__item">
-            <a class="footer__link" href="tel:(704) 555-0127">(704) 555-0127</a>
+            <a class="footer__link" href="tel:(704)555-0127">(704) 555-0127</a>
           </li>
         </ul>
 
@@ -262,9 +259,9 @@ <h2 class="contact__title">Contact us</h2>
 
 
       <div class="footer__icon">
-        <a href="#" class="footer__icon__facebook icon__footer"></a>
-        <a href="#" class="footer__icon__instagram icon__footer"></a>
-        <a href="#" class="footer__icon__twiter icon__footer"></a>
+        <a href="https://www.facebook.com/" class="footer__icon__facebook icon__footer"></a>
+        <a href="https://www.instagram.com/" class="footer__icon__instagram icon__footer"></a>
+        <a href="https://twitter.com/i/flow/login" class="footer__icon__twiter icon__footer"></a>
       </div>
 
       <p class="footer__last-p">© Bakerlab 2022</p>

diff --git a/src/styles/aside.scss b/src/styles/aside.scss
@@ -10,6 +10,7 @@
   }
 
   &__item {
+    align-items: center;
     text-align: center;
     margin-bottom: 24px;
     transition: 0.3s;

diff --git a/src/styles/footer.scss b/src/styles/footer.scss
@@ -33,6 +33,11 @@
     color: #fff;
     line-height: 150%;
     letter-spacing: -0.16px;
+    transition: 0.3s;
+
+    &:hover {
+      color: #7a7878;
+    }
   }
 
   &__contact {
@@ -135,6 +140,10 @@
 .gray {
   text-transform: uppercase;
   color: $gray;
+
+  &:hover {
+    color: $gray;
+  }
 }
 
 .contact__title {

diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -97,14 +97,20 @@
       left: 15%;
     }
 
+    @include onMTablet {
+      top: 80%;
+      left: 1%;
+    }
+
     @include onDesktop {
       font-size: 136px;
-      top: 15%;
-      left: -4%;
+      top: 35%;
+      left: 2%;
     }
   }
 
   &__button {
+    background-position: 25%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -119,6 +125,11 @@
     gap: 4px;
     grid-column: 1 / -1;
 
+    &:hover {
+      background-color: pink;
+      color: #f692c9;
+    }
+
     @include onTablet {
       grid-column: 3 / -3;
     }

diff --git a/src/styles/menu.scss b/src/styles/menu.scss
@@ -6,6 +6,7 @@
   }
 
   &__item {
+    scroll-behavior: smooth;
     align-items: center;
     list-style: none;
 
@@ -22,6 +23,7 @@
   }
 
   &__link {
+    scroll-behavior: smooth;
     line-height: 150%;
     text-decoration: none;
     color: $text-color;
@@ -38,7 +40,6 @@
     letter-spacing: 0.32px;
     color: $active-color;
     align-items: center;
-    text-align: center;
   }
 }
 
@@ -69,7 +70,7 @@
   }
 }
 
-.phone {
+.phone {  
   &:hover {
     border-bottom: 1px solid $active-color;
   }

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -4,6 +4,12 @@
   }
 }
 
+@mixin onMTablet () {
+  @media (min-width: 600px) and (max-width: 710px) {
+    @content;
+  }
+}
+
 @mixin onDesktop () {
   @media (min-width: 1000px) {
     @content;

diff --git a/src/styles/page.scss b/src/styles/page.scss
@@ -1,4 +1,5 @@
 .page {
+  scroll-behavior: smooth;
   margin: 0;
   padding: 0;
   &:has(.page__menu:target) {

diff --git a/src/styles/products.scss b/src/styles/products.scss
@@ -29,6 +29,10 @@
     grid-column: span 3;
   }
 
+  @include onBigDesktop {
+    grid-column: span 2;
+  }
+
   &__img {
     grid-column: 1 / -1;
     border: 1px solid $c-gray;
@@ -43,6 +47,7 @@
   }
 
   &__group {
+    z-index: 1;
     margin-top: 16px;
     margin-bottom: 8px;
     color: $gray;
@@ -77,4 +82,8 @@
   @include onDesktop {
     grid-column: 3 / 6;
   }
+
+  @include onBigDesktop {
+    grid-column: 4 / 6;
+  }
 }