WBTuck/laughs-drafts-comedy-showcase
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Laughs & Drafts Comedy Showcase</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: '#FF5A5F',17 secondary: '#00A699',18 }19 }20 }21 }22 </script>23</head>24<body class="bg-gray-100">25 <custom-navbar></custom-navbar>26 27 <main class="container mx-auto px-4 py-12">28 <!-- Hero Section -->29 <section class="hero bg-gradient-to-r from-primary to-secondary rounded-2xl p-8 md:p-12 text-white mb-16">30 <div class="max-w-3xl mx-auto text-center">31 <h1 class="text-4xl md:text-6xl font-bold mb-6">Laughs & Drafts</h1>32 <h2 class="text-2xl md:text-3xl font-semibold mb-8">Monthly Comedy Showcase</h2>33 <p class="text-xl mb-8">Last Friday of every month at The Sports Haven</p>34 <div class="flex flex-col sm:flex-row justify-center gap-4">35 <a href="#next-show" class="bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">Next Show Info</a>36 <a href="#signup" class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-primary transition">Sign Up to Perform</a>37 </div>38 </div>39 </section>40 41 <!-- Next Show Section -->42 <section id="next-show" class="mb-16">43 <h2 class="text-3xl font-bold mb-8 text-center">Next Show</h2>44 <div class="bg-white rounded-2xl shadow-xl overflow-hidden max-w-4xl mx-auto">45 <div class="md:flex">46 <div class="md:w-1/2">47 <img src="http://static.photos/black/1024x576/42" alt="Comedy Show" class="w-full h-full object-cover">48 </div>49 <div class="p-8 md:w-1/2">50 <h3 class="text-2xl font-bold mb-4">Friday, May 31st</h3>51 <div class="flex items-center mb-4">52 <i data-feather="clock" class="mr-2"></i>53 <span>8:00 PM - 10:00 PM</span>54 </div>55 <div class="flex items-center mb-4">56 <i data-feather="map-pin" class="mr-2"></i>57 <span>The Sports Haven, 123 Main St</span>58 </div>59 <div class="flex items-center mb-6">60 <i data-feather="dollar-sign" class="mr-2"></i>61 <span>$10 Cover (First drink included!)</span>62 </div>63 <p class="mb-6">Join us for a night of laughter with some of the best up-and-coming comedians in the city. Hosted by local favorite Mike Standup.</p>64 <a href="#" class="bg-primary text-white px-6 py-2 rounded-full font-bold inline-block hover:bg-opacity-90 transition">Get Tickets</a>65 </div>66 </div>67 </div>68 </section>69 70 <!-- Featured Comedians -->71 <section class="mb-16">72 <h2 class="text-3xl font-bold mb-8 text-center">Featured Comedians</h2>73 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">74 <!-- Comedian 1 -->75 <div class="bg-white rounded-xl shadow-lg overflow-hidden">76 <img src="http://static.photos/people/640x360/1" alt="Comedian" class="w-full h-48 object-cover">77 <div class="p-6">78 <h3 class="text-xl font-bold mb-2">Sarah Laughsalot</h3>79 <p class="text-gray-600 mb-4">"The queen of awkward pauses"</p>80 <a href="#" class="text-primary font-semibold hover:underline">View Profile</a>81 </div>82 </div>83 84 <!-- Comedian 2 -->85 <div class="bg-white rounded-xl shadow-lg overflow-hidden">86 <img src="http://static.photos/people/640x360/2" alt="Comedian" class="w-full h-48 object-cover">87 <div class="p-6">88 <h3 class="text-xl font-bold mb-2">Chuck Jokerson</h3>89 <p class="text-gray-600 mb-4">"Observational humor at its finest"</p>90 <a href="#" class="text-primary font-semibold hover:underline">View Profile</a>91 </div>92 </div>93 94 <!-- Comedian 3 -->95 <div class="bg-white rounded-xl shadow-lg overflow-hidden">96 <img src="http://static.photos/people/640x360/3" alt="Comedian" class="w-full h-48 object-cover">97 <div class="p-6">98 <h3 class="text-xl font-bold mb-2">Gina Gigglez</h3>99 <p class="text-gray-600 mb-4">"Dark humor with a smile"</p>100 <a href="#" class="text-primary font-semibold hover:underline">View Profile</a>101 </div>102 </div>103 </div>104 </section>105 106 <!-- Sign Up Section -->107 <section id="signup" class="bg-white rounded-2xl shadow-xl p-8 mb-16 max-w-2xl mx-auto">108 <h2 class="text-3xl font-bold mb-6 text-center">Sign Up to Perform</h2>109 <form class="space-y-4">110 <div>111 <label for="name" class="block mb-1 font-medium">Full Name</label>112 <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">113 </div>114 <div>115 <label for="email" class="block mb-1 font-medium">Email</label>116 <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">117 </div>118 <div>119 <label for="phone" class="block mb-1 font-medium">Phone Number</label>120 <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">121 </div>122 <div>123 <label for="experience" class="block mb-1 font-medium">Comedy Experience (Years)</label>124 <input type="number" id="experience" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">125 </div>126 <div>127 <label for="video" class="block mb-1 font-medium">Link to Performance Video</label>128 <input type="url" id="video" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">129 </div>130 <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-bold hover:bg-opacity-90 transition">Submit Application</button>131 </form>132 </section>133 134 <!-- Testimonials -->135 <section class="mb-16">136 <h2 class="text-3xl font-bold mb-8 text-center">What People Are Saying</h2>137 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">138 <div class="bg-white p-6 rounded-xl shadow-lg">139 <div class="flex items-center mb-4">140 <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-12 h-12 rounded-full mr-4">141 <div>142 <h3 class="font-bold">Mark T.</h3>143 <div class="flex text-yellow-400">144 <i data-feather="star" class="w-4 h-4 fill-current"></i>145 <i data-feather="star" class="w-4 h-4 fill-current"></i>146 <i data-feather="star" class="w-4 h-4 fill-current"></i>147 <i data-feather="star" class="w-4 h-4 fill-current"></i>148 <i data-feather="star" class="w-4 h-4 fill-current"></i>149 </div>150 </div>151 </div>152 <p>"Best comedy night in town! The atmosphere is perfect, drinks are great, and the comedians are hilarious. I come every month!"</p>153 </div>154 <div class="bg-white p-6 rounded-xl shadow-lg">155 <div class="flex items-center mb-4">156 <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-12 h-12 rounded-full mr-4">157 <div>158 <h3 class="font-bold">Lisa G.</h3>159 <div class="flex text-yellow-400">160 <i data-feather="star" class="w-4 h-4 fill-current"></i>161 <i data-feather="star" class="w-4 h-4 fill-current"></i>162 <i data-feather="star" class="w-4 h-4 fill-current"></i>163 <i data-feather="star" class="w-4 h-4 fill-current"></i>164 <i data-feather="star" class="w-4 h-4 fill-current"></i>165 </div>166 </div>167 </div>168 <p>"As a performer, this is one of my favorite places to do standup. The crowd is amazing and the organizers really take care of the comedians."</p>169 </div>170 </div>171 </section>172 </main>173 174 <custom-footer></custom-footer>175 176 <!-- Component Scripts -->177 <script src="components/navbar.js"></script>178 <script src="components/footer.js"></script>179 <script src="script.js"></script>180 <script>feather.replace();</script>181<script src="https://deepsite.hf.co/deepsite-badge.js"></script>182</body>183</html>