"Facebook Landing Page"
Bootstrap 3.3.0 Snippet by sharanya

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 ----------> <html> <body> <header class=" blue-container container-fluid"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class=" col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> <div class=" col-xs-8 col-sm-8 col-md-8 col-lg-8 custom-pad"> <h1 class="white-text"><b>facebook</b></h1> </div> </div> <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class=" col-xs-8 col-sm-8 col-md-8 col-lg-8 "> <div class="login-wrapper pull-right"> <form class="form-inline form"> <div class="form-group "> <label class="white-text mail" for="email ">Email or Phone</label><br> <input type="email" class=" my-input" id="email" name="email"> </div> <div class="form-group white-text alignment"> <label class="white-text mail" for="pwd">Password</label><br> <input class="my-input " id="pwd" name="pwd" type="password"> </div> <button type="submit" class="btn ui-button blue-background white-text">Log In</button> </form> <div class="form-group my-input2"> <a href="#" class="text-color">Forgotten account?</a> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 ol-lg-4"></div> </div> </div> </header> <div class="bg-color"> <div class="container-fluid "> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> <div class=" col-xs-8 col-sm-8 col-md-8col-lg-8 custom-pad"> <h3 class="connect">Facebook helps you connect and share with the<br> people in your life. </h3> <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/GwFs3_KxNjS.png" alt="image" class="world-img text-center" > </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 align"> <div class="text-left " > <h1 class="heading">Create an account</h1> <p class="paragraph">It's free and always will be.</p> <form> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 column"> <input type="text" name="Email or phone" placeholder="First name"required size="20" class="name form-control form-control-inline"></input> </div> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 column1"> <input type="text" name="Email or phone" placeholder="Sur name"required size="20" class="name form-control form-control-inline sur-name"></input><br><br> </div> <input type="text" name="Email or phone" placeholder="Mobile number or email address"required size="20" class="name number"></input><br><br> <input type="text" name="Email or phone" placeholder="New Password"required size="20" class="name number new-pwd"></input><br> <div> <p class="birthday">Birthday</p> <div class="row"> <div class=" col-xs-4 col-sm-4 col-md-4 col-lg-4"> <select class="options" > <option value="day">Day</option> <option value="day">1</option> <option value="day">2</option> <option value="day">3</option> <option value="day">4</option> <option value="day">5</option> <option value="day">6</option> <option value="day">7</option> <option value="day">8</option> <option value="day">9</option> <option value="day">10</option> <option value="day">11</option> <option value="day">12</option> <option value="day">13</option> <option value="day">14</option> <option value="day">15</option> <option value="day">16</option> <option value="day">17</option> <option value="day">18</option> <option value="day">19</option> <option value="day">20</option> <option value="day">21</option> <option value="day">22</option> <option value="day">23</option> <option value="day">24</option> <option value="day">25</option> <option value="day">26</option> <option value="day">27</option> <option value="day">28</option> <option value="day">29</option> <option value="day">30</option> <option value="day">31</option> </select> <select class="options"> <option value="month">Month</option> <option value="Month">January</option> <option value="Month">Febraury</option> <option value="Month">March</option> <option value="Month">April</option> <option value="Month">May</option> <option value="Month">June</option> <option value="Month">July</option> <option value="Month">August</option> <option value="Month">September</option> <option value="Month">October</option> <option value="Month">November</option> <option value="Month">December</option> </select> <select class="options"> <option value="Year">Year</option> <option value="Year">1988</option> <option value="Year">1989</option> <option value="Year">1990</option> <option value="Year">1991</option> <option value="Year">1992</option> <option value="Year">1993</option> <option value="Year">1994</option> <option value="Year">1995</option> <option value="Year">1996</option> <option value="Year">1997</option> <option value="Year">1998</option> <option value="Year">1999</option> <option value="Year">2000</option> <option value="Year">2001</option> <option value="Year">2002</option> <option value="Year">2003</option> <option value="Year">2004</option> <option value="Year">2005</option> <option value="Year">2006</option> <option value="Year">2007</option> <option value="Year">2008</option> <option value="Year">2009</option> <option value="Year">2010</option> <option value="Year">2011</option> <option value="Year">2012</option> <option value="Year">2013</option> <option value="Year">2014</option> <option value="Year">2015</option> <option value="Year">2016</option> <option value="Year">2017</option> <option value="Year">2018</option> </select> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 no-pad"><a href="#" class="d-o-b">why do i need to provide my <br>date of birth?</a></div> </div> </div> <br> <div class="radio-buttons" > <input type="radio" name="gender" value="Female"> Female <input type="radio" name="gender" value="Male"> Male<br> <br> </div> <p class="terms">By clicking sign up, u agree to our<a href="#"> terms,Data policy</a> and <br><a href="#">cookie policy.</a>you may recive sms notifications from us and<br> can opt out at any time</p> <br> <button type="submit" class="btn btn-success sign-up">Sign up</button> </form> <div class="celebrity"><a href="#" class="link">Create a page</a>for a celebrity,brand or buisness.</div> </div> </div> </div> </div> </div> </body> </html>
.no-pad { padding: 0px; } .white-text{ color:#fff; } .text-color:hover { color: #9cb4d8; text-decoration: underline; } .blue-container{ background-color: #3b5998; background-image: linear-gradient(#4e69a2, #3b5998 50%); -bottom: 1px solid #133783; height:82px; min-height: 42px; position: relative; } .logo{ padding: 0px; padding-top:10px; font-family: inherit; font-size: 44px; } .title{ padding: 4px; padding-left: 90px; } .blue-background{ background-color:#3b5998; margin-top: 30px; padding: 0px 8px 0px 3px; width: 49px; border: 1px solid #a9a7a7; border-radius:10px; border-radius: 0px; } .ui-button{ background-color: #4267b2; border-color: #29487d; } .white-text:hover { color: #fff; } .my-label { font-size: 12px; padding-right: 55px; font-family: Helvetica, Arial, sans-serif; } .my-label1{ padding-right: 88px; } .my-input{ height: 21px; padding: 6px 12px; width:142px !important ; border: 1px solid black; } .my-input1{ padding-left: 142px; margin:10px 0px 0px 0px; } .my-input2{ padding-left: 155px; font-size: 12px; padding-top: 0px; } .text-color{ color: #9cb4d8; } button:hover{ color: #9cb4d8; text-decoration: underline; } .connect{ color: #0e385f; font-size: 18px; font-weight: bold; line-height: 29px; margin-top: 22px; width: 450px; word-spacing: -1px; } .img { width: 537px; height: 195px; } .heading{ font-size: 36px; color: #333; font-weight: 600; margin-bottom: 5px; } .paragraph{ font-size: 19px; color: #1d2129; font-weight: normal; } .name{ width: 193px; border-style: solid; font-size: 18px; border-color: #bdc7d8; border-radius: 5px; padding: 8px 10px; font-family:inherit; height: 38px; font-weight: 100; } .number{ width: 397px; margin-top: -31px; } .birthday{ margin-bottom: 5px; margin-top: 10px; color: #1d2129; font-size: 18px; font-weight: normal; font-family:inherit; } .options { width: 56px; height: 30px; padding-left: 2px; margin: -2px; font-size: 11px; } .new-pwd{ margin-top: -11px; } .d-o-b { margin-top: -3px; display: inline-block; vertical-align: middle; outline: none; color: #365899; cursor: pointer; text-decoration: none; font-size: 11px; } .radio-buttons { color: #1d2129; font-size: 18px; font-weight: normal; line-height: 18px; padding: 0 10px 0 3px; } .terms { color: #777; font-size: 11px; width: 316px; } .sign-up { width: 194px; height: 38px; font-size: 19px; font-weight: bold !important; letter-spacing: normal; background: linear-gradient(#67ae55, #578843); box-shadow: inset 0 1px 1px #a4e388; border-color: #3b6e22 #3b6e22 #2c5115; line-height: 126%; } .bg-color{ background: linear-gradient(white, #D3D8E8); } ::placeholder { color: #999999; } .celebrity{ margin-top: 33px; } .link{ color:#3675BB; } .align{ padding-left: 63px; margin-top: -15px; } .custom-pad{ padding-left: 28px; } .world-img{ width: 456px; height: 195px; } .mail{ font-size: 12px; padding-top: 10px; } .form{ margin-bottom: 4px; } .column{ padding-left: 0px; } .column1{ padding-left: 3px; } .alignment { padding-left: 10px; }

Questions / Comments: