|
9 | 9 | <style> |
10 | 10 | body { |
11 | 11 | background-color: #FFF9F2; |
12 | | - color: #7C5E3B; |
13 | | - font-size: 24px; |
| 12 | + background-image: url('./static/background.png'); |
| 13 | + background-size: cover; |
14 | 14 | } |
15 | 15 | .hero-content { |
16 | 16 | background-image: url('./static/hero-bg.png'); |
17 | 17 | } |
| 18 | + |
18 | 19 | </style> |
19 | 20 | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
20 | 21 | </head> |
21 | 22 | <body> |
22 | | - <div class="min-h-screen" style="background-image: url('./static/background.png');"> |
| 23 | + <div class="min-h-screen"> |
23 | 24 | <main> |
24 | 25 | <section id="hero" class="text-white text-center flex items-center pt-20"> |
25 | 26 | <div class="container mx-auto px-6 bg-cover w-[959.82px] hero-content"> |
26 | 27 | <div class="flex flex-col items-center space-y-8"> |
27 | 28 | <!-- kliN.png - smaller --> |
28 | | - <img src="./static/kliN.png" alt="kliN" class="w-[189px] h-auto"> |
| 29 | + <img src="./static/kliN.png" alt="kliN" class="lg:w-[189px] h-auto"> |
29 | 30 |
|
30 | 31 | <!-- kalinga.png - smaller --> |
31 | | - <img src="./static/kalinga.png" alt="Kalinga" class="w-[336.34px] h-auto"> |
| 32 | + <img src="./static/kalinga.png" alt="Kalinga" class="lg:w-[336.34px] h-auto"> |
32 | 33 |
|
33 | 34 | <!-- pythonasia2026.png - larger --> |
34 | | - <img src="./static/pythonasia2026.png" alt="PythonAsia 2026" class="w-[635px] h-auto"> |
| 35 | + <img src="./static/pythonasia2026.png" alt="PythonAsia 2026" class="lg:w-[635px] h-auto"> |
35 | 36 |
|
36 | | - <div class="text-center text-[#7C5E3B] z-30"> |
37 | | - Nurturing a community of care, compassion, and growth.<br/> |
38 | | - The same heart of PyCon APAC, now as PythonAsia. |
| 37 | + <div class="text-center text-[#7C5E3B] z-30 text-lg lg:text-2xl"> |
| 38 | + Nurturing a community of care, compassion, and growth. |
| 39 | + The same heart of <b>PyCon APAC</b>, now as <b>PythonAsia</b>. |
39 | 40 | </div> |
40 | 41 | </div> |
41 | 42 | </div> |
42 | 43 | </section> |
43 | 44 |
|
44 | 45 | </main> |
45 | 46 |
|
46 | | - <footer class="relative w-full h-[950px] mt-[-20px] z-0 hidden md:block"> |
47 | | - <!-- Left snake --> |
48 | | - <img src="./static/pytonio.svg" alt="Left Snake" |
49 | | - class="absolute left-0 bottom-80 w-[670px]"> |
50 | | - |
51 | | - <!-- Right snake --> |
52 | | - <img src="./static/pytria.svg" alt="Right Snake" |
53 | | - class="absolute right-0 bottom-80 w-[670px]"> |
54 | | - |
55 | | - <!-- Pot (centered) --> |
56 | | - <img src="./static/pot.svg" alt="Pot" |
57 | | - class="absolute bottom-80 left-1/2 ml-[-70px] -translate-x-1/2 w-[574.49px] z-10"> |
| 47 | + <footer class="relative w-full h-[800px] lg:h-[950px] lg:mt-[-20px] z-0"> |
| 48 | + <img src="./static/pytonio.svg" alt="Left Snake" class="absolute left-0 bottom-80 w-[670px] hidden lg:block"> |
| 49 | + <img src="./static/pytria.svg" alt="Right Snake" class="absolute right-0 bottom-80 w-[670px] hidden lg:block"> |
| 50 | + <img src="./static/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"> |
| 51 | + <img src="./static/base.svg" alt="Bottom Base" class="absolute bottom-0 left-0 right-0 lg:w-full z-0 hidden lg:block"> |
58 | 52 |
|
59 | | - <img src="./static/base.svg" alt="Bottom Base" |
60 | | - class="absolute bottom-0 left-0 right-0 w-full z-0"> |
61 | | - |
62 | | - <div class="absolute bottom-40 w-full text-center z-30"> |
63 | | - <h3 class="text-white font-bold">CO-ORGANIZED BY</h3> |
64 | | - <img class="mx-auto h-[100px]" src="./static/coorganizers.png"> |
| 53 | + <div class="absolute bottom-0 lg:bottom-20 w-full text-center flex flex-col items-center justify-center z-30 py-6 bg-[#F26D1D] lg:bg-[unset]"> |
| 54 | + <h3 class="text-white font-bold mb-2 text-2xl">CO-ORGANIZED BY</h3> |
| 55 | + <div class="flex flex-col md:flex-row items-center justify-center md:space-x-8 space-y-4 md:space-y-0 mt-2"> |
| 56 | + <img src="./static/pythonph.svg" alt="PythonPH" class="h-12 md:h-[60px]"> |
| 57 | + <img src="./static/pythonasia.svg" alt="Python Asia Organization" class="h-12 md:h-[60px]"> |
| 58 | + <img src="./static/dlsu.svg" alt="DLSU" class="h-12 md:h-[60px]"> |
| 59 | + </div> |
65 | 60 | </div> |
| 61 | + |
66 | 62 | </footer> |
67 | 63 | </body> |
68 | 64 | </html> |
0 commit comments