Scribd
Upload
26 views

Code

Uploaded by

lipif97711
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
26 views

Code

Uploaded by

lipif97711
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>
<!-- Royal Tutorials -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-wrapper">
<form action="#">
<h2>Login</h2>
<div class="input-box">
<input type="text" required>
<label>Enter your email</label>
</div>
<div class="input-box">
<input type="password" required>
<label>Enter your password</label>
</div>
<div class="password-options">
<label for="remember">
<input type="checkbox" id="remember">
<p>Remember me</p>
</label>
<a href="#">Forgot password</a>
</div>
<button type="submit">Log In</button>
<div class="account-options">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>

###################CSS###############

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
body::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(bg.jpg);
background-position: center;
background-size: cover;
}
.login-wrapper{
width: 400px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 8px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-align: center;
}
form{
display: flex;
flex-direction: column;
}
form h2{
font-size: 2rem;
color: #fff;
margin-bottom: 20px;
}
.input-box{
position: relative;
margin: 15px 0;
border-bottom: 2px solid #ccc;
}
.input-box input{
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 1rem;
}
.input-box label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #fff;
font-size: 1rem;
pointer-events: none;
transition: 0.3s ease;
}
/* .input-box input:focus ~ label,
.input-box input:valid ~ label{
transform: translateY(-120%);
font-size: 0.8rem;
top: 10px;
} */
/* .password-options{
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px 0 35px 0;
color: #fff;
} */
/* .password-options label{
display: flex;
align-items: center;
} */
/* .password-options label p{
margin-left: 8px;
} */
/* #remember{
accent-color: #fff;
} */
/* .login-wrapper a{
text-decoration: none;
color: #efefef;
} */
/* .login-wrapper a:hover{
text-decoration: underline;
} */
/* button{
background: #fff;
color: #000;
font-size: 1rem;
font-weight: 600;
padding: 12px 20px;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
transition: 0.3s ease;
} */
/* button:hover{
background: rgba(255,255,255,0.15);
color: #fff;
border-color: #fff;
} */
/* .account-options{
text-align: center;
margin-top: 30px;
color: #fff;
} */

You might also like