<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="loginbox"> <img src="https://www.vijayyadav.tk/wp-content/uploads/2020/05/avatar.png" class="avatar"> <h1>Login Here</h1> <form> <p>Username</p> <input type="text" name="" placeholder="Username"> <p>Password</p> <input type="Password" name="" placeholder="Enter Password"> <input type="submit" name="" value="login"> <a href="#">Lost your password ?</a><br> <a href="#">Don't have an account ?</a> </form> </div>

body { margin: 0; padding: 0; background: url(https://www.vijayyadav.tk/wp-content/uploads/2020/05/background.jpg); background-attachment: fixed; background-size: cover; background-position: center; font-family: sans-serif; } .loginbox{ width: 320px; height: 420px; background: #000; color: #fff; top: 50%; left: 50%;; position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; padding: 70px 30px; } .avatar{ width: 100px; height: 100px; border-right-style: 50%; position: absolute; top: -50px; left: calc(50% - 50px); } h1{ margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .loginbox p{ margin: 0; padding: 0; font-weight: bold; } .loginbox input{ width: 100%; margin-bottom: 20px; } .loginbox input[type="text"], input[type="password"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } .loginbox input[type="submit"] { border: none; outline: none; height: 40px; background: #5199e4; color: #fff ; font-size: 18px; border-radius: 20px; } .loginbox input[type="submit"]:hover { cursor: pointer; background: #ff4f6d; color: #000; } .loginbox a{ text-decoration: none; font-size: 12px; line-height: 20px; color: darkgrey; } .loginbox a:hover { color: #ff4f6d; }