Skip to content

Commit 9907f4d

Browse files
iRenanMatthewiRenanMatthew
authored
Merge pull request #8 from pythonph/feat/responsive-issue
feat: develop when-where-section and announcement section
2 parents b974e86 + 0db65c2 commit 9907f4d

File tree

6 files changed

+268
-5
lines changed

6 files changed

+268
-5
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<main>
1010
<section id="hero" class="text-white text-center flex items-center pt-20">
11-
<div class="container mx-auto px-6 bg-cover w-[959.82px] hero-content">
11+
<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">
1414
<img src="{% static 'img/kalinga.png' %}" alt="Kalinga" class="w-[336.34px] h-auto">
@@ -44,6 +44,12 @@
4444
<!-- What is PyCon Section -->
4545
{% include "home/sections/what-is-python-asia.html" %}
4646

47+
<!-- Announcement Section -->
48+
{% include "home/sections/announcement-section.html" %}
49+
50+
<!-- When? Where? Section -->
51+
{% include "home/sections/when-where-section.html" %}
52+
4753
<!-- Sponsors Section -->
4854
{% include "home/sections/sponsor-section.html" %}
4955

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{% load static %}
2+
3+
<section
4+
id="annoucement"
5+
class="py-20 bg-[#FFF9F2]"
6+
>
7+
<div class="w-full max-w-[1160px] mx-auto px-6 flex gap-[30px]">
8+
<div class="w-[45%] max-w-[510px]">
9+
<div>
10+
<h2 class="text-[32px] color-[#7C5E3B] leading-[120%]">
11+
ano aN+ pykon
12+
</h2>
13+
<p class="color-[#F26D1D] text-6xl leading-[120%] tracking-[2%]">
14+
Announcement
15+
</p>
16+
</div>
17+
<img
18+
src="{% static 'img/py_kalinga-pot.png' %}"
19+
alt="Python Kalinga Pot"
20+
class="w-full max-w-[350px]"
21+
/>
22+
</div>
23+
<div class="w-[55%] max-w-[620px] flex flex-col gap-4">
24+
<div class="flex flex-col gap-4">
25+
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
26+
<div class="flex flex-col justify-center items-center py-[18px] bg-white rounded-3xl shadow-[0_10px_20px_0_rgba(0,0,0,0.05)] w-full max-w-[127px]">
27+
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
28+
<p class="text-[52px] leading-[120%] color-[#84400F]">21</p>
29+
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
30+
</div>
31+
<div class="flex flex-col gap-2 justify-center">
32+
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
33+
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
34+
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
35+
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
36+
Pellentesque sit amet. Pellentesque sit amet.
37+
</p>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="flex flex-col gap-4">
42+
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
43+
<div class="flex flex-col justify-center items-center py-[18px] bg-white rounded-3xl shadow-[0_10px_20px_0_rgba(0,0,0,0.05)] w-full max-w-[127px]">
44+
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
45+
<p class="text-[52px] leading-[120%] color-[#84400F]">22</p>
46+
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
47+
</div>
48+
<div class="flex flex-col gap-2 justify-center">
49+
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
50+
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
51+
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
52+
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
53+
Pellentesque sit amet. Pellentesque sit amet.
54+
</p>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="flex flex-col gap-4">
59+
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
60+
<div class="flex flex-col justify-center items-center py-[18px] bg-white rounded-3xl shadow-[0_10px_20px_0_rgba(0,0,0,0.05)] w-full max-w-[127px]">
61+
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
62+
<p class="text-[52px] leading-[120%] color-[#84400F]">23</p>
63+
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
64+
</div>
65+
<div class="flex flex-col gap-2 justify-center">
66+
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
67+
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
68+
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
69+
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
70+
Pellentesque sit amet. Pellentesque sit amet.
71+
</p>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</section>

‎app/home/templates/home/sections/conference-at-a-glance.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ <h2 class="text-5xl font-bold mb-6" style="color: #BD4B06;">Tickets Available</h
8080

8181
<div class="flex justify-center items-center mb-8 relative">
8282
<!-- Left Python Logo -->
83-
<div class="hidden md:block absolute left-0" style="transform: translateX(-120%);">
83+
<!-- <div class="hidden md:block absolute left-0" style="transform: translateX(-120%);">
8484
<img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-32 h-auto">
85-
</div>
85+
</div> -->
8686

8787
<!-- Get Tickets Button -->
8888
<div class="inline-block">
@@ -95,9 +95,9 @@ <h2 class="text-5xl font-bold mb-6" style="color: #BD4B06;">Tickets Available</h
9595
</div>
9696

9797
<!-- Right Python Logo -->
98-
<div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
98+
<!-- <div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
9999
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-32 h-auto">
100-
</div>
100+
</div> -->
101101
</div>
102102
</div>
103103
</div>

‎app/home/templates/home/sections/when-where-section.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% load static %}
2+
3+
<section id="when-where" class="py-20">
4+
<div class="w-full max-w-[1160px] mx-auto px-6 flex flex-col gap-10">
5+
<div class="flex justify-between items-center">
6+
<div class="">
7+
<h2 class="text-[28px] text-[#F26D1D] leading-[130%]">WHEN? WHERE?</h2>
8+
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]">March 21-23, 2026</p>
9+
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]">De La Salle University (DLSU),</p>
10+
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]"> Malate, Manila</p>
11+
</div>
12+
<div class="flex flex-col justify-center gap-3.5">
13+
<button class="rounded-lg bg-[#F26D1D] py-[27px] px-[90px] text-white text-[22px] leading-[120%]">GET TICKETS</button>
14+
<a href="#" class="underline text-[#84400F] text-center text-base">Apply for Student Lorem Ipsum</a>
15+
</div>
16+
</div>
17+
<div class="relative w-full pb-[56.25%] overflow-hidden rounded-[24px]">
18+
<iframe
19+
class="absolute top-0 left-0 w-full h-full border-0"
20+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d312.9943103756634!2d120.99462142200333!3d14.56338389191832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c97ed286459b%3A0x5927068d997eae2a!2sDe%20La%20Salle%20University%20Manila!5e0!3m2!1sen!2sph!4v1760281058137!5m2!1sen!2sph"
21+
allowfullscreen=""
22+
loading="lazy"
23+
referrerpolicy="no-referrer-when-downgrade"
24+
></iframe>
25+
</div>
26+
</div>
27+
</section>

0 commit comments

Comments
 (0)