Create Login Form Design Using Html And Css ( Source Code)

Create Login Form Design Using Html And Css ( Source Code)

Create Login Form Design Using Html And Css ( Source Code)
Create Login Form Design Using Html And Css ( Source Code)

Login Form Design Using Html And Css

A very warm welcome to code with random’s today’s blog in which we are going to create a PopUp Login Form design Using HTML and CSS. We are going to make a responsive login form for a website. For now, we are only considering email and password as input to log in.
So. Let’s start with the code  but before proceeding to the code let’s check

Live Server of Login Form Design:-

HTML CODE Login Form 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>

 

Html Output Login Form Design:-

 

CSS CODE  Login Form 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 like 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.

100+ Front-end Projects for Web developers (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;
}
Finally…Login Page is ready.
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 code or 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
Share on:

Leave a Comment