Skip to content

Commit 04b78c6

Browse files
iRenanMatthewiRenanMatthew
committed
feat: develop static speakers section and responsiveness. Fix the footer overlapping issue
1 parent fddcca3 commit 04b78c6

File tree

5 files changed

+166
-19
lines changed

5 files changed

+166
-19
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030
<!-- Call For X -->
3131
{% include "home/sections/call-for-x.html" %}
3232
<!-- What is PyCon Section -->
33-
{% comment%}{% include "home/sections/what-is-python-asia.html" %}
33+
{% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
34+
<!-- Speakers Section -->
35+
{% include "home/sections/speakers-section.html" %}
3436
<!-- Announcement Section -->
35-
{% comment%}{% include "home/sections/announcement-section.html" %}{% endcomment%}
37+
{% comment%}{% include "home/sections/announcement-section.html" %}{% endcomment%}
3638
<!-- When? Where? Section -->
3739
{% include "home/sections/when-where-section.html" %}
3840
<!-- Sponsors Section -->
39-
{% comment %}
40-
{% include "home/sections/sponsor-section.html" %}
41-
{% endcomment %}
41+
{% comment %}{% include "home/sections/sponsor-section.html" %}{% endcomment %}
4242
<!-- Code of Conduct Section -->
4343
{% include "home/sections/code-of-conduct.html" %}
4444
<!-- Footer Section -->

‎app/home/templates/home/sections/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
</p>
4040

4141
<div class="relative w-full h-[800px] lg:h-[950px] lg:mt-[-20px] z-0">
42-
<img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 bottom-80 w-[670px] hidden lg:block">
43-
<img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake" class="absolute right-0 bottom-80 w-[670px] hidden lg:block">
42+
<img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block">
43+
<img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake" class="absolute right-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block">
4444
<img src="{% static 'img/footer/pot.svg' %}" alt="Pot" class="absolute bottom-80 left-1/2 lg:ml-[-70px] -translate-x-1/2 w-[500px] lg:w-[574.49px] z-10">
4545
<img src="{% static 'img/footer/base.svg' %}" alt="Bottom Base" class="absolute bottom-0 left-0 right-0 lg:w-full z-0 hidden lg:block">
4646

‎app/home/templates/home/sections/speakers-section.html‎

Lines changed: 157 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,167 @@
11
{% load static %}
22

3-
<section id="speakers" class="bg-white">
4-
<div class="flex flex-col gap-10">
5-
<div class="w-full max-w-[1160px] mx-auto px-6 flex flex-col gap-8 py-20">
3+
<section id="speakers" class="bg-white px-[4%]">
4+
<div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto">
5+
<div class="px-6 flex flex-col gap-8 py-20">
66
<h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speakers</h2>
7-
<p class="font-bantayog text-[28px] leading-[130%] text-uppercase text-brown-1 text-center">Discover our keynote speakers for PyCon Philippines 2025</p>
7+
<p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our keynote speakers
8+
for PyCon Philippines 2025</p>
89
</div>
9-
<div class="speakers-wrapper">
10-
<div class="rounded-[24px] bg-cream-1 flex gap-10" style="padding: 30px;">
11-
<div class="overflow-hidden grow">
12-
<img src="{% static 'img/speakers/speakers-img-1.jpg' %}" alt="'' style="border-radius: 70px; object-fit: cover;">
10+
<div class="keynote-speakers-wrapper flex justify-center items-center gap-[30px] flex-wrap">
11+
<div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
12+
style="padding: 30px;">
13+
<div class="overflow-hidden flex-shrink-0 w-[230px]">
14+
<img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
15+
alt="JC Peralta - Image">
1316
</div>
1417
<div>
1518
<h3 class="font-bantayog text-brown-1 text-2xl">JC PERALTA</h3>
16-
<p class="font-nunito text-brown-2 font-semibold">Insert Title</p>
17-
<p class="font-nunito text-brown-2">JC Peralta is a data scientist, Geospatial Machine Learning Consultant, and Climate Scientist. He earned his Master's in Atmospheric Science from Ateneo de Manila University in 2019 and has worked on projects in climate science, disaster management, renewable energy, and climate action.</p>
19+
<p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
20+
<p class="font-nunito text-brown-2 text-[13px]">JC Peralta is a data scientist, Geospatial Machine Learning
21+
Consultant, and Climate Scientist. He earned his Master's in Atmospheric Science from Ateneo de Manila
22+
University in 2019 and has worked on projects in climate science, disaster management, renewable energy, and
23+
climate action.</p>
24+
</div>
25+
</div>
26+
<div class="rounded-[24px] bg-cream-2 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
27+
style="padding: 30px;">
28+
<div class="overflow-hidden flex-shrink-0 w-[230px]">
29+
<img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
30+
alt="Michael Kennedy - Image">
31+
</div>
32+
<div>
33+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Michael Kennedy</h3>
34+
<p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
35+
<p class="font-nunito text-brown-2 text-[13px]">Michael Kennedy is a Python Software Foundation Fellow,
36+
entrepreneur, and host of the Talk Python To Me and Python Bytes podcasts. He founded Talk Python Training,
37+
offering 250+ hours of online courses for developers and data scientists. He is based in Portland, OR.</p>
38+
</div>
39+
</div>
40+
<div class="rounded-[24px] bg-cream-3 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
41+
style="padding: 30px;">
42+
<div class="overflow-hidden flex-shrink-0 w-[230px]">
43+
<img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
44+
alt="Matt Harrison - Image">
45+
</div>
46+
<div>
47+
<h3 class="font-bantayog text-brown-1 text-2xl">Matt Harrison</h3>
48+
<p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
49+
<p class="font-nunito text-brown-2 text-[13px]">Matt Harrison is a Stanford-educated CS expert and bestselling
50+
author of Effective XGBoost and Effective Pandas. With 20+ years of Python experience, he has taught
51+
professionals at companies like Netflix and NASA and impacted thousands through live and online courses.</p>
52+
</div>
53+
</div>
54+
<div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
55+
style="padding: 30px;">
56+
<div class="overflow-hidden flex-shrink-0 w-[230px]">
57+
<img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
58+
alt="Reina Reyes - Image">
59+
</div>
60+
<div>
61+
<h3 class="font-bantayog text-brown-1 text-2xl">Reina Reyes</h3>
62+
<p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
63+
<p class="font-nunito text-brown-2 text-[13px]">Reinabelle "Reina" Reyes, Ph.D., is an Associate Professor at
64+
UP Diliman's National Institute of Physics, where she leads the Data and Computation Research Group. She
65+
consults for Z-Lift Solutions and WeSolve Foundation and received the 2023 NAST Outstanding Young Scientist
66+
Award.</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto mt-[120px] pb-[90px]">
73+
<div class="px-6 flex flex-col gap-8">
74+
<h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Speakers</h2>
75+
<p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our speakers for
76+
PyCon Philippines 2024</p>
77+
</div>
78+
<div class="speakers-wrapper flex items-center gap-[30px] flex-row flex-wrap justify-between">
79+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
80+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
81+
<img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
82+
alt="JC Peralta - Image">
83+
</div>
84+
<div>
85+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
86+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
87+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
88+
</div>
89+
</div>
90+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
91+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
92+
<img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
93+
alt="JC Peralta - Image">
94+
</div>
95+
<div>
96+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Swastik Anupam</h3>
97+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
98+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
99+
</div>
100+
</div>
101+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
102+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
103+
<img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
104+
alt="JC Peralta - Image">
105+
</div>
106+
<div>
107+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Neil Riego</h3>
108+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
109+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
110+
</div>
111+
</div>
112+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
113+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
114+
<img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
115+
alt="JC Peralta - Image">
116+
</div>
117+
<div>
118+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Ian Panganiban</h3>
119+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
120+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
121+
</div>
122+
</div>
123+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
124+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
125+
<img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
126+
alt="JC Peralta - Image">
127+
</div>
128+
<div>
129+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
130+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
131+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
132+
</div>
133+
</div>
134+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
135+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
136+
<img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
137+
alt="JC Peralta - Image">
138+
</div>
139+
<div>
140+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Fidel Ivan Racines</h3>
141+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
142+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
143+
</div>
144+
</div>
145+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
146+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
147+
<img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
148+
alt="JC Peralta - Image">
149+
</div>
150+
<div>
151+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Albert Yumol</h3>
152+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
153+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
154+
</div>
155+
</div>
156+
<div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
157+
<div class="overflow-hidden flex-shrink-0 w-[250px]">
158+
<img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
159+
alt="JC Peralta - Image">
160+
</div>
161+
<div>
162+
<h3 class="font-bantayog text-brown-1 text-2xl uppercase">Yoshi Yamaguchi</h3>
163+
<p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
164+
<p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
18165
</div>
19166
</div>
20167
</div>

‎src/styles/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
--bg-cream-3: #f8f0e5;
3131

3232
/* === Stroke / Borders === */
33-
--stroke-1: #c9ac8a;
33+
--stroke-1: #212121;
3434
}
3535

3636
@font-face {

‎static/css/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)