Scribd
Upload
6 views

Styles.css

The document is a CSS stylesheet that styles a login page with a modern and responsive design. It includes styles for the body, login container, headers, form groups, buttons, and media queries for different screen sizes. Key features include a gradient background, a centered login form, and interactive button effects.

Uploaded by

f78jyvwgcd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Styles.css

The document is a CSS stylesheet that styles a login page with a modern and responsive design. It includes styles for the body, login container, headers, form groups, buttons, and media queries for different screen sizes. Key features include a gradient background, a centered login form, and interactive button effects.

Uploaded by

f78jyvwgcd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

*{

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.login-container {
background: #ffffff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
margin: 1rem;
position: relative;
}

.login-header {
text-align: center;
margin-bottom: 2rem;
}

.login-header h2 {
color: #2c3e50;
margin-bottom: 0.5rem;
}

.login-header p {
color: #7f8c8d;
}

.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #2c3e50;
font-weight: 500;
}

.form-group input {
width: 100%;
padding: 0.8rem;
border: 1px solid #bdc3c7;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s ease;
}

.form-group input:focus {
outline: none;
border-color: #3498db;
}

.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}

.remember-me {
display: flex;
align-items: center;
gap: 0.5rem;
color: #7f8c8d;
}

.forgot-password {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}

.forgot-password:hover {
color: #2980b9;
}

.login-btn {
width: 100%;
padding: 1rem;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}

.login-btn:hover {
background: #2980b9;
}

.creator-credit {
position: fixed;
bottom: 10px;
left: 10px;
color: #7f8c8d;
font-size: 0.8rem;
z-index: -1;
}

@media (max-width: 768px) {


.login-container {
margin: 1rem;
padding: 1.5rem;
}

.form-options {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
}

@media (max-width: 480px) {


.login-container {
margin: 1rem;
padding: 1rem;
}

.form-group input {
padding: 0.7rem;
}

.login-btn {
padding: 0.8rem;
}
}

You might also like