Simple responsive Login form in light mode

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Simple Login form</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap">
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="container">
                        <div class="container-login100">
                            <h1 class="form-title">Login</h1>
                            <form action="#">
                                <div  class="text-center" id="form-avatar">
                                    <i class="fa fa-user-circle fa-5x" aria-hidden="true"></i>
                                </div>
                                <div class="text-center" id="center">
                                    <div class="wrap-input" data-validate="Enter username">
                                        <input class="input100" type="text" name="username" placeholder="Username">
                                        <span class="focus-input100" data-placeholder="Username"></span>
                                    </div>
                                    <div class="wrap-input" data-validate="Enter password">
                                        <input class="input100" type="password" name="pass" placeholder="Password">
                                        <span class="focus-input100" data-placeholder="Password"></span>
                                    </div>
                                </div>
                                <div class="container-login100-form-btn">
                                    <button class="login100-form-btn">
                                    Login
                                    </button>
                                </div>
                                <div class="login-more">
                                    <li class="m-b-8">
                                        <span class="txt1">Forgot</span>
                                        <a href="#" class="txt2">
                                            Username / Password?
                                        </a>
                                    </li>
                                    <li>
                                        <span class="txt1">Don’t have an account?</span>
                                        <a href="#" class="txt2">
                                            Sign up
                                        </a>
                                    </li>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

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

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
}

.container-login100 {
    text-align: center;
}
.form-title {
    display: block;
    font-family: inherit;
    font-size: 42px;
    color: #333333;
    text-align: center;
    padding-top: 40px;
}

#form-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin:  auto;
    margin-top: 30px;
    text-align: center;
}

#center {
    margin-top: 40px;
}
.wrap-input {
    position: relative; 
    margin-bottom: 35px; 
    position: relative; 
}

.input100 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5vw;
    color: #555;
    line-height: 1.2; 
    width: 35%; 
    padding: 5px; 
    outline: none;
    border: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #D9D9D9;
}

.login100-form-btn{
    width: 35%;
    height: 40px;
    border-radius: 30px;
    font-size: 25px;
    background-color: #999999;
    border: none;
    margin-top: 18px;
    color: white;
}

.login-more {
    margin-top: 35px;
    margin-right: 19px;
}
.login-more > li {
    list-style-type: none;
}

.login100-form-btn:hover {
    background-color: #555555;
}

Simple responsive Login form in light mode

HTML

CSS

Javascript