Skip to content

Changes in Register page #206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mayureshd-18 merged 3 commits into from
Feb 16, 2025
Merged

Changes in Register page #206

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90bf19e
Changes in Register page
RiyanshiTomar Feb 11, 2025
4b31efe
New changes in Register page
RiyanshiTomar Feb 13, 2025
7cde43d
Responsiveness
RiyanshiTomar Feb 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 236 additions & 14 deletions public/Register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -9,63 +10,252 @@
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #e9f5ff;
background: rgb(247, 247, 178);
color: #333;
}

.container {
max-width: 700px;
margin: 50px auto;
max-width: 100% auto;
margin-top: 10px auto;
margin-left: 50px;
margin-right:50px;
background: #fff;
padding: 25px;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 1vw solid rgb(247, 247, 178);
box-shadow: 0 4px 8px rgba(238, 165, 165, 0.2);
}

#nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100% auto;
padding: 2vw;
background: #f7e2b1ea;
flex-wrap: wrap;
}

#nav img {
width: 10%;
max-width: 100px;
height:auto;
}

#nav #right {
display: flex;
align-items: center;
gap: 2vw;
flex-wrap:wrap;
}

#nav a {
text-decoration: none;
font-weight: 400px;
color: #000;
font-size: 1rem;
letter-spacing: -1px;
transition: font-size 0.3s;
}

#nav a:hover {
font-size: 2vw;
}

@media (min-width: 768px) {
#nav {
flex-direction: row;
justify-content: space-between;
padding: 30px 50px;
}

#nav img {
width: 100%;
max-width: 100px;
height:auto;
}

#nav a {
font-size: 1.5vw;
}

#nav i {
font-size: 1.5vw;
}

}

#nav i {
font-weight: 100px;
font-size: 1rem;
}

#right a.login-btn {
padding: 10px 20px;
background: #000000;
color: white;
border-radius: 25px;
font-size: 1.5rem;
text-decoration: none;
font-weight: bold;
}

#right a.login-btn:hover {
color: black;
background: #ffffff;
}

h1 {
text-align: center;
color: #007BFF;
color: rgb(240, 99, 99);
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 15px;
font-weight: bold;
}
input, textarea, select {

input,
textarea,
select {
margin-top: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
font-size: 1rem;
width:100%;
}

textarea {
resize: vertical;
}

button {
margin-top: 20px;
padding: 12px;
font-size: 18px;
font-size: 1rem;
color: #fff;
background-color: #007BFF;
background-color: rgb(226, 100, 100);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
background-color: rgb(237, 56, 56);
}

.message {
margin-top: 20px;
text-align: center;
font-size: 18px;
color: #28a745;
display: none;
}

.container2 {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

.grid-container {
margin: 4vw;
height: auto;
align-items: center;
width: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}

.grid-item {
background-color: rgba(237, 230, 230, 0.674);
padding: 20px;
border-radius: 10px;
}

.grid-item h2 {
margin-bottom: 20px;
}

.grid-item a {
display: block;
color: #333;
text-decoration: none;
margin: 10px 0;
}

.grid-item a:hover {
text-decoration: underline;
}

.footer {
margin-top: 50px;
font-size: 12px;
color: #333;
font-size: 1rem;
}

.social-media {
margin-top: 30px;
}

.social-media a {
margin: 0 10px;
font-size: 1rem;
color: #333;
text-decoration: none;
}

.social-media a:hover {
color: #000;
}

.quote {
margin-top: 1rem;
}

.vertical-logo {
font-size: 2.5vw;
}

#goto-top-btn {
background-color: white;
padding: 15px 19px;
border: none;
border-radius: 50%;
position: fixed;
bottom: 118px;
right: 30px;
display: none;
}

#goto-top-btn:hover {
background-color: #bdbaba;
}
</style>
</head>

<body>
<div id="nav">
<a href="index.html"><img class="icon magnet" src="./image/lumina1.png" alt="" /></a>
<div id="right">
<a href="jobs.html">Jobs</a>
<a href="internships.html">Internships</a>
<a href="mentorship.html">Mentorships</a>
<a href="resources.html">Resources</a>
<a href="events&webinar.html">Events</a>
<a href="login.html" class="login-btn magnet">Login</a>
</div>
</div>
<div class="container">
<h1>Register for Workshop</h1>
<form id="workshopForm">
Expand All @@ -88,18 +278,49 @@ <h1>Register for Workshop</h1>
</select>

<label for="comments">Comments or Questions</label>
<textarea id="comments" name="comments" rows="4" placeholder="Any additional information or questions"></textarea>
<textarea id="comments" name="comments" rows="4"
placeholder="Any additional information or questions"></textarea>

<button type="submit">Register</button>
</form>
<div class="message" id="successMessage">You have successfully registered for the workshop! We will contact you soon.</div>
<div class="message" id="successMessage">You have successfully registered for the workshop! We will contact you
soon.</div>
</div>
<div class="container2">
<div class="grid-container">
<div class="grid-item">
<h2>Company Policies</h2>
<a href="#">Privacy Policy</a>
<a href="#">Returns</a>
<a href="#">Terms & Conditions</a>
<a href="#">Shipping</a>
</div>
<div class="vertical-logo" style="color:black;">LUMINA</div>
<div class="grid-item">
<h2>Get in Touch</h2>
<a href="#">Instagram</a>
<a href="#">Facebook</a>
<a href="#">LinkedIn</a>
<a href="#">Contact Us</a>
</div>
</div>
<div class="social-media">
<a href="#">Instagram</a> |
<a href="#">Facebook</a> |
<a href="#">LinkedIn</a>
</div>
<div class="footer">
Email: contact@lumina.com <br>
&copy; <span id="copyright-year"></span> All Rights Reserved <span style="color:red;">Lumina</span>
</div>
</div>


<script>
const form = document.getElementById('workshopForm');
const successMessage = document.getElementById('successMessage');

form.addEventListener('submit', function(event) {
form.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form submission from reloading the page

// Display success message
Expand All @@ -110,4 +331,5 @@ <h1>Register for Workshop</h1>
});
</script>
</body>

</html>