Newer
Older
body {
background-color: #3CB371; /* Set the background color of the entire page */
margin: 0;
padding: 0;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
width: 30%;
padding: 20px;
background-color: #f4f4f4;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333333;
font-size: 24px;
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
}
input {
width: 100%;
padding: 10px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
margin-top: 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
form {
width: 80%;
}
}
@media (max-width: 576px) {
form {
width: 90%;
}
}