"Login Page"
Bootstrap 3.3.0 Snippet by trolls990

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>login to: [NAME]</h1> <body class="login2background"> <div class="container"> <div class="col-lg-6 col-md-6 col-sm-8 loginbox"> <div class=" row"> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6"> <img src="data:image/png;base64,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" alt="Logo" class="logo"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 "> <span class="singtext" >Sign in </span> </div> </div> <div class=" row loginbox_content "> <div class="input-group input-group-sm" > <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input class="form-control" type="text" placeholder="account name" > </div> <br> <div class="input-group input-group-sm"> <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span> <input class="form-control" type="password" placeholder="password to account" > </div> </div> <div class="row "> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7 forgotpassword "> <a href="#" >forgot account name or password?</a> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 "> <a href="#" class=" btn btn-default submit-btn">login<span class="glyphicon glyphicon-log-in"></span> </a> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-4 "></div> </div> </body>
.login2background{ background-image: url(https://i.imgur.com/81RTZEw.png); background-repeat:no-repeat; background-attachment: fixed; background-size: cover; } .loginbox{ background: white; color: black; margin-top: 30%; left: 0; padding: 20px; box-shadow: 0 8px 50px -2px #000; border-radius:5px; } .logo{ width: 130px; height: 55px; margin-left: 10%; } @media (max-width:767px) { .loginbox{ margin-top: 10%; } } .loginbox_content{ padding:5% 11% 5% 11%; } .singtext{ font-family: "Open Sans",sans-serif; font-size: 27px; color: #82C226; float: right; padding-right: 25%; } .submit-btn{ float: right; margin-right: 28%; } .forgotpassword{ padding-left: 10%; } @media (max-width:800px) { .submit-btn{ margin-right: 23%; } }

Related: See More

Paper Kit
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: