<html>
<head>
<title>How To Create A Basic Bootstrap Restaurant 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>*{
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;}
<div class="row header">
<div class="col-md-3 col-sm-3 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-9 col-sm-9 col-xs-12">
<nav class="navbar navbar-default header-right pull-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">
<ul class="nav navbar-nav">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Today Special</a></li>
<li><a href="#!">Menu Card</a></li>
<li><a href="#!">Reservation</a></li>
<li><a href="#!">Review</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clearfix"></div>
<div class="header-bottom">
<div class="header-font">Eat healthy food & Enjoy your life.</div>
<div class="p50_0" align="center">
<a href="#!" class="header-btns">BOOK A TABLE</a>
<a href="#!" class="header-btns">SEE THE MENU </a>
</div>
</div>
</div>.header{ padding:10px 0px; background:url(../images/home-bg.jpg); height:500px; background-attachment:fixed;}
.header-left{padding:15px 20px;}
.header-right{padding-top:50px;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}
.header-bottom{ padding:75px 0px 20px;}
.header-font{ color:#FFF; text-align:center; font-size:48px; text-transform:uppercase; font-weight:bold; padding:0px;}
.header-btns{ color:#FFF; font-size:16px; font-weight:500; border:1px solid #FFF;
padding:10px 30px; text-decoration:none; border-radius:2px;}
.header-btns:hover{ background:#7db549; color:#FFF; border:1px solid #7db549; text-decoration:none;}
.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:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{
color:#FFF;
padding:6px 22px;
font-size:14px;
margin:5px 14px 0px;
border:1px solid #FFF; border-radius:2px;
}
.navbar-default .navbar-nav>li>a:hover{background:#7db549 !important; color:#FFF;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
border:1px solid #7db549;
}
.navbar-toggle{ margin-top:-20px;}
@media only screen and (min-width:320px) and (max-width:480px){
.logo{ padding:10px 0px 0px;}
.header-right{padding-top:0px;}
.header-font{font-size:28px;}
.header-btns{ padding:6px 10px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.header{ padding:10px 0px; height:350px;}
.navbar-default .navbar-nav>li>a{padding:7px 6px; font-size:11px; margin:5px 5px 0px;}
.header-right{padding-top:15px;}
.header-font{font-size:28px;}
.header-btns{ padding:8px 20px;}
}
@media only screen and (min-width:1025px) and (max-width:1280px){
.navbar-default .navbar-nav>li>a{padding:7px 15px; font-size:11px; margin:5px 10px 0px;}
.header-right{padding-top:45px;}
}
@media only screen and (min-width:960px) and (max-width:1024px){
.header{ padding:10px 0px; height:400px;}
.navbar-default .navbar-nav>li>a{padding:7px 15px; font-size:11px; margin:5px 10px 0px;}
.header-font{font-size:34px;}
.header-right{padding-top:35px;}
}
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-12">
<div class="content-part-1-left-h3">Lorem Ipsum is simply dummy text...</div>
<div class="content-part-1-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, but also the
leap into electronic typesetting, remaining essentially unchanged.
</div>
<div class="p20_0"><a href="#!" class="content-part-1-left-btn">Read More.</a></div>
</div>
<div class="col-md-7 col-sm-6 col-xs-12" align="center">
<div class="content-part-1-right">
<img src="images/content-part-1.jpg" class="img-responsive" alt="Restaurant">
</div>
</div>
</div>.content-part-1-left-h3{ font-size:28px; color:#7db549; font-weight:500; padding-top:120px; padding-left:10px;}
.content-part-1-left-p{font-size:14px; text-align:justify; color:#000; font-weight:500; line-height:26px; padding:10px 12px;}
.content-part-1-left-btn{ font-size:16px; font-weight:500; border:1px solid #7db549; color:#FFF;
padding:10px 30px; text-decoration:none; border-radius:2px; background:#7db549; margin:0px 10px;}
.content-part-1-left-btn:hover{ background:#689242;}
.content-part-1-right{ padding-top:10px;}
@media only screen and (min-width:320px) and (max-width:480px){
.content-part-1-left-h3{ padding-top:30px; font-size:20px; text-align:center; }
}
@media only screen and (min-width:600px) and (max-width:768px){
.content-part-1-left-h3{ padding-top:20px; font-size:24px;}
.content-part-1-right{ padding-top:80px;}
}
<div class="row">
<div class="content-part-2">
<div class="content-part-2-inner">
<div class="interior-font">Restaurant Interior</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="content-interior">
<img src="images/interior.jpg" class="img-responsive" alt="Restaurant" />
<div class="content-interior-h3">Non AC Hall</div>
<div class="content-interior-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.</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="content-interior">
<img src="images/interior-2.jpg" class="img-responsive" alt="Restaurant" />
<div class="content-interior-h3">Central AC Hall</div>
<div class="content-interior-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.</div>
</div>
</div>
</div>
</div>
</div>.content-part-2{ padding:10px 0px; background:url(../images/content-bg.jpg) no-repeat; height:600px; background-position:center bottom; background-attachment:fixed;}
.interior-font{ font-size:36px; text-transform:uppercase; padding:20px 0px 30px; font-weight:600;
text-align:center; color:#000; text-shadow: 2px 2px 3px #333;}
.content-part-2-inner{background-color: rgba(255,255,255,.5); padding:20px 0px 20px; margin:50px 150px; float:left;
border-radius:3px;}
.content-interior{ padding:10px 25px; float:left;}
.content-interior-h3{ color:#000; font-size:18px; text-shadow: 2px 2px 3px #333; padding:10px 0px; text-align:center;}
.content-interior-p{ color:#000; padding:5px 0px 10px; font-size:14px; line-height:26px; text-align:justify;}
@media only screen and (min-width:320px) and (max-width:480px){
.content-part-2{ padding:10px 0px; height:1000px;}
.content-part-2-inner{padding:20px 0px; margin:50px 20px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.content-part-2-inner{padding:20px 0px; margin:50px 50px;}
}
<div class="row">
<div class="content-part-3">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row content-part-3-inner">
<div class="col-md-5 col-sm-5 col-xs-12" align="center">
<img src="images/menu/1.jpg" class="img-responsive img" alt="Menu Item">
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>55.00/-</i></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row content-part-3-inner">
<div class="col-md-5 col-sm-5 col-xs-12" align="center">
<img src="images/menu/2.jpg" class="img-responsive img" alt="Menu Item">
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>150.00/-</i></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row content-part-3-inner">
<div class="col-md-5 col-sm-5 col-xs-12" align="center">
<img src="images/menu/3.jpg" class="img-responsive img" alt="Menu Item">
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>220.00/-</i></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row content-part-3-inner">
<div class="col-md-5 col-sm-5 col-xs-12" align="center">
<img src="images/menu/4.jpg" class="img-responsive img" alt="Menu Item">
</div>
<div class="col-md-7 col-sm-7 col-xs-12">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>90.00/-</i></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
</div>
</div>
</div>
</div>
</div>.img{ width:90%; height:auto;}
.content-part-3{ padding:30px 0px !important; float:left;}
.content-part-3-inner{ padding:10px 0px;}
.content-part-3-right-h4{ font-weight:600; color:#000; padding:0px;}
.margin_5{ margin:5px 0px; float:left;}
.margin_p3{ margin:10px 0px 5px;}
.price{color:#000; padding:5px 0px; font-weight:bold; font-size:15px;}
.green{ color:#7db549; font-weight:bold; font-size:16px;}
.order-now{ color:#FFF; background:#7db549; padding:5px 15px; border-radius:2px; text-decoration:none; margin:5px auto;}
.order-now:hover{background:#689242;}
@media only screen and (min-width:320px) and (max-width:480px){
.img{ width:100%;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.img{ width:96%; border-radius:3px;}
.content-part-3-right-h4{ font-weight:600; color:#000; padding:5px 0px 0px;}
}
<div class="row footer">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="footer-parts-h3">About Restaurant</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 class="col-md-1 col-sm-1"></div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="footer-parts-h3">Opening Hours</div>
<div class="footer-parts-p">
Mon - Thu : 7:00 AM - 10:00 PM <br />
Friday : 7:00 AM - 11:00 PM <br />
Sat - Sun : 7:00 AM - 11:45 PM
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="footer-parts-h3">Our Location</div>
<div class="footer-parts-p">
3rd phace MG Layout, Opp - Smaple School,<br />
Pl Name - Free Time Learn,<br />
Andhra Pradesh, Nellore(Dt), India - 524002
</div>
<div class="footer-icons">
<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>
</ul>
</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>.footer{padding:20px 0px; background:#333;}
.footer-parts-h3{ font-size:18px; font-weight:600; color:#FFF; padding:10px 0px;}
.footer-parts-p{ color:#000; line-height:24px; text-align:justify; color:#FFF;}
.footer-icons{list-style:none;}
.footer-icons ul{list-style:none; padding:0px;}
.footer-icons ul li{float:left; padding:0px 25px 0px 5px; text-transform:uppercase;}
.footer-icons ul li a{color:#FFF; font-weight:600; font-size:18px;}
.footer-icons ul li a:hover{ color:#CCC;}
.footer-bottom{padding:15px; text-align:center; color:#FFF; font-size:13px; background:#000;}