To improve

mate-academy · Dec 12, 2024 · aaa93f5 · aaa93f5
1 parent b44d059
commit aaa93f5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 26 deletions.
diff --git a/src/index.html b/src/index.html
@@ -51,23 +51,28 @@
             </a>
             <ul class="nav__burger-menu-list" id="burger-menu">
               <li class="nav__burger-menu-item">
-                <a href="#" class="nav__burger-menu-link">
-                  About us
+                <a href="#about-us" class="nav__burger-menu-link">
+                  <p>About us</p>
                 </a>
               </li>
               <li class="nav__burger-menu-item">
-                <a href="#" class="nav__burger-menu-link">
-                  Services
+                <a href="#service" class="nav__burger-menu-link">
+                  <p>Services</p>
                 </a>
               </li>
               <li class="nav__burger-menu-item">
-                <a href="#" class="nav__burger-menu-link">
-                  Testimonials
+                <a href="#testimonials" class="nav__burger-menu-link">
+                  <p>Testimonials</p>
                 </a>
               </li>
               <li class="nav__burger-menu-item">
-                <a href="#" class="nav__burger-menu-link">
-                  Contact Us
+                <a href="#contact-us" class="nav__burger-menu-link">
+                  <p>Contact Us</p>
+                </a>
+              </li>
+              <li class="nav__burger-menu-item nav__burger-menu-item--close">
+                <a href="#" class="nav__burger-menu-link nav__burger-menu-link--close ">
+                x
                 </a>
               </li>
             </ul>
@@ -453,7 +458,7 @@ <h3>Visit us</h3>
             <div class="contact__contact-information">
               <h3>our socials</h3>
               <p>
-                <a href="#">
+                <a href="https://www.facebook.com/mateacademy" target="_blank">
                   <svg
                   class="contact__contact-information-image"
                   width="25"
@@ -467,7 +472,7 @@ <h3>our socials</h3>
                     />
                   </svg>
                 </a>
-                <a href="#">
+                <a href="https://x.com/mateacademy" target="_blank">
                   <svg
                   class="contact__contact-information-image"
                   width="25"
@@ -481,7 +486,7 @@ <h3>our socials</h3>
                     />
                   </svg>
                 </a>
-                <a href="#">
+                <a href="https://www.instagram.com/mate_academy/" target="_blank">
                   <svg
                   class="contact__contact-information-image"
                   width="25"

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -5,6 +5,10 @@
   border-radius: 0 0 30px 30px ;
   position: relative;
 
+  @include on-small-desktop{
+    height: 800px;
+  }
+
   &__information{
     margin-block: 48px;
     color: white;
@@ -34,8 +38,6 @@
 
     &-learn-more{
       @extend %button;
-
-
     }
 
   }

diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
@@ -13,47 +13,73 @@
     }
 
     &-list{
-      display: flex;
-      flex-direction: column;
-      justify-content: left;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr) 20px;
+      grid-template-rows: 1fr 1fr;
+      gap: 10px;
+      text-align: center;
       padding: 0;
+      padding-top: 20px;
       position: absolute;
-      left: 125px;
+      height: 70px;
+      left: 0;
       top: 0;
+      right: 0;
       margin: 0;
       background-color: $bg-header;
-      border: 1px solid silver;
       border-radius: 10px;
       z-index: 2;
 
 
+
       transition: all 0.9s;
       visibility: hidden;
-      opacity: .1;
+      opacity: 0;
+      transform: translateY(-55px);
 
       &:target{
-        transform: translateX(20px);
+        transform: translateY(0);
         opacity: 1;
         visibility: visible;
       }
 
-
     }
 
     &-item{
+      grid-column: span 2;
       list-style: none;
-
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      box-sizing: border-box;
+
+      &--close{
+        place-self: self-start;
+        padding-top: 5px;
+        box-sizing: border-box;
+        height: 30px;
+        grid-column: 5 / 6;
+        grid-row: 1 / 2;
+      }
     }
 
     &-link{
       text-decoration: none;
       color: #fff;
-      line-height: 25px;
-      display: inline-block;
-      padding: 0 10px;
+      display: block;
       width: 100%;
-    }
+      height: 100%;
+      position: absolute;
 
+      & p{
+        margin-block: 0;
+      }
+
+      &:hover{
+        color: #2060F6;
+      }
+    }
 
   }