From 84ccb953fdbf58a2e50b18b4ef72b5168a002bca Mon Sep 17 00:00:00 2001 From: timosahenru Date: Mon, 27 Jul 2026 11:52:35 +0100 Subject: [PATCH 1/5] header with a hamburger feature for small screens --- .../templates/_base.html | 247 ++++++++++++++++-- 1 file changed, 228 insertions(+), 19 deletions(-) diff --git a/bpd-student-ambassador-program/templates/_base.html b/bpd-student-ambassador-program/templates/_base.html index f30a6fe..77f87af 100644 --- a/bpd-student-ambassador-program/templates/_base.html +++ b/bpd-student-ambassador-program/templates/_base.html @@ -1,19 +1,228 @@ -{% extends "base_templates/_base.html" %} -{% block head %} -{{super()}} - -{% endblock %} -{% block header %} - -{% endblock %} -{% block footer %} - -{% endblock %} + + + + + + Black Python Devs Student Ambassadorial Program + + + + + + + + + + + \ No newline at end of file From 07e96c17a9f628f865eb1b37acce89e32bd7ab51 Mon Sep 17 00:00:00 2001 From: timosahenru Date: Thu, 30 Jul 2026 18:00:30 +0100 Subject: [PATCH 2/5] included header --- bpd-student-ambassador-program/app.py | 14 +- .../static/style.css | 106 +++++++- .../templates/_base.html | 253 ++---------------- .../templates/index.html | 7 +- 4 files changed, 141 insertions(+), 239 deletions(-) diff --git a/bpd-student-ambassador-program/app.py b/bpd-student-ambassador-program/app.py index 53add03..dc1b0a3 100644 --- a/bpd-student-ambassador-program/app.py +++ b/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": "/" + } ] }) diff --git a/bpd-student-ambassador-program/static/style.css b/bpd-student-ambassador-program/static/style.css index 9c9be50..f98280a 100644 --- a/bpd-student-ambassador-program/static/style.css +++ b/bpd-student-ambassador-program/static/style.css @@ -1,14 +1,114 @@ + * { + 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; -} \ No newline at end of file + +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; + } \ No newline at end of file diff --git a/bpd-student-ambassador-program/templates/_base.html b/bpd-student-ambassador-program/templates/_base.html index 77f87af..3e2fa36 100644 --- a/bpd-student-ambassador-program/templates/_base.html +++ b/bpd-student-ambassador-program/templates/_base.html @@ -1,228 +1,29 @@ - - - - - - Black Python Devs Student Ambassadorial Program - - - - - - - +{% endblock %} +{% block footer %} + +{% endblock %} \ No newline at end of file diff --git a/bpd-student-ambassador-program/templates/index.html b/bpd-student-ambassador-program/templates/index.html index 8b2ab50..70401f4 100644 --- a/bpd-student-ambassador-program/templates/index.html +++ b/bpd-student-ambassador-program/templates/index.html @@ -2,14 +2,11 @@ {% extends '_base.html' %} {% block content %}
+

{{SITE_TITLE}}

-

Site Render_Engine Site Built Successfully

Render Engine Logo

Pages Exist!

You can view your example page at Example Page.

-

Blog Posts Exist!

-

You can view your Example Blog Post.

-

You can also view the Blog Archive.

-{% endblock %} +{% endblock %} \ No newline at end of file From 9632625d702dc2ad81cbcd11c6d6afc566ea87f8 Mon Sep 17 00:00:00 2001 From: timosahenru Date: Sun, 2 Aug 2026 10:11:44 +0100 Subject: [PATCH 3/5] redundant code removed --- bpd-student-ambassador-program/templates/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/bpd-student-ambassador-program/templates/index.html b/bpd-student-ambassador-program/templates/index.html index 70401f4..1b608a3 100644 --- a/bpd-student-ambassador-program/templates/index.html +++ b/bpd-student-ambassador-program/templates/index.html @@ -4,9 +4,6 @@

{{SITE_TITLE}}

- Render Engine Logo -

Pages Exist!

-

You can view your example page at Example Page.

{% endblock %} \ No newline at end of file From 6b2c27c423360bad64960ca64ca570e6bbdd41a9 Mon Sep 17 00:00:00 2001 From: timosahenru Date: Sun, 2 Aug 2026 10:14:57 +0100 Subject: [PATCH 4/5] styling for hamburger in smaller screens --- .../static/style.css | 69 ++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/bpd-student-ambassador-program/static/style.css b/bpd-student-ambassador-program/static/style.css index f98280a..b634bf1 100644 --- a/bpd-student-ambassador-program/static/style.css +++ b/bpd-student-ambassador-program/static/style.css @@ -111,4 +111,71 @@ nav { .logo i { color: #e8a838; font-size: 1.8rem; - } \ No newline at end of file + } + + + +/* --- 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; + } +} \ No newline at end of file From 72ab8f48e8b2ebfdb843c12fdae21092d05f18cf Mon Sep 17 00:00:00 2001 From: timosahenru Date: Sun, 2 Aug 2026 10:17:16 +0100 Subject: [PATCH 5/5] styling for hamburger in smaller screens --- .../templates/_base.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/bpd-student-ambassador-program/templates/_base.html b/bpd-student-ambassador-program/templates/_base.html index 3e2fa36..9ed1aef 100644 --- a/bpd-student-ambassador-program/templates/_base.html +++ b/bpd-student-ambassador-program/templates/_base.html @@ -10,7 +10,13 @@ -
    + + +