-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from Dipit12/main
improved the UI of the registration form
- Loading branch information
Showing
1 changed file
with
75 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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>© 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> | ||
|