Skip to content

Commit 0689407

Browse files
div-dev123div-dev123
authored
Create index.html
1 parent 3811351 commit 0689407

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎index.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Registration Form</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
background-color: #f4f4f9;
15+
}
16+
.form-container {
17+
background-color: white;
18+
padding: 2rem;
19+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
20+
border-radius: 10px;
21+
width: 400px;
22+
margin-right: 2rem;
23+
}
24+
h2 {
25+
text-align: center;
26+
margin-bottom: 1.5rem;
27+
font-size: 24px;
28+
}
29+
label {
30+
display: block;
31+
margin-bottom: 0.5rem;
32+
font-weight: bold;
33+
color: #333;
34+
}
35+
input[type="text"],
36+
input[type="email"],
37+
input[type="password"],
38+
input[type="date"] {
39+
width: 100%;
40+
padding: 0.75rem;
41+
margin-bottom: 1rem;
42+
border: 1px solid #ccc;
43+
border-radius: 5px;
44+
font-size: 14px;
45+
}
46+
input[type="checkbox"] {
47+
margin-right: 10px;
48+
}
49+
.submit-btn {
50+
background-color: #28a745;
51+
color: white;
52+
border: none;
53+
padding: 0.75rem 1.5rem;
54+
border-radius: 5px;
55+
cursor: pointer;
56+
width: 100%;
57+
font-size: 16px;
58+
}
59+
.submit-btn:hover {
60+
background-color: #218838;
61+
}
62+
.table-container {
63+
margin-left: 2rem;
64+
background-color: white;
65+
padding: 2rem;
66+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
67+
border-radius: 10px;
68+
width: 500px;
69+
}
70+
table {
71+
width: 100%;
72+
border-collapse: collapse;
73+
margin-top: 1rem;
74+
}
75+
table, th, td {
76+
border: 1px solid #ccc;
77+
}
78+
th, td {
79+
padding: 0.75rem;
80+
text-align: left;
81+
}
82+
th {
83+
background-color: #f4f4f9;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
89+
<div class="form-container">
90+
<h2>Registration Form</h2>
91+
<form id="user-form">
92+
<label for="name">Name</label>
93+
<input required type="text" id="name" name="name" placeholder="Enter full name" required>
94+
95+
<label for="email">Email</label>
96+
<input required type="email" id="email" name="email" placeholder="Enter email" required>
97+
98+
<label for="password">Password</label>
99+
<input required type="password" id="password" name="password" placeholder="Enter password" required>
100+
101+
<label for="dob">Date of Birth</label>
102+
<input required type="date" id="dob" name="dob" required>
103+
<small style="color: grey;">You must be between 18 and 55 years old.</small>
104+
105+
106+
<label for="acceptTerms">
107+
<input type="checkbox" id="acceptTerms" name="acceptTerms"> Accept Terms & Conditions
108+
</label>
109+
110+
<button type="submit" class="submit-btn">Submit</button>
111+
</form>
112+
</div>
113+
114+
<div class="table-container">
115+
<h2>User Entries</h2>
116+
<div id="user-entries">
117+
118+
</div>
119+
</div>
120+
121+
122+
<script src="index.js"></script>
123+
124+
</body>
125+
</html>

0 commit comments

Comments
 (0)