<html>
<head>
<title>RESTAURANT WEBSITE</title>
<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="main">
<!----- Start Header ------>
<div class="header">
<div class="header-left"><img src="images/logo.png" width="300" height="150" alt="Logo"></div>
<div class="header-right">
<ul>
<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>
<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>
<!----- End Header ------>
<!----- Start Content ------>
<div class="content-part-1">
<div class="content-part-1-left">
<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="content-part-1-right" align="center">
<img src="images/content-part-1.jpg" width="673" height="434" alt="Restaurant">
</div>
</div>
<div class="content-part-2">
<div class="content-part-2-inner">
<div class="interior-font">Restaurant Interior</div>
<div class="content-interior">
<img src="images/interior.jpg" width="350" height="200">
<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 class="content-interior">
<img src="images/interior-2.jpg" width="350" height="200">
<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 class="content-part-3">
<div class="content-part-3-left"><img src="images/menu/1.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<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 class="content-part-3-left"><img src="images/menu/2.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<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 class="content-part-3-left"><img src="images/menu/3.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<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 class="content-part-3-left"><img src="images/menu/4.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<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 class="content-part-3-left"><img src="images/menu/5.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>250.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 class="content-part-3-left"><img src="images/menu/6.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>300.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 class="content-part-3-left"><img src="images/menu/7.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>270.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 class="content-part-3-left"><img src="images/menu/8.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>325.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 class="content-part-3-left"><img src="images/menu/9.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>455.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 class="content-part-3-left"><img src="images/menu/10.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>180.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 class="content-part-3-left"><img src="images/menu/11.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>200.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 class="content-part-3-left"><img src="images/menu/12.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>155.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 class="content-part-3-left"><img src="images/menu/13.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>499.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 class="content-part-3-left"><img src="images/menu/14.jpg" width="230" height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Lorem Ipsum</div>
<div class="price">Price : <i class="green"><span class="fa fa-inr"></span>99.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>
<!----- End Content ------>
<!------ Start Footer ------>
<div class="footer">
<div class="footer-parts">
<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="footer-parts">
<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="footer-parts">
<div class="footer-parts-h3">Our Location</div>
<div class="footer-parts-p">
3rd phace MG Layout,<br />
Opp - Smaple School,<br />
Pl Name - Free Time Learn,<br />
Andhra Pradesh, Nellore(Dt),<br />
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="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>
<!------ End Footer ------->
<div class="clearfix"></div>
</div>
</body>
</html>@charset "utf-8"; /**** Developed by http://www.freetimelearning.com/ *****/
body{ font-family:Arial, Helvetica, sans-serif; margin:0px auto !important;}
.main{
width:1200px; 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;}
/*********** Start Header **********/
.header{ width:1200px; float:left; padding:10px 0px; background:url(../images/home-bg.jpg); height:500px; background-attachment:fixed;}
.header-left{ width:360px; float:left; padding:15px 20px;}
.header-right{ width:800px; float:left; padding-top:60px;}
.header-right ul{ list-style:none; padding:0px;}
.header-right ul li{ padding:5px 15px; cursor:pointer; margin:0px 10px; float:left; border:1px solid #FFF; border-radius:2px;}
.header-right ul li:hover{border:1px solid #7db549; background:#7db549;}
.header-right ul li a{ font-size:14px; color:#FFF; text-decoration:none;}
.header-right ul li a:hover{ color:#FFF;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}
.header-bottom{ width:1200px; float:left; 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;}
/*********** End Header **********/
/*********** Start Content Part 1 *********/
.content-part-1{ width:1200px; float:left;}
.content-part-1-left{ width:480px; float:left; padding:100px 0px 20px 20px;}
.content-part-1-left-h3{ font-size:28px; text-align:center; color:#7db549; font-weight:500;}
.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{ width:700px; float:left;}
/*********** End Content Part 1 *********/
/*********** Start Content Part 2 *********/
.content-part-2{ width:1200px; float:left; padding:10px 0px; background:url(../images/content-bg.jpg) no-repeat; height:550px; 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 200px;
border-radius:3px; width:800px; float:left;}
.content-interior{ width:350px; 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;}
/*********** End Content Part 2 *********/
/*********** Start Content Part 3 *********/
.content-part-3{ width:1200px; float:left; padding:20px 0px;}
.content-part-3-left{ width:230px; float:left; padding:10px;}
.content-part-3-right{ width:330px; float:left; padding:5px 10px 10px; height:170px; line-height:26px; text-align:justify;}
.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;}
/*********** End Content Part 3 *********/
/*********** Start Footer *********/
.footer{ width:1200px; float:left; padding:20px 0px; background:#333;}
.footer-parts{ width:300px; padding:0px 50px; float:left;}
.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{ width:1170px; float:left; padding:15px; text-align:center; color:#FFF; font-size:13px; background:#000;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}
/*********** End Footer *********/