Scribd
Upload
4 views

Motion Notes

The document is an HTML code for a login page featuring a responsive design with a gradient background. It includes a container with a title, input fields for username and password, and a login button, all styled with CSS for a modern look. The layout is designed to be user-friendly and visually appealing, with hover effects and focus styles for interactive elements.

Uploaded by

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

Motion Notes

The document is an HTML code for a login page featuring a responsive design with a gradient background. It includes a container with a title, input fields for username and password, and a login button, all styled with CSS for a modern look. The layout is designed to be user-friendly and visually appealing, with hover effects and focus styles for interactive elements.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2b0000, #660000);
}

.container {
background: rgba(255, 255, 255, 0.05);
padding: 40px;
border-radius: 15px;
box-shadow: 0 0 25px rgba(255, 0, 0, 0.3);
backdrop-filter: blur(10px);
width: 90%;
max-width: 400px;
}

h2 {
text-align: center;
color: #fff;
margin-bottom: 30px;
}

input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: white;
outline: none;
transition: 0.3s;
}

input:focus {
border-color: red;
background: rgba(255, 0, 0, 0.1);
}

button {
width: 100%;
padding: 12px;
background: red;
color: white;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0 15px red;
transition: 0.3s;
}

button:hover {
background: #ff1c1c;
box-shadow: 0 0 25px red, 0 0 50px red;
}

@media (max-width: 500px) {


.container {
padding: 30px 20px;
}
}
</style>
</head>
<body>

<div class="container">
<h2>Login</h2>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button>Login</button>
</div>

</body>
</html>

You might also like