From 87d77d2384a1b26f9f6dd7344e0a4752bcd9170a Mon Sep 17 00:00:00 2001
From: Dipit12 <dipitmadan@gmail.com>
Date: Fri, 4 Oct 2024 16:30:23 +0530
Subject: [PATCH] improved the UI of the registration form

---
 index.html | 157 +++++++++++++++++++++++++----------------------------
 1 file changed, 75 insertions(+), 82 deletions(-)
diff --git a/index.html b/index.html
index 79d3cb6..b9ab936 100644
--- a/index.html
+++ b/index.html
@@ -4,127 +4,120 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>College Club Event</title>
-    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
-<body>
-    <nav class="navbar">
-        <div class="navbar-container">
-            <div class="navbar-logo">
+<body class="bg-gray-100">
+    <nav class="navbar bg-blue-600 text-white p-4 shadow-md">
+        <div class="navbar-container flex justify-between items-center">
+            <div class="navbar-logo text-xl font-bold">
                 <a href="#hero">College Event</a>
             </div>
-            <div class="navbar-toggle" id="mobile-menu">
-                <span class="bar"></span>
-                <span class="bar"></span>
-                <span class="bar"></span>
-            </div>
-            <ul class="navbar-menu">
-                <li><a href="#hero">Home</a></li>
-                <li><a href="#about">About Us</a></li>
-                <li><a href="#schedule">Event Schedule</a></li>
-                <li><a href="#register">Register</a></li>
-                <label id="moon-label">
-                    <input id="check" type="checkbox">
+            <div class="navbar-toggle hidden lg:flex space-x-4">
+                <a href="#hero" class="hover:text-gray-300">Home</a>
+                <a href="#about" class="hover:text-gray-300">About Us</a>
+                <a href="#schedule" class="hover:text-gray-300">Event Schedule</a>
+                <a href="#register" class="hover:text-gray-300">Register</a>
+                <label id="moon-label" class="ml-4">
+                    <input id="check" type="checkbox" class="hidden">
                     <i id="dark-mode-toggle" class="bi bi-brightness-high-fill"></i>
-                    <i id= "dark-mode-toggle2" class="bi bi-moon-stars-fill"></i>
+                    <i id="dark-mode-toggle2" class="bi bi-moon-stars-fill hidden"></i>
                 </label>
-            </ul>
+            </div>
         </div>
     </nav>
 
-    <div class="mouse-follower" id="mouseFollower"> </div>
-    <div class="hero">
-        <video autoplay muted loop id="background-video">
+    <div class="hero relative">
+        <video autoplay muted loop id="background-video" class="w-full h-screen object-cover">
             <source src="assets/videos/bg.mp4" type="video/mp4">
             Your browser does not support the video tag.
         </video>
-        <div class="hero-content">
-            <h1>College Club Annual Event 2024</h1>
-            <p>Join us for an unforgettable experience filled with workshops, competitions, and networking!</p>
-            <p>Date: November 12, 2024</p>
-            <br/>
-            <a href="#registration-form" class="btn">Register Now</a>
+        <div class="hero-content absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white">
+            <h1 class="text-4xl font-bold">College Club Annual Event 2024</h1>
+            <p class="mt-4 text-xl">Join us for an unforgettable experience filled with workshops, competitions, and networking!</p>
+            <p class="mt-2">Date: November 12, 2024</p>
+            <a href="#registration-form" class="mt-6 inline-block bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-700">Register Now</a>
         </div>
     </div>
-    
-    
-    
-    <section id="about" class="about-us">
-        <div class="about-container">
-            <div class="about-image">
-                <img src="./about_img.jpeg" alt="College Club Event">
-            </div>
-            <div class="about-text">
-                <h2>About the Event</h2>
-                <p>
-                    The College Club Annual Event 2024 is your opportunity to connect, learn, and compete with like-minded peers. 
-                    Our event features expert-led workshops, intense programming competitions, and valuable networking opportunities 
-                    with industry professionals.
-                </p>
-                <p>
-                    Whether you're a beginner or an expert, there's something for everyone. Don't miss out on the chance to be part 
-                    of this inspiring day of learning and fun!
-                </p>
+
+    <section id="about" class="about-us py-16 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="about-image w-full md:w-1/2 mb-6 md:mb-0">
+                    <img src="./about_img.jpeg" alt="College Club Event" class="rounded-lg shadow-md w-full">
+                </div>
+                <div class="about-text md:ml-8 w-full md:w-1/2">
+                    <h2 class="text-3xl font-bold mb-4">About the Event</h2>
+                    <p class="text-gray-600 leading-relaxed">
+                        The College Club Annual Event 2024 is your opportunity to connect, learn, and compete with like-minded peers. 
+                        Our event features expert-led workshops, intense programming competitions, and valuable networking opportunities 
+                        with industry professionals.
+                    </p>
+                    <p class="mt-4 text-gray-600 leading-relaxed">
+                        Whether you're a beginner or an expert, there's something for everyone. Don't miss out on the chance to be part 
+                        of this inspiring day of learning and fun!
+                    </p>
+                </div>
             </div>
-         
         </div>
     </section>
-    
-    <section id="schedule" class="event-schedule">
-        <div class="schedule-container">
-            <h2>Event Schedule</h2>
-            <div class="schedule-grid">
-                <div class="schedule-item">
-                    <h3>Workshop on AI</h3>
-                    <p><strong>Time:</strong> 10:00 AM - 12:00 PM</p>
+
+    <section id="schedule" class="event-schedule py-16 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-10">Event Schedule</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="schedule-item p-6 bg-white rounded-lg shadow-md text-center">
+                    <h3 class="text-xl font-bold mb-2">Workshop on AI</h3>
+                    <p class="text-gray-600 mb-2"><strong>Time:</strong> 10:00 AM - 12:00 PM</p>
                     <p>Learn the fundamentals of Artificial Intelligence and its real-world applications in this expert-led workshop.</p>
                 </div>
-                <div class="schedule-item">
-                    <h3>Programming Competition</h3>
-                    <p><strong>Time:</strong> 1:00 PM - 3:00 PM</p>
+                <div class="schedule-item p-6 bg-white rounded-lg shadow-md text-center">
+                    <h3 class="text-xl font-bold mb-2">Programming Competition</h3>
+                    <p class="text-gray-600 mb-2"><strong>Time:</strong> 1:00 PM - 3:00 PM</p>
                     <p>Put your coding skills to the test and compete against peers in an intense programming competition.</p>
                 </div>
-                <div class="schedule-item">
-                    <h3>Networking Session</h3>
-                    <p><strong>Time:</strong> 4:00 PM - 6:00 PM</p>
+                <div class="schedule-item p-6 bg-white rounded-lg shadow-md text-center">
+                    <h3 class="text-xl font-bold mb-2">Networking Session</h3>
+                    <p class="text-gray-600 mb-2"><strong>Time:</strong> 4:00 PM - 6:00 PM</p>
                     <p>Connect with industry professionals, students, and enthusiasts in a relaxed networking environment.</p>
                 </div>
             </div>
         </div>
     </section>
-    
-    <section id="register" class="registration-form">
-        <div class="form-container">
-            <h2>Register Now</h2>
-            <form id="registration-form">
-                <div class="input-group">
-                    <label for="name">Name</label>
-                    <input type="text" id="name" placeholder="Enter your full name" required>
+
+    <section id="register" class="py-16 bg-gray-100">
+        <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-8">
+            <h2 class="text-3xl font-bold text-center mb-6">Register Now</h2>
+            <form id="registration-form" class="space-y-6">
+                <div>
+                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
+                    <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                 </div>
-                <div class="input-group">
-                    <label for="email">Email</label>
-                    <input type="email" id="email" placeholder="Enter your email" required>
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+                    <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                 </div>
-                <div class="input-group">
-                    <label for="event">Choose Event</label>
-                    <select id="event" required>
+                <div>
+                    <label for="event" class="block text-sm font-medium text-gray-700 mb-2">Choose Event</label>
+                    <select id="event" name="event" required class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                         <option value="">Select an event</option>
                         <option value="ai-workshop">AI Workshop</option>
                         <option value="programming-competition">Programming Competition</option>
                         <option value="networking-session">Networking Session</option>
                     </select>
                 </div>
-                <button type="submit" class="btn-register">Submit Registration</button>
+                <div>
+                    <button type="submit" class="w-full py-3 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        Submit Registration
+                    </button>
+                </div>
             </form>
         </div>
     </section>
 
-
-    
-    
-    <footer>
+    <footer class="text-center py-6 bg-blue-600 text-white">
         <p>&copy; 2024 College Club. All rights reserved.</p>
-        <p>GITHUB LINK <a href="https://github.com/akhileshverma92/campusfest">CLICK HERE</a></p>
+        <p>GITHUB LINK <a href="https://github.com/akhileshverma92/campusfest" class="underline">CLICK HERE</a></p>
     </footer>
 
     <script src="script.js"></script>
