Add up menu

mate-academy · Sep 12, 2023 · 5da8f6b · 5da8f6b
1 parent b8bc327
commit 5da8f6b
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 30 deletions.
diff --git a/src/index.html b/src/index.html
@@ -22,8 +22,8 @@
           <nav class="top">
             <a href="#" class="top__logo">
               <img src="./images/logo/Air-logo.svg"
-               alt="Air"
-               >
+              alt="Air"
+              >
             </a>
 
             <a href="#upmenu" class="top__menu"></a>
@@ -50,8 +50,7 @@
           </nav>
 
           <div class="cont__box">
-            <a href="#contacts"
-            class="cont__hire-us">
+            <a href="#contacts" class="cont__hire-us">
               Hire us
             </a>
           </div>
@@ -64,17 +63,13 @@ <h1 class="header__title">
             Strategic Agency
           </h1>
 
-          <p
-          class="header__text">
-          We believe in the power of bold ideas that can solve business challenges.
+          <p class="header__text">
+            We believe in the power of bold ideas that can solve business challenges.
           </p>
 
           <a href="#expertise" class="header__link">
-            <button
-            type="reset"
-            class="header__button"
-            id="button"
-            >
+            <button type="reset" class="header__button"
+            id="button">
               Learn more
             </button>
           </a>
@@ -83,40 +78,30 @@ <h1 class="header__title">
 
       <div class="slider">
         <div class="slider__img">
-          <img
-          src="images/slider/Photo1.png"
-          alt="photoimg"
+          <img src="images/slider/Photo1.png" alt="photoimg"
           class="slider__photo">
         </div>
 
         <div class="slider__img slider__img--position">
-          <img
-          src="images/slider/Photo2.png"
-          alt="photoimg"
+          <img src="images/slider/Photo2.png" alt="photoimg"
           class="slider__photo">
         </div>
 
         <div class="slider__img slider__img--position">
-          <img
-          src="images/slider/Photo3.png"
-          alt="photoimg"
+          <img src="images/slider/Photo3.png" alt="photoimg"
           class="slider__photo">
         </div>
 
         <div class="slider__content">
           <div class="slider__box-button">
             <div class="slider__button slider__prev-button">
-              <img
-                src="images/slider/Arrow left.png"
-                alt="slidertup"
-                class="slider__tup">
+              <img src="images/slider/Arrow left.png" alt="slidertup"
+              class="slider__tup">
             </div>
 
             <div class="slider__button slider__next-button">
-              <img
-                src="images/slider/Arrow right.png"
-                alt="slidertup"
-                class="slider__tup">
+              <img src="images/slider/Arrow right.png" alt="slidertup"
+              class="slider__tup">
             </div>
           </div>
 
@@ -132,7 +117,35 @@ <h1 class="header__title">
       </div>
     </header>
 
-    <a href="#" class="top__menu--close"></a>
+    <aside class="page__menu header" id="upmenu">
+      <div class="top">
+        <a href="#" class="top__logo">
+          <img src="./images/logo/Air-logo.svg"
+          alt="Air">
+        </a>
+        <a href="#" class="top__menu--close"></a>
+      </div>
+      <nav class="cont-block cont-block--header">
+        <ul class="cont__list cont__list--colum">
+          <li class="cont__item">
+            <a href="#about" class="cont__link">About us</a>
+          </li>
+
+          <li class="cont__item">
+            <a href="#services" class="cont__link">Services</a>
+          </li>
+
+          <li class="cont__item">
+            <a href="#testimonials" class="cont__link">Testimonials</a>
+          </li>
+
+          <li class="cont__item">
+            <a href="#contact" class="cont__link">Contact Us</a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
   </body>
 
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -52,4 +52,13 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   showCurrentImage();
+
+  setInterval(() => {
+    currentImageIndex += 1;
+
+    if (currentImageIndex >= sliderImages.length) {
+      currentImageIndex = 0;
+    }
+    showCurrentImage();
+  }, 6000);
 });
diff --git a/src/styles/block/cont-block.scss b/src/styles/block/cont-block.scss
@@ -5,4 +5,17 @@
     display: block;
 
   }
+
+  &--header {
+    height: 500px;
+    margin-top: -10px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background-color: $colorbackgraund;
+
+    @include onSmalldesktop {
+      display: none;
+    }
+  }
 }
diff --git a/src/styles/block/container.scss b/src/styles/block/container.scss
@@ -19,6 +19,12 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
+
+    &--colum {
+      display: flex;
+      flex-direction: column;
+      gap: 30px;
+    }
   }
 
   &__item {

diff --git a/src/styles/block/page.scss b/src/styles/block/page.scss
@@ -14,4 +14,22 @@
       overflow: hidden;
     }
   }
+
+  &__menu {
+    @include inlainer;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: all (0.5s);
+    transform: translateX(-100%);
+
+    &:target {
+      opacity: 1;
+      transform: translate(0%);
+      pointer-events: all;
+    }
+  }
 }
diff --git a/src/styles/block/slider.scss b/src/styles/block/slider.scss
@@ -4,6 +4,7 @@
     width: 100%;
     bottom: 0;
     right: 0;
+    transition: opacity 0.7s ease-in-out;
 
     @include onSmalldesktop {
       width: 50%;