<html>
<head>
<title>How To Create A Basic Bootstrap Entertainment 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">
<div class="main">
<!-- Start Header -->
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 logo" align="center">
<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="row hidden-xs">
<div class="col-md-4"></div>
<div class="col-md-8 col-sm-12 col-xs-12">
<div class="row pull-right">
<div class="header-top">
<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"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<nav class="navbar navbar-default">
<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">Logo</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="#!">About Us</a></li>
<li><a href="#!">News</a></li>
<li><a href="#!">Gallery</a></li>
<li><a href="#!">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!-- End Header -->
<!-- Start Slider -->
<div class="row">
<div class="slider">
<div class="slider-form" align="center">
<div class="glass">
<form action="" method="post">
<input type="text" class="form" placeholder="Search Movie" /><button type="submit" class="search">SEARCH</button>
</form>
</div>
</div>
</div>
</div>
<!-- End Slider -->
<!-- Start Coonntent -->
<div class="row" align="center">
<div class="col-md-3 col-sm-3 col-xs-12">
<img src="images/varma.png" class="img-responsive" alt="Entertainnment Images">
<div class="content-parts-h4"><a href="#!" class="white"> R G V </a></div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<img src="images/amir.png" class="img-responsive" alt="Entertainnment Images">
<div class="content-parts-h4"><a href="#!" class="white"> Amir Khan </a></div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<img src="images/aish.png" class="img-responsive" alt="Entertainnment Images">
<div class="content-parts-h4"><a href="#!" class="white"> Aishwarya Rai </a></div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<img src="images/madhavan.png" class="img-responsive" alt="Entertainnment Images">
<div class="content-parts-h4"><a href="#!" class="white">Madhavan</a></div>
</div>
</div>
<!-- End Content -->
<!-- Start Conntet Center -->
<div class="row">
<div class="content-center">
<div class="content-center-h3">Lorem Ipsum is simply dummy text.</div>
<div class="content-center-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, but also the leap into electronic typesetting,
remaining essentially unchanged.
</div>
</div>
</div>
<!-- End Conntet Center -->
<!-- Start Conntet Bottom-->
<div class="row">
<h1 class="white" align="center">LATEST MOVIES</h1>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/1.png" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">14-Apr-2018</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/2.png" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-May-2017</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Booking Close</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/3.png" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-Apr-2017</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Booking Close</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/4.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Dec-2020</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/5.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">27-Apr-2018</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/6.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Jan-2018</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/7.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">30-Mar-2018</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/8.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">28-Apr-2017</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Booking Close</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="content-bottom-parts">
<div align="center"><img src="images/9.jpg" class="img-responsive" alt="Latest Movies"></div>
<div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">18-Oct-2017</span></div>
<div class="content-bot-buttons">
<a href="#!" class="content-bottom-btns">Details</a>
</div>
<div class="content-bot-buttons pull-right">
<a href="#!" class="content-bottom-btns">Booking Close</a>
</div>
</div>
</div>
</div>
<!-- End Conntet Bottom -->
<!-- Start Footer -->
<div class="row">
<div class="footer">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="footer-parts">
<div class="footer-parts-h4">Lorem Ipsum</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 class="footer-social-links">
<ul>
<li><a href="#!"><i class="fa fa-facebook"></i></a></li>
<li><a href="#!"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#!"><i class="fa fa-twitter"></i></a></li>
<li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="footer-parts">
<div class="footer-parts-h4">Lorem Ipsum</div>
<div class="footer_center_links">
<ul>
<li><a href="#!">Latest Movies</a></li>
<li><a href="#!">2017 National Award Movies</a></li>
<li><a href="#!">2017 Nandi Award Movies</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Blog</a></li>
<li><a href="#!">Careers</a></li>
<li><a href="#!">Terms and Conditions</a></li>
<li><a href="#!">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="footer-parts">
<div class="footer-parts-h4">Feedback</div>
<div class="footer-right">
<form action="" method="post">
<input type="text" class="footer-form form-control" placeholder="Name" />
<input type="text" class="footer-form form-control" placeholder="Email Id" />
<textarea cols="" rows="3" class="footer-form form-control" placeholder="Message"></textarea>
<input type="submit" value="SUBMIT" name="" class="footer_btn btn-block"/>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="footer-bottom">
<div class="white">© <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>
</div>
<!-- End Footer -->
</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>
@charset "utf-8"; /**** Developed by http://www.freetimelearning.com/ *****/
/* CSS Document */
/* (#) means ID Based */
/* (.) means class Based */
*{
margin-left:auto;
margin-right:auto;
}
.row{ margin:0px;}
body{ font-family:Arial, Helvetica, sans-serif; background:url(../images/bg.jpg); background-size:cover;
background-attachment:fixed; background-position:center center; margin:0px auto !important;}
.main{margin:0px auto 20px;
-webkit-box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 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;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#FFF; text-decoration:none;}
/********* Start Header ***********/
.logo{ padding:12px 0px 0px;}
.navbar-brand {
float: left;
height: 65px;
padding: 5px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-default{
border-radius:2px;
background:none !important;
margin-bottom:0px;
border:none !important;
}
.navbar-default ul{ padding:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{
color:#FFF;
padding:7px 27px;
font-size:14px;
text-transform:uppercase;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color: #CCC;
}
.navbar-default .navbar-nav>li>a:hover{ color:#0099da;}
@media only screen and (min-width:320px) and (max-width:480px){ .logo{ padding:10px 0px 0px;} }
@media only screen and (min-width:600px) and (max-width:768px){
.navbar-default .navbar-nav>li>a{padding:7px 5px; font-size:12px; }
}
.header-top{ height:35px; margin:10px auto 0px;}
.header-top ul{ list-style:none; margin:5px 5px;}
.header-top ul li{ float:left; padding:0px 5px; margin-top:2px;}
.header-top ul li a{ font-size:20px; text-decoration:none; color:#FFF;
padding:8px 10px; border-radius:100px; text-align:center;}
.header-top ul li a:hover{ color:#CCC;}
.form{ padding:0px 10px; border:1px solid #0099da; border-radius:2px;}
.form-control{ border-radius:2px; margin:0px auto 4px;}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
padding: 8px 10px 9px;
border-radius:2px;
}
@media only screen and (min-width:600px) and (max-width:768px){
.logo {padding: 35px 0px 0px;}
}
/********** End Header **********/
/****** Start Slider ********/
.slider{ background:url(../images/slider.jpg); height:270px;}
.slider-form{ padding:100px 0px 10px;}
.glass {width:800px; margin:0px 112px; background-color: rgba(255,255,255,.8); padding: 0;}
.form{ width:655px; padding:25px 30px 27px; height:20px; font-size:20px; border:1px solid #F30; background:none; color:#000; font-weight:bold;}
.search{ background:#F60; padding:16px 35px 15px; color:#FFF; font-size:17px; font-weight:bold;
border:1px solid #F30; cursor:pointer;}
.search:hover{ background:#F30;}
@media only screen and (min-width:320px) and (max-width:480px){
.slider{ height:200px;}
.slider-form{ padding:80px 0px 10px;}
.glass {width:98%; margin:0px 1%;}
.form{ width:70%; padding:16px 10px 17px; height:20px; font-size:15px;}
.search{ padding:7px 10px 7px; font-size:14px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.slider{ height:200px;}
.slider-form{ padding:80px 0px 10px;}
.glass {width:100%; margin:0px;}
.form{ width:80%; padding:16px 10px 17px; height:20px; font-size:15px;}
.search{ padding:7px 10px 7px; font-size:14px;}
}
/****** End Slider ********/
/******* Start Content ******/
.content-parts-h4{font-size:20px; padding:10px 0px; text-align:center;}
/******* End Contennt ******/
/******* Start Content Center ******/
.content-center{ background:url(../images/sarkar.jpg) no-repeat; padding:0px;
background-attachment:fixed; background-position:center center; background-size:cover;}
.content-center-h3{ font-size:36px; color:#FFF; padding:100px 100px 20px;}
.content-center-p{ color:#FFF; padding:10px 100px 100px; line-height:26px; font-size:15px; text-align:justify;}
@media only screen and (min-width:320px) and (max-width:480px){
.content-center-h3{ font-size:26px; color:#FFF; padding:50px 10px 20px; text-align:center;}
.content-center-p{ color:#FFF; padding:10px;}
}
/******* End Content Center******/
/******** Start Content Bottom *************/
.content-bottom-parts{ float:left; margin:14px 0px; border:1px solid #999; padding-bottom:10px;}
img{ width:100%;}
.content-bottom-date{color:#F30; font-style:italic; font-size:14px; font-weight:600; padding:0px 5px 10px;}
.content-bottom-date-inner{color:#F60; font-style:italic; font-size:13px; font-weight:600; padding:0px 5px 20px;}
.content-bottom-p{ color:#FFF; padding:10px 5px; line-height:26px;}
.content-bot-buttons{ float:left; padding-top:10px;}
.content-bottom-btns{ background:#FFF; color:#0099da; border-radius:2px; padding:4px 10px;
text-decoration:none; margin:0px 5px;}
.content-bottom-btns:hover{ background:#CCC; color:#000; text-decoration:none;}
/********* End Content Bottom *************/
/****** Start Footer ********/
.footer{ padding:30px 0px 20px; border-top:1px solid #333; background-color: rgba(0,0,0,.3);}
.footer-parts{padding:0px 15px 0px 25px;}
.footer-parts-h4{ font-size:18px; color:#FFF; padding:10px 0px 5px;}
.footer-parts-p{ color:#FFF; padding:15px 0px; line-height:26px; text-align:justify;}
.footer-social-links{ list-style:none;}
.footer-social-links ul{ list-style:none; padding:0px;}
.footer-social-links ul li{ padding:0px 10px; float:left;}
.footer-social-links ul li a{ font-size:20px; color:#FFF; padding:0px 10px 0px 0px;}
.footer-social-links ul li a:hover{ color:#CCC;}
@media only screen and (min-width:600px) and (max-width:768px){
.footer-social-links ul li{ padding:0px 5px; float:left;}
}
.footer_center_links{list-style:none;}
.footer_center_links ul{ list-style:none; padding:0px;}
.footer_center_links ul li{ padding:5px 0px; font-size:14px;}
.footer_center_links ul li a{ color:#FFF; text-decoration:none; padding:5px 0px;}
.footer_center_links ul li a:hover{ color:#CCC;}
.footer-right{ margin-top:10px;}
.footer-form{padding:10px; border-radius:2px; color:#FFF; background:none; border:1px solid #FFF;
margin:5px 0px 10px;}
.footer_btn{ background:#FFF; color:#000; padding:7px 30px; cursor:pointer; font-size:16px;
margin:5px 0px; border:none; border-radius:2px;}
.footer_btn:hover{ background:#CCC;}
.footer-bottom{ padding:15px 0px; text-align:center; background-color: rgba(0,0,0,.6);}
/****** End Footer ********/