Form, Login Form

Html login form template free download

Let’s learn to develop a Login form template in HTML and CSS. In the last post, we created an Our team HTML CSS template for free download. In today’s post, our motive is to develop a responsive login form in HTML and CSS for our website.

A login form is used to access an already existing account. For creating an account we use the registration form to create a new account on the website. When we have an account then we just need to access that particular account. For that, So, we can use a username, email or phone number, and password. After filling in all the details in the form we can access our account.

As you can see in the above image we have created a login form for our website in HTML and CSS. HTML and CSS are used to create the website’s UI and this is also a part of the website UI. so, check the below posts as well.

You might like it:

It will help us to save time and run the code without error. You can use brackets, vs code or sublime text 3, etc, and there are a lot of other editors as well. So, let’s get into it.

Source code of HTML:

It is a markup language and we use it to create the skeleton of our project in Html. Skeleton means to create a box, text, heading, buttons, etc. All these things are possible with the help of Html without a proper design. So, we are unable to design our project using Html. All the lines of code are available below and you can copy them to use for login in your editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-

scale=1.0">
    <title>Login Form - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="con">
    <div class="box">
        <h1>Login Form</h1>
        <form action="post" class="login-form">
            <input type="email" name="email" placeholder="Enter 

Email.."><br>
            <input type="Password" name="password" placeholder="Enter 

Password.."><br>
            <input type="button" name="btn" value="Login " class="btn">
        </form>

    
</div>
</div>
    <div class="res">
        <h2>Copyright © <spain>JDkhan</spain></h2>
    </div>
  
    
</body>
</html>

<!DOCTYPE html>

<head>

scale=1.0">

<title>Login Form - FantacyDesigns</title>

</head>

<body>

<h1>Login Form</h1>

<input type="email" name="email" placeholder="Enter

Email.."><br>

<input type="Password" name="password" placeholder="Enter

Password.."><br>

</form>

</div>

</div>

</body>

</html>

Source code of CSS:

After HTML we have to use CSS so that we can properly design our project using CSS. Therefore, it is used to design everything which is created with the help of Html. As you can see in the image that we have designed it beautifully and all this is possible using CSS.

In this way using the code of Html and CSS we can create this type of login form in our editor. If you are unable to create files and then connect a CSS file with an HTML file, then we have a solution to your problem. Therefore, code is here to use in your project.

body {
  background: #fff;
  font-family: arial;
}

.con {
  margin-top: 150px;
  width: 670px;
  height: 400px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ddd;
  border-top-left-radius: 250px;
  border-bottom-right- radius: 250px;
  border-left: 2px solid #3292f2;
  border-right: 2px solid #ea4335f2;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.box {
  margin-top: 0px;
  width: 600px;
  height: 350px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-shadow: 0px 4px 62px -36px rgba (36, 36, 36, 0.85);
  -moz-box-shadow: 0px 4px 62px -36px rgba(36, 36, 36, 0.85);
  box-shadow: 0px 4px 62px -36px rgba(36, 36, 36, 0.85);
  border-bottom-left-radius: 250px;
  border-top-right-radius: 250px;
}

h1 {
  font-size: 35px;
  font-weight: bold;
  padding-top: 60px;
  margin-left: 160px;
  color: coral;
  margin-bottom: 30px;
}

h2 {
  font-size: 14px;
  font-family: 'Franklin 
 Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 margin-left: -150px;
  color: #ccc;
}

spain {
  color: #ccc;
}

.res {
  width: 400px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
}

.login-form {
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

input {
  width: 280px;
  height: 15px;
  font-size: 16px;
  color: #262526;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 1px solid coral;
  outline: none;
}

.btn {
  width: 100px;
  height: 40px;
  background: coral;
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.btn:hover {
  background: #fff;
  color: coral;
  border: 1.5px solid coral;
  transition: .5s;
  cursor: pointer;
}

body {

background: #fff;

font-family: arial;

}

.con {

margin-top: 150px;

width: 670px;

height: 400px;

background: #fff;

margin-left: auto;

margin-right: auto;

border: 1px solid #ddd;

border-top-left-radius: 250px;

border-bottom-right- radius: 250px;

border-left: 2px solid #3292f2;

border-right: 2px solid #ea4335f2;

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.box {

margin-top: 0px;

width: 600px;

height: 350px;

background: #fff;

margin-left: auto;

margin-right: auto;

-webkit-box-shadow: 0px 4px 62px -36px rgba (36, 36, 36, 0.85);

-moz-box-shadow: 0px 4px 62px -36px rgba(36, 36, 36, 0.85);

box-shadow: 0px 4px 62px -36px rgba(36, 36, 36, 0.85);

border-bottom-left-radius: 250px;

border-top-right-radius: 250px;

}

h1 {

font-size: 35px;

font-weight: bold;

padding-top: 60px;

margin-left: 160px;

color: coral;

margin-bottom: 30px;

}

h2 {

font-size: 14px;

font-family: 'Franklin

Gothic Medium', 'Arial Narrow', Arial, sans-serif;

margin-left: -150px;

color: #ccc;

}

spain {

color: #ccc;

}

.res {

width: 400px;

height: 20px;

margin-left: auto;

margin-right: auto;

}

.login-form {

width: 300px;

height: 300px;

margin-left: auto;

margin-right: auto;

}

input {

width: 280px;

height: 15px;

font-size: 16px;

color: #262526;

padding: 10px;

margin-bottom: 20px;

border: none;

border-bottom: 1px solid coral;

outline: none;

}

.btn {

width: 100px;

height: 40px;

background: coral;

color: #fff;

border-radius: 50px;

font-weight: bold;

box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

}

.btn:hover {

background: #fff;

color: coral;

border: 1.5px solid coral;

transition: .5s;

cursor: pointer;

}

Download source code:

Source code of the project in the form of files is available below and your project will be in front of you after downloading the file from the below download button. Therefore, it is available for everyone to download.

Task:

As you can see in the above image we have provided the radius to the specific corners of the form and background box as well. You have to change their position of radius and give radius to other corners. Then remove the radius of the login button. That is your task.

I hope you like this responsive login form and its design. You can follow us for more premium templates because we share premium templates with our followers only. So, don’t forget to follow us.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download