Bootstrap snippet: social network login

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: social network,login,profile



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div id="content"> <div class="container-fluid"> <div class="lock-container"> <h1>Account Access</h1> <div class="panel panel-default text-center"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle img-login"> <div class="panel-body"> <input class="form-control" type="text" placeholder="Username" value=" "> <input class="form-control" type="password" placeholder="Enter Password" value=""> <a href="#index.html" class="btn btn-success">Login <i class="fa fa-fw fa-unlock-alt"></i></a> <a href="#" class="forgot-password">Forgot password?</a> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container footer-container"> <p class="text-muted">Place sticky footer content here.</p> </div> </footer>
body{margin-top:20px;} body.login { position: initial; background: url('http://demos.bootdey.com/dayfriend/img/Bg/faces2.png'); padding-top: 0; } body.login #content { max-width: 760px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } body.login .lock-container { margin: auto; width: 300px; } @media (min-width: 480px) { body.login .lock-container { bottom: 0; height: 550px; left: 0; position: absolute; top: 0; right: 0; } } body.login .lock-container h1 { text-align: center; color: #fff; font-size: 28px; } body.login .lock-container .panel { max-width: 300px !important; background: #fff; position: relative; } body.login .lock-container .panel img { margin: 20px 0 10px; } body.login .lock-container .panel input { margin-bottom: 10px; } body.login .lock-container .panel .btn { margin-top: 10px; } body.login .lock-container .panel .forgot-password { margin: 10px 0 0; font-weight: 500; color: #26a69a; display: block; } body.login #content { max-width: 760px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #content { min-width: 320px; } /* Sticky footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } body.login .lock-container .panel input { margin-bottom: 10px; } .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #333333; background-color: #f7f7f7; background-image: none; border: 1px solid #efefef; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .footer-container { width: auto; max-width: 680px; padding: 0 15px; } .footer-container .text-muted { margin: 20px 0; } .img-login { width:120px; height:120px; }
$(function(){ $("body").addClass("login breakpoint-1024"); });
Dey-Dey

social network login

Dey-Dey
  Tuesday November 29, 08:43
195 Views