From ee09ad83ae11f98105c9599f1c4a7017648b17ce Mon Sep 17 00:00:00 2001
From: "Mohamed.Kh Elhwary" <MohamedKhamisMostafa@gmail.com>
Date: Tue, 23 Jan 2024 03:27:43 +0200
Subject: [PATCH] Create The Toggle Menu Buttons

---
 css/master.css | 35 +++++++++++++++++++++++++++++++++--
 index.html     | 24 +++++++++++++++---------
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/css/master.css b/css/master.css
index 539b71c..0d941ed 100644
--- a/css/master.css
+++ b/css/master.css
@@ -218,12 +218,14 @@ body {
   padding: 15px;
 }
 
+.header-area .links-container{
+width: 100%;
+text-align: right;
+}
 .header-area .links {
   list-style: none;
   width: 100%;
-  text-align: right;
   padding-left: 0;
-  padding-right: 15px;
 
 
 }
@@ -245,6 +247,26 @@ body {
   color: var(--main-color);
 }
 
+.header-area .toggle-menu{
+  background: none;
+  border: none;
+  width: 40px;
+  cursor: pointer;
+  margin-top: 15px;
+  display: none;
+}
+
+.header-area .toggle-menu:focus{
+  outline: none;
+}
+
+.header-area .toggle-menu span{
+  display: block;
+  background-color: #fff;
+  height: 4px;
+  margin-bottom: 4px;
+}
+
 .introdaction-text {
   position: absolute;
   top: 50%;
@@ -272,6 +294,15 @@ body {
   margin: 0;
 }
 
+@media (max-width: 921px) {
+  .header-area .links{
+    display: none;
+  }
+  .header-area .toggle-menu{
+    display: inline-block;
+  }
+}
+
 /* End Landing Page */
 
 /* Start About Us */
diff --git a/index.html b/index.html
index 948a4da..42676ff 100644
--- a/index.html
+++ b/index.html
@@ -77,21 +77,27 @@ <h4>Show Bullets</h4>
 
   <!-- End Nav Bullets -->
 
-    <!-- Stat Nav Bullets -->
   <!-- Start Landing Page -->
   <div class="landing-page">
     <div class="overlay"></div>
     <div class="container">
       <div class="header-area">
         <div class="logo">Special Design</div>
-        <ul class="links">
-          <li><a href="#" data-section="about-us" class="active">About</a></li>
-          <li><a href="#" data-section="skills">Skills</a></li>
-          <li><a href="#" data-section="gallery">Gallery</a></li>
-          <li><a href="#" data-section="timeline">Timeline</a></li>
-          <li><a href="#" data-section="features">Features</a></li>
-          <li><a href="#" data-section="testimonials">Testimonials</a></li>
-        </ul>
+        <div class="links-container">
+          <ul class="links">
+            <li><a href="#" data-section="about-us" class="active">About</a></li>
+            <li><a href="#" data-section="skills">Skills</a></li>
+            <li><a href="#" data-section="gallery">Gallery</a></li>
+            <li><a href="#" data-section="timeline">Timeline</a></li>
+            <li><a href="#" data-section="features">Features</a></li>
+            <li><a href="#" data-section="testimonials">Testimonials</a></li>
+          </ul>
+          <button class="toggle-menu">
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
       </div>
     </div>
     <div class="introdaction-text">