"Login Form"
Bootstrap 4.1.1 Snippet by absoftlab

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title>Login Page/Landing Page</title> <link rel="stylesheet" href="login.css"> </head> <body> <div class="login-page"> <div class="image-conteiner"> <div class="image"> <img src="https://pbs.twimg.com/media/EIi9qy1U0AEvG_H?format=jpg&name=240x240"> </div> </div> <div class="title"> <h5>Abdullah Al Mahmud</h5> </div> <div class="input-value"> <div class="input"> <label>User Name</label><br> <input type="text" name="username" id="userid" placeholder="user name"/><br><br> <label>Password</label><br> <input type="password" name="passkey" id="pass" placeholder="password"/><br><br> <input type="submit" value="Sign In" id="submit"/> </div> <div class="new"> <a href="#">Create New Account</a> </div> </div> </div> </body> </html>
*{ margin:0px; padding:0px; font-family:sans-serif; } body{ background-image:url(https://pbs.twimg.com/media/EIi9qy0UcAAhyYl?format=jpg&name=large); background-repeat:no-repeat; } .login-page{ height:370px; width:300px; background:rgba(0 0 0 .8); box-shadow:lightblue 0px 6px 10px 5px; margin:auto; margin-top:150px; border-radius:5px; margin-bottom:50px; } .image-conteiner{ height:80px; } .image{ height:110px; width:110px; background:purple; border-radius:50%; transform:translate(95px,-50px); padding:5px; } .image img{ height:100px; width:100px; border-radius:50%; } .title{ height:30px; text-align:center; } .input-value{ height:270px; } .input{ padding-left:25px; } .input input{ border:none; border-bottom:1px solid black; height:30px; width:250px; } #userid{ padding-left:5px; background:none; } #pass{ padding-left:5px; background:none; } #submit{ display:inline-block; font-size:20px; width:140px; height:40px; border:none; margin-left:55px; background:purple; border-radius:20px; color:white; } #submit:hover{ background:none; border:2px solid purple; color:purple; border-style:double; border-radius:20px; transition:0.5s; } .new{ margin-left:75px; margin-top:10px; } .new a{ text-decoration:none; color:black; }

Related: See More

Material Dashboard Pro Angular
login-form
Login Form
Bootstrap Two Login Form

Questions / Comments: