Skip to content

Polish Header Menu and Global Colors #11

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

Merged
iRenanMatthew merged 1 commit into from
Oct 19, 2025
Merged

Polish Header Menu and Global Colors #11

Show file tree
Hide file tree
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
244 changes: 146 additions & 98 deletions app/home/templates/home/components/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,104 +1,152 @@
{% load static %}

<div class="navbar bg-base-100 shadow-sm">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
<nav class="absolute w-full z-10">
<div class="relative flex flex-col">
<div class="bg-orange-1 py-1.5 flex items-center justify-center gap-2">
<p class="text-white font-nunito text-sm font-semibold">
👋 Registration for PyCon APAC 2025 is now open!
</p>
<div class="w-[20px] h-[2px] bg-white"></div>
<div>
<a
class="text-white font-bantayog text-base flex gap-2 items-center"
href="#"
>
<p>RESERVE YOUR SEATS NOW</p>
<img
src="{% static 'img/vectors/ArrowCircleRight.svg' %}"
alt="kliN"
class="w-[24px] h-auto"
/>
</a>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li>
<a>About</a>
<ul class="p-2">
<li><a href="#">About the Conference</a></li>
<li><a href="#">About PythonAsia</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Venue</a></li>
</ul>
</li>
<li>
<a>Get Involved</a>
<ul class="p-2">
<li><a href="#">Become a Sponsor</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Speak at the Event</a></li>
</ul>
</li>
<li>
<a>Policies</a>
<ul class="p-2">
<li><a href="#">Code of Conduct</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</li>
<li>
<a>Attend</a>
<ul class="p-2">
<li><a href="#">Schedule</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Travel Info</a></li>
</ul>
</li>
</ul>
</div>
<a class="btn btn-ghost text-xl">
<img src="{% static 'img/logo.png' %}" alt="PythonAsia 2026" class="h-8 w-auto">
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li>
<details>
<summary>About</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#">About the Conference</a></li>
<li><a href="#">About PythonAsia</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Venue</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Get Involved</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#">Become a Sponsor</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Speak at the Event</a></li>
<div class="bg-transparent w-[1260px] mx-auto flex pt-8">
<div class="navbar-start">
<div class="dropdown">
<div
tabindex="0"
role="button"
class="btn btn-ghost lg:hidden"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
>
<li>
<a class="font-bantayog">About</a>
<ul class="p-2">
<li><a href="#" class="font-bantayog">About the Conference</a></li>
<li><a href="#" class="font-bantayog">About PythonAsia</a></li>
<li><a href="#" class="font-bantayog">Team</a></li>
<li><a href="#" class="font-bantayog">Venue</a></li>
</ul>
</li>
<li>
<a class="font-bantayog">Get Involved</a>
<ul class="p-2">
<li><a href="#" class="font-bantayog">Become a Sponsor</a></li>
<li><a href="#" class="font-bantayog">Volunteer</a></li>
<li><a href="#" class="font-bantayog">Speak at the Event</a></li>
</ul>
</li>
<li>
<a class="font-bantayog">Policies</a>
<ul class="p-2">
<li><a href="#" class="font-bantayog">Code of Conduct</a></li>
<li><a href="#" class="font-bantayog">Privacy Policy</a></li>
<li><a href="#" class="font-bantayog">Terms & Conditions</a></li>
</ul>
</li>
<li>
<a class="font-bantayog">Attend</a>
<ul class="p-2">
<li><a href="#" class="font-bantayog">Schedule</a></li>
<li><a href="#" class="font-bantayog">Speakers</a></li>
<li><a href="#" class="font-bantayog">Accommodation</a></li>
<li><a href="#" class="font-bantayog">Travel Info</a></li>
</ul>
</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Policies</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#">Code of Conduct</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>Attend</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#">Schedule</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Travel Info</a></li>
</div>
<a class="btn btn-ghost text-xl">
<img
src="{% static 'img/logo.png' %}"
alt="PythonAsia 2026"
class="h-8 w-auto w-full max-w-[233px]"
/>
</a>
</div>
<div class="flex justify-end items-center gap-7 w-full">
<div class="hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li>
<details>
<summary class="font-bantayog text-xl text-brown-1 font-light">About</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#" class="font-bantayog">About the Conference</a></li>
<li><a href="#" class="font-bantayog">About PythonAsia</a></li>
<li><a href="#" class="font-bantayog">Team</a></li>
<li><a href="#" class="font-bantayog">Venue</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary class="font-bantayog text-xl text-brown-1 font-light">Get Involved</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#" class="font-bantayog">Become a Sponsor</a></li>
<li><a href="#" class="font-bantayog">Volunteer</a></li>
<li><a href="#" class="font-bantayog">Speak at the Event</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary class="font-bantayog text-xl text-brown-1 font-light">Policies</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#" class="font-bantayog">Code of Conduct</a></li>
<li><a href="#" class="font-bantayog">Privacy Policy</a></li>
<li><a href="#" class="font-bantayog">Terms & Conditions</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary class="font-bantayog text-xl text-brown-1 font-light">Attend</summary>
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
<li><a href="#" class="font-bantayog">Schedule</a></li>
<li><a href="#" class="font-bantayog">Speakers</a></li>
<li><a href="#" class="font-bantayog">Accommodation</a></li>
<li><a href="#" class="font-bantayog">Travel Info</a></li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
<div class="navbar-end">
<a href="#" class="btn btn-primary btn-square lg:btn-wide">
<span class="hidden lg:inline-block material-symbols-outlined">sell</span>
<span class="lg:inline">Get Tickets</span>
</a>
</div>
<div class="">
<a
href="#"
class="btn btn-primary btn-square lg:btn-wide"
>
<span class="lg:inline font-bantayog py-3.5 px-8 text-xl">Get Tickets</span>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
2 changes: 1 addition & 1 deletion app/home/templates/home/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% include "home/components/navbar.html" %}

<main>
<section id="hero" class="text-white text-center flex items-center pt-20">
<section id="hero" class="text-white text-center flex items-center pt-[170px]">
<div class="container mx-auto px-6 bg-cover w-[960px] hero-content">
<div class="flex flex-col items-center space-y-8">
<img src="{% static 'img/vectors/kalinga-baybayin.svg' %}" alt="kliN" class="w-[189px] h-auto">
Expand Down
69 changes: 60 additions & 9 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,106 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');

:root {
/* === Orange / Accent === */
--orange-1: #BD4B06;
--orange-2: #F26D1D;
--orange-3: #FFA218;

/* === Neutral === */
--white: #FFFFFF;
--offwhite-1: #FFF9F2;
--offwhite-2: #FFF4E6;
--offwhite-3: #FFF3E5;

/* === Browns === */
--brown-1: #84400F;
--brown-2: #7C5E3B;
--brown-3: #B04301;

/* === Light Backgrounds === */
--bg-cream-1: #F8EBE5;
--bg-cream-2: #FFE7D5;
--bg-cream-3: #F8F0E5;

/* === Stroke / Borders === */
--stroke-1: #C9AC8A;
}

@font-face {
font-family: 'bantayog';
font-family: 'Bantayog';
src: url('/static/fonts/Bantayog-Light.otf') format('opentype');
font-weight: 300;
font-display: swap;
}

@font-face {
font-family: 'bantayog';
font-family: 'Bantayog';
src: url('/static/fonts/Bantayog-Regular.otf') format('opentype');
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: 'bantayog';
font-family: 'Bantayog';
src: url('/static/fonts/Bantayog-Semilight.otf') format('opentype');
font-weight: 600;
font-display: swap;
}


@font-face {
font-family: 'niwanguno';
font-family: 'Niwanguno';
src: url('/static/fonts/NiwangUno-Regular.otf') format('opentype');
font-weight: 400;
font-display: swap;
}


@font-face {
font-family: 'td_pinoy';
font-family: 'TD Pinoy';
src: url('/static/fonts/TD_Pinoy.otf') format('opentype');
font-weight: 500;
font-display: swap;
}


.font-bantayog {
font-family: 'bantayog', sans-serif;
font-family: 'Bantayog', sans-serif;
}

.font-niwanguno {
font-family: 'niwanguno', sans-serif;
font-family: 'Niwanguno', sans-serif;
}

.font-td_pinoy {
font-family: 'td_pinoy', sans-serif;
font-family: 'TD Pinoy ', sans-serif;
}

.font-nunito {
font-family: 'Nunito', sans-serif;
}
}

.bg-orange-1 { background-color: var(--orange-1); }
.bg-orange-2 { background-color: var(--orange-2); }
.bg-white { background-color: var(--white); }
.bg-offwhite-1 { background-color: var(--offwhite-1); }
.bg-offwhite-2 { background-color: var(--offwhite-2); }
.bg-offwhite-3 { background-color: var(--offwhite-3); }
.bg-cream-1 { background-color: var(--bg-cream-1); }
.bg-cream-2 { background-color: var(--bg-cream-2); }
.bg-cream-3 { background-color: var(--bg-cream-3); }
.bg-transparent {background-color: transparent;}

.text-orange-2 { color: var(--orange-2); }
.text-orange-3 { color: var(--orange-3); }
.text-brown-1 { color: var(--brown-1); }
.text-brown-2 { color: var(--brown-2); }
.text-brown-3 { color: var(--brown-3); }
.text-white { color: var(--white); }


.border-stroke-1 { border-color: var(--stroke-1); }

/* Buttons */
.bg-primary-btn { background-color: var(--orange-2); color: var(--white); }
.bg-secondary-btn { background-color: var(--white); color: var(--brown-1); }
4 changes: 4 additions & 0 deletions src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,7 @@ body {
color: #7c5e3b;
font-size: 24px;
}

.test{
padding: 500px;
}
Loading