Login Form Using HTML And CSS

Hello readers, welcome to another blog post. Today we will sharing about the HTML And CSS design for the login form.

Login forms are used in almost every website and Application. A login form utilizes the credentials of a user, in order to authenticate their access. It generally consists of the typical username or email and password. But more fields can be added to improve the site's security.

Source Code

To make the login form, we need to create a html file and css file for writing our code. After created these file you can copy and paste the following code to your document or you can also download the zip file which include all the image I use and the source code.

HTML :

CSS :

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
section{
   min-height: 100vh;
   background: url(bg.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
}
div.login-card{
   width: 300px;
   height: 450px;
   background: rgba(255,255,255,0.1);
   color: #FFF;
   border-radius: 10px;
   box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.9);
   text-align: center;
   position: relative;
}
.title p{
   font-size: 38px;
   font-weight: bold;
   padding: 15px;
   margin-bottom: 35px;
}
.input{
   outline: none;
   width: 85%;
   height: 35px;
   border: none;
   border-radius: 2px;
   padding-left: 15px;
   margin-top: 15px;
}
button{
   width: 85%;
   height: 35px;
   background: #FF0055;
   color: #FFF;
   border: none;
   border-radius: 2px;
   margin-top: 55px;
   font-size: 18px;
}
a{
   position: absolute;
   bottom: 25px;
   left: 90px;
   text-decoration: underline;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Coding World

Login Form Using HTML And CSS

Source Code

HTML :

CSS :

Download ZIP

Post a Comment