Reference Websites
Create A Bootstrap Tours and Travels Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Tours and Travels Website - Free Time Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>

<body>

<div class="container-fluid">
   <div class="main">

   </div>
</div>

<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
.row{ margin:0px;}
body{ font-family:Arial, Helvetica, sans-serif; margin:0px auto !important;}
.main{ margin:0px auto; 
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
}
.p10_0{ padding:10px 0px;} .p20_0{ padding:20px 0px;}.p30_0{ padding:30px 0px;} 
.p40_0{ padding:40px 0px;} .p50_0{ padding:50px 0px;}
.clearfix{ clear:both;}
 Step 2 : Header
Responsive Website
  HTML Code
<div class="row header">
	<div class="col-md-3 col-sm-3 col-xs-12 logo">
    	<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
    <div class="col-md-9 col-sm-9 col-xs-12">
    	<div class="row">
        	<div class="col-md-5"></div>
        	<div class="col-md-7 col-sm-12 col-xs-12" align="center">
                <div class="header-right-top pull-right">
                    <ul>
                        <li class="hidden-xs"><a href="#!"><i class="fa fa-list"></i>&nbsp; My Wishlist</a></li>
                         <li><a href="#!"><i class="fa fa-cart-plus"></i>&nbsp; My Cart : 2</a></li>
                        <li style="border-right:none;"><a href="#!"><i class="fa fa-unlock"></i>&nbsp; Sign In</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-default header-right">
                <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a href="#" class="navbar-brand">Free Time Learning</a>-->
                </div>
                <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#!">Home</a></li>
                    <li><a href="#!">Holidays</a></li>
                    <li><a href="#!">Flights / Hotels / Cars</a></li>
                    <li><a href="#!">Holiday Packages</a></li>
                    <li><a href="#!">Gallery</a></li>
                    <li><a href="#!">Blog</a></li>
                </ul>
                </div>
            </nav>
        </div>
   </div>
</div>
  CSS Code
.header{padding:10px 0px; background:#4178CB;}
.header-right-top ul{list-style:none; margin:0px;}
.header-right-top ul li{list-style:none; font-family:arial; font-size:12px; padding:5px 0px; 
margin:10px 0px; float:left; font-weight:bold; border-right:1px solid #000; }
.header-right-top ul li a{ padding:7px 15px; border-radius:2px;
margin:2px 5px 5px; text-decoration:none; color:#000; background:#ffd200;}
.header-right-top ul li a:hover{background:#F0B604;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}

.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default{ 
	border-radius:2px; 
	background:none; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-default ul{ padding:0px;}
.navbar-default .navbar-nav>li>a{ 
	color:#FFF;  
	font-size:14px;
	text-transform:uppercase;
	margin:0px 14px 0px; 
}
.navbar-default .navbar-nav>li>a:hover{color:#CCC;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color: #e7e7e7;
}
@media only screen and (min-width:320px) and (max-width:480px){ 
.header-right-top ul li{    margin: 10px -5px 0px 5px; border-right:none !important;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.logo{ padding-top:25px;}
.navbar-default .navbar-nav>li>a{ font-size:11px; padding:0px; margin: 10px 5px;}
}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.logo{ padding-top:5px;}
	.navbar-default .navbar-nav>li>a{font-size:13px; padding:0px; margin:5px 20px 0px;}
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.logo{ padding-top:15px;}
	.navbar-default .navbar-nav>li>a{font-size:11px; padding:0px; margin:5px 15px 0px;}
   }
 Step 3 : Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="slider-left-h2">Lorem Ipsum is simply dummy text of the printing...</div>
            <div class="slider-left-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
            took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
        	<div class="slider-right">
                <div class="slider-right-h3">Contact Us Today</div>
                <div class="slider-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div align="center">
				<form action="" method="post">
                	<div class="row">
                    	<div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="First Name">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="Last Name">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="email" class="form-control" placeholder="Email ID">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="Mobile">
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                        	<textarea name="" rows="4" class="form-control" placeholder="Message"></textarea>
                    		<button type="button" class="slider-right-btn">Send Message</button>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.slider{ float:left; background:url(../images/slider.jpg) repeat; width:100%;}
.slider-left-h2{ color:#FFF; font-size:42px; padding:150px 50px 10px;}
.slider-left-p{ color:#FFF; line-height:26px; font-size:15px; padding:10px 50px;}
.slider-right{ padding:20px; background-color: rgba(255,204,34,0.5); 
margin:70px 50px 50px; border-radius:3px;}
.slider-right-h3{ color:#FFF; font-size:40px; font-weight:bold; padding:10px 0px 5px; 
text-align:center; text-transform:uppercase;}
.slider-right-p{ color:#FFF; font-size:16px; padding:5px 20px 15px; text-transform:uppercase; text-align:center;}
.form-control{margin:7px auto; background:#FFF; color:#000; border-radius:2px;}
.slider-right-btn{ width:100%; padding:10px 30px; margin-left:-5px; margin-top:7px; color:#000; background:#ffd200;
 border-radius:2px; font-size:15px; border:none; font-weight:600; cursor:pointer; text-transform:uppercase; }
 .slider-right-btn:hover{ background:#F0B604;}
 
@media only screen and (min-width:320px) and (max-width:480px){ 
	.slider-left-h2 {font-size: 20px; padding: 30px 10px 10px; }
	.slider-left-p{ text-align:justify; padding:10px;} 
	.slider-right { padding:10px; background-color: rgba(255,204,34,0.5);  margin: 30px 10px 20px;}
	.slider-right-h3{ font-size:20px;}
	.slider-right-p{ text-align:justify; padding:10px; font-size:15px;}
	}
@media only screen and (min-width:481px) and (max-width:780px){ 
	.slider-left-h2 {font-size: 20px; padding: 60px 10px 10px; }
	.slider-left-p{ text-align:justify; padding:10px;} 
	.slider-right { padding:10px; background-color: rgba(255,204,34,0.5);  margin: 15px 10px;}
	.slider-right-h3{ font-size:20px;}
	.slider-right-p{ text-align:justify; padding:10px; font-size:14px;}
	}
@media only screen and (min-width:960px) and (max-width:1024px){
	.slider-left-h2{ margin:50px 10px 10px; padding:50px 10px 15px; font-size: 26px; } 
	.slider-right-h3 { font-size: 26px;}
	.slider-left-p{ text-align:justify; padding:10px;}
	.slider-right {margin: 25px 10px;}
	}
 Step 4 : Content Part 1
Responsive Website
  HTML Code
<div class="row">

	<div class="content-h2">WHY BOOK WITH US</div>
    <div class="content-h4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text.</div>
    
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-inr" style="padding-top:5px;"></i></div>
            <div class="content-parts-h3">Best Price Guarantee</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-book"></i></div>
            <div class="content-parts-h3">Easy Booking</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-support"></i></div>
            <div class="content-parts-h3">24/7 Customer Care</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
        
</div>
  CSS Code
.content-h2{ color:#000; padding:50px 0px 15px; text-align:center; font-size:40px; font-weight:600;}
.content-h4{ color:#F0B604; padding:5px 20px 50px; line-height:27px; text-align:center; font-size:17px; font-weight:600;}
.content-parts{padding:15px 16px; margin:10px 25px 40px; background:#EEE;}
.content-parts-icons{ font-size:42px; width:65px; height:62px; padding:10px; border-radius:100px; 
background:#FC0; margin-top:-50px !important; color:#000; margin:10px auto; text-align:center;}
.content-parts-h3{ font-size:22px; padding:15px 0px; text-align:center; 
color:#000; font-weight:600; text-transform:uppercase;}
.content-parts-p{ color:#333; padding:15px; text-align:center; font-size:15px; line-height:26px;}

@media only screen and (min-width:320px) and (max-width:480px){ 
.content-h2{font-size:25px;}
}
@media only screen and (min-width:481px) and (max-width:780px){
	.content-parts{ padding:10px 10px 30px;}
	.content-parts-h3{font-size:16px; } 
	.content-parts-p{ padding:15px 5px;}
}
 Step 5 : Content Part 2
Responsive Website
  HTML Code
<div class="row content-part-2">
	<div class="content-part-2-h3">New Destinations</div>
    <div class="border-bottom"></div>
    <div class="clearfix"></div>
	<div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/1.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>13500.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/2.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>20000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/3.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>85000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/4.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>125500.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/5.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>180000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/6.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>95000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/7.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>150000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/8.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>250000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
</div>
  CSS Code
.content-part-2{ background:#F5F5F5; margin:20px auto;}
.content-part-2-h3{ font-size:30px; color:#000; text-transform:uppercase; padding:30px 0px 5px; text-align:center;}
.border-bottom{border-bottom:3px solid #FC0; width:150px; margin:0px auto 30px; }
.content-part-2-sub{margin:10px 30px 30px; padding:0px 0px 10px; background:#FFF;}
.content-part-2-sub-h4{ font-size:17px; font-weight:600; padding:10px 10px 0px; color:#06C;}
.content-part-2-sub-p{ color:#333; font-size:14px; padding:5px 10px; line-height:26px;}
.content-part-2-sub-price{ font-size:20px; font-weight:bold; color:#F0B604; padding:5px 10px 10px;}
.content-part-2-sub-btn{ background:#0474C6; color:#FFF; text-decoration:none; text-align:center; padding:6px 20px; 
 font-size:15px; border-radius:2px; border:none; margin:0px 5%; width:90%;}
.content-part-2-sub-btn:hover{ background:#004566; color:#FFF; text-decoration:none;}
@media only screen and (min-width:320px) and (max-width:480px){ 
	img{ width:100%;} 
	.content-part-2-h3{ font-size:22px; }
	.content-part-2-sub-h4{ font-size:16px; padding:5px 10px 0px;}
	.content-part-2-sub-p{ font-size:13px; line-height:20px; text-align:justify;}
	.content-part-2-sub-price{font-size:15px;}
	.content-part-2-sub-btn{padding:5px 0px; font-size:13px; margin:0px 5%; width:90%;}
}
@media only screen and (min-width:481px) and (max-width:780px){
	.content-part-2-sub-h4{ font-size:14px; padding:5px 10px 0px;}
	.content-part-2-sub-p{ font-size:11.5px; line-height:20px; text-align:justify;}
	.content-part-2-sub-price{font-size:14px;}
	.content-part-2-sub-btn{padding:5px 0px; font-size:13px; margin:0px 5%; width:90%;}
	}
 Step 6 : Content Part 3
Responsive Website
  HTML Code
<div class="row">
	<div class="content-part-2-h3">Hotels &amp; Restaurants</div>
    <div class="border-bottom"></div>
    
	<div class="col-md-6 col-sm-12 col-xs-12">
    	<div class="row p20_0">
        	<div class="col-md-6 col-sm-6 col-xs-12">
            	<img src="images/hotel-1.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
            	<div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>15000.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-2.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>14500.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-3.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>13000.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-4.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>12500.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.content-part-3-right-h4{ font-size:17px; font-weight:600; padding:0px 10px; color:#06C;}
.content-part-3-right-p{color:#333; font-size:14px; padding:5px 10px; line-height:26px;}
.content-part-3-right-price{font-size:20px; font-weight:bold; color:#F0B604; padding:7px 10px 15px;}
.content-part-3-right-btn{ background:#0474C6; color:#FFF; text-decoration:none; text-align:center; padding:7px 25px; 
 font-size:15px; border-radius:2px; border:none; margin:5px 10px;}
.content-part-3-right-btn:hover{ background:#004566; text-decoration:none; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-part-3-right-h4{ font-size:17px; padding:10px 0px 5px;}
	.content-part-3-right-p{ padding:5px 0px;}
	.content-part-3-right-price{ padding:5px 0px 15px;}
	.content-part-3-right-btn{ margin:5px 0px;}
	}
 Step 7 : Footer
Responsive Website
  HTML Code
<div class="row footer">
	<div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-parts">
        	<div class="footer-parts-h4">About Company</div>
            <div class="footer-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
            took a galley of type and scrambled it to make a type specimen book.</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Our Liks</div>
            <ul>
                <li><a href="#!">About Us</a></li>
                <li><a href="#!">Contact Us</a></li>
                <li><a href="#!">Blog</a></li>
                <li><a href="#!">Terms &amp; Conditions</a></li>
                <li><a href="#!">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-5 col-sm-5 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Subscribe &amp; Social Links</div>
            <form action="" method="post">
                <input type="text" class="form" placeholder="example@mail.com">
                <button type="submit" name="submit" class="subscribe">Subscribe</button>
            </form>
            
            <div class="social-links">
                <ul>
                    <li><a href="#!"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#!"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#!"><i class="fa fa-linkedin"></i></a></li>
                    <li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#!"><i class="fa fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="row footer-bottom">
	<div class="white">
    	&copy; <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>.
 		All rights reserved by <a href="http://www.freetimelearning.com/" target="_blank">Free Time Learn</a>.
    </div>
</div>
  CSS Code
.footer{ background:#4178cb; padding:20px 0px; margin-top:50px;}
.footer-parts{ padding:0px 25px;}
.footer-parts-h4{ color:#FFF; padding:10px 0px; font-size:18px;}
.footer-parts-p{ color:#FFF; font-size:14px; padding:5px 0px; line-height:26px; text-align:justify;}
.footer-parts ul{ list-style:none; padding:0px;}
.footer-parts ul li{ padding:0px; text-transform:none; margin-top:-10px; margin-bottom:20px;}
.footer-parts ul li a{ color:#FFF; padding:6px 0px; text-decoration:none;}
.footer-parts ul li a:hover{ color:#BBB;}
.form{ border-radius:2px; padding:8px 10px; color:#000; font-size:16px; margin:10px auto; border:none; }
.subscribe{ padding:8px 15px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-6px; border:none;}
.subscribe:hover{background:#F0B604;}

.social-links{ list-style:none; margin:10px 0px;}
.social-links ul{ list-style:none; padding:0px 0px 0px 0px;}
.social-links ul li{ padding:30px 10px 10px; text-transform:none; float:left; margin-top:-10px; margin-bottom:20px;}
.social-links ul li a{ color:#FFF; padding:6px 15px 6px 0px; font-size:20px; text-decoration:none;}
.social-links ul li a:hover{ color:#BBB;}
.footer-bottom{background:#3264b0; color:#FFF; text-align:center; font-size:12px; 
font-weight:bold; padding:15px 0px !important;}
@media only screen and (min-width:320px) and (max-width:370px){
	.form{ width:190px; padding:6px 10px;}
	.subscribe{ padding:6px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-70px; border:none;}
	}
@media only screen and (min-width:371px) and (max-width:480px){
	.form{ width:230px; padding:6px 10px;}
	.subscribe{ padding:6px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-70px; border:none;}
	.social-links ul li{ padding:30px 7px 10px;}
	.social-links ul li a{ color:#FFF; padding:6px 10px 6px 0px; font-size:17px;}
	}
@media only screen and (min-width:481px) and (max-width:780px){
	.subscribe{ padding:8px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:0px; border:none;}
	.social-links ul li{ padding:30px 10px 10px;}
	.social-links ul li a{ color:#FFF; padding:6px 10px 6px 0px; font-size:17px;}
	}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.