Skip to content

Commit

Permalink
Merge pull request #46 from Dipit12/main
Browse files Browse the repository at this point in the history 
improved the UI of the registration form
  • Loading branch information
@akhileshverma92
akhileshverma92 authored Oct 5, 2024
2 parents beab801 + 87d77d2 commit e49b5f7
Showing 1 changed file with 75 additions and 82 deletions.
157 changes: 75 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
Expand Down

0 comments on commit e49b5f7

Please sign in to comment.