Skip to content

Commit 9097c40

Browse files
iRenanMatthewiRenanMatthew
committed
feat: Polish Header Menu and Global Colors
1 parent bcb6930 commit 9097c40

File tree

7 files changed

+448
-195
lines changed

7 files changed

+448
-195
lines changed

‎app/home/templates/home/components/navbar.html‎

Lines changed: 146 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,152 @@
11
{% load static %}
2-
3-
<div class="navbar bg-base-100 shadow-sm">
4-
<div class="navbar-start">
5-
<div class="dropdown">
6-
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
7-
<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>
2+
<nav class="absolute w-full z-10">
3+
<div class="relative flex flex-col">
4+
<div class="bg-orange-1 py-1.5 flex items-center justify-center gap-2">
5+
<p class="text-white font-nunito text-sm font-semibold">
6+
👋 Registration for PyCon APAC 2025 is now open!
7+
</p>
8+
<div class="w-[20px] h-[2px] bg-white"></div>
9+
<div>
10+
<a
11+
class="text-white font-bantayog text-base flex gap-2 items-center"
12+
href="#"
13+
>
14+
<p>RESERVE YOUR SEATS NOW</p>
15+
<img
16+
src="{% static 'img/vectors/ArrowCircleRight.svg' %}"
17+
alt="kliN"
18+
class="w-[24px] h-auto"
19+
/>
20+
</a>
821
</div>
9-
<ul
10-
tabindex="0"
11-
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
12-
<li>
13-
<a>About</a>
14-
<ul class="p-2">
15-
<li><a href="#">About the Conference</a></li>
16-
<li><a href="#">About PythonAsia</a></li>
17-
<li><a href="#">Team</a></li>
18-
<li><a href="#">Venue</a></li>
19-
</ul>
20-
</li>
21-
<li>
22-
<a>Get Involved</a>
23-
<ul class="p-2">
24-
<li><a href="#">Become a Sponsor</a></li>
25-
<li><a href="#">Volunteer</a></li>
26-
<li><a href="#">Speak at the Event</a></li>
27-
</ul>
28-
</li>
29-
<li>
30-
<a>Policies</a>
31-
<ul class="p-2">
32-
<li><a href="#">Code of Conduct</a></li>
33-
<li><a href="#">Privacy Policy</a></li>
34-
<li><a href="#">Terms & Conditions</a></li>
35-
</ul>
36-
</li>
37-
<li>
38-
<a>Attend</a>
39-
<ul class="p-2">
40-
<li><a href="#">Schedule</a></li>
41-
<li><a href="#">Speakers</a></li>
42-
<li><a href="#">Accommodation</a></li>
43-
<li><a href="#">Travel Info</a></li>
44-
</ul>
45-
</li>
46-
</ul>
4722
</div>
48-
<a class="btn btn-ghost text-xl">
49-
<img src="{% static 'img/logo.png' %}" alt="PythonAsia 2026" class="h-8 w-auto">
50-
</a>
51-
</div>
52-
<div class="navbar-center hidden lg:flex">
53-
<ul class="menu menu-horizontal px-1">
54-
<li>
55-
<details>
56-
<summary>About</summary>
57-
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
58-
<li><a href="#">About the Conference</a></li>
59-
<li><a href="#">About PythonAsia</a></li>
60-
<li><a href="#">Team</a></li>
61-
<li><a href="#">Venue</a></li>
62-
</ul>
63-
</details>
64-
</li>
65-
<li>
66-
<details>
67-
<summary>Get Involved</summary>
68-
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
69-
<li><a href="#">Become a Sponsor</a></li>
70-
<li><a href="#">Volunteer</a></li>
71-
<li><a href="#">Speak at the Event</a></li>
23+
<div class="bg-transparent w-[1260px] mx-auto flex pt-8">
24+
<div class="navbar-start">
25+
<div class="dropdown">
26+
<div
27+
tabindex="0"
28+
role="button"
29+
class="btn btn-ghost lg:hidden"
30+
>
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
class="h-5 w-5"
34+
fill="none"
35+
viewBox="0 0 24 24"
36+
stroke="currentColor"
37+
>
38+
<path
39+
stroke-linecap="round"
40+
stroke-linejoin="round"
41+
stroke-width="2"
42+
d="M4 6h16M4 12h8m-8 6h16"
43+
/>
44+
</svg>
45+
</div>
46+
<ul
47+
tabindex="0"
48+
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
49+
>
50+
<li>
51+
<a class="font-bantayog">About</a>
52+
<ul class="p-2">
53+
<li><a href="#" class="font-bantayog">About the Conference</a></li>
54+
<li><a href="#" class="font-bantayog">About PythonAsia</a></li>
55+
<li><a href="#" class="font-bantayog">Team</a></li>
56+
<li><a href="#" class="font-bantayog">Venue</a></li>
57+
</ul>
58+
</li>
59+
<li>
60+
<a class="font-bantayog">Get Involved</a>
61+
<ul class="p-2">
62+
<li><a href="#" class="font-bantayog">Become a Sponsor</a></li>
63+
<li><a href="#" class="font-bantayog">Volunteer</a></li>
64+
<li><a href="#" class="font-bantayog">Speak at the Event</a></li>
65+
</ul>
66+
</li>
67+
<li>
68+
<a class="font-bantayog">Policies</a>
69+
<ul class="p-2">
70+
<li><a href="#" class="font-bantayog">Code of Conduct</a></li>
71+
<li><a href="#" class="font-bantayog">Privacy Policy</a></li>
72+
<li><a href="#" class="font-bantayog">Terms & Conditions</a></li>
73+
</ul>
74+
</li>
75+
<li>
76+
<a class="font-bantayog">Attend</a>
77+
<ul class="p-2">
78+
<li><a href="#" class="font-bantayog">Schedule</a></li>
79+
<li><a href="#" class="font-bantayog">Speakers</a></li>
80+
<li><a href="#" class="font-bantayog">Accommodation</a></li>
81+
<li><a href="#" class="font-bantayog">Travel Info</a></li>
82+
</ul>
83+
</li>
7284
</ul>
73-
</details>
74-
</li>
75-
<li>
76-
<details>
77-
<summary>Policies</summary>
78-
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
79-
<li><a href="#">Code of Conduct</a></li>
80-
<li><a href="#">Privacy Policy</a></li>
81-
<li><a href="#">Terms & Conditions</a></li>
82-
</ul>
83-
</details>
84-
</li>
85-
<li>
86-
<details>
87-
<summary>Attend</summary>
88-
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
89-
<li><a href="#">Schedule</a></li>
90-
<li><a href="#">Speakers</a></li>
91-
<li><a href="#">Accommodation</a></li>
92-
<li><a href="#">Travel Info</a></li>
85+
</div>
86+
<a class="btn btn-ghost text-xl">
87+
<img
88+
src="{% static 'img/logo.png' %}"
89+
alt="PythonAsia 2026"
90+
class="h-8 w-auto w-full max-w-[233px]"
91+
/>
92+
</a>
93+
</div>
94+
<div class="flex justify-end items-center gap-7 w-full">
95+
<div class="hidden lg:flex">
96+
<ul class="menu menu-horizontal px-1">
97+
<li>
98+
<details>
99+
<summary class="font-bantayog text-xl text-brown-1 font-light">About</summary>
100+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
101+
<li><a href="#" class="font-bantayog">About the Conference</a></li>
102+
<li><a href="#" class="font-bantayog">About PythonAsia</a></li>
103+
<li><a href="#" class="font-bantayog">Team</a></li>
104+
<li><a href="#" class="font-bantayog">Venue</a></li>
105+
</ul>
106+
</details>
107+
</li>
108+
<li>
109+
<details>
110+
<summary class="font-bantayog text-xl text-brown-1 font-light">Get Involved</summary>
111+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
112+
<li><a href="#" class="font-bantayog">Become a Sponsor</a></li>
113+
<li><a href="#" class="font-bantayog">Volunteer</a></li>
114+
<li><a href="#" class="font-bantayog">Speak at the Event</a></li>
115+
</ul>
116+
</details>
117+
</li>
118+
<li>
119+
<details>
120+
<summary class="font-bantayog text-xl text-brown-1 font-light">Policies</summary>
121+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
122+
<li><a href="#" class="font-bantayog">Code of Conduct</a></li>
123+
<li><a href="#" class="font-bantayog">Privacy Policy</a></li>
124+
<li><a href="#" class="font-bantayog">Terms & Conditions</a></li>
125+
</ul>
126+
</details>
127+
</li>
128+
<li>
129+
<details>
130+
<summary class="font-bantayog text-xl text-brown-1 font-light">Attend</summary>
131+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
132+
<li><a href="#" class="font-bantayog">Schedule</a></li>
133+
<li><a href="#" class="font-bantayog">Speakers</a></li>
134+
<li><a href="#" class="font-bantayog">Accommodation</a></li>
135+
<li><a href="#" class="font-bantayog">Travel Info</a></li>
136+
</ul>
137+
</details>
138+
</li>
93139
</ul>
94-
</details>
95-
</li>
96-
</ul>
97-
</div>
98-
<div class="navbar-end">
99-
<a href="#" class="btn btn-primary btn-square lg:btn-wide">
100-
<span class="hidden lg:inline-block material-symbols-outlined">sell</span>
101-
<span class="lg:inline">Get Tickets</span>
102-
</a>
140+
</div>
141+
<div class="">
142+
<a
143+
href="#"
144+
class="btn btn-primary btn-square lg:btn-wide"
145+
>
146+
<span class="lg:inline font-bantayog py-3.5 px-8 text-xl">Get Tickets</span>
147+
</a>
148+
</div>
149+
</div>
150+
</div>
103151
</div>
104-
</div>
152+
</nav>

‎app/home/templates/home/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{% include "home/components/navbar.html" %}
88

99
<main>
10-
<section id="hero" class="text-white text-center flex items-center pt-20">
10+
<section id="hero" class="text-white text-center flex items-center pt-[170px]">
1111
<div class="container mx-auto px-6 bg-cover w-[960px] hero-content">
1212
<div class="flex flex-col items-center space-y-8">
1313
<img src="{% static 'img/vectors/kalinga-baybayin.svg' %}" alt="kliN" class="w-[189px] h-auto">

‎src/styles/globals.css‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,106 @@
11
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
22

3+
:root {
4+
/* === Orange / Accent === */
5+
--orange-1: #BD4B06;
6+
--orange-2: #F26D1D;
7+
--orange-3: #FFA218;
8+
9+
/* === Neutral === */
10+
--white: #FFFFFF;
11+
--offwhite-1: #FFF9F2;
12+
--offwhite-2: #FFF4E6;
13+
--offwhite-3: #FFF3E5;
14+
15+
/* === Browns === */
16+
--brown-1: #84400F;
17+
--brown-2: #7C5E3B;
18+
--brown-3: #B04301;
19+
20+
/* === Light Backgrounds === */
21+
--bg-cream-1: #F8EBE5;
22+
--bg-cream-2: #FFE7D5;
23+
--bg-cream-3: #F8F0E5;
24+
25+
/* === Stroke / Borders === */
26+
--stroke-1: #C9AC8A;
27+
}
28+
329
@font-face {
4-
font-family: 'bantayog';
30+
font-family: 'Bantayog';
531
src: url('/static/fonts/Bantayog-Light.otf') format('opentype');
632
font-weight: 300;
733
font-display: swap;
834
}
935

1036
@font-face {
11-
font-family: 'bantayog';
37+
font-family: 'Bantayog';
1238
src: url('/static/fonts/Bantayog-Regular.otf') format('opentype');
1339
font-weight: 400;
1440
font-display: swap;
1541
}
1642

1743
@font-face {
18-
font-family: 'bantayog';
44+
font-family: 'Bantayog';
1945
src: url('/static/fonts/Bantayog-Semilight.otf') format('opentype');
2046
font-weight: 600;
2147
font-display: swap;
2248
}
2349

2450

2551
@font-face {
26-
font-family: 'niwanguno';
52+
font-family: 'Niwanguno';
2753
src: url('/static/fonts/NiwangUno-Regular.otf') format('opentype');
2854
font-weight: 400;
2955
font-display: swap;
3056
}
3157

3258

3359
@font-face {
34-
font-family: 'td_pinoy';
60+
font-family: 'TD Pinoy';
3561
src: url('/static/fonts/TD_Pinoy.otf') format('opentype');
3662
font-weight: 500;
3763
font-display: swap;
3864
}
3965

4066

4167
.font-bantayog {
42-
font-family: 'bantayog', sans-serif;
68+
font-family: 'Bantayog', sans-serif;
4369
}
4470

4571
.font-niwanguno {
46-
font-family: 'niwanguno', sans-serif;
72+
font-family: 'Niwanguno', sans-serif;
4773
}
4874

4975
.font-td_pinoy {
50-
font-family: 'td_pinoy', sans-serif;
76+
font-family: 'TD Pinoy ', sans-serif;
5177
}
5278

5379
.font-nunito {
5480
font-family: 'Nunito', sans-serif;
55-
}
81+
}
82+
83+
.bg-orange-1 { background-color: var(--orange-1); }
84+
.bg-orange-2 { background-color: var(--orange-2); }
85+
.bg-white { background-color: var(--white); }
86+
.bg-offwhite-1 { background-color: var(--offwhite-1); }
87+
.bg-offwhite-2 { background-color: var(--offwhite-2); }
88+
.bg-offwhite-3 { background-color: var(--offwhite-3); }
89+
.bg-cream-1 { background-color: var(--bg-cream-1); }
90+
.bg-cream-2 { background-color: var(--bg-cream-2); }
91+
.bg-cream-3 { background-color: var(--bg-cream-3); }
92+
.bg-transparent {background-color: transparent;}
93+
94+
.text-orange-2 { color: var(--orange-2); }
95+
.text-orange-3 { color: var(--orange-3); }
96+
.text-brown-1 { color: var(--brown-1); }
97+
.text-brown-2 { color: var(--brown-2); }
98+
.text-brown-3 { color: var(--brown-3); }
99+
.text-white { color: var(--white); }
100+
101+
102+
.border-stroke-1 { border-color: var(--stroke-1); }
103+
104+
/* Buttons */
105+
.bg-primary-btn { background-color: var(--orange-2); color: var(--white); }
106+
.bg-secondary-btn { background-color: var(--white); color: var(--brown-1); }

‎src/styles/main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ body {
1111
color: #7c5e3b;
1212
font-size: 24px;
1313
}
14+
15+
.test{
16+
padding: 500px;
17+
}

0 commit comments

Comments
 (0)