-
Notifications
You must be signed in to change notification settings - Fork 110
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 #364 from KrishPatel1205/branch2
[FIXED] Feature: Adding a registration page for live events #361
- Loading branch information
Showing
2 changed files
with
366 additions
and
1 deletion.
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
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 |
|---|---|---|
| @@ -0,0 +1,364 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" | ||
| /> | ||
| <link rel="stylesheet" href="styles.css" type="text/css" /> | ||
| <link rel="icon" type="image/png" href="images/logo copy.png" /> | ||
| <link | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <title>Book Your Ticket</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #ffff; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| color: black; | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| background-color: white; | ||
| color: black; | ||
| padding: 1em 0; | ||
| text-align: center; | ||
| margin-top: 300px; | ||
| } | ||
|
|
||
| main { | ||
| padding: 1em; | ||
| width: 100%; | ||
| max-width: 800px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-top: 100px; | ||
| margin-bottom: 100px; | ||
| } | ||
|
|
||
| .confirmation { | ||
| margin-top: 20px; | ||
| display: none; /* Initially hidden */ | ||
| color: green; /* Style for confirmation message */ | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Arial", sans-serif; | ||
| background-color: #f9f9f9; | ||
| color: #333; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .footer-section { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .registration-form { | ||
| background-color: #fff; | ||
| padding: 40px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | ||
| width: 100%; | ||
| max-width: 400px; | ||
| border: 1px solid #000; | ||
| } | ||
|
|
||
| .registration-form h2 { | ||
| text-align: center; | ||
| color: #000; | ||
| margin-bottom: 30px; | ||
| font-size: 32px; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .form-group { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .form-group label { | ||
| display: block; | ||
| font-weight: bold; | ||
| color: #000; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .form-group input, | ||
| .form-group select { | ||
| width: 100%; | ||
| padding: 12px; | ||
| border: 1px solid #000; | ||
| border-radius: 4px; | ||
| font-size: 16px; | ||
| background-color: #fff; | ||
| color: #000; | ||
| } | ||
|
|
||
| .form-group input:focus, | ||
| .form-group select:focus { | ||
| outline: none; | ||
| border-color: #333; | ||
| } | ||
|
|
||
| .form-group input[type="submit"] { | ||
| background-color: #000; | ||
| color: #fff; | ||
| font-size: 18px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| border: none; | ||
| padding: 14px; | ||
| } | ||
|
|
||
| .form-group input[type="submit"]:hover { | ||
| background-color: #333; | ||
| } | ||
|
|
||
| .form-group select { | ||
| height: 50px; | ||
| } | ||
|
|
||
| /* For small screens */ | ||
| @media (max-width: 600px) { | ||
| .registration-form { | ||
| padding: 20px; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <nav class="navbar"> | ||
| <a href="index.html" class="flex" | ||
| ><img src="images/logo.png" class="logo" /> | ||
| <span class="website-name tracking-tight">Code Social</span></a | ||
| > | ||
|
|
||
| <!-- Hamburger Menu --> | ||
| <div class="hamburger-menu"> | ||
| <div class="toggle-button"> | ||
| <img src="/images/hamburger.png" alt="open" id="hamburger-img" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Navbar Links --> | ||
| <ul class="navbar-links flex"> | ||
| <li class="ml-20"> | ||
| <a href="maintenance.html">Live Events</a> | ||
| <ul class="dropdown" style="display: none"> | ||
| <li><a href="booking.html">Book Tickets</a></li> | ||
| <li><a href="maintenance.html">Why don't you react?</a></li> | ||
| </ul> | ||
| </li> | ||
| <!-- blog section --> | ||
| <ul class="navbar-links flex"> | ||
| <li class="ml-20"> | ||
| <a href="blog.html">Blogs</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <li class="community"> | ||
| <a href="maintenance.html">Join Our Community</a> | ||
| <ul class="dropdown" style="display: none"> | ||
| <li><a href="maintenance.html">WhatsApp</a></li> | ||
| <li><a href="maintenance.html">Discord</a></li> | ||
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="learning.html">Learning</a> | ||
| <ul class="dropdown" style="display: none"> | ||
| <li><a href="./Resources.html">Free Learning Resources</a></li> | ||
| <li><a href="#">Mentorship Programs</a></li> | ||
| <li><a href="#">Peer-to-Peer Sessions</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="hamburger-menu"> | ||
| <div class="toggle-button"> | ||
| <span class="about-text">About us</span> | ||
| </div> | ||
| <ul class="dropdown"> | ||
| <li><a href="mentorship.html">Meet Our Team</a></li> | ||
| <li><a href="#">Join Our Team</a></li> | ||
| <li><a href="#">Contact Us</a></li> | ||
| <li><a href="#">Follow Us</a></li> | ||
| </ul> | ||
| </li> | ||
|
|
||
| <li> | ||
| <a href="maintenance.html">Follow Us</a> | ||
| </li> | ||
| <!-- Dark Mode Toggle --> | ||
| <li> | ||
| <button id="theme-toggle" class="theme-toggle-btn"> | ||
| <img | ||
| src="images/dark-mode.png" | ||
| alt="theme-mode" | ||
| id="theme-toggle-icon" | ||
| /> | ||
| </button> | ||
| <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" --> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <div class="container"> | ||
| <div class="registration-form"> | ||
| <h2>Registration Form</h2> | ||
| <form id="registrationForm"> | ||
| <div class="form-group"> | ||
| <label for="name">Full Name</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| placeholder="Enter your full name" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="email">Email Address</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| placeholder="Enter your email" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label for="event">Choose Event</label> | ||
| <select id="event" name="event" required> | ||
| <option value="" disabled selected>Select an event</option> | ||
| <option value="event1">Event 1 - Tech Innovations</option> | ||
| <option value="event2">Event 2 - Marketing Strategies</option> | ||
| <option value="event3">Event 3 - Future of AI</option> | ||
| <option value="event4">Event 4 - Virtual Networking</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <input type="submit" value="Register" /> | ||
| </div> | ||
| </form> | ||
| <div class="confirmation" id="confirmationMessage"> | ||
| Thank you for registering! Your submission has been received. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| // Get the form and confirmation message elements | ||
| const form = document.getElementById("registrationForm"); | ||
| const confirmationMessage = document.getElementById( | ||
| "confirmationMessage" | ||
| ); | ||
|
|
||
| // Add an event listener for form submission | ||
| form.addEventListener("submit", function (event) { | ||
| event.preventDefault(); // Prevent the default form submission | ||
|
|
||
| // Display the confirmation message | ||
| confirmationMessage.style.display = "block"; | ||
|
|
||
| // Optionally, you can clear the form fields if needed | ||
| form.reset(); | ||
| }); | ||
| </script> | ||
| <footer class="footer-section"> | ||
| <div class="container"> | ||
| <!-- Logo and About Section --> | ||
| <div class="footer-logo-about"> | ||
| <a href="index.html" class="footer-logo-link"> | ||
| <img | ||
| src="/images/logo.png" | ||
| alt="Code Social Logo" | ||
| class="footer-logo" | ||
| /> | ||
| <span class="website-name">Code Social</span> | ||
| </a> | ||
| <p class="footer-about-text"> | ||
| Code Social Community is a vibrant and inclusive space for tech | ||
| enthusiasts <br /> | ||
| to learn, grow, and connect. Founded in 2023, our mission is to | ||
| empower individuals <br /> | ||
| with resources, mentorship, and opportunities to cultivate their | ||
| skills, explore their interests, and <br />collaborate with | ||
| like-minded peers. | ||
| </p> | ||
| <div class="social-icons"> | ||
| <a href="https://wa.me/your-whatsapp-number" target="_blank" | ||
| ><img src="./images/whatsapp-icon.png" alt="WhatsApp" | ||
| /></a> | ||
| <a href="https://discord.gg/MSTNyRSPYW" target="_blank" | ||
| ><img src="./images/discord-icon.png" alt="Discord" | ||
| /></a> | ||
| <a | ||
| href="https://www.linkedin.com/company/code-social/" | ||
| target="_blank" | ||
| ><img src="./images/linkedin-icon.png" alt="LinkedIn" | ||
| /></a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Links Section --> | ||
| <div class="footer-links"> | ||
| <div class="footer-column"> | ||
| <p class="footer-title">Quick Links</p> | ||
| <ul class="footer-list"> | ||
| <li><a href="#">About Us</a></li> | ||
| <li><a href="#">Events</a></li> | ||
| <li><a href="#">Community Guidelines</a></li> | ||
| <li><a href="#">Careers</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="footer-column"> | ||
| <p class="footer-title">Help</p> | ||
| <ul class="footer-list"> | ||
| <li><a href="#">Contact Us</a></li> | ||
| <li><a href="#">Volunteer Opportunities</a></li> | ||
| <li><a href="#">Terms & Conditions</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Footer Bottom --> | ||
| <hr class="footer-divider" /> | ||
| <p class="footer-bottom-text"> | ||
| © Copyright 2024, All Rights Reserved by Code Social | ||
| </p> | ||
| </footer> | ||
| </body> | ||
| </html> |