Restaurant Website

HTML

              
                <header>
  <style>
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
</style>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div> 
<script>
function myFunction(x) {
    x.classList.toggle("change");
  }
</script>
  <nav>
    <h2 ><a href="#" id="logo">Cravings</a></h2>
    <button class="nav-button fa fa-bars"></button>
    <div>
      <!-- <togger view> -->
      
<!--     <ul> -->
      <ul>
        <button class="exit-menu fa fa-times"></button>
        <li><a href="#" class="active">welcome</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">reservations</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
      </ul>
<!--     </ul> -->
    </div>
  </nav>
  <div class="center">
    <h1 class="alex-brush">Welcome</h1>
    <h2 style="font-family:Georgia;">the <b>Cravings</b></h2>
    <span id="asterisk">*</span>
    <p>ready to be opened</p>
  </div>
</header>

<section class="add-padding add-flex">
  <div class="center-text">
    <h1 class="alex-brush"><span class="custom-font">Discover</span><br />OUR STORY</h1>
    <h2>*</h2>
    <p>Some journey can be summed up in a photo, a tweet , a souvenir. But others are so filled with inner riches, they defy easy description. For our guests, this has always posed a challenge. How to best capture the world of food that is <i>The Cravings</i> </p>
    <a href="#">about us</a>
  </div>
  <div  class="stuffed-cherries" data-aos="fade-left" data-aos-delay="300">
  </div>
</section>

<section class="bread-background center-h1">
  <h1 class="custom-h1 alex-brush"><span class="custom-font">Tasteful</span><br />RECIPES</h1>
</section>

<section class="menu add-flex add-padding">
  <div class="menu-images">
    <img src="http://www.konoba-mirakul.com/wp-content/uploads/2015/03/delikatesa4.jpg"  data-aos="fade-down" data-aos-delay="300"/>
    <img src="http://www.konoba-mirakul.com/wp-content/uploads/2015/03/delikatesa21.jpg" data-aos="fade-left" data-aos-delay="300"/>
    <img src="https://www.gourmetsociety.co.uk/uploads/images/restaurants/093ce538894c95892f62dc93bb023636-image.png" data-aos="fade-right" data-aos-delay="300"/>
    <img src="http://retrokitchenbar.com/wp-content/uploads/2014/05/menu-thumb-4-300x218.jpg" data-aos="fade-up" data-aos-delay="300"/>
  </div>
  <div class="center-text">
    <h1><span class="custom-font alex-brush">Discover</span><br />MENU</h1>
    <h2>*</h2>
    <p>Our aim to make a place for the our guests where all the goodness of food is gathered under one roof for making all the visitors to get their tste buds dancing with joy, while they'll be saying bye to us.!</p>
    <a href="#">view the full menu</a>
  </div>
</section>

<section class="cake-background center-h1">
  <h1 class="custom-h1"><span class="custom-font alex-brush">The perfect</span><br />BLEND</h1>
</section>

<section class="add-flex reservation-section">
  <div class="center-text add-padding">
    <h1><span class="custom-font alex-brush">Culinary</span><br />DELIGHT</h1>
    <h2>*</h2>
    <p><h2 style="font-family:blackadder ITC;"><font color="dodgerblue">Nourish your body well, make it a home where your soul will love to dwell.</font></h2></p>
    <p>This quote we take literally. The restaurant has a show kitchen and spoils you with regional and international specialities. Our head chef and his team is known fot the art of conjuring refined hors d'oeuvres and other delicacies with Styrian specialities such as apple or pumpkin.</p>
    <a href="#">make a reservation</a>
  </div>
  <div>
    <img src="http://www.konoba-mirakul.com/wp-content/uploads/2015/03/kulinarstvo11.jpg" data-aos="fade-up" data-aos-delay="300"/>
    <img src="http://www.konoba-mirakul.com/wp-content/uploads/2015/03/kulinarstvo21.jpg" data-aos="fade-down" data-aos-delay="300"/>
  </div>
</section>

<footer>
  <button class="to-top"><i class="fa fa-chevron-up"></i>TOP</button>
  
  <div class="restaurant-info">
  
    <div class="locations">
      <h4>LOCATIONS</h4>
      <div class="location-1">
        <h5>1st floor, 5th Block<br />DLF IT PARK, Chennai &#8212; 600089</h5>
      </div><!--location-1-->
      <div class="location-2">
        <h5>5th floor, 10th Block<br />DLF IT PARK, Chennai &#8212; 600089</h5>
      </div>
    </div><!--locations end-->

    <div class="hours">
      <h4>HOURS</h4>
      <div class="weekdays">
        <h5>Monday - Thursday<br />
          8:30am - 10:00pm
        </h5>
      </div><!--weekdays end-->
      
      <div class="weekends">
        <h5>Friday & Saturday<br />
          8:30pm - 11:00pm
        </h5>
      </div><!--weekends end-->
      
      <div class="private-events">
        <h5>Available for private<br />
          events on Sunday
        </h5>
      </div>
      
    </div><!--hours end-->
    
  </div><!--restaurant-info end-->
  
  <div class="copyright">
    <p><small>Copyright 2014 &#169; Handcrafted with love by <span>Amaze</span> Team</small></p>
    <p><small>Permissions and Copyright &#8226; Contact The Team</small></p>
  </div>
  
</footer>

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Alex+Brush|Overpass+Mono:600,700');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');

$OverpassMonoFont: 'Overpass Mono', monospace;
$PTSansFont: 'PT Sans', sans-serif;
$AlexBrushFont: 'Alex Brush', cursive;
$lightbrown: rgb(190, 128, 64);
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$darkgray: rgb(20,20,20);
$lightgray: rgb(35,35,35);

body {
  overflow-x: hidden;
}
/*
  GLOBAL
*/
h2 {
  margin-top:0;
  
}
button {
  border:0;
  background:0;
  cursor:pointer;
}
a {
  text-decoration:none;
  padding-bottom:5px;
  font-family:blackadder ITC;

}
ul {
  list-style:none;
  padding:0;
  margin:0;
}
/*
  HEADER
*/
header {
  min-height:100vh;
  background:linear-gradient(to bottom,rgba($black,.8),transparent),
    url('http://zigis.com.au/wp-content/uploads/2014/05/holiday2013_front.jpg')no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
  display:flex;
  flex-direction:column;
  /*
    NAV
  */
  nav {
    padding:15px 35px;
    display:flex;
    position:relative;
    h2 {
      margin-bottom:0;
      flex:1;
      letter-spacing:3px;
      font-family: $OverpassMonoFont !important;
      #logo {
        color:lightgray;
        text-transform:Capitalize;
        border-bottom:solid 2px lightgray;
      }
      @import "compass/css3";

$f-c: #5f6f81;

*, *:after, *:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gn-menu-main{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 60px;
  font-size: 13px;
  a {
    display: block;
    height: 100%;
    color: $f-c;
    text-decoration: none;
    cursor: pointer;
    &:hover{
      background-color: $f-c;
      color: #fff;
    }
  }
  > li{
    display: block;
    float: left;
    height: 100%;
    border-right: 1px solid #c6d0da;
    text-align: center;
    >a{
      padding: 0 30px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: bold;
    }
    :after{
      display: table;
      clear:both;
      content: '';
    }
  }
  li.gn-trigger{
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  >li:last-child{
    float: right;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }
}
  
.gn-menu-main, .gn-menu-main ul{
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: $f-c;
    list-style: none;
    text-transform: none;
    font-weight: 300;
    font-family: Arial, sans-serif;
    line-height: 60px;
  }

.gn-menu-wrapper{
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 60px;
  border-top: 1px solid #c6d0da;
  background-color: #fff;
  transform: translateX(-60px);
  transition: transform 0.3s, width 0.3s;
}

.gn-scroller {
    position: absolute;
    overflow-y: scroll;
    width: 370px;
    height: 100%;
}
 
.gn-menu {
    border-bottom: 1px solid #c6d0da;
    text-align: left;
    font-size: 18px;
  li:not(:first-child), li li{
    box-shadow: inset 0 1px #c6d0da;
  }
}

.gn-submenu li{
  overflow: hidden;
  height: 0;
  transition: height 0.3s;
  a{ color: #c1c9d1;}
}

input.gn-search{
  position: relative;
  z-index: 10;
  padding-left: 60px;
  outline: none;
  border:none;
  background: transparent;
  color: #5f6f81;
  font-weight: 300;
  font-family: 'Lato', Arial, sans-serif;
  cursor: pointer;
  &::placeholder{
    color: $f-c;
  }
}

.gn-menu-main a.gn-icon-search{
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}

.gn-icon::before {
    display: inline-block;
    width: 60px;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'FontAwesome';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}
.gn-icon-help::before {
    content: "\f095"
}
 
.gn-icon-cog::before {
    content: "\f278"
}
 
.gn-icon-search::before {
    content: "\f002"
}
 
.gn-icon-download::before {
    content: "\f0f5"
}
 
.gn-icon-photoshop::before {
    content: "\f0c0"
}
 
.gn-icon-illustrator::before {
    content: "\f007"
}
 
.gn-icon-archive::before {
    content: "\f0a1"
}
 
.gn-icon-article::before {
    content: "\f11c"
}
 
.gn-icon-pictures::before {
    content: "\f03e"
}
 
.gn-icon-videos::before {
    content: "\f03d"
}


.gn-icon span {
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}

.gn-icon-menu::before {
    /*margin-left: -15px;
    vertical-align: -2px;
    width: 30px;
    height: 3px;
    background: #5f6f81;
    box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81;
    content: '';*/
  margin-left: -30px;
  content: '\f03a';
}

.gn-icon-menu:hover::before,
.gn-icon-menu.gn-selected:hover::before {
    /*background: white;
    box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;*/
  margin-left: -30px;
  content: '\f03a';
}

.gn-icon-menu.gn-selected::before {
    background: #5993cd;
    box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd;
}

.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
    transform: translateX(0px);
}

.gn-menu-wrapper.gn-open-all {
    width: 340px;
}
.gn-menu-wrapper.gn-open-all .gn-submenu li {
    height: 60px;
}

.container > header,
.codrops-top {
	color: #fff;
	font-family: 'Lato', Arial, sans-serif;
}

.container > header {
	margin: 0 auto;
	padding: 12em 2em;
	padding-left: 370px;
	background: rgba(0,0,0,0.05);
}

.container > header a {
	color: #566473;
	text-decoration: none;
	outline: none;
}

.container > header a:hover {
	color: #4f7bab;
}

.container > header h1 {
	font-size: 3.2em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 55%;
	color: #74818e;
	padding: 0 0 0.6em 0.1em;
}
body {
	background: #34495e;
}
    }
    .nav-button {
      // color:lightgray;
      color: #c0c0c0;
      font-size:23px;
    }
    div {
      background:rgba(0,0,0,.9);
      position:fixed;
      right:0;
      left:0;
      top:0;
      bottom:0;
      z-index:1;
      text-align:center;
      transform:scale(0);
      opacity:0;
      transition:opacity .2s;
      ul {
        position:relative;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        .exit-menu {
          position:absolute;
          top:15px;
          right:15px;
          color:lightgray;
          font-size:20px;
          padding:10px;
        }
        li {
          font-family: $PTSansFont !important;
          text-transform:capitalize;
          a {
            display:block;
            color:lightgray;
            padding:15px 5px;
            transition: all .4s;
            font-size: 25px;
            &:hover, .active:hover {
              color: $lightbrown;
              border-bottom-color: $lightbrown;
            }
          }
        }
      }
    }
  }
  // .alex-brush {
  //   font-family: $AlexBrushFont !important;
  // }
  /*
    CENTER HEADER TEXT
  */
  .center {
    line-height:0;
    margin:auto;
    text-align:center;
    color:$white;
    h1 {
      font-family: $AlexBrushFont !important;
      color:$lightbrown;
      font-size:80px;
      margin-bottom:34px;
    }
    h2 {
      text-transform:uppercase;
      letter-spacing:5px;
      font-size:28px;
    }
    #asterisk {
      color:$lightbrown;
      line-height:0.5;
      font-size:30px;
      display:flex;
      justify-content:center;
      &:before,&:after {
        content:"";
        display:inline-block;
        position:relative;
        vertical-align:middle;
        height:1px;
        // width:40%;
        width: 0%;
        opacity: 0;
        background:$white;
      }
      &:before {
        margin-right:10px;
      }
      &:after {
        margin-left:10px;
      }
    }
    p {
      text-transform:uppercase;
      margin-top:5px;
      font-size:14px;
      font-weight:bold;
      letter-spacing:3px;
    }
  }
}
nav div.show {
  transform:scale(1);
  opacity:1;
}

/*
  SECTIONS
*/

/*
  CLASSES
*/
.custom-font {
  font-family:$AlexBrushFont;
  color:$lightbrown;
  font-size:75px;
  line-height:0;
}

.add-padding {
  padding:25px;
}

.center-text {
  text-align:center;
  margin-bottom:40px;
  margin-top:30px;
  color:rgb(77, 77, 77);
  h2 {
    margin-top:25px;
    line-height:0;
  }
  p {
    margin-top:0;
    font-family: $PTSansFont;
    line-height:1.5;
  }
  a {
    font-family: $PTSansFont;
    color:$lightbrown;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    border-bottom:solid 2px $lightbrown; 
  }
}

.add-flex {
  display:flex;
  flex-direction:column;
  align-items:center;
  .stuffed-cherries {
    background:url('https://s-media-cache-ak0.pinimg.com/736x/61/b1/98/61b19844448b2bad5c78e9a2c6347986.jpg')no-repeat center center;
    background-size:cover;
    height:315px;
    width:320px;
  }
}

.center-h1 {
  display:flex;
  justify-content:center;
  align-items:center;
}
.custom-h1 {
  text-align:center;
  color:$white;
  letter-spacing:5px;
  margin-bottom:0;
  span {
    letter-spacing:0;
  }
}

/*
  TASTEFUL RECIPES SECTION
*/
.bread-background {
  background:$black url('http://www.performerprosites.com/development/clients/showpalace/wp-content/uploads/2014/05/tasteful-recipies-dinner-theatre.jpg')no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
  height:500px;
}
/*
  MENU SECTION
*/
.menu {
  padding:30px;
  &-images {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:10px;
    img {
      width:100%;
    }
  }
}
/*
  THE PERFECT BLEND SECTION
*/
.cake-background {
  background:black url('http://www.rustiquerichmond.co.uk/wp-content/uploads/2014/06/desert.jpg')no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
  height:500px;
}
/*
  CULINARY DELIGHT SECTION
*/
.reservation-section {
  margin-bottom:40px;
  div:first-child {
    flex:1;
  }
  div:last-child {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    flex:1;
    img {
      margin: auto;
      width:85%;
    }
  }
}

/*
  FOOTER
*/
footer {
  margin: 0;
  position:relative;
  button {
    width:50px;
    height:50px;
    position:absolute;
    top:-20px;
    left:50%;
    transform:translate(-50%, -10%);
    background:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-weight:bold;
    letter-spacing:1.2px;
    line-height:1.2;
    border-radius:50%;
    margin-top: 0;
  }
  h4 {
    margin-bottom:0;
  }
  h5 {
    line-height:1.5;
  }
  background:$darkgray;
  color:lightgray;
  .restaurant-info {
    padding:35px 40px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .copyright {
    background:$lightgray;
    color:rgb(150,150,150);
    font-size:14px;
    letter-spacing:1px;
    padding:10px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    span {
      border-bottom:solid 1px;
    }
  }
}

/*
  MEDIA QUERIES
*/
@media screen and (max-width: 425px) {
  header, .bread-background, .cake-background {
    background-attachment: scroll;
  }
}
@media (min-width:768px) {
  footer {
    .restaurant-info {
      flex-direction:row;
      justify-content:space-around;
      align-items:flex-start;
    }
  }
}
@media(min-width:769px) {
  /*
    NAV
  */
  nav {
    position:initial !important;
    align-items:baseline;
    padding: 20px 70px !important;
    .nav-button {
      display:none;
    }
    div {
      position:initial !important;
      background:none !important;
      opacity:initial !important;
      transform:initial !important;
      ul {
        position:initial !important;
        flex-direction:row !important;
        .exit-menu {
          display:none;
        }
        li a{
          font-size: 12.8px;
          margin:0 10px;
          letter-spacing:1px;
          padding:5px 0 !important;
        }
        .active {
            border-bottom:solid 1px lightgray;
        
          }
      }
    }
  }
  .add-padding {
    padding:50px 0;
  }
  .add-flex {
    flex-direction:row;
    align-items:center;
    div:first-child {
      flex:1;
      padding:0 50px;
    }
    div:last-child {
      min-width:400px;
      margin:50px;
    }
  }
  .menu {
    &-images {
      flex:1;
    }
    div:last-child {
      flex:1;
    }
  }
  /*
    FOOTER
  */
  footer {
    .restaurant-info {
      padding:20px 80px;
      flex-direction:row;
      justify-content:space-around;
      .locations {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        h4 {
          flex:1 0 100%;
        }
      }
      .hours {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        h4 {
          flex:1 0 100%;
        }
      }
    }
    .copyright {
      flex-direction:row;
      justify-content:space-around;
    }
  }
  
}

/* ANIMATIONS */
#asterisk {
  opacity: 0;
  transform-origin: 50% 4%;
  animation: spin .5s forwards;
  animation-delay: .3s;
}

#asterisk::before, #asterisk::after {
  transform-origin: center center;
  animation: grow .5s forwards;
  animation-delay: .8s;
}
.center p {
  transform: translateY(-40px);
  opacity: 0;
  animation: fadeDown .9s forwards;
  animation-delay: 1.3s;
}

.center h2 {
  transform: scale(2);
  opacity: 0;
  animation: fade .5s forwards;
}
.center h1 {
  transform: translateY(40px);
  opacity: 0;
  animation: fadeUp .5s forwards;
  animation-delay: .3s;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes grow {
  0% {
    opacity: 0;
    width: 0%;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    width: 40%;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
    opacity: 0;
  }
  // 50% {
  //   opacity: 1;
  // }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

JS

              
                $(document).ready(function() {
  $("button").on("click", function() {
    if ($(this).hasClass("nav-button")) {
      $("nav div").addClass("show");
    } else if ($(this).hasClass("exit-menu")) {
      $("nav div").removeClass("show");
    } else if ($(this).hasClass("to-top")) {
      $("html,body").animate({ scrollTop: 0 }, "slow");
    }
  });

  AOS.init({
    duration: 1800,
    easing: "ease"
  });
});
$('.gn-icon-menu').hover(function(){
  $('.gn-menu-wrapper').toggleClass('gn-open-part');
});

$('.gn-menu-wrapper').hover(function(){
  $(this).toggleClass('gn-open-all');
})

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions