header with a hamburger feature for small screens

bpd-student-ambassador-program/app.py

@@ -19,17 +19,21 @@
     "SITE_URL":"https://students.blackpythondevs.com",
     "NAVIGATION":[
         {
-            "name": "Home",
+            "name": "Join",
             "url": "/",
         },
         {
-            "name": "Collection Page",
-            "url": "/example-page.html",
+            "name": "About",
+            "url": "/",
         },
         {
-            "name": "Blog",
-            "url": "/blog/blog.html",
+            "name": "Cohort",
+            "url": "/",
         },
+        {
+            "name": "What is BPD ?",
+            "url": "/"
+        }
     ]
 })
 

bpd-student-ambassador-program/static/style.css

@@ -1,14 +1,181 @@
+  * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 body {
     font-family: "Arial", "sans-serif";
+    line-height: 1.6;
+            color: #1e2b3c;
+            background: #f8faff;
+            padding: 80px;
+
+
 }
+
+ .btn-primary {
+            display: inline-block;
+            background: #1a3a5c;
+            color: #ffffff;
+            padding: 14px 36px;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 1rem;
+            letter-spacing: 0.5px;
+            transition: background 0.3s, transform 0.2s;
+            border: none;
+            cursor: pointer;
+        }
+
 .container {
     margin: auto;
     width: 85%;
+     max-width: 1200px;
+            padding: 0 24px;
 }
 footer {
     margin-top: 2em;
     text-align: center;
 }
-nav > span {
-    margin: 0 0.5em;
+
+nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 0;
+
+        }
+        .nav-links {
+            list-style: none;
+            display: flex;
+            align-items: center;
+            gap: 32px;
+        }
+
+        a {
+             text-decoration: none;
+            color: inherit;
+        }
+
+        .nav-links a {
+            font-weight: 500;
+            color: #2c3e50;
+            transition: color 0.3s;
+            font-size: 1rem;
+            position: relative;
+        }
+
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -4px;
+            width: 0;
+            height: 2px;
+            background: #e8a838;
+            transition: width 0.3s;
+        }
+
+        .nav-links a:hover {
+            color: #1a3a5c;
+        }
+
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+
+        .nav-links .btn-primary {
+            padding: 10px 28px;
+            font-size: 0.9rem;
+        }
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+            background: rgba(255, 255, 255, 0.92);
+            backdrop-filter: blur(8px);
+            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
+            transition: box-shadow 0.3s;
+        }
+         .logo {
+            font-size: 1.6rem;
+            font-weight: 700;
+            color: #1a3a5c;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .logo i {
+            color: #e8a838;
+            font-size: 1.8rem;
+        }
+
+
+
+/* --- Hamburger Toggle Styling --- */
+.menu-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 21px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    z-index: 1001;
+}
+
+.menu-toggle .bar {
+    height: 3px;
+    width: 100%;
+    background-color: #1a3a5c;
+    border-radius: 10px;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Transform hamburger to an 'X' when active */
+.menu-toggle.active .bar:nth-child(1) {
+    transform: translateY(9px) rotate(45deg);
+}
+.menu-toggle.active .bar:nth-child(2) {
+    opacity: 0;
+}
+.menu-toggle.active .bar:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+}
+
+/* --- Mobile Responsive Layout --- */
+@media (max-width: 768px) {
+
+    body {
+        padding: 80px 0 24px 0;
+    }
+
+    .menu-toggle {
+        display: flex;
+    }
+
+    .nav-links {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #ffffff;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+        padding: 24px 0;
+        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
+
+
+        display: none;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
 }

bpd-student-ambassador-program/templates/_base.html

@@ -4,16 +4,42 @@
 <link rel="stylesheet" href="/static/style.css">
 {% endblock %}
 {% block header %}
-<nav class="container">
+<header>
+    <div class="container">
+    <nav>
+           <a href="https://blackpythondevs.com/" class="logo">
+                     Black Python Dev
+                </a>
+
+                <button class="menu-toggle" id="menu-toggle" aria-label="Toggle Navigation">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </button>
+        <ul class="nav-links" id="nav-links">
     {% for link in NAVIGATION %}
-    <span><a href="{{link.url}}">{{link.name}}</a></span>
+     <li><a href="{{ link.url }}">{{ link.name }}</a></li>
     {% endfor %}
-</nav>
+    <li><a href="#" class="btn-primary" style="color: #ffffff;">Apply Now</a></li>
+    </ul>
+    </nav>
+</div>
+</header>
+
+<script> document.addEventListener("DOMContentLoaded", () => {
+        const toggleBtn = document.getElementById("menu-toggle");
+        const navLinks = document.getElementById("nav-links");
+
+        toggleBtn.addEventListener("click", () => {
+            navLinks.classList.toggle("active")
+            toggleBtn.classList.toggle("active")
+        });
+    });</script>
 {% endblock %}
 {% block footer %}
 <footer class="container">
     <hr />
     <p><a href="{{SITE_URL}}">{{SITE_URL}}</a></p>
     <p>Built with <a href="https://github.com/render-engine/render-engine/">Render Engine</a></p>
 </footer>
-{% endblock %}
+{% endblock %}

bpd-student-ambassador-program/templates/index.html

@@ -2,14 +2,8 @@
 {% extends '_base.html' %}
 {% block content %}
 <div class="container">
+
     <h1>{{SITE_TITLE}}</h1>
-    <h2>Site Render_Engine Site Built Successfully</h2>
-    <img src="/static/render-engine-logo.png" alt="Render Engine Logo"/>
-<h2>Pages Exist!</h2>
-<p>You can view your example page at <a href="/example-page.html">Example Page</a>.</p>
-<h2>Blog Posts Exist!</h2>
-<p>You can view your <a href="/blog/example-blog-post.html">Example Blog Post</a>.</p>
-<p>You can also view the <a href="/blog/blog.html">Blog Archive</a>.</p>
 
 </div>
-{% endblock %}
+{% endblock %}