How to Make Login Form Using HTML and CSS

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