Blog

You are currently viewing Create Login Page Design In HTML And CSS With Source Code

Create Login Page Design In HTML And CSS With Source Code

Free Coding Ebook 👉 Get Now

Create Login Page Design In HTML And CSS With Source Code

 
Login Page Design In HTML And CSS
Login Page Design In HTML And CSS
 
 

Login Page Design Using Html And Css

Hello Coder! A very warm welcome to Codewithrandom, In today’s blog in which we are going to create a Login Page Design In HTML And CSS. We are going to make a Responsive Login Form Page Design for a website. For now, we are only considering email and password as input to log in.
Code by N/A
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies Yes
Responsive YES
Login Form Design  Table
 
A Login Page is one of the most important pages on a website or app since it allows authorized users to access the entire site or a subset of the site. The login or sign-up page is the initial page that users view on login-protected sites. A signup or login page should be visually appealing, user-friendly, and easy to use.
So. Let’s start with the code but before proceeding to the code let’s check.
 
 

Live Server of Login Form Design:-

HTML Code For Login Page Design:-

In HTML we design the basic layout of the website.I hope you are concerned with the basics of HTML like div tag, input tag, and HTML form.

In this Login Page, we are adding two input tags one for email and the second one for password. we are adding an input tag of the checkbox attribute so that when the checkbox is pressed then we open the popup.

First, we want to add script-src then in the body we want to add a checkbox, and the id is shown class is show btn for label view form.
For cross sign/icon we are using Fontawesome CDN(Content-Delivery-Network) link to integrate it.
 
 
then inside the form tag, we insert two input tag and their respective label tag.
then for the login form div class is data and the label is email or phone.
 
Then another div class is data and the label is password.
The last div class is the forgotten password which anchor tags and Signup now.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
        <!-- <title>Popup Login Form Design | CodingNepal</title> -->
        <link rel="stylesheet" href="style.css" />
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    </head>
    <body>
        <div class="center">
            <input type="checkbox" id="show" />
            <label for="show" class="show-btn">View Form</label>
            <div class="container">
                <label
                    for="show"
                    class="close-btn fas fa-times"
                    title="close"
                ></label>
                <div class="text">Login Form</div>
                <form action="#">
                    <div class="data">
                        <label>Email or Phone</label>
                        <input type="text" required />
                    </div>
                    <div class="data">
                        <label>Password</label>
                        <input type="password" required />
                    </div>
                    <div class="forgot-pass">
                        <a href="#">Forgot Password?</a>
                    </div>
                    <div class="btn">
                        <div class="inner"></div>
                        <button type="submit">login</button>
                    </div>
                    <div class="signup-link">
                        Not a member? <a href="#">Signup now</a>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

ADVERTISEMENT

Only Html Code Output Login Form Design:-

Login Page Design In HTML And CSS
 

 

CSS Code For Login Page Design:-

Now the layout of the login page is ready but still, it is not perfect and not completely ready because we need to implement it in such a way that on default the login form is disappeared and when we click on the checkbox it shows us the login page and on clicking the cross it disappears.

Gym Website Using HTML and CSS With Source Code

For that, on default, we will apply the display property of the container class to none so it disappears and when the check box is checked then set the display property of the container class to block.

Hope you have gone through the basic concepts of styling with CSS like css selectors,border-box,flex-box, and pseudo selectors.

Here we want to design the html code for making the website beautiful and responsive you can see the output of css.
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    height: 100vh;
    width: 100%;
    background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn {
    background: #fff;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 500;
    color: #3498db;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
input[type="checkbox"] {
    display: none;
}
.container {
    display: none;
    background: #fff;
    width: 410px;
    padding: 30px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
    display: block;
}
.container .close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 18px;
    cursor: pointer;
}
.container .close-btn:hover {
    color: #3498db;
}
.container .text {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}
.container form {
    margin-top: -20px;
}
.container form .data {
    height: 45px;
    width: 100%;
    margin: 40px 0;
}
form .data label {
    font-size: 18px;
}
form .data input {
    height: 100%;
    width: 100%;
    padding-left: 10px;
    font-size: 17px;
    border: 1px solid silver;
}
form .data input:focus {
    border-color: #3498db;
    border-bottom-width: 2px;
}
form .forgot-pass {
    margin-top: -8px;
}
form .forgot-pass a {
    color: #3498db;
    text-decoration: none;
}
form .forgot-pass a:hover {
    text-decoration: underline;
}
form .btn {
    margin: 30px 0;
    height: 45px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
form .btn .inner {
    height: 100%;
    width: 300%;
    position: absolute;
    left: -100%;
    z-index: -1;
    background: -webkit-linear-gradient(
        right,
        #56d8e4,
        #9f01ea,
        #56d8e4,
        #9f01ea
    );
    transition: all 0.4s;
}
form .btn:hover .inner {
    left: 0;
}
form .btn button {
    height: 100%;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
form .signup-link {
    text-align: center;
}
form .signup-link a {
    color: #3498db;
    text-decoration: none;
}
form .signup-link a:hover {
    text-decoration: underline;
}

Step1:We will first use the import link to import some new fonts from Google Fonts, and then use the font-family attribute to modify the fonts from the default fonts.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

 

Now, we’ll utilise the universal selector property to set the box-sizing to “border-box,” the margin and padding to “zero,” and the font family to “Poppins” as our new body fonts.

We will add a linear gradient backdrop to our body, and we will do it by setting the background property to a combination of light blue and dark purple.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}

Step2: We will now set the background to “white,” and we also added a padding of 20 px, using the class selector (.show-btn). The button also has a box shadow added to it.

To choose something, we’ll utilise the tag selector. Next, we’ll change the display to “block,” the position to “absolute,” and the right property to 20 px.

Similarly Style has been added to the form. Simply read the code.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

.show-btn {
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"] {
  display: none;
}
.container {
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
  display: block;
}
.container .close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover {
  color: #3498db;
}
.container .text {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form {
  margin-top: -20px;
}
.container form .data {
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label {
  font-size: 18px;
}
form .data input {
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus {
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass {
  margin-top: -8px;
}
form .forgot-pass a {
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover {
  text-decoration: underline;
}
form .btn {
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner {
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(
    right,
    #56d8e4,
    #9f01ea,
    #56d8e4,
    #9f01ea
  );
  transition: all 0.4s;
}
form .btn:hover .inner {
  left: 0;
}
form .btn button {
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link {
  text-align: center;
}
form .signup-link a {
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover {
  text-decoration: underline;
}

Finally…The login Page Design is ready.

Final Output Of Login Page Design In HTML And CSS

 

 
 
The login page is responsive as well as beautiful. Hope you may like it /if any doubt comments in the comment box.If you have any queries related to the code or the blog then feel free to comment. You can visit our other blog for some ideas and knowledge.
 
THANK YOU!
 
Written by – Sayali Kharat and Himanshu Singh

Which code editor do you use for this Login Form Design project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

Free Coding Ebook 👉 Get Now

Tags: , ,

Leave a Reply