Merge pull request Code-Social#3 from Rizwan102003/rizz

initial commit
Subhajit-2023-44 · Aug 12, 2024 · 1eceaf0 · 1eceaf0
2 parents f8fcadd + d711222
commit 1eceaf0
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 17 deletions.
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.html b/index.html
@@ -5,30 +5,36 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="styles.css" type="text/css" />
+        <script src="script.js" defer></script>
     </head>
     <body>
-     <!--
-        <nav class="navbar" href="index.html"><img src="White logo.png" class="logo"></a>
+
+        <nav class="navbar">
+            <a href="index.html"><img src="/images/logo.png" class="logo"></a>
             <ul>
-                <li><a>Who Are We?</a></li>
-                <li><a>Events</a></li> // upcoming events on top & past events when you scroll down, mention give my certificate, a link with past events page
-                <li><a>Social Media</a></li>
-                <li>Testimonials<li>
-                <li><a>Join our Community</a></li>
-                <li><a>Contact Us!<a></li> (for collabs)
+                <li><a href="#">Who Are We?</a></li>
+                <li><a href="#">Events</a></li> <!-- Upcoming events on top & past events when you scroll down, link to past events page -->
+                <li><a href="#">Social Media</a></li>
+                <li><a href="#">Contact Us!</a></li> <!-- For collaborations -->
 
-                Dropdown
-                <li>Join our Team</li>
-                <li>Sign up to be a Speaker</li>
-                <li>Meet the Team</li>
+                <!-- Dropdown -->
+                <li>
+                    <a href="#">Join our Community</a>
+                    <ul class="dropdown">
+                        <li><a href="#">Join our Team</a></li>
+                        <li><a href="#">Sign up to be a Speaker</a></li>
+                        <li><a href="#">Meet the Team</a></li>
+                    </ul>
+                </li>
             </ul>
         </nav>
+
         <footer>
             <ul>
                 <li>Network Partners</li>
-                <li>Our Past Collabs></li>
-            
-</footer>
-        -->
+                <li>Our Past Collabs</li>
+            </ul>
+        </footer>
+
     </body>
-    </html>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+// JavaScript for dropdown menu functionality
+
+document.addEventListener('DOMContentLoaded', () => {
+    const navbarItems = document.querySelectorAll('.navbar ul li');
+
+    navbarItems.forEach(item => {
+        item.addEventListener('mouseover', () => {
+            const dropdown = item.querySelector('.dropdown');
+            if (dropdown) {
+                dropdown.style.display = 'block';
+            }
+        });
+
+        item.addEventListener('mouseout', () => {
+            const dropdown = item.querySelector('.dropdown');
+            if (dropdown) {
+                dropdown.style.display = 'none';
+            }
+        });
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,96 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+/* Navbar Styling */
+.navbar {
+    background-color: #333;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    height: 40px;
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+.navbar ul li {
+    margin-left: 20px;
+}
+
+.navbar ul li a {
+    text-decoration: none;
+    color: #fff;
+    padding: 8px 15px;
+    transition: background-color 0.3s ease;
+}
+
+.navbar ul li a:hover {
+    background-color: #555;
+    border-radius: 4px;
+}
+
+/* Dropdown Menu */
+.navbar ul li:hover .dropdown {
+    display: block;
+}
+
+.dropdown {
+    display: none;
+    position: absolute;
+    background-color: #333;
+    padding: 10px;
+    border-radius: 4px;
+    z-index: 1;
+}
+
+.dropdown li {
+    margin: 10px 0;
+}
+
+.dropdown li a {
+    color: #fff;
+    padding: 5px 10px;
+}
+
+.dropdown li a:hover {
+    background-color: #555;
+    border-radius: 4px;
+}
+
+/* Footer Styling */
+footer {
+    background-color: #333;
+    padding: 20px;
+    color: #fff;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+footer ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+}
+
+footer ul li {
+    margin: 0 20px;
+    text-align: center;
+}