diff --git a/app/home/templates/home/index.html b/app/home/templates/home/index.html index b06eefe..84864e5 100644 --- a/app/home/templates/home/index.html +++ b/app/home/templates/home/index.html @@ -8,7 +8,7 @@
-
+
kliN Kalinga @@ -44,6 +44,12 @@ {% include "home/sections/what-is-python-asia.html" %} + + {% include "home/sections/announcement-section.html" %} + + + {% include "home/sections/when-where-section.html" %} + {% include "home/sections/sponsor-section.html" %} diff --git a/app/home/templates/home/sections/announcement-section.html b/app/home/templates/home/sections/announcement-section.html new file mode 100644 index 0000000..9c769d9 --- /dev/null +++ b/app/home/templates/home/sections/announcement-section.html @@ -0,0 +1,77 @@ +{% load static %} + +
+
+
+
+

+ ano aN+ pykon +

+

+ Announcement +

+
+ Python Kalinga Pot +
+
+
+
+
+

2026

+

21

+

MAR

+
+
+

Lorem Ipsum Sit Dolor

+

+ Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. + Pellentesque sit amet. Pellentesque sit amet. +

+
+
+
+
+
+
+

2026

+

22

+

MAR

+
+
+

Lorem Ipsum Sit Dolor

+

+ Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. + Pellentesque sit amet. Pellentesque sit amet. +

+
+
+
+
+
+
+

2026

+

23

+

MAR

+
+
+

Lorem Ipsum Sit Dolor

+

+ Limit to 5 lines only.
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. + Pellentesque sit amet. Pellentesque sit amet. +

+
+
+
+
+
+
diff --git a/app/home/templates/home/sections/conference-at-a-glance.html b/app/home/templates/home/sections/conference-at-a-glance.html index 471f564..bca2410 100644 --- a/app/home/templates/home/sections/conference-at-a-glance.html +++ b/app/home/templates/home/sections/conference-at-a-glance.html @@ -80,9 +80,9 @@

Tickets Available - diff --git a/app/home/templates/home/sections/when-where-section.html b/app/home/templates/home/sections/when-where-section.html index e69de29..e559e56 100644 --- a/app/home/templates/home/sections/when-where-section.html +++ b/app/home/templates/home/sections/when-where-section.html @@ -0,0 +1,27 @@ +{% load static %} + +
+
+
+
+

WHEN? WHERE?

+

March 21-23, 2026

+

De La Salle University (DLSU),

+

Malate, Manila

+
+
+ + Apply for Student Lorem Ipsum +
+
+
+ +
+
+
\ No newline at end of file diff --git a/static/css/app.css b/static/css/app.css index f501792..de07653 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -46,6 +46,8 @@ --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); @@ -577,6 +579,18 @@ isolation: isolate; } } + .loading { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + background-color: currentcolor; + vertical-align: middle; + width: calc(var(--size-selector, 0.25rem) * 6); + mask-size: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } .steps { display: inline-grid; grid-auto-flow: column; @@ -883,6 +897,9 @@ .h-auto { height: auto; } + .h-full { + height: 100%; + } .max-h-32 { max-height: calc(var(--spacing) * 32); } @@ -907,6 +924,12 @@ .w-52 { width: calc(var(--spacing) * 52); } + .w-\[45\%\] { + width: 45%; + } + .w-\[55\%\] { + width: 55%; + } .w-\[189px\] { width: 189px; } @@ -919,6 +942,9 @@ .w-\[959\.82px\] { width: 959.82px; } + .w-\[960px\] { + width: 960px; + } .w-auto { width: auto; } @@ -940,6 +966,21 @@ .max-w-7xl { max-width: var(--container-7xl); } + .max-w-\[127px\] { + max-width: 127px; + } + .max-w-\[350px\] { + max-width: 350px; + } + .max-w-\[510px\] { + max-width: 510px; + } + .max-w-\[620px\] { + max-width: 620px; + } + .max-w-\[1160px\] { + max-width: 1160px; + } .max-w-full { max-width: 100%; } @@ -964,18 +1005,36 @@ .items-start { align-items: flex-start; } + .justify-between { + justify-content: space-between; + } .justify-center { justify-content: center; } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-3\.5 { + gap: calc(var(--spacing) * 3.5); + } .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-5 { + gap: calc(var(--spacing) * 5); + } .gap-8 { gap: calc(var(--spacing) * 8); } + .gap-10 { + gap: calc(var(--spacing) * 10); + } .gap-12 { gap: calc(var(--spacing) * 12); } + .gap-\[30px\] { + gap: 30px; + } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1025,6 +1084,9 @@ margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } + .overflow-hidden { + overflow: hidden; + } .menu-sm { :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--radius-field); @@ -1037,6 +1099,15 @@ padding-block: calc(0.25rem * 2); } } + .rounded-2xl { + border-radius: var(--radius-2xl); + } + .rounded-3xl { + border-radius: var(--radius-3xl); + } + .rounded-\[24px\] { + border-radius: 24px; + } .rounded-box { border-radius: var(--radius-box); } @@ -1049,16 +1120,32 @@ .rounded-lg { border-radius: var(--radius-lg); } + .border-0 { + border-style: var(--tw-border-style); + border-width: 0px; + } .border-b-4 { border-bottom-style: var(--tw-border-style); border-bottom-width: 4px; } + .bg-\[\#84400F\] { + background-color: #84400F; + } .bg-\[\#F4E6D4\] { background-color: #F4E6D4; } + .bg-\[\#F26D1D\] { + background-color: #F26D1D; + } + .bg-\[\#FFF3E5\] { + background-color: #FFF3E5; + } .bg-\[\#FFF8F0\] { background-color: #FFF8F0; } + .bg-\[\#FFF9F2\] { + background-color: #FFF9F2; + } .bg-base-100 { background-color: var(--color-base-100); } @@ -1089,6 +1176,9 @@ .p-8 { padding: calc(var(--spacing) * 8); } + .p-\[20px\] { + padding: 20px; + } .px-1 { padding-inline: calc(var(--spacing) * 1); } @@ -1098,6 +1188,9 @@ .px-16 { padding-inline: calc(var(--spacing) * 16); } + .px-\[90px\] { + padding-inline: 90px; + } .py-0 { padding-block: calc(var(--spacing) * 0); } @@ -1110,12 +1203,21 @@ .py-20 { padding-block: calc(var(--spacing) * 20); } + .py-\[18px\] { + padding-block: 18px; + } + .py-\[27px\] { + padding-block: 27px; + } .pt-20 { padding-top: calc(var(--spacing) * 20); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pb-\[56\.25\%\] { + padding-bottom: 56.25%; + } .text-center { text-align: center; } @@ -1134,6 +1236,10 @@ font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } + .text-6xl { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); @@ -1150,6 +1256,36 @@ font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } + .text-\[13px\] { + font-size: 13px; + } + .text-\[22px\] { + font-size: 22px; + } + .text-\[28px\] { + font-size: 28px; + } + .text-\[32px\] { + font-size: 32px; + } + .text-\[35px\] { + font-size: 35px; + } + .text-\[52px\] { + font-size: 52px; + } + .leading-\[120\%\] { + --tw-leading: 120%; + line-height: 120%; + } + .leading-\[130\%\] { + --tw-leading: 130%; + line-height: 130%; + } + .leading-\[150\%\] { + --tw-leading: 150%; + line-height: 150%; + } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @@ -1166,6 +1302,10 @@ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } + .tracking-\[2\%\] { + --tw-tracking: 2%; + letter-spacing: 2%; + } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); @@ -1177,15 +1317,24 @@ .text-\[\#7C5E3B\] { color: #7C5E3B; } + .text-\[\#84400F\] { + color: #84400F; + } .text-\[\#D87532\] { color: #D87532; } .text-\[\#E8893D\] { color: #E8893D; } + .text-\[\#F26D1D\] { + color: #F26D1D; + } .text-white { color: var(--color-white); } + .capitalize { + text-transform: capitalize; + } .uppercase { text-transform: uppercase; } @@ -1196,6 +1345,10 @@ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-\[0_10px_20px_0_rgba\(0\,0\,0\,0\.05\)\] { + --tw-shadow: 0 10px 20px 0 var(--tw-shadow-color, rgba(0,0,0,0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); diff --git a/static/img/py_kalinga-pot.png b/static/img/py_kalinga-pot.png new file mode 100644 index 0000000..e777e93 Binary files /dev/null and b/static/img/py_kalinga-pot.png differ