facebook style home page

This bootstrap snippet called "facebook style home page" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: facebook,style,home,page

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<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="https://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="https://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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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;
	}
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 21st 2015, 21:10

Views: 616