Responsive Login Form Design Using HTML and CSS

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.  

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.



Leave a Comment