"simple login page using html css"
Bootstrap 4.1.1 Snippet by manikantsharma44

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 ----------> <html> <head> <link href="css/newlog.css" rel="stylesheet"> <script type = "text/javascript" src="js/m1.js"></script> </head> <body> <div class = "maincontainer"> <div class = "container"> <div id="output"></div> <div class="avatar"></div> <div class="form-box"> <input name="user" type="text" placeholder="Email"> <input type="password" placeholder="password"> <button type="submit" onclick = "ff()" class="login">Login</button> <h1 class = "tex">OR</h1> <a href = " "><button class="facebook" type="submit">facebook</button></a> <a href = " " ><button class="google" type="submit">Google+</button></a> </div> </div> </div> <body> </html>
.container { position: relative; width: 350px; margin: 80px auto; padding: 20px 40px 40px; border-radius:7px; text-align: center; background: #fff; border: 1px solid #ccc; } .form-box input{ width: 100%; padding: 20px; text-align: auto; display: flex; justify-content: space-around; border: 0; box-shadow: 0 0 0; height:40px; border-bottom:2px solid gray; font-weight: bold; background: white; } .form-box .login{ margin-top:30px; width: 100%; padding: 10px; text-align: center; height:40px; border-radius: 25px; background: #efefef; border-color: white; cursor: pointer; } .form-box .facebook{ margin-top:8px; width: 100%; padding: 10px; height:40px; border-color: #357ebd; border-radius: 25px; background: #3b5998; color: #fff; cursor: pointer; } .form-box .google{ margin-top:8px; width: 100%; padding: 10px; height:40px; border-color: #357ebd; border-radius: 25px; background: #c32f10; color: #fff; cursor: pointer; } .flex-container { display: flex; justify-content: space-around; padding: 16px; padding-top:2px; } .maincontainer{ width: 100%; display: flex; justify-content: center; background-color:gray; padding-top:0; } imagetop { background:url(../images/logom.png); border-radius:50%; width:150px; } button:hover { background-color: white; } .avatar{ background:url(../images/logom.png); // save your png images for logo width: 100px;height: 100px; margin: 10px auto 30px; background-size: cover; } .flex-container { display: flex; flex-direction: row; padding: 16px; word-spacing: 10px; } .tex { color:gray; font-family: "Times New Roman"; }
function ff(){ let arr = "Successful LogIn ! "; alert(arr); } ff();

Related: See More

Vue Argon Design System
Simple & Clean 404 Error Page style
Simple & Clean 404 Error Page Design
Elegant Login Page

Questions / Comments: