body {
display: flex;
align-items: center;
height: 90vh;
background-color: #f2f2f2;
}
.container {
width: 70%;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
form {
padding: 20px;
width: 80%;
margin: 0 auto;
}
input[type="text"], input[type="password"] {
border-radius: 5px;
border: 1px solid #cccccc;
padding: 10px;
width: 90%;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 90%;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
th, td {
border: 2px solid #ccc;
padding: 14px;
text-align: left;
}
th {
background-color: #007BFF;
color: white;
}
a {
display: block;
margin: 20px auto;
text-align: center;
}
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #3498db;
color: #fff;
text-decoration: none;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.btn:hover {
background-color: #2980b9;
cursor: pointer;
}
.container {
border-radius: 10px;
box-shadow: 2px 2px 10px #ff0000;
padding: 20px;
width: 70%;
text-align: center;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
padding: 20px;
text-align: center;
border-radius: 10px;
border: 2px solid #00ff08;
}
|