Merge pull request #9 from Bhumitg07205/Navbar_changes

Thank you for the contribution, the PR has been successfully merged!!
cocomantis · Oct 9, 2024 · 58deb75 · 58deb75
2 parents 6c82de7 + cb59dba
commit 58deb75
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 105 deletions.
diff --git a/Contributor_list.json b/Contributor_list.json
@@ -1,10 +1,10 @@
-[
+
     {
         "name": "Ridhima",
         "action": "Created the website"
     },
     {
         "name": "Dhruva Bisht",
         "action": "Removed a bug from the website to allow contributor list to be displayed."
-    }
+    };
 ]
diff --git a/Website/HomePage.css b/Website/HomePage.css
@@ -0,0 +1,150 @@
+* {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      scroll-behavior: smooth;
+    }
+
+    body {
+
+      font-family: 'Arial', sans-serif;
+      background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
+            background-size: 300% 300%;
+            animation: gradientMove 10s ease infinite;
+            color: white;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+
+    /* Navbar styling */
+    nav{
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+    .nav-links {
+      position: fixed;
+      width: 100%;
+      margin-right: 10000px;
+
+      top: 0;
+      background-color: #007acc;
+      padding: 10px 0;
+      z-index: 1000;
+
+    }
+    .nav-links{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #8E44AD;
+        padding: 20px 15px;
+        border-radius: 12px;
+        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+      }
+      .nav-links li{
+        list-style: none;
+        margin: 0 12px; 
+      }
+      .nav-links li a{
+        position: relative;
+        color: #FAFAFA;
+        font-size: 20px;
+        font-weight: 500;
+        padding: 6px 0;
+        text-decoration: none;
+      }
+      .nav-links li a:before{
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 0%;
+        background: linear-gradient(45deg, #ff007f, #ff8c00, #00ffbf, #00f7ff, #9400d3, #ff007f);
+        background-size: 100% 100%;
+        animation: gradientMove 1s ease infinite;
+        border-radius: 12px;
+        transition: all 0.4s ease;
+      }
+      .nav-links li a:hover:before{
+        width: 100%;
+      }
+      .nav-links li.center a:before{
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .nav-links li.upward a:before{
+        width: 100%;
+        bottom: -5px;
+        opacity: 0;
+      }
+      .nav-links li.upward a:hover:before{
+        bottom: 0px;
+        opacity: 1;
+      }
+      .nav-links li.forward a:before{
+        width: 100%;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.4s ease;
+      }
+      .nav-links li.forward a:hover:before{
+        transform: scaleX(1);
+        transform-origin: left;
+      }
+
+    /* Section styling */
+    section {
+      padding: 80px 0;
+      text-align: center;
+    }
+
+    h2 {
+      font-size: 36px;
+      color: white;
+      margin-bottom: 20px;
+    }
+
+    .contributor-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+      padding: 20px;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+
+    .contributor {
+      background-color: #8E44AD;
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+
+    .contributor:hover {
+      transform: scale(1.05);
+    }
+
+    .contributor img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .contributor a {
+      text-decoration: none;
+      color: white;
+      font-size: 18px;
+      font-weight: bold;
+      margin-top: 10px;
+      display: block;
+    }
+
+    /* Smooth animation when scrolling */
+    html {
+      scroll-behavior: smooth;
+    }
diff --git a/Website/HomePage.html b/Website/HomePage.html
@@ -4,114 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Hacktoberfest Contributors</title>
-  <style>
-    /* Basic reset and smooth scrolling */
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      scroll-behavior: smooth;
-    }
-
-    body {
-      font-family: 'Arial', sans-serif;
-      background-color: #f0f8ff;
-    }
-
-    /* Navbar styling */
-    nav {
-      position: fixed;
-      top: 0;
-      width: 100%;
-      background-color: #007acc;
-      padding: 10px 0;
-      z-index: 1000;
-    }
-
-    nav ul {
-      list-style-type: none;
-      display: flex;
-      justify-content: center;
-    }
-
-    nav ul li {
-      margin: 0 20px;
-    }
-
-    nav ul li a {
-      text-decoration: none;
-      color: white;
-      font-size: 18px;
-      transition: color 0.3s;
-    }
-
-    nav ul li a:hover {
-      color: #ffd700;
-    }
-
-    /* Section styling */
-    section {
-      padding: 80px 0;
-      text-align: center;
-    }
-
-    h2 {
-      font-size: 36px;
-      color: #333;
-      margin-bottom: 20px;
-    }
-
-    .contributor-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-      gap: 20px;
-      padding: 20px;
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-
-    .contributor {
-      background-color: white;
-      border-radius: 10px;
-      padding: 20px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-    }
-
-    .contributor:hover {
-      transform: scale(1.05);
-    }
-
-    .contributor img {
-      width: 100%;
-      height: 200px;
-      object-fit: cover;
-      border-radius: 10px;
-    }
-
-    .contributor a {
-      text-decoration: none;
-      color: #007acc;
-      font-size: 18px;
-      font-weight: bold;
-      margin-top: 10px;
-      display: block;
-    }
-
-    /* Smooth animation when scrolling */
-    html {
-      scroll-behavior: smooth;
-    }
-  </style>
+  <link rel="stylesheet" href="./HomePage.css">
 </head>
 <body>
 
   <!-- Navbar -->
   <nav>
-    <ul>
-      <li><a href="#contributors">Contributors</a></li>
-      <li><a href="#kittens">Kittens</a></li>
-      <li><a href="#puppies">Puppies</a></li>
+    <ul class="nav-links">
+      <li><a href="#">Dashboard</a></li>
+      <li class="center"><a href="#contributors">Contributors</a></li>
+      <li class="upward"><a href="#kittens">Kittens</a></li>
+      <li class="forward"><a href="#puppies">Puppies</a></li>
     </ul>
   </nav>
 
@@ -152,6 +55,9 @@ <h2>Cute Puppies</h2>
         <a href="https://www.dogstrust.ie/">Puppy Cuteness Overload</a>
       </div>
     </div>
+    <footer>
+      <p> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
+  </footer>
   </section>
 
   <!-- JavaScript to dynamically load contributors -->
@@ -183,6 +89,7 @@ <h2>Cute Puppies</h2>
           });
         });
     });
+    document.getElementById('year').textContent = new Date().getFullYear();
   </script>
 </body>
 </html>