Skip to content

header with a hamburger feature for small screens #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TimOsahenru wants to merge 1 commit into
base: main
Choose a base branch
from
+228 −19
Open

header with a hamburger feature for small screens #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 228 additions & 19 deletions bpd-student-ambassador-program/templates/_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,228 @@
{% extends "base_templates/_base.html" %}
{% block head %}
{{super()}}
<link rel="stylesheet" href="/static/style.css">
{% endblock %}
{% block header %}
<nav class="container">
{% for link in NAVIGATION %}
<span><a href="{{link.url}}">{{link.name}}</a></span>
{% endfor %}
</nav>
{% 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 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Black Python Devs Student Ambassadorial Program</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #1e2b3c;
background: #f8faff;
}

a {
text-decoration: none;
color: inherit;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}

.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;
}

.btn-primary:hover {
background: #0f2a44;
transform: translateY(-2px);
}

.btn-secondary {
display: inline-block;
background: transparent;
color: #1a3a5c;
padding: 12px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid #1a3a5c;
transition: background 0.3s, color 0.3s;
}

.btn-secondary:hover {
background: #1a3a5c;
color: #fff;
}

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;
}

header.scrolled {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
}

.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;
}

.nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 32px;
}

.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;
}

.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}

.hamburger span {
width: 28px;
height: 3px;
background: #1a3a5c;
border-radius: 4px;
transition: 0.3s;
}


@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 72px;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
flex-direction: column;
padding: 32px 24px;
gap: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
transform: translateY(-120%);
transition: transform 0.4s ease;
border-radius: 0 0 20px 20px;
}

.nav-links.open {
transform: translateY(0);
}

.hamburger {
display: flex;
}
}
</style>
</head>
<body>


<header id="header">
<div class="container">
<nav>
<a href="#" class="logo">
Black Python Dev
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#">Join</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Cohort</a></li>
<li><a href="https://blackpythondevs.com/">What is BPD ?</a></li>
<li><a href="#" class="btn-primary" style="color: #ffffff;">Apply Now</a></li>
</ul>
<div class="hamburger" id="hamburger" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>

<script>
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
});

</script>
</body>
</html>