Website Design - Login Form

Hello everyone, today in this blog I will sharing the login form design.

I will post all the code i have write and the images i have use at here. You can download the zip file at the bottom of this page.

Here is the source code of this design

SOURCE CODE :

HTML :

That's very simple in the html part because it only have to write two inputs and a login and register bottom. Here we are going to share the CSS code.

CSS :

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&family=Poppins:ital,wght@0,100;0,500;0,600;0,800;0,900;1,500;1,900&family=Ubuntu:ital@1&display=swap');
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Poppins', sans-serif;
}
section{
   min-height: 100vh;
   width: 100%;
   background: url(1.jpg) no-repeat;
   background-size: cover;
   background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
}
.card{
   width: 380px;
   height: 420px;
   border-radius: 5px;
   text-align: center;
   box-shadow:0 16px 16px 0 rgba(0, 0, 0, 0.2);
   background: rgba(255, 255, 255, 0.5);
}
.card h1{
   padding-top: 20px;
   padding-bottom: 55px;
}
.input-group{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
input{
   width: 75%;
   height: 35px;
   background: #FFF;
   border: 1px solid #585858;
   border-radius: 5px;
   margin-bottom: 15px;
   padding-left: 5px;
   outline: none;
}
input:focus{
   border: 1px solid #1877F2;
}
button{
   margin-top: 35px;
   border: none;
   background: #FF1B64;
   color: #FFF;
   width: 75%;
   height: 35px;
   border-radius: 5px;
}
button.reg{
   background: none;
   color: #FF1B64;
   border: 2px solid #FF1B64;
   border-radius: 5px;
}

That's all the code for this design, you can copy and paste it or Click the download bottom at the bottom of this page to download this design source code.

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us

Coding World

Website Design - Login Form

Website Design - Login Form

Post a Comment