HTML
<!DOCTYPE html>
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@500&family=Itim&family=Lobster&family=Tilt+Neon&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-div">
<center><h2>Log In</h2></center>
<center><input type="text" name="" id=""
placeholder="Username">
<input type="password" name="" id=""
placeholder="password">
</center>
<center><button class="log-in" onclick=fun()>
Log In</button></center>
<div class="footer">
<span class="forgot" onclick="ohhno()">Forgot Password ?</span>
<span class="sign" onclick="Notavailable()">Sign In</span>
</div>
</div>
</div>
</body>
</html>
CSS
body {
min-height: 100vh;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
background: url(https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvbG9yZnVsJTIwYmFja2dyb3VuZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1000&q=60);
background-attachment:fixed;
background-repeat:no-repeat ;
background-size:100vw 100vh;
background-attachment:move;
margin:0;
padding:0;
font-family: 'Golos Text', sans-serif;
font-family: 'Itim', cursive;
font-family: 'Lobster', cursive;
font-family: 'Tilt Neon', cursive;
}
.container{
height: 400px;
width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
background:rgba( 255, 255, 255, 0.25 );
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter:blur( 4px );
-webkit-backdrop-filter:blur( 4px );
border-radius:10px;
border:1px solid rgba( 255, 255, 255, 0.18 );
}
.container .inner-div{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.container .inner-div h2{
justify-content: center;
text-align: center;
margin: 20px;
font-size: 26px;
position: relative;
bottom: 30px;
}
.container .inner-div input{
height: 40px;
position: relative;
margin: 20px;
bottom: 45px;
border: none;
width: 80%;
border-radius: 5px;
font-size: 26px;
font-weight: 300;
font-size: 16px;
color: #000;
}
input::placeholder{
font-weight: 300;
font-size: 16px;
color: #000;
align-items: center;
display: flex;
left: 20px;
position: relative;
}
.container .inner-div button{
background: rgb(63,114,255);
background: linear-gradient(90deg, rgba(63,114,255,1) 3%, rgba(0,0,0,1) 96%);
color: #fff;
height: 40px;
width: 80%;
bottom: 20px;
position: relative;
font-size: 26px;
font-weight: 400;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .inner-div .footer span{
font-size: 1em;
color: #000;
padding: 15px;
margin: 2px;
cursor: pointer;
position: relative;
}
.container .inner-div .footer{
display: flex;
justify-content: space-between;
}
@media (min-width:900px) {
.container{
width: 400px;
height: 500px;
position: relative;
}
.container .inner-div h2{
font-size: 36px;
}
.container .inner-div button{
font-size: 36px;
height: 60px;
width: 70%;
}
.container .inner-div input{
height: 60px;
width: 70%;
font-size: 26px;
}
input::placeholder{
font-size: 26px;
}
}
Javascript
function fun(){
Swal.fire("Log in successfull");
}
function Notavailable(){
Swal.fire("Not available");
}
function ohhno(){
Swal.fire("I don't know");
}
