linsa11's picture
Create an event conference website with hero countdown timer, speaker lineup with bios, schedule/agenda tabs, venue information with map, ticket tiers and pricing, sponsors logos grid, past event highlights, and registration form.
73f4f81 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechFusion Summit 2024 | The Ultimate Tech Conference</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/countdown.js"></script>
<script src="components/speakers.js"></script>
<script src="components/schedule.js"></script>
<script src="components/venue.js"></script>
<script src="components/pricing.js"></script>
<script src="components/sponsors.js"></script>
<script src="components/highlights.js"></script>
<script src="components/registration.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<!-- Hero Section with Countdown -->
<section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-5xl font-bold mb-6">TechFusion Summit 2024</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">Join the most innovative tech conference of the year featuring cutting-edge technologies and industry leaders.</p>
<div class="mb-12">
<p class="text-lg mb-4">October 15-17, 2024 | San Francisco, CA</p>
<custom-countdown date="2024-10-15"></custom-countdown>
</div>
<a href="#register" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">
Register Now
</a>
</div>
</section>
<!-- Speakers Section -->
<section id="speakers" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Featured Speakers</h2>
<custom-speakers></custom-speakers>
</div>
</section>
<!-- Schedule Section -->
<section id="schedule" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Event Schedule</h2>
<custom-schedule></custom-schedule>
</div>
</section>
<!-- Venue Section -->
<section id="venue" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Venue Information</h2>
<custom-venue></custom-venue>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Ticket Options</h2>
<custom-pricing></custom-pricing>
</div>
</section>
<!-- Sponsors Section -->
<section id="sponsors" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Our Sponsors</h2>
<custom-sponsors></custom-sponsors>
</div>
</section>
<!-- Highlights Section -->
<section id="highlights" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Past Event Highlights</h2>
<custom-highlights></custom-highlights>
</div>
</section>
<!-- Registration Section -->
<section id="register" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-16">Register Now</h2>
<custom-registration></custom-registration>
</div>
</section>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>