SOFTADDA

softadda.com

Step: 1

Open the Vs code editor and create two file in the same folder first file name Login.html and second file name Login.css. Now copy & paste this HTML code into your Login.html file.

Html code

				
					<!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">
    <!-- include font awsome link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>User Login</title>
    <!-- External css link here  -->
    <link rel="stylesheet" href="login.css">
   
</head>

<body>
    <div class="login_container">
        <div class="login_form_box">
            <div class="login_header">
                <h4>login here</h4>
            </div>
            <div class="login_icon">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            </div>
            <form action="#">
                <!-- user box here  -->
                <div class="user_name">
                    <label for="user">Username</label>
                    <input type="text" name="user" id="user" placeholder="Username">
                    <p id="user_msg"></p>
                </div>
                <!-- password box here  -->
                <div class="password_container">
                    <label for="user">Password</label>
                    <input type="password" name="user" id="user" placeholder="password">
                    <p id="user_msg"></p>
                   
                </div>

                <div class="submit_btn">
                   <input type="submit" value="Login here">
                   <a href="#">forget password</a>
                </div>

                <div class="register_box">
                   
                    <span>Not a account?</span>
                    <a href="#">Create Account</a>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

Step: 2

Open Login.css file into your Vs code editor then copy this CSS code and paste it into your css file.

Css code

				
					
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login_container {
    width: 100%;
    height: 100vh;
    background-color: rgb(213, 221, 224);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}

.login_form_box {
    width: 300px;
    height: auto;
    padding-bottom: 10px;
    border-radius: 5px;
    background-color: rgb(252, 252, 252);
    box-shadow: 2px 2px 8px 5px rgb(186, 182, 182);
}

.login_form_box .login_header {
    background-color: rgb(222, 208, 191);
    padding: 5px;
    border-radius: 5px 5px 0 0;
}

.login_form_box .login_icon {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.login_icon i {
    color: rgb(136, 153, 153);
    font-size: 82px;
}

.login_form_box form {
    width: 100%;
    padding: 10px;
}

.login_form_box form .user_name
 {
    width: 100%;
    height: 70px;
    margin-bottom:5px;

}
 
.password_container {
    width: 100%;
    height: 70px;
    margin-bottom:5px;

}

.login_form_box form .user_name label,
.password_container label {
    font-weight: 600;
}

.login_form_box form .user_name p,
.password_container p {
    font-size: 14px;
    color: red;
}

.submit_btn a {
    text-align: right;
    width: 100%;
    display: block;
}

.login_form_box form .user_name input,
.password_container input {
    width: 100%;
    height: 35px;
    outline: none;
    border: 1px solid #af8484;
    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
}
.submit_btn{
    width: 100%;
}
.submit_btn input{
    width: 100%;
    padding: 5px;
    margin-top: 0px;
    font-weight: bold;   
    font-size: 16px;
    outline: none;
    background-color: aqua;
    border: 1px solid rgb(213, 221, 224);
    color: #523c3c;
    border-radius: 5px;
}
.submit_btn input:hover{
    background-color: rgb(10, 203, 203);
    color: white;
}
.register_box{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.register_box a{
    color: red;
    text-decoration: none;
}

Output:

If this blog is helpful for you, then comment and share with your friends.