Bootstrap snippet: facebook style home page

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: facebook,style,home,page



<div id="wrap"> <div class="navbar navbar-default navbar-fixed-top"> <div class="container bootstrap snippet"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://bootdey.com">bootdey.com</a> </div> <div class="collapse navbar-collapse"> <form class="navbar-form navbar-right" id="header-form" role="form"> <div class="lt-left"> <div class="form-group"> <label for="exampleInputEmail2">Email or Phone</label> <input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Email or Phone"> </div> <div class="form-group"> <label for="exampleInputPassword2">Password</label> <input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> <div class="lt-right"> <button type="submit" class="login-btn">Login</button> </div> </form> </div> </div> </div> <div class="container" id="home"> <div class="row"> <div class="col-md-7"> <br> <h3 class="slogan"> Facebook helps you connect and share with the people in your life. </h3> <img src="http://bootdey.com/img/Content/facebook_background.png" class="img-responsive" /> </div> <div class="col-md-5"> <br><br> <form action="#" method="post" class="form" role="form"> <legend><a>Create your account</a></legend> <h4>It's free and always will be.</h4> <div class="row"> <div class="col-xs-6 col-md-6"> <input class="form-control input-lg" name="firstname" placeholder="First Name" type="text" autofocus /> </div> <div class="col-xs-6 col-md-6"> <input class="form-control input-lg" name="lastname" placeholder="Last Name" type="text" /> </div> </div> <input class="form-control input-lg" name="youremail" placeholder="Your Email" type="email" /> <input class="form-control input-lg" name="reenteremail" placeholder="Re-enter Email" type="email" /> <input class="form-control input-lg" name="password" placeholder="New Password" type="password" /> <label for="">Birth Date</label> <div class="row"> <div class="col-xs-4 col-md-4"> <select class="form-control input-lg"> <option value="Month">Month</option> </select> </div> <div class="col-xs-4 col-md-4"> <select class="form-control input-lg"> <option value="Day">Day</option> </select> </div> <div class="col-xs-4 col-md-4"> <select class="form-control input-lg"> <option value="Year">Year</option> </select> </div> </div> <label class="radio-inline"> <input type="radio" name="sex" id="inlineCheckbox1" value="male" /> Male </label> <label class="radio-inline"> <input type="radio" name="sex" id="inlineCheckbox2" value="female" /> Female </label> <br /> <span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span> <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">Create my account</button> </form> </div> </div> </div> </div>
body{ background-image: -ms-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%); /* Opera */ background-image: -o-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D3D8E8)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #FFFFFF 0%, #D3D8E8 100%); background-repeat: no-repeat; background-attachment: fixed; } .navbar-default{ background-color:#4c66a4; border-bottom:none; } .navbar-form label{ color:#fff; font-size:13px; font-weight:normal; } .navbar-form .input-sm{ border-radius:0; } legend a{ color:#141823; font-size:25px; font-weight:bold; } .login-btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; cursor:pointer; text-shadow: 1px 1px 4px #8a8a8a; font-family: Arial; color: #ffffff; font-size: 13px; background: #5b74a8; line-height:21px; font-weight:bold; padding: 3px 6px 3px 6px; border: solid #29447e 1px; text-decoration: none; } .login-btn:hover { background: #5b74a8; text-decoration: none; } .signup-btn { background: #79bc64; background-image: -webkit-linear-gradient(top, #79bc64, #578843); background-image: -moz-linear-gradient(top, #79bc64, #578843); background-image: -ms-linear-gradient(top, #79bc64, #578843); background-image: -o-linear-gradient(top, #79bc64, #578843); background-image: linear-gradient(to bottom, #79bc64, #578843); -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; text-shadow: 0px 1px 0px #898a88; -webkit-box-shadow: 0px 0px 0px #a4e388; -moz-box-shadow: 0px 0px 0px #a4e388; box-shadow: 0px 0px 0px #a4e388; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; border: solid #3b6e22 1px; text-decoration: none; } .signup-btn:hover { background: #79bc64; background-image: -webkit-linear-gradient(top, #79bc64, #5e7056); background-image: -moz-linear-gradient(top, #79bc64, #5e7056); background-image: -ms-linear-gradient(top, #79bc64, #5e7056); background-image: -o-linear-gradient(top, #79bc64, #5e7056); background-image: linear-gradient(to bottom, #79bc64, #5e7056); text-decoration: none; } .navbar-default .navbar-brand{ color:#fff; font-size:30px; font-weight:bold; } .form .form-control { margin-bottom: 10px; } @media (min-width:768px) { #wrap{ margin-bottom:89px; } .navbar-form .lt-left{ float:left !important; } .navbar-form .lt-right{ float:right !important; } .navbar-form .checkbox{ display:block; } .navbar-form input[type="password"]{ margin-left:3px; } .navbar-form .login-btn{ margin-left: 10px; margin-top: 24px; } #home{ margin-top:50px; } #home .slogan{ color: #0e385f; line-height: 29px; font-weight:bold; } .navbar-brand{ padding:35px 15px; } }
Dey-Dey

facebook style home page

Dey-Dey
  Jun 21st 2015, 21:10
346 Views