Reference Websites
Restaurant Website
  Start Coding
 Basic Structure
  HTML Code
<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">


</div>

</body>
</html>
  CSS Code
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;}
 Step 1 : Header & Menubar
Reference Image
  HTML Code
<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 &amp; Enjoy your life.</div>
        
        <div class="p50_0" align="center">
        <a href="#!" class="header-btns">BOOK A TABLE</a>&nbsp; &nbsp; &nbsp; &nbsp;
        <a href="#!" class="header-btns">SEE THE MENU </a>
        </div>
    </div>
    
</div>
  CSS Code
.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;}
 Step 2 : Content Part 1
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 3 : Content Part 2
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 4 : Content Part 3
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 5 : Footer
Reference Image
  HTML Code
<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">&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{ 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;}