Merge pull request #408 from ANKeshri/fix/menu-icon-in-contact-and-te…

…am-page fixed menu icon not appearing in contact and team page and hence making it responsive
mdazfar2 · Jun 13, 2024 · 43c5fae · 43c5fae
2 parents 6b69a25 + de5e05b
commit 43c5fae
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 3 deletions.
diff --git a/website2.0/contactus.html b/website2.0/contactus.html
@@ -90,11 +90,11 @@
                     <button class="sponsor-btn">Sponsor <i id="heart"  class="fas fa-heart"></i></button>
                   </a>  
             </div>
-            <!-- <div class="hamburger" id="hamburger">
+         <div class="hamburger" id="hamburger">
                 <div></div>
                 <div></div>
                 <div></div>
-            </div> -->
+            </div> 
         </nav>
     </header>
     <ul class="nav-links1" id="navlinks1">

diff --git a/website2.0/contributor.css b/website2.0/contributor.css
@@ -368,4 +368,220 @@ a{
       height: 66px;
       position: relative;
       top: 20px;
-    }
+    }
+    @media only screen and (max-width:987px){
+      .nav-links{
+          display: none !important;
+      }
+
+      .hamburger{
+        display: block !important;
+      }
+      /* nav{
+          gap: 30%;
+      } */
+      .nav-links1 li a {
+          text-decoration: none;
+          color: #000;
+          padding: 10px 15px;
+          font-size: x-large;
+
+      }
+  }
+  .isDisplay{
+    display: none;
+}
+.active{
+    animation: animate forwards ease-in 0.2s;
+    list-style: none;
+    display: flex;
+    gap: 20px;
+    padding: 10px 20px;
+    background-color: #fdd76b;
+    flex-direction: column;
+align-items: center;
+text-decoration: none;
+
+    /* box-shadow: 0 4px 6px #FF7D1F; */
+    width: 100%;
+}
+  @media only screen and (max-width:329px){
+    .hamburger{
+        width: 100% !important;
+
+    }
+    .hamburger div{
+        position: relative;
+        left: 80%;
+    }
+    nav{
+        flex-direction: column-reverse;
+    }
+    .isDisplay{
+        display: block;
+    }
+    .conte{
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    .nav-actions{
+
+        display: none !important;
+    }
+    .sponsor-btn{
+        font-size: 16px !important;
+        width: 114px !important;
+        height: 46px !important;
+    }
+    .star-button{
+        font-size: 16px !important;
+        width: 114px !important ;
+    }
+}
+@media only screen and (max-width:300px) {
+
+
+    nav{
+        gap: 2% !important;
+    }
+   }
+@media only screen and (max-width:409px) {
+    nav{
+        gap: 5% !important;
+    }
+    .hamburger{
+        width: 100% !important;
+
+    }
+    .logo img{
+        top: 46px !important;
+    }
+    .hamburger div{
+        position: relative;
+        left: 80%;
+    }
+    nav{
+        flex-direction: column-reverse;
+    }
+    .isDisplay{
+        display: block;
+    }
+    .conte{
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    .nav-actions{
+
+        display: none !important;
+    }
+    .sponsor-btn{
+        font-size: 16px !important;
+        width: 114px !important;
+        height: 46px !important;
+    }
+    .star-button{
+        font-size: 16px !important;
+        width: 114px !important ;
+    }
+
+    .logo img{
+        width: 60px !important;
+        height: 60px !important;
+    }
+    /* @keyframes animate {
+        from{
+            height: 0px;
+        }to{
+            height: 300px ;
+        }
+    } */
+}
+
+.nav-links1{
+    height: 0px ;
+    overflow: hidden;
+    display: flex;
+    position: relative;
+    top: 30px;
+    flex-direction: column;
+    justify-content: space-around;
+}
+@keyframes animate {
+  from{
+      height: 0px;
+  }to{
+      height: 270px ;
+  }
+}
+.hamburger{
+  display: none;
+  }
+  header {
+      width: 100%;
+      position: relative;
+      top: 0;
+      background-color: transparent;
+      padding: 10px 0;
+  }
+
+  nav {
+      display: flex;
+      justify-content: space-between !important;
+      flex-wrap: wrap;
+      justify-content: center;
+      position: relative;
+      align-items: center;
+      width: 90%;
+      margin: 0 auto;
+  }
+
+  .logo img {
+      /* height: 100px;
+      width: 100px; */
+      position: relative;
+      width: 89px;
+  height: 89px;
+  top: 10px;
+  gap: 0px;
+  opacity: 0px;
+
+
+  }
+
+  .nav-links {
+      list-style: none;
+      display: flex;
+      gap: 50px;
+      margin: 25px;
+      padding: 10px 20px;
+      background-color: #FDD86C;
+      border-radius: 25px;
+      flex-wrap: wrap;
+      justify-content: center;
+      box-shadow: 0 4px 6px #FF7D1F;
+  }
+
+  .nav-links li a {
+      text-decoration: none;
+      color: #000;
+      padding: 10px 15px;
+      font-size: x-large;
+
+  }
+  .nav-actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+  }
+  .hamburger div {
+    width: 25px;
+    height: 3px;
+    background-color: #333;
+    margin: 4px;
+    transition: 0.4s;
+}
+
diff --git a/website2.0/contributor.html b/website2.0/contributor.html
@@ -38,6 +38,20 @@
                 <button class="sponsor-btn">Sponsor <i id="heart"  class="fas fa-heart"></i></button>
               </a>          
               </div>
+              <div class="hamburger" id="hamburger">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div> 
+        </nav>
+    </header>
+    <ul class="nav-links1" id="navlinks1">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="abouts.html">About</a></li>
+        <li><a href="contributor.html">Team</a></li>
+        <li><a href="contactus.html">Contact</a></li>
+
+    </ul>
 
         </nav>
     </header>
@@ -537,5 +551,18 @@ <h2>Join our awesome team!</h2>
           speed: 400, 
       }); 
   </script>
+  <script>
+    document.getElementById('error').style.display='none'
+    </script>
+    <script>
+
+        // if(window.innerWidth>800){
+        //     document.getElementById("navlinks1").style.display='none'
+        // }
+        document.getElementById('hamburger').addEventListener('click',(e)=>{
+            let ele=document.getElementById("navlinks1")
+            document.querySelector('.nav-links1').classList.toggle('active');
+        })
+       </script>
 </body>
 </html>