In this video we are going to learn how to make login form using HTML and CSS. The design is inspired by flat UI and flat design we have used material colors for flat look
Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw
Source Code :
HTML :
<html>
<head>
<title>Animated Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<img src="images/avatar.svg">
<h3>Login</h3>
<input type="text" placeholder="Username" maxlength="20">
<input type="password" placeholder="password" maxlength="20">
<button class="submit">Login</button>
</form>
</body>
</html>
CSS :
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right ,#f9b16e,#f68080);
}
form {
width: 25%;
height: 85%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 25px -4px rgba(0,0,0,0.2);
border-radius: 5px;
}
img {
width: 120px;
height: 120px;
}
h3 {
font-size: 2.8rem;
margin: 20px 0;
color:#424242;
}
input {
width: 85%;
padding: 12px 20px;
margin-bottom: 15px;
border: none;
outline: none;
border-radius: 5px;
border:2px solid #9e9e9e;
font-size: 1rem;
color: #6200EA;
}
input:focus{
border:2px solid #6200EA;
}
.submit {
padding: 12px 0;
background: #6200EA;
color:#fff;
font-size: 1rem;
width:85%;
border-radius: 5px;
border: none;
outline: none;
}
.submit:hover {
background: #204051;
}
#html #css