Responsive Website Design: Responsive Restaurant Website Templates

Create index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
   height:300px;
   opacity: 0.57;
 
  }
  </style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
   ( function( $ ) {
$( document ).ready(function() {
$('.cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
   element.removeClass('open');
   element.find('li').removeClass('open');
   element.find('ul').slideUp();
  }
  else {
   element.addClass('open');
   element.children('ul').slideDown();
   element.siblings('li').children('ul').slideUp();
   element.siblings('li').removeClass('open');
   element.siblings('li').find('li').removeClass('open');
   element.siblings('li').find('ul').slideUp();
  }
 });

$('.cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
  var r, g, b;
  var textColor = $('.cssmenu').css('color');
  textColor = textColor.slice(4);
  r = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  g = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  b = textColor.slice(0, textColor.indexOf(')'));
  var l = rgbToHsl(r, g, b);
  if (l > 0.7) {
   $('.cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
   $('.cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
  }
  else
  {
   $('.cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
   $('.cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
  }
 })();

function rgbToHsl(r, g, b) {
     r /= 255, g /= 255, b /= 255;
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     var h, s, l = (max + min) / 2;

if(max == min){
         h = s = 0;
     }
     else {
         var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch(max){
             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
             case g: h = (b - r) / d + 2; break;
             case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
     return l;
 }
});
} )( jQuery );

</script>
</head>
<body>
<div class="header">
<div class="header-circle">
<img src="img/logo2.png">
<div class="header-logo">
<h5>Welcome To Restaurants House</h5>
</div>
</div> 
<div class="header-left">

<div class='cssmenu'>
  <ul>
    
    <li class='active has-sub'><a href='#'><span>Online Menu</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
   
  </ul>
</div> 
</div> 
<div class="header-right">

<div class='cssmenu'>
  <ul>
    
    <li class='active has-sub'><a href='#'><span>Menu</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
   
  </ul>
</div> 
</div> 
</div>

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="img/1.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>Welcome to Restaurants House</h3>
          <p>We are here for you</p>
        </div>
      </div>

<div class="item">
        <img src="img/2.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>All Facility</h3>
          <p>We provide you All Facility and yummy food</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img/3.jpg" alt="slider-img">
        <div class="carousel-caption">
          <h3>Awesome Place</h3>
          <p>You will feel Calm..</p>
        </div>
      </div>
  </div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/alarm.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Timing</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/earth.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Online</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/location.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Locations</h6>
</div> 
</div>

<div class="topcontainer-block">
<div class="topcontainer-block-circle">
<img src="img/promotion.png" alt="icon">
</div> 
<div class="topcontainer-block-title">
<h6>Price-List</h6>
</div> 
</div> 
</div> 
<div class="topcontainer-block-readmore">
<div class="readmore-left">
<h6>Read More</h6>
</div> 
<div class="readmore-right">
<div class="readmore-img">
<img src="img/readmore.png" alt="readmore">
</div> 
</div> 
</div>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery8.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>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</h6>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery7.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>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</h6>

<div class="firststcontainer-block">

<img src="http://curdweb.com/navin/click.com/images/gallery6.png">
<div class="firststcontainer-block-icon">
<img src="img/ribbon.png" alt="icon">
</div> 
</div> 
<div class="firststcontainer-block-title">
<h6>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</h6>

</div>

<div class="footer-new">
<div class="footer-mainblock">
<div class="footer-block">
<img src="img/fb.png">
</div>
<div class="footer-block">
<img src="img/tw.png">
</div>
<div class="footer-block">
<img src="img/v.png">
</div>
<div class="footer-block">
<img src="img/g.png">
</div>
</div>
</div>
</body>
</html>

Create style.css

@charset "utf-8";
body{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9de96+0,8ab66b+44,398235+100;Green+3D+%233 */
background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */

}
.header{
padding:3px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

margin:auto;
height: 100px;
}
.header-circle{
 background:#fff;
    border-radius: 50%;
    height: 150px;
    margin: 8px auto auto;
    width: 150px;
 position: relative;
}
.header-circle img{
width:100%;
height:100%;
border-radius:50%;
margin:auto;
}
.header-left{
float:left;
padding:10px;
/*background:#999999;*/
margin-top: -142px;
border-radius:15px;
}
.header-right{
float:right;
padding:10px;
/*background:#666666;*/
margin-top: -142px;
border-radius:15px;
}
.header-logo{
margin-left: -198%;
    padding: 27px;
    width: 701px;
}
.header-logo h5{
background: #eee;
    box-shadow: 1px 3px 5px 3px #333;
    color: #FF0000;
 font-weight:bold;
    font-size: 23px;
    padding: 10px;
    text-align: center;
}
.slider-container-me{
margin:auto;
box-shadow: 9px 10px 6px 2px #333;
background:#A0A0A4;
}
/*----------------------------------top container containing circular block--------------------------------------*/
.topcontainer{
margin:auto;
padding:20px;
/*background:#808080;*/
overflow: auto;
}
.topcontainer-block{
/*background: #333;*/
    float: left;
    margin: 6px;
    padding: 10px;
    width: 24%;
}
.topcontainer-block-circle{
margin:auto;
border-radius:50%;
height:100px;
width:100px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ec1ea+0,2989d8+50,207cca+50,207cca+50,7db9e8+51 */
background: #2ec1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #2ec1ea 0%, #2989d8 50%, #207cca 50%, #207cca 50%, #7db9e8 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ec1ea), color-stop(50%,#2989d8), color-stop(50%,#207cca), color-stop(50%,#207cca), color-stop(51%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* IE10+ */
background: linear-gradient(to bottom,  #2ec1ea 0%,#2989d8 50%,#207cca 50%,#207cca 50%,#7db9e8 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ec1ea', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
text-align: center;
}
.topcontainer-block-circle:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ec1ea+0,7db9e8+0,7db9e8+0,2989d8+50,207cca+50,207cca+100 */
background: #2ec1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #2ec1ea 0%, #7db9e8 0%, #7db9e8 0%, #2989d8 50%, #207cca 50%, #207cca 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ec1ea), color-stop(0%,#7db9e8), color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(50%,#207cca), color-stop(100%,#207cca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2ec1ea 0%,#7db9e8 0%,#7db9e8 0%,#2989d8 50%,#207cca 50%,#207cca 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ec1ea', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */

}
.topcontainer-block-circle img{
height: 50%;
    margin: 25px auto;
    text-align: center;
    width: 50%;
}
.topcontainer-block-circle img:hover{
margin:10px auto;

cursor:pointer;

}
.topcontainer-block-title{
padding:10px;
}
.topcontainer-block-title h6{

color: #000;
    font-size: 18px;
    text-align: center;
}
.topcontainer-block-readmore{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

margin:10px auto;
    overflow: auto;
    padding: 10px;
    width: 30%;
 border-radius: 11px;
}

.readmore-left{
float:left;
width:69%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */

cursor:pointer;
padding:10px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.readmore-left h6{
color: #FF0000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 2px 1px #ccc;
}
.readmore-right{
float:right;
width:30%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */

padding:10px;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.readmore-img{
height: 37px;
    margin: auto;
    width: 33px;
}
.readmore-img img{
height:100%;
width:100%;
margin:auto;
}
/*----------------------------------------------1st container containg box block------------------------------------*/
.firststcontainer{
margin:auto;
/*background:#ddd;*/
padding:20px;
overflow:auto;
}
.firststcontainer-block{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */

float: left;
    margin: 8px;
    padding: 10px;
    width: 32%;
 border-radius:10px;
}
.firststcontainer-block-img{
background: #999999;
    height: 100px;
    margin: auto;
    width: 100%;
}
.firststcontainer-block-img img{
height:100%;
width:100%;
margin:auto;
}
.firststcontainer-block-icon{
float: left;
    height: 50px;
    margin-top: -99px;
    position: relative;
    width: 50px;
}
.firststcontainer-block-icon img{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */ 
    border-radius: 50%;
    height: 100%;
    margin: auto;
    width: 100%;
}
.firststcontainer-block-title{
background: #eee;
    float: left;
    padding: 10px;
    /*width: 80%;*/
}
.firststcontainer-block-title h6{
text-align:justify;
color:#333;
}
.firststcontainer-block-readmore{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */    border-radius: 10px;
    box-shadow: 2px 3px 2px 1px #333;
    cursor: pointer;
    float: right;
 width: 27%;
}
.firststcontainer-block-readmore p{
color:#FF0000;
text-align:center;
margin-top: 10px;
}
/*-----------------------------------------------------footer container ---------------------------------------*/
.footer-new{

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
margin:auto;
}
.footer-mainblock{
margin:auto;
padding:20px;
overflow:auto;
}
.footer-block{
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a4b357 0%, #75890c 100%) repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 50px;
    margin: 10px;
    
    width: 50px;
}
.footer-block img{
height:100%;
width:100%;
margin:auto;
border-radius:50%;
padding: 10px;
cursor:pointer;
}
.footer-block img:hover{
background:#0066FF;
cursor:pointer;
}

/*--------------------------------------------header drop-down menu--------------------------------------------------*/
.cssmenu, .cssmenu ul, .cssmenu ul li, .cssmenu ul li a {
 margin: 0 auto;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.cssmenu {
 width: 200px;
 font-family: Helvetica, Arial, sans-serif;
 color: #ffffff;
}
.cssmenu ul ul {
 display: none;
}
.align-right {
 float: right;
}
.cssmenu > ul > li > a {
 padding: 15px 20px;
 border-left: 1px solid #1682ba;
 border-right: 1px solid #1682ba;
 border-top: 1px solid #1682ba;
 cursor: pointer;
 z-index: 2;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
 color: #ffffff;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4b357+0,75890c+100;Olive+3D+%233 */
background: #a4b357; /* Old browsers */
background: -moz-linear-gradient(top,  #a4b357 0%, #75890c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a4b357 0%,#75890c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a4b357 0%,#75890c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); /* IE6-9 */
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cssmenu > ul > li > a:hover, .cssmenu > ul > li.active > a, .cssmenu > ul > li.open > a {
 color: #eeeeee;
 /*background: #1fa0e4;
 background: -webkit-linear-gradient(#1fa0e4, #1992d1);
 background: -moz-linear-gradient(#1fa0e4, #1992d1);
 background: -o-linear-gradient(#1fa0e4, #1992d1);
 background: -ms-linear-gradient(#1fa0e4, #1992d1);
 background: linear-gradient(#1fa0e4, #1992d1);*/
}
.cssmenu > ul > li.open > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
 border-bottom: 1px solid #1682ba;
}
.cssmenu > ul > li:last-child > a, .cssmenu > ul > li.last > a {
 border-bottom: 1px solid #1682ba;
}
.holder {
 width: 0;
 height: 0;
 position: absolute;
 top: 0;
 right: 0;
}
.holder::after, .holder::before {
 display: block;
 position: absolute;
 content: "";
 width: 6px;
 height: 6px;
 right: 20px;
 z-index: 10;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.holder::after {
 top: 17px;
 border-top: 2px solid #ffffff;
 border-left: 2px solid #ffffff;
}
.cssmenu > ul > li > a:hover > span::after, .cssmenu > ul > li.active > a > span::after, .cssmenu > ul > li.open > a > span::after {
 border-color: #eeeeee;
}
.holder::before {
 top: 18px;
 border-top: 2px solid;
 border-left: 2px solid;
 border-top-color: inherit;
 border-left-color: inherit;
}
.cssmenu ul ul li a {
 cursor: pointer;
 border-bottom: 1px solid #32373e;
 border-left: 1px solid #32373e;
 border-right: 1px solid #32373e;
 padding: 10px 20px;
 z-index: 1;
 text-decoration: none;
 font-size: 13px;
 color: #eeeeee;
 background: #49505a;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cssmenu ul ul li:hover > a, .cssmenu ul ul li.open > a, .cssmenu ul ul li.active > a {
 background: #424852;
 color: #ffffff;
}
.cssmenu ul ul li:first-child > a {
 box-shadow: none;
}
.cssmenu ul ul ul li:first-child > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cssmenu ul ul ul li a {
 padding-left: 30px;
}
.cssmenu > ul > li > ul > li:last-child > a, .cssmenu > ul > li > ul > li.last > a {
 border-bottom: 0;
}
.cssmenu > ul > li > ul > li.open:last-child > a, .cssmenu > ul > li > ul > li.last.open > a {
 border-bottom: 1px solid #32373e;
}
.cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
 border-bottom: 0;
}
.cssmenu ul ul li.has-sub > a::after {
 display: block;
 position: absolute;
 content: "";
 width: 5px;
 height: 5px;
 right: 20px;
 z-index: 10;
 top: 11.5px;
 border-top: 2px solid #eeeeee;
 border-left: 2px solid #eeeeee;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.cssmenu ul ul li.active > a::after, .cssmenu ul ul li.open > a::after, .cssmenu ul ul li > a:hover::after {
 border-color: #ffffff;
}

/*----------------------------------Responsive code here-----------------------------------------------*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {  
 .topcontainer-block {
    float: none;
    margin: 6px auto;
    padding: 10px;
    width: 100%;
}
.topcontainer-block-readmore {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    border-radius: 19px;
    margin: 10px auto;
    overflow: auto;
    padding: 8px;
    width: 100%;
}
.firststcontainer-block {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    border-radius: 10px;
    float: none;
    margin: 8px auto;
    overflow: auto;
    padding: 10px;
    width: 100%;
}
.firststcontainer-block-readmore {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a4b357 0%, #75890c 100%) repeat scroll 0 0;
    border-radius: 10px;
    box-shadow: 2px 3px 2px 1px #333;
    cursor: pointer;
    float: right;
    width: 100%;
}
.header {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%) repeat scroll 0 0;
    height: auto;
    margin: auto;
    padding: 3px;
}
.header-left {
    border-radius: 15px;
    float: none;
    margin: 88px auto;
    padding: 9px;
}
.header-right {
    border-radius: 15px;
    float: none;
    margin: 1px auto;
    padding: 10px;
}
.header-logo {
    margin: 1px auto;
    padding: 10px;
    position: relative;
    width: 100%;
}
.header-logo h5 {
    background: #eee none repeat scroll 0 0;
    box-shadow: 1px 3px 5px 3px #333;
    color: #ff0000;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

}

Sunday 19 July 2015

Responsive Restaurant Website Templates

Create index.html

Create style.css

No comments:

Post a Comment