Scribd
Upload
70 views3 pages

Texto

Uploaded by

Octávio Muendane
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
70 views3 pages

Texto

Uploaded by

Octávio Muendane
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tela de Login</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #d299c2, #fef9d7);
}

.login-container {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
width: 350px;
text-align: center;
}

.login-container .icon {
width: 80px;
height: 80px;
background: #3a3a3a;
border-radius: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

.login-container .icon img {


width: 50%;
height: 50%;
}

.login-container h2 {
margin: 20px 0;
color: white;
}

.login-container input[type="email"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
outline: none;
}

.login-container input[type="email"] {
background: rgba(0, 0, 0, 0.2);
color: white;
}

.login-container input[type="password"] {
background: rgba(0, 0, 0, 0.2);
color: white;
}

.login-container label {
display: block;
text-align: left;
color: white;
font-size: 12px;
}

.login-container .actions {
display: flex;
justify-content: space-between;
margin: 10px 0;
}

.login-container .actions a {
color: #d299c2;
text-decoration: none;
}

.login-container .actions input[type="checkbox"] {


margin-right: 5px;
}

.login-container button {
background: #3a3a3a;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}

.login-container button:hover {
background: #555555;
}
</style>
</head>
<body>
<div class="login-container">
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/512/847/847969.png"
alt="User Icon">
</div>
<h2>Login</h2>
<form>
<input type="email" placeholder="Email ID">
<input type="password" placeholder="Password">
<div class="actions">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot Password?</a>
</div>
<button type="submit">LOGIN</button>
</form>
</div>
</body>
</html>

You might also like