diff --git a/index.html b/index.html
new file mode 100644
index 000000000..3acc7d8e0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html><html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HackSphere 2025 - Code. Create. Conquer.</title>
+  <style>
+    :root {
+      --gradient-bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+      --dark-gradient: linear-gradient(135deg, #1a1a2e 0%, #0c0c0c 100%);
+      --accent-color: #00e6e6;
+      --text-primary: #ffffff;
+      --text-secondary: #c3c6e4;
+      --glass-bg: rgba(255, 255, 255, 0.05);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --heading-color: #9d8df1;
+    }* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', sans-serif;
+  background: var(--dark-gradient);
+  color: var(--text-primary);
+  overflow-x: hidden;
+  line-height: 1.6;
+}
+
+nav {
+  background: var(--dark-gradient);
+  padding: 1rem 2rem;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  padding: 2rem;
+  background: var(--gradient-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+.blobs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.5;
+  animation: blobAnimation 25s infinite;
+  mix-blend-mode: screen;
+}
+
+.blob1 {
+  top: 10%;
+  left: 20%;
+  width: 300px;
+  height: 300px;
+  background: #7f00ff;
+}
+
+.blob2 {
+  top: 60%;
+  left: 60%;
+  width: 400px;
+  height: 400px;
+  background: #00e6e6;
+}
+
+.blob3 {
+  top: 30%;
+  left: 70%;
+  width: 200px;
+  height: 200px;
+  background: #ffffff;
+}
+
+@keyframes blobAnimation {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(50px, -50px) scale(1.2); }
+}
+
+h1 {
+  font-size: 3.5rem;
+  background: linear-gradient(135deg, #00e6e6, #ffffff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  z-index: 1;
+}
+
+.tagline {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  margin-top: 1rem;
+  z-index: 1;
+}
+
+.countdown-box,
+.register-btn,
+.live-counter {
+  z-index: 1;
+}
+
+.countdown-box {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 1.5rem 2rem;
+  margin-top: 2rem;
+  font-size: 1.5rem;
+  color: var(--accent-color);
+  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+  max-width: 320px;
+}
+
+.register-btn {
+  background: var(--dark-gradient);
+  border: 2px solid var(--accent-color);
+  color: var(--accent-color);
+  padding: 1rem 2rem;
+  margin-top: 2rem;
+  font-size: 1.1rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.register-btn::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  transition: left 0.5s;
+}
+
+.register-btn:hover::after {
+  left: 100%;
+}
+
+.register-btn:hover {
+  background: var(--accent-color);
+  color: #000;
+}
+
+.live-counter {
+  font-size: 1.2rem;
+  color: var(--text-secondary);
+  margin-top: 1rem;
+}
+
+section {
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  color: var(--heading-color);
+}
+
+.about p,
+.schedule p,
+.partners p,
+.contact p {
+  max-width: 700px;
+  margin: 0 auto 1.5rem;
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+}
+
+.schedule-day {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  margin: 1rem auto;
+  max-width: 600px;
+  padding: 1rem;
+}
+
+.faq-item {
+  max-width: 700px;
+  margin: 1rem auto;
+  text-align: left;
+  background: var(--glass-bg);
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid var(--glass-border);
+}
+
+.partners-logos {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.partner-logo {
+  background: var(--glass-bg);
+  padding: 1rem;
+  border-radius: 12px;
+  border: 1px solid var(--glass-border);
+}
+
+.partner-logo img {
+  height: 50px;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+}
+
+.contact input,
+.contact textarea {
+  display: block;
+  width: 100%;
+  max-width: 500px;
+  margin: 0.5rem auto;
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: none;
+}
+
+.contact button {
+  margin-top: 1rem;
+  background: var(--accent-color);
+  color: #000;
+  border: none;
+  padding: 0.75rem 2rem;
+  font-weight: bold;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+footer {
+  text-align: center;
+  padding: 2rem;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  background: #111;
+}
+
+  </style>
+</head>
+<body>
+  <nav>HackSphere Navigation</nav>  <section class="hero">
+    <div class="blobs">
+      <div class="blob blob1"></div>
+      <div class="blob blob2"></div>
+      <div class="blob blob3"></div>
+    </div>
+    <h1>HackSphere 2025</h1>
+    <p class="tagline">Code. Create. Conquer.</p>
+    <div class="countdown-box" id="countdown">Countdown Loading...</div>
+    <div class="live-counter">🌍 13,492 hackers registered and counting!</div>
+    <button class="register-btn" onclick="showConfetti()">🚀 Register Now</button>
+  </section>  <section class="about">
+    <h2 class="section-title">About HackSphere</h2>
+    <p>HackSphere 2025 is a global 48-hour hackathon designed to bring together developers, designers, and creators from across the world. This online event fosters collaboration, creativity, and rapid problem-solving.</p>
+    <p>Participants will form teams, build innovative solutions, and compete for prizes while learning from industry mentors and connecting with like-minded individuals.</p>
+  </section>  <section class="schedule">
+    <h2 class="section-title">Event Schedule</h2>
+    <div class="schedule-day"><strong>Day 1:</strong> Kickoff, team formation, idea pitching</div>
+    <div class="schedule-day"><strong>Day 2:</strong> Workshops, hacking, mentorship</div>
+    <div class="schedule-day"><strong>Day 3:</strong> Submissions, judging, closing</div>
+  </section>  <section class="faq">
+    <h2 class="section-title">FAQs</h2>
+    <div class="faq-item">
+      <strong>Who can participate?</strong>
+      <p>Anyone worldwide — students, professionals, or hobbyists.</p>
+    </div>
+    <div class="faq-item">
+      <strong>Is there a fee?</strong>
+      <p>No. HackSphere is 100% free.</p>
+    </div>
+    <div class="faq-item">
+      <strong>What do I need to join?</strong>
+      <p>A computer, internet connection, and creativity.</p>
+    </div>
+  </section>  <section class="partners">
+    <h2 class="section-title">Our Partners</h2>
+    <div class="partners-logos">
+      <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
+      <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
+      <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
+    </div>
+  </section>  <section class="contact">
+    <h2 class="section-title">Contact Us</h2>
+    <p>Email us at <a href="mailto:info@hacksphere.com">info@hacksphere.com</a></p>
+    <input type="text" placeholder="Your Name">
+    <input type="email" placeholder="Your Email">
+    <textarea placeholder="Your Message"></textarea>
+    <button>Send Message</button>
+  </section>  <footer>
+    © 2025 HackSphere. All rights reserved.
+  </footer>  <script>
+    const countdown = document.getElementById("countdown");
+    const eventDate = new Date("June 20, 2025 00:00:00").getTime();
+    const updateCountdown = () => {
+      const now = new Date().getTime();
+      const distance = eventDate - now;
+      if (distance < 0) {
+        countdown.innerHTML = "🚀 The event has begun!";
+        return;
+      }
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      countdown.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s left`;
+    };
+    setInterval(updateCountdown, 1000);
+
+    function showConfetti() {
+      alert('🎉 Thanks for registering!');
+      const confetti = document.createElement('div');
+      confetti.innerHTML = '🎊 🎈 🎉 ✨ 🎆 🎇';
+      confetti.style.position = 'fixed';
+      confetti.style.top = '20%';
+      confetti.style.left = '50%';
+      confetti.style.transform = 'translate(-50%, -50%)';
+      confetti.style.fontSize = '2rem';
+      confetti.style.zIndex = '1000';
+      document.body.appendChild(confetti);
+      setTimeout(() => confetti.remove(), 3000);
+    }
+  </script></body>
+</html>
