nexussjcet · Amrutha621 · May 31, 2025 · May 31, 2025 · May 31, 2025 · May 31, 2025
diff --git a/README.md b/README.md
@@ -1,8 +1,5 @@
 # 🚀 Internship Task – Landing Page Challenge
 
-Design a beautiful, responsive landing page for our fictional global hackathon event using **any tech stack** of your choice. This is your chance to get creative while following a basic brief.
-
----
 
 ## 📝 Task Description
 
@@ -11,7 +8,7 @@ Create a landing page for our fictional hackathon - **HackSphere 2025**, a globa
 ### 🎯 Required Sections
 
 #### 1. 🔥 Hero Section
-- Event Name: `HackSphere 2025`(fictional)
+- Event Name: `HackSphere 2025`
 - Tagline: _“Code. Create. Conquer.”_
 - Event Date & Location: `June 20–22, 2025 – Online`
 - CTA Button: **Register Now**
@@ -22,8 +19,6 @@ Create a landing page for our fictional hackathon - **HackSphere 2025**, a globa
 #### 3. 🔻 Footer
 - Centered text: `© 2025 HackSphere. All rights reserved.`
 
----
-
 ## 💡 Guidelines
 
 - You can use **any tech stack** of your choice. (Using any framework gets more weightage, eg: React, Svelte, etc.)
@@ -32,24 +27,18 @@ Create a landing page for our fictional hackathon - **HackSphere 2025**, a globa
 - You **can use AI (e.g., ChatGPT)** or **Google** to help with ideas, design, or code.
 - Keep it **simple and clean**.
 
----
-
 ## 🔧 Submission Instructions
 
 1. **Fork** this repository.
 2. Build your project inside a folder with your name.
 3. Once you're done, **create a Pull Request**.
 4. Make sure your code is working, and your landing page opens correctly in the browser.
 
----
-
 ## 🧑‍💻 Need Help?
 
 If you get stuck or have questions:
 - Use Google or AI tools like ChatGPT
 - Or feel free to **reach out to us** for support!
 
----
-
 ## 🙌 Good Luck!
 
diff --git a/image1.jpg b/image1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>HackSphere 2025</title>
+  <link rel="stylesheet" href="style.css"/>
+  <style>
+    /* Core layout styles inside HTML */
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f7f7f7;
+    }
+
+    header {
+      background-color: #4b0082;
+      padding: 15px 30px;
+      color: white;
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .logo {
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .nav-links {
+      list-style: none;
+      display: flex;
+      gap: 20px;
+    }
+
+    .nav-links li a {
+      color: white;
+      text-decoration: none;
+    }
+
+    .hero {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 50px 10%;
+      background-color: #e6e6fa;
+      flex-wrap: wrap;
+    }
+
+    .hero-content {
+      max-width: 50%;
+    }
+
+    .hero-content h1 {
+      font-size: 48px;
+      color: #4b0082;
+    }
+
+    .hero-content p {
+      font-size: 18px;
+    }
+
+    .btn {
+      display: inline-block;
+      margin-top: 15px;
+      padding: 10px 20px;
+      background-color: #4b0082;
+      color: white;
+      text-decoration: none;
+      border-radius: 5px;
+    }
+
+    .hero img {
+      max-width: 400px;
+      height: auto;
+    }
+
+    .countdown-section {
+      text-align: center;
+      padding: 40px 20px;
+      background-color: #f0f0ff;
+    }
+
+    .countdown-section h2 {
+      color: #4b0082;
+    }
+
+    #countdown span {
+      font-weight: bold;
+      font-size: 24px;
+      margin: 0 5px;
+    }
+
+    section {
+      padding: 40px 10%;
+    }
+
+    .about, .schedule {
+      background-color: #ffffff;
+    }
+
+    .about h2, .schedule h2 {
+      color: #4b0082;
+    }
+
+    .footer {
+      background-color: #4b0082;
+      color: white;
+      text-align: center;
+      padding: 15px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Header -->
+  <header>
+    <nav>
+      <div class="logo">HackSphere</div>
+      <ul class="nav-links">
+        <li><a href="#">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#schedule">Schedule</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="hero-content">
+      <h1>HackSphere 2025</h1>
+      <p><em>Code. Create. Conquer.</em></p>
+      <p>June 20–22, 2025 – Online</p>
+      <a href="#" class="btn">Register Now</a>
+    </div>
+    <img src="image1.jpg" alt="Hackathon Image" />
+  </section>
+
+  <!-- Countdown Timer -->
+  <section class="countdown-section">
+    <h2>Countdown to HackSphere 2025</h2>
+    <div id="countdown">
+      <span id="days">00</span> Days 
+      <span id="hours">00</span> Hours 
+      <span id="minutes">00</span> Minutes 
+      <span id="seconds">00</span> Seconds
+    </div>
+  </section>
+
+  <!-- About Section -->
+  <section class="about" id="about">
+    <h2>About the Event</h2>
+    <p>HackSphere 2025 is a global 48-hour hackathon that brings together developers, designers, and creators from around the world to innovate and build amazing solutions.</p>
+    <p>Whether you're a beginner or a pro, this event is your chance to showcase your skills, learn new things, and connect with tech enthusiasts globally.</p>
+  </section>
+
+  <!-- Schedule Section -->
+  <section class="schedule" id="schedule">
+    <h2>Event Schedule</h2>
+    <ul>
+      <li><strong>June 20</strong>: Kickoff & Team Formation</li>
+      <li><strong>June 21</strong>: Hacking Continues + Mentorship</li>
+      <li><strong>June 22</strong>: Final Submission & Judging</li>
+    </ul>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <p>© 2025 HackSphere. All rights reserved.</p>
+  </footer>
+
+  <!-- Countdown Timer Script -->
+  <script>
+    function updateCountdown() {
+      const targetDate = new Date("June 20, 2025 09:00:00").getTime();
+      const now = new Date().getTime();
+      const timeLeft = targetDate - now;
+
+      if (timeLeft <= 0) {
+        document.getElementById("countdown").innerHTML = "HackSphere 2025 has started!";
+        return;
+      }
+
+      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+      document.getElementById("days").textContent = String(days).padStart(2, '0');
+      document.getElementById("hours").textContent = String(hours).padStart(2, '0');
+      document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
+      document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
+    }
+
+    updateCountdown(); // Run once on load
+    setInterval(updateCountdown, 1000); // Update every second
+  </script>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+}
+
+/* Navbar */
+.navbar {
+  background-color: #1a001a;
+  color: white;
+  padding: 10px 0;
+}
+
+.navbar .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.navbar ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  margin: 0;
+}
+
+.navbar a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Hero */
+.hero {
+  background: linear-gradient(to right, #8e2de2, #4a00e0);
+  color: white;
+  padding: 40px 20px;
+}
+
+.hero-flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.hero-text {
+  max-width: 50%;
+}
+
+.hero-image img {
+  width: 400px;
+  max-width: 100%;
+  border-radius: 10px;
+}
+
+/* Button */
+.btn {
+  display: inline-block;
+  background: white;
+  color: #4a00e0;
+  padding: 10px 20px;
+  border-radius: 20px;
+  margin-top: 15px;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Countdown */
+.countdown-section {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+#countdown {
+  font-size: 32px;
+  color: #5c0080;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+/* Footer */
+.footer {
+  text-align: center;
+  padding: 20px;
+  background-color: #f2f2f2;
+  color: #555;
+}