From 0eadc31d6c57de9df722ba1b914eb455579716fc Mon Sep 17 00:00:00 2001
From: Sai pradyumna Goud Chiragoni
 <143107589+Saipradyumnagoud@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:43:48 +0000
Subject: [PATCH] made Nav Bar Responsive for mobile view also

---
 index.html |  39 ++--
 style.css  | 518 ++++++++++-------------------------------------------
 2 files changed, 112 insertions(+), 445 deletions(-)

diff --git a/index.html b/index.html
index 4564d45e..40b70920 100644
--- a/index.html
+++ b/index.html
@@ -159,50 +159,34 @@
   <div class="main">
     <div class="container">
       <div class="radio-wrapper">
-        <!-- <input type="radio" id="value-1" name="btn" class="input"> -->
         <div class="btn">
           <a id="aid" class="nav-link" href="">Home</a>
-          <!-- <span aria-hidden="">HOME</span> -->
-          <!-- <span aria-hidden="" class="btn__glitch">_Cyber🦾</span> -->
           <label class="number"></label>
         </div>
       </div>
       <div class="radio-wrapper">
-        <!-- <input type="radio" checked="true" id="value-2" name="btn" class="input"> -->
         <div class="btn">
-          
-        <a id="aid" class="nav-link" href="about.html">
-          About
-        </a>
-          <!-- <span aria-hidden=""></span> -->
-          <!-- <span aria-hidden="" class="btn__glitch">ABOUT</span> -->
+          <a id="aid" class="nav-link" href="about.html">About</a>
           <label class="number"></label>
         </div>
-
       </div>
       <div class="radio-wrapper">
-        <!-- <input type="radio" id="value-3" name="btn" class="input"> -->
         <div class="btn">
-          <a id="aid" class="nav-link" href="contact.html">
-          Contact
-        </a>
-          
-          <!-- <span aria-hidden=""></span> -->
-          <!-- <span aria-hidden="" class="btn__glitch">CONTACT</span> -->
+          <a id="aid" class="nav-link" href="contact.html">Contact</a>
           <label class="number"></label>
         </div> 
       </div>
       <div class="radio-wrapper">
-        <!-- <input type="radio" id="value-2" name="btn" class="input"> -->
-        <!-- <input type="radio" id="value-3" name="btn" class="input"> -->
         <div class="btn" style="width: 115% !important;">
           <a id="aid" class="nav-link" href="contributor.html">Contributors</a>
-          <!-- <span aria-hidden=""></span> -->
-          <!-- <span aria-hidden="" class="btn__glitch">CONTACT</span> -->
           <label class="number"></label>
         </div> 
       </div>
-
+    </div>
+    <div class="hamburger" id="hamburger">
+      <div class="line"></div>
+      <div class="line"></div>
+      <div class="line"></div>
     </div>
     <main>
 
@@ -316,7 +300,16 @@ <h1 class="no-result-heading">No Result Found</h1>
   <script src="./assets/js/contributors.js"></script>
   <script src="./assets/js/mouse_transition.js"></script>
   <script src="scrolldownprogressbar.js"></script>
+  <script>
+    const hamburger = document.getElementById('hamburger');
+const container = document.querySelector('.container');
+
+hamburger.addEventListener('click', () => {
+  container.classList.toggle('open');
+  hamburger.classList.toggle('open');
+});
 
+  </script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
index 974fe0b4..b02780ec 100644
--- a/style.css
+++ b/style.css
@@ -1,440 +1,114 @@
+/* Common Styles */
 .container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
-  }
-  
-  .radio-wrapper {
-    position: relative;
-    height: 55px;
-    width: 110px;
-    margin: 3px;
-  }
-  
-  .radio-wrapper .input {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    cursor: pointer;
-    z-index: 10;
-    opacity: 0;
-  }
-
-  .nav-wrapper{
-    position:fixed;
-    top: 0px;
-    left: 0;
-    width: 100%;
-    height: px;
-    /* background-color: black; */
-    z-index: 999;
-  }
-  .progress-bar{
-    height: 7px;
-    width: 0;
-    background-color: #f523f5;
-    opacity: 0.8;
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-    box-shadow: 0 0 20px #23bdf5,
-      0 0 60px #f523f5,
-      0 0 100px #23bdf5;
-  }
-
-  @keyframes colors {
-    0% {
-        filter: hue-rotate(0deg);
-    }
-
-    100% {
-        filter: hue-rotate(360deg);
-    }
-}
-  
-  .btn {
-    /* --primary: #ff184c;
-    --shadow-primary: #fded00;
-    --color: white;
-    --font-size: 50px;
-    --shadow-primary-hue: 180;
-    --shadow-secondary-hue: 60;
-    --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
-    --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
-    --border: 5px;
-    --shimmy-distance: 5;
-    --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
-    --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
-    --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
-    --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
-    --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
-    --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
-    --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
-    color: var(--color);
-    text-transform: uppercase; */
-    font-size: 15px;
-    /* letter-spacing: 1px; */
-    position: relative;
-    font-weight: 900;
-    width: 100%;
-    height: 100%;
-    line-height: 38px;
-    text-align: center;/*
-    transition: background 0.2s, 0.3s;
-    */
-  } 
-  .btn a{
-    text-decoration: none;
-    display: block;
-    /* padding: 5px 0; */
-    font-family: 'Poppins';
-    font-size: 20px;
-    /* line-height: 1; */
-    font-weight: bold;
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-image: linear-gradient(to right, #23abd4, #23abd4 50%, #fff 50%);
-    background-size: 200% 100%;
-    background-position: -100%;
-    transition: all 0.3s ease-in-out;
-  }
-  .nav-link:hover {
-     text-shadow: 0 0 3px #fff,0 0 10px rgba(167, 45, 237, 0.3), 0 0 20px rgba(167, 45, 237, 0.4), 0 0 30px rgba(167, 45, 237, 0.5), 0 0 40px rgba(167, 45, 237, 0.6), 0 0 50px rgba(167, 45, 237, 0.7);
-  }
-  
-  .btn a:before{
-    display: block;
-    content: '';
-    width: 0;
-    height: 3px;
-    bottom: 5px;
-    left: 0;
-    bottom: -3px;
-    z-index: 0;
-    position: absolute;
-    background: #23abd4;
-    transition: all 0.3s ease-in-out;
-  }
-  .btn a:hover{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.radio-wrapper {
+  position: relative;
+  height: 55px;
+  width: 110px;
+  margin: 3px;
+}
+
+.btn {
+  font-size: 15px;
+  position: relative;
+  font-weight: 900;
+  width: 100%;
+  height: 100%;
+  line-height: 38px;
+  text-align: center;
+}
+
+.btn a {
+  text-decoration: none;
+  display: block;
+  font-family: 'Poppins';
+  font-size: 20px;
+  font-weight: bold;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(to right, #23abd4, #23abd4 50%, #fff 50%);
+  background-size: 200% 100%;
+  background-position: -100%;
+  transition: all 0.3s ease-in-out;
+}
+
+.nav-link:hover {
+  text-shadow: 0 0 3px #fff, 0 0 10px rgba(167, 45, 237, 0.3), 0 0 20px rgba(167, 45, 237, 0.4), 0 0 30px rgba(167, 45, 237, 0.5), 0 0 40px rgba(167, 45, 237, 0.6), 0 0 50px rgba(167, 45, 237, 0.7);
+}
+
+.btn a:before {
+  display: block;
+  content: '';
+  width: 0;
+  height: 3px;
+  bottom: 5px;
+  left: 0;
+  bottom: -3px;
+  z-index: 0;
+  position: absolute;
+  background: #23abd4;
+  transition: all 0.3s ease-in-out;
+}
+
+.btn a:hover {
   background-position: 0%;
-
-  }
-  .btn a:hover:before{
-    width: 100%;
-  }
-  /* .input:checked + .btn {
-    --primary: #6c3697;
-    --shadow-primary: #00e572;
-  } */
-  
-  /* .input:hover + .btn {
-    --primary: #006042;
-    --font-size: 11px;
-  }
-   */
-  /* .btn:after, .btn:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    clip-path: var(--clip);
-    z-index: -1;
-  } */
-  
-  /* .btn:before {
-    background: var(--shadow-primary);
-    transform: translate(var(--border), 0);
-  }
-  
-  .btn:after {
-    background: var(--primary);
-  } */
-/*   
-  .btn__tag {
-    position: absolute;
-    padding: 1px 4px;
-    letter-spacing: 1px;
-    line-height: 1;
-    bottom: -5%;
-    right: 5%;
-    font-weight: normal;
-    color: hsl(0, 0%, 0%);
-    font-size: var(--label-size);
-  }
-  
-  .btn__glitch {
-    position: absolute;
-    top: calc(var(--border) * -1);
-    left: calc(var(--border) * -1);
-    right: calc(var(--border) * -1);
-    bottom: calc(var(--border) * -1);
-    background: var(--shadow-primary);
-    text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
-    clip-path: var(--clip);
-    animation: glitch 2s infinite;
-    display: none;
-  }
-  
-  .input:hover + .btn .btn__glitch {
-    display: block;
-  }
-  
-  .input:checked + .btn .btn__glitch {
-    display: block;
-    animation: glitch 5s infinite;
-  }
-  
-  .btn__glitch:before {
-    content: '';
-    position: absolute;
-    top: calc(var(--border) * 1);
-    right: calc(var(--border) * 1);
-    bottom: calc(var(--border) * 1);
-    left: calc(var(--border) * 1);
-    clip-path: var(--clip);
-    background: var(--primary);
-    z-index: -1;
-  } */
-  .no-results-img{
-    width: 100%;
-  }
-  .no-result-heading{
-    color: #de6abb;
-    text-align: center;
-  }
-  .no-results-img2{
-    display: none;
-  }
-
-  
-  @keyframes glitch {
-    0% {
-      clip-path: var(--clip-one);
-    }
-  
-    2%, 8% {
-      clip-path: var(--clip-two);
-      transform: translate(calc(var(--shimmy-distance) * -1%), 0);
-    }
-  
-    6% {
-      clip-path: var(--clip-two);
-      transform: translate(calc(var(--shimmy-distance) * 1%), 0);
-    }
-  
-    9% {
-      clip-path: var(--clip-two);
-      transform: translate(0, 0);
-    }
-  
-    10% {
-      clip-path: var(--clip-three);
-      transform: translate(calc(var(--shimmy-distance) * 1%), 0);
-    }
-  
-    13% {
-      clip-path: var(--clip-three);
-      transform: translate(0, 0);
-    }
-  
-    14%, 21% {
-      clip-path: var(--clip-four);
-      transform: translate(calc(var(--shimmy-distance) * 1%), 0);
-    }
-  
-    25% {
-      clip-path: var(--clip-five);
-      transform: translate(calc(var(--shimmy-distance) * 1%), 0);
-    }
-  
-    30% {
-      clip-path: var(--clip-five);
-      transform: translate(calc(var(--shimmy-distance) * -1%), 0);
-    }
-  
-    35%, 45% {
-      clip-path: var(--clip-six);
-      transform: translate(calc(var(--shimmy-distance) * -1%));
-    }
-  
-    40% {
-      clip-path: var(--clip-six);
-      transform: translate(calc(var(--shimmy-distance) * 1%));
-    }
-  
-    50% {
-      clip-path: var(--clip-six);
-      transform: translate(0, 0);
-    }
-  
-    55% {
-      clip-path: var(--clip-seven);
-      transform: translate(calc(var(--shimmy-distance) * 1%), 0);
-    }
-  
-    60% {
-      clip-path: var(--clip-seven);
-      transform: translate(0, 0);
-    }
-  
-    31%, 61%, 100% {
-      clip-path: var(--clip-four);
-    }
-  }
-  
-  .number {
-    background: var(--shadow-primary);
-    color: #323232;
-    font-size: 5.5px;
-    font-weight: 700;
-    letter-spacing: 1px;
-    position: absolute;
-    width: 15px;
-    height: 6px;
-    top: 0;
-    left: 81%;
-    line-height: 6.2px;
-  }
-
-  .contact-container {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    width: 90%;
-    max-width: 600px;
-    text-align: center;
-    color: #ff7e5f;
-    position: relative;
-    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
-    margin: 20px auto; /* Center the container */
-}
-
-.contact-container h1 {
-    margin-bottom: 20px;
-    font-size: 2em;
-    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00, 0 0 50px #ffff00, 0 0 60px #ffff00, 0 0 70px #ffff00;
-}
-
-.contact-form .form-group {
-    margin-bottom: 15px;
 }
 
-.contact-form label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-    color: white;
+.btn a:hover:before {
+  width: 100%;
 }
 
-.contact-form input,
-.contact-form textarea {
-    width: 100%;
-    padding: 10px;
-    border: none;
-    border-radius: 5px;
-    background: rgba(255, 255, 255, 0.2);
-    color: #fff;
-    font-size: 1em;
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 1001;
 }
 
-.contact-form input:focus,
-.contact-form textarea:focus {
-    outline: none;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    background: rgba(255, 255, 255, 0.3);
+.hamburger .line {
+  width: 30px;
+  height: 3px;
+  background: #23abd4;
+  margin: 5px 0;
+  transition: all 0.3s ease-in-out;
 }
 
-.contact-form button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    background: #ff7e5f;
-    color: #fff;
-    font-size: 1em;
-    cursor: pointer;
-    transition: background 0.3s;
-}
-
-.contact-form button:hover {
-    background: #ff6a3d;
-}
-
-.popup {
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
     display: none;
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 1000;
-    padding: 10px;
-    background: linear-gradient(45deg, #ff6ec4, #7873f5);
-    border-radius: 5px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.popup button {
-    color: #fff;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 3px;
-    font-size: 1em;
-    cursor: pointer;
-    transition: background 0.3s;
-}
-
-.popup button:hover {
-    background: linear-gradient(45deg, #34a856, #249293);
-}
-
-.popup-message {
-    font-size: 1em;
-    color: #fff;
-    margin-right: 10px;
-}
-
-#contact-us {
+  }
+  
+  .hamburger {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 5rem;
-    margin-bottom: 3rem;
-    padding: 0 10px; /* Add padding for smaller screens */
-}
+  }
 
-#sub {
+  .container.open {
     display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .contact-container {
-        width: 100%;
-        padding: 15px;
-    }
+  }
 
-    .contact-container h1 {
-        font-size: 1.5em;
-    }
+  .hamburger.open .line:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+  }
 
-    .contact-form input,
-    .contact-form textarea {
-        font-size: 0.9em;
-    }
+  .hamburger.open .line:nth-child(2) {
+    opacity: 0;
+  }
 
-    .contact-form button {
-        padding: 8px 16px;
-        font-size: 0.9em;
-    }
+  .hamburger.open .line:nth-child(3) {
+    transform: rotate(-45deg) translate(5px, -5px);
+  }
 }
-
-