Skip to content

feat: develop when-where-section and announcement section #8

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
merged 1 commit into from
Oct 12, 2025
Merged

feat: develop when-where-section and announcement section #8

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
8 changes: 7 additions & 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 @@ -8,7 +8,7 @@

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

<!-- Announcement Section -->
{% include "home/sections/announcement-section.html" %}

<!-- When? Where? Section -->
{% include "home/sections/when-where-section.html" %}

<!-- Sponsors Section -->
{% include "home/sections/sponsor-section.html" %}

Expand Down
77 changes: 77 additions & 0 deletions app/home/templates/home/sections/announcement-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{% load static %}

<section
id="annoucement"
class="py-20 bg-[#FFF9F2]"
>
<div class="w-full max-w-[1160px] mx-auto px-6 flex gap-[30px]">
<div class="w-[45%] max-w-[510px]">
<div>
<h2 class="text-[32px] color-[#7C5E3B] leading-[120%]">
ano aN+ pykon
</h2>
<p class="color-[#F26D1D] text-6xl leading-[120%] tracking-[2%]">
Announcement
</p>
</div>
<img
src="{% static 'img/py_kalinga-pot.png' %}"
alt="Python Kalinga Pot"
class="w-full max-w-[350px]"
/>
</div>
<div class="w-[55%] max-w-[620px] flex flex-col gap-4">
<div class="flex flex-col gap-4">
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
<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]">
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
<p class="text-[52px] leading-[120%] color-[#84400F]">21</p>
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
</div>
<div class="flex flex-col gap-2 justify-center">
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
Pellentesque sit amet. Pellentesque sit amet.
</p>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
<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]">
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
<p class="text-[52px] leading-[120%] color-[#84400F]">22</p>
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
</div>
<div class="flex flex-col gap-2 justify-center">
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
Pellentesque sit amet. Pellentesque sit amet.
</p>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="bg-[#FFF3E5] rounded-2xl flex gap-5 p-[20px]">
<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]">
<p class="text-base color-[#7C5E3B] leading-[130%]">2026</p>
<p class="text-[52px] leading-[120%] color-[#84400F]">23</p>
<p class="text-base color-[#7C5E3B] leading-[130%]">MAR</p>
</div>
<div class="flex flex-col gap-2 justify-center">
<h3 class="text-[28px] leading-[130%] color-[#84400F] capitalize">Lorem Ipsum Sit Dolor</h3>
<p class="color-[#7C5E3B] text-[13px] leading-[150%]">
Limit to 5 lines only. <br> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.
Pellentesque sit amet. Pellentesque sit amet.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
8 changes: 4 additions & 4 deletions app/home/templates/home/sections/conference-at-a-glance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ <h2 class="text-5xl font-bold mb-6" style="color: #BD4B06;">Tickets Available</h

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

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

<!-- Right Python Logo -->
<div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
<!-- <div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-32 h-auto">
</div>
</div> -->
</div>
</div>
</div>
Expand Down
27 changes: 27 additions & 0 deletions app/home/templates/home/sections/when-where-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% load static %}

<section id="when-where" class="py-20">
<div class="w-full max-w-[1160px] mx-auto px-6 flex flex-col gap-10">
<div class="flex justify-between items-center">
<div class="">
<h2 class="text-[28px] text-[#F26D1D] leading-[130%]">WHEN? WHERE?</h2>
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]">March 21-23, 2026</p>
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]">De La Salle University (DLSU),</p>
<p class="text-[35px] text[#84400F] leading-[130%] tracking-[2%]"> Malate, Manila</p>
</div>
<div class="flex flex-col justify-center gap-3.5">
<button class="rounded-lg bg-[#F26D1D] py-[27px] px-[90px] text-white text-[22px] leading-[120%]">GET TICKETS</button>
<a href="#" class="underline text-[#84400F] text-center text-base">Apply for Student Lorem Ipsum</a>
</div>
</div>
<div class="relative w-full pb-[56.25%] overflow-hidden rounded-[24px]">
<iframe
class="absolute top-0 left-0 w-full h-full border-0"
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"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
</section>
Loading