HomeHTML & CSSResponsive Login Form Design Using HTML and CSS || Coding Power

Responsive Login Form Design Using HTML and CSS || Coding Power

Hello everyone, you can learn how to create a Responsive Login Form Design using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.  

Watch Full Tutorial on YouTube


Source Code Of Responsive Login Form Design

Step 1: Create Index.html File

Create one file with the name index.html and paste the below code in this file. 
 
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Responsive Login Form - Coding Power</title>
</head>
<body>

    <div class="container">
        <div class="title">
            <h2>Login</h2>
        </div>
        <form>
            <div class="field">
                <i class="fa fa-envelope"></i>
                <input type="email" placeholder="Email">
            </div>
            <div class="field">
                <i class="fa fa-lock"></i>
                <input type="password" placeholder="Password">
            </div>
            <div class="forgot">
                <a href="#">Forgot Password ?</a>
            </div>
            <div class="login">
                <button type="submit">Login</button>
            </div>
            <div class="signup">
                Don't have an account ? <a href="#">Signup Here</a>
            </div>
        </form>
    </div>

</body>
</html>

 

Step 2: Create style.css File

Create one file with the name style.css and paste the below code in this file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: #2c7da0;
}

.container{
    width: 370px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}

.container .title{
    text-align: center;
    line-height: 70px;
    margin-bottom:10px;
    color: white;
    background: #01497c;
}

.container .title h2{
    font-size: 30px;
}

.container form{
    padding: 25px;
}

.container form .field{
    height: 40px;
    margin-bottom: 15px;
    position: relative;
}

.container form .field input{
    height: 100%;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid gray;
    outline: none;
    padding-left: 60px;
}

.container form .field i{
    position: absolute;
    width: 50px;
    height: 100%;
    background: #01497c;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: white;
    border-radius: 5px 0 0 5px;
}

.container form .login button{
    margin-top: 15px;
    width: 100%;
    border-radius: 5px;
    outline: none;
    border: 1px solid gray;
    padding: 5px 0;
    cursor: pointer;
    color: white;
    font-size: 20px;
    background: #01497c;
}

.container form .signup{
    margin-top: 15px;
}

That’s It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.


For Download Code You have to wait 30 seconds.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular