mirror of
https://github.com/System-End/daydream-phoenix.git
synced 2026-04-19 22:05:07 +00:00
More FAQ Responsiveness
This commit is contained in:
Gus Ruben
parent
4893d32ad1
commit
c574f646e7
1 changed files with 17 additions and 17 deletions
|
|
@ -633,7 +633,7 @@
|
|||
<div class="w-full bg-gradient-to-b from-[#FDC5D1] to-[#FAE3C9] items-center justify-center px-32 relative pt-36">
|
||||
<div class="max-md:absolute max-md:left-1/2 max-md:-translate-x-1/2 max-md:z-100 max-sm:pt-16">
|
||||
<div class="relative w-full max-w-3xl mx-auto min-w-72 max-md:mx-0">
|
||||
<img src="banner.png" alt="100 Cities Worldwide" class="absolute top-0 left-1/2 -translate-x-1/2 max-md:-translate-y-1/2 max-sm:translate-y-[calc(-50%-4rem)] h-48 w-auto z-100 scale-150 saturate-70 brightness-110 object-contain px-4">
|
||||
<img src="banner.png" alt="100 Cities Worldwide" class="absolute top-0 left-1/2 -translate-x-1/2 max-md:-translate-y-1/2 max-sm:translate-y-[calc(-50%-4rem)] h-48 w-auto z-100 scale-150 saturate-70 brightness-110 object-contain px-4 pointer-events-none">
|
||||
<img src="hole.png" alt="" class="w-full h-full max-w-3xl max-sm:scale-200 pointer-events-none">
|
||||
<iframe
|
||||
src="https://felt.com/embed/map/Daydream-Events-pPFQnT34SOq6tYlb2S1IdC?loc=0%2C-73.3%2C1.7z&legend=0&cooperativeGestures=1&link=0&geolocation=0&zoomControls=1&scaleBar=0"
|
||||
|
|
@ -658,8 +658,8 @@
|
|||
<!-- FAQ Item 1 -->
|
||||
<div class="relative transform -rotate-2">
|
||||
<img src="window-3.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">Who can participate in Daydream?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">Who can participate in Daydream?</h3>
|
||||
<p class="text-sm">All high-school & upper-middle-school aged students are welcome to come!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -667,8 +667,8 @@
|
|||
<!-- FAQ Item 2 -->
|
||||
<div class="relative transform rotate-1">
|
||||
<img src="window-4.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">Can I organize a Daydream in my city?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">Can I organize a Daydream in my city?</h3>
|
||||
<p class="text-sm">Definitely! Contact us via daydream@hackclub.com or join #daydream on slack.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -676,8 +676,8 @@
|
|||
<!-- FAQ Item 3 -->
|
||||
<div class="relative transform rotate-2">
|
||||
<img src="window-2.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">All this, for free?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">All this, for free?</h3>
|
||||
<p class="text-sm">Yep! Food, swag and good vibes are all included. Plus, if you're joining us from afar, we'll cover the cost of gas or a bus / train ticket.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -685,8 +685,8 @@
|
|||
<!-- FAQ Item 4 -->
|
||||
<div class="relative transform -rotate-1">
|
||||
<img src="window-1.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">What do I need?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">What do I need?</h3>
|
||||
<p class="text-sm">Your laptop, chargers, toiletries, sleeping bags, and an open mind!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -694,8 +694,8 @@
|
|||
<!-- FAQ Item 5 -->
|
||||
<div class="relative transform rotate-1">
|
||||
<img src="window-4.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-1">What has Hack Club done before?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-1 max-md:text-base">What has Hack Club done before?</h3>
|
||||
<p class="text-sm">Hack Club has run a hackathon in at GitHub HQ, a Game Jam in 50 cities, a hackathon on a train from Vermont to Los Angeles, and more!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -703,8 +703,8 @@
|
|||
<!-- FAQ Item 6 -->
|
||||
<div class="relative transform rotate-1">
|
||||
<img src="window-3.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">I'm not good at coding. Can I still participate?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">I'm not good at coding. Can I still participate?</h3>
|
||||
<p class="text-sm">This game jam is for all skill levels! We'll have workshops and other events so join us and let's learn together.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -712,8 +712,8 @@
|
|||
<!-- FAQ Item 7 -->
|
||||
<div class="relative transform -rotate-2">
|
||||
<img src="window-2.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-lg:text-lg">What if my parents are concerned?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">What if my parents are concerned?</h3>
|
||||
<p class="text-sm">We're here to help! You can see our parent guide here, or they can reach out to us at daydream@hackclub.com for questions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -721,8 +721,8 @@
|
|||
<!-- FAQ Item 8 -->
|
||||
<div class="relative transform -rotate-1">
|
||||
<img src="window-1.png" alt="window" class="w-full h-full object-contain max-md:scale-130 max-xl:scale-110 max-lg:scale-115">
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0">What can I make at Daydream?</h3>
|
||||
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70 max-[900px]:mx-[15vw] max-sm:mx-0 max-sm:px-5 max-lg:px-14 max-xl:px-18">
|
||||
<h3 class="text-xl font-serif font-bold mb-4 max-lg:mb-0 max-md:text-base">What can I make at Daydream?</h3>
|
||||
<p class="text-sm">ANY type of game based on the theme! Platformer, visual novel, clicker game, etc. Be as creative as possible!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue