{html code}
<html>
<link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>
<title>Login Page</title>
<style>
a:hover{color: red;}
a:active{color: yellow;}
</style>
</head>
<body>
<div class='container'>
<div class="head"><h3>* Login form</h3></div>
<input class='id' placeholder="email or username" >
<br><br><br>
<input class='password' placeholder="password" type='password'>
<br><br><br><br>
<input class='button' type="submit" value="Submit">
<div class="text">
<p><i>Forget Password!</i>
<a href='https://www.gmail.com'>Click here</a>
</p>
</div>
</div>
</body>
</html>
{css code}
body{
display: flex;
padding: 50px;
margin: 20px;
background: linear-gradient(325deg, purple, rgb(76, 0, 255));
}
.container{
position: absolute;
width: 320px;
height: 300px;
background: linear-gradient(180deg, rgba(223, 220, 220, 0.459), rgba(214, 214, 214, 0.301));
}
.head{
position: relative;
left: 30%;
font-family: 'poppins', sans-serif;
font-size: 15px;
color: white;
}
.id{
width: 60%;
top: 10%;
left: 10%;
position: relative;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid white;
}
.password{
width: 60%;
top: 10%;
left: 10%;
position: relative;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid white;
}
.button{
position: relative;
left: 40%;
border-radius: 10%;
background: transparent;
box-shadow: 0 0 20px white;
outline: none;
}
.text{
color: white;
position: relative;
left: 10%;
}
To see how the code works click on the link: click here
For coloring animation visit link: click here
Comments
Post a Comment