Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM

HTML Editor

<body class="stop-scroll">

  <!--Start loader-->
  <div class="loader-wrap">
      <div class="loader">
          <span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span><span class="loader-item"></span>
      </div>
  </div>
  <!--End loader-->

  <!--Start Dots-->
  <div class="dots">
      <div class="active one" data-x="header"></div>
      <div class="two" data-x=".recipes"></div>
      <div class="three" data-x=".fixed-image"></div>
  </div>
  <!--End Dots-->

 <!--Start Header-->
  <header>
      <nav>
          <div class="logo">
              <a href="/rosa"><img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/logo-rosa-white.png" alt="Rosa Logo"></a>
          </div>
          <div class="toggle">
              <span class="first"></span>
              <span class="middle"></span>
              <span class="last"></span>
          </div>
          <div class="navigation-bar text-white">
              <ul>
                  <li class="active"><a href="index.html">Home<span class="underline"></span></a></li>
                  <li><a href="#">Reservations<span class="underline"></span></a></li>
                  <li><a href="#">Menu<span class="underline"></span></a></li>
                  <li><a href="#">Blog<span class="underline"></span></a></li>
                  <li><a href="#">Features<span class="underline"></span></a></li>
                  <li><a href="#">Shop<span class="underline"></span></a></li>
                  <li><a href="#">Contact<span class="underline"></span></a></li>
              </ul>
          </div>
      </nav>
      <div class="text">
          <h2>Welcome</h2>
          <h1>THE ROSA</h1>
          <div class="arrow">
              <span class="left"></span>
              <i class="fas fa-asterisk"></i>
              <span class="right"></span>
          </div>
          <span>Ready To Be Opened</span>
          <div class="button"><button>Explore</button></div>
      </div>
      <svg class="svg-down" width="192" height="61" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 160.7 61.5" enable-background="new 0 0 160.7 61.5" xml:space="preserve"><path fill="currentColor" d="M80.3,61.5c0,0,22.1-2.7,43.1-5.4s41-5.4,36.6-5.4c-21.7,0-34.1-12.7-44.9-25.4S95.3,0,80.3,0c-15,0-24.1,12.7-34.9,25.4S22.3,50.8,0.6,50.8c-4.3,0-6.5,0,3.5,1.3S36.2,56.1,80.3,61.5z"></path></svg>
      <div class="arrow-down">
      </div>
  </header>
  <!--End Header-->

  <!--start About Us-->
  <div class="about-us">
      <div class="text">
          <h2>Discover</h2>
          <h3>Our Story</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>Rosa is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon’s Exmouth Market. With glazed frontage on two sides of the building, overlooking the market and a bustling London intersection.</p>
          <div><a class="a-CTA" href="#">About Us</a></div>
      </div>
      <div class="image-container">
          <div class="image image1">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988527/vertical-photo-1.jpg" alt="Food Photo">
          </div>
          <div class="image image2">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988532/vertical-photo-2.jpg" alt="Food Photo">
          </div>
      </div>
  </div>
  <!--End About Us-->

  <!--start Recipes-->
  <div class="recipes">
      <div class="image"></div>
      <div class="text">
          <h2>Tasteful</h2>
          <h3>Recipes</h3>
      </div>
  </div>
  <!--End Recipes-->

  <!--start Menu-->
  <div class="menu">
      <div class="box-model">
          <i class="fas fa-times fa-2x close"></i>
          <div class="arrow">
              <div class="arrow arrow-right"></div>
              <div class="arrow arrow-left"></div>
          </div>
          <div class="box-image-container">
              <div class="box-image">
                  <img src=""  alt="Food Photo">
              </div>
          </div>
      </div>
      <div class="menu-image-container">
          <div class="image active">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988517/big-menu-thumb-1.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/big-menu-thumb-2.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988525/big-menu-thumb-4.jpg" alt="Food Photo">
          </div>
          <div class="image">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988524/big-menu-thumb-6.jpg" alt="Food Photo">
          </div>
      </div>
      <div class="text">
          <h2>Discover</h2>
          <h3>Menu</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>For those with pure food indulgence in mind, come next door and sate your desires with our ever changing internationally and seasonally inspired small plates.  We love food, lots of different food, just like you.</p>
          <div><a class="a-CTA" href="#">View The Full Menu</a></div>
      </div>
  </div>
  <!--End Menu-->

  <!--Start fixed-image-->
  <div class="fixed-image">
      <div class="text">
          <h2>The Perfect</h2>
          <h3>Blend</h3>
      </div>
  </div>
  <!--End fixed-image-->

  <!--start About Us-->
  <div class="reservation">
      <div class="text">
          <h2>Culinary</h2>
          <h3>Delight</h3>
          <div><i class="fas fa-asterisk"></i></div>
          <p>We promise an intimate and relaxed dining experience that offers something different to local and foreign patrons and ensures you enjoy a memorable food experience every time.</p>
          <div><a class="a-CTA" href="#">Make a Reservation</a></div>
      </div>
      <div class="image-container">
          <div class="image image1">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988518/bacon-1.jpg" alt="Food Photo">
          </div>
          <div class="image image2">
              <img src="https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988518/bacon-2.jpg" alt="Food Photo">
          </div>
      </div>
  </div>
  <!--End About Us-->

  <!--Start Footer-->
  <footer>
      <div class="text">
          <h2>ABOUT ROSA</h2>
          <div><i class="fas fa-asterisk"></i></div>
          <p>ROSA is an enchanting and easy-to-use parallax Restaurant WordPress theme that allows you to tell your story in a dynamic, narrative and enjoyable way, making it perfect for restaurants, bakeries, bars or coffee shops.</p>
      </div>
      <div class="contact-container">
        <div class="social-media">
            <h3>Follow Along</h3>
            <div class="links">
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-facebook-square"></i></a>
                <a href="#"><i class="fab fa-pinterest"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
          <div class="newsletter">
            <h3>NewsLetter</h3>
              <form method="post">
                  <input type="email" name="email" placeholder="Type Your Email">
                  <i class="fas fa-envelope"></i>
              </form>
          </div>
      </div>
  </footer>
<!--End Footer-->

<!--Start Copy-Right-->
  <div class="copyright">
      <svg class="svg-up" width="192" height="61" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 160.7 61.5" enable-background="new 0 0 160.7 61.5" xml:space="preserve"><path fill="#262526" d="M80.3,61.5c0,0,22.1-2.7,43.1-5.4s41-5.4,36.6-5.4c-21.7,0-34.1-12.7-44.9-25.4S95.3,0,80.3,0c-15,0-24.1,12.7-34.9,25.4S22.3,50.8,0.6,50.8c-4.3,0-6.5,0,3.5,1.3S36.2,56.1,80.3,61.5z"></path></svg>
      <i class="fas fa-angle-double-up arrow-up"></i>
      <ul class="info">
          <li>&copy; ROSA 2017</li>
          <li>13 Hanway Square, London</li>
          <li>Tel: 71494563</li>
          <li>Handcrafted with love by <a href="#">Pixelgrade</a> Team</li>
      </ul>
      <ul class="CTA">
          <li><a href="#">COPYRIGHT</a></li>
          <li><a href="#">OFICINA VIRT</a></li>
      </ul>
  </div>

CSS Editor

/*Start Global*/
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 12px;
}
body.hide-scroll::-webkit-scrollbar {
    display: none;
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
}
h2 {
    font-family: 'Herr Von Muellerhoff', cursive;
    font-size: 100px;
    font-weight: normal;
    margin: 0 0 -55px;
}
h1, h3 {
    font-family: "Source Code Pro", sans-serif;
    font-size: 47px;
    font-weight: bold;
    letter-spacing: 9.4px;
    margin: 0 0 15px;
}
p {
    color: #515151;
    line-height: 27px;
}
.a-CTA {
    border-bottom: 2px solid #a96700;
    padding-bottom: 4px;
    letter-spacing: 1.5px;
    font-size: 18px;
}
/*End Global*/

/*Start Mutual*/
p, .a-CTA, input, header .navigation-bar a, .copyright li, .contact .form form label, .contact .form form button {
    font-family: Cabin, sans-serif;
}
.fa-asterisk, .a-CTA, h2, header .navigation-bar a:hover, header nav.active .navigation-bar a:hover, footer .social-media .links a:hover, .copyright .info li a, .copyright .CTA li a:hover {
    color: #a96700;
}
header nav .navigation-bar .underline, header .text .button button:hover, .contact .form form button:hover, .contact .text i:hover {
    background-color: #a96700;
}
header .navigation-bar ul li, header .text, .about-us .text, .reservation .text, .menu .box-model, .menu .text, .fixed-image .text, footer, .copyright, .contact .text i {
    text-align: center;
}
header nav, header .navigation-bar ul, .about-us, .reservation, .about-us .image-container, .reservation .image-container, .menu, .menu .menu-image-container, footer .contact-container, .copyright ul, .contact {
    display: flex;
}
header nav .toggle, header nav .toggle span, header .navigation-bar, header .navigation-bar ul, .menu .box-model .close, footer .social-media .links a, .copyright .CTA li a {
    transition: .3s;
}
header, header nav .toggle span, header .navigation-bar a, header .text, header .text .arrow .left, header .text .arrow .right, .recipes, .menu .box-image-container, .fixed-image .text, .copyright, .copyright .arrow-up {
    position: relative;
}
header nav .toggle, header .navigation-bar .underline, header .text .arrow .left:after, header .text .arrow .right:after, header .svg-down, header .arrow-down, .recipes .text, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .box-image-container .box-image, .copyright .svg-up {
    position: absolute;
}
.recipes .text, .fixed-image .text, .menu .box-image-container, .menu .box-image-container .box-image {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
header nav, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, .menu .box-model, .menu .box-image-container, .menu .box-image-container .box-image {
    width: 100%;
}
button, .dots > div, header nav .toggle, header .arrow-down, .menu .box-model .close, .menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left, .menu .menu-image-container .image img, footer .newsletter i, .copyright .arrow-up {
    cursor: pointer;
}
.dots .active, header nav.active, header nav.active .toggle.active span, header nav .toggle span, header .navigation-bar .underline, header .text .arrow .left, header .text .arrow .right, header .text .button button, .contact form button {
    background-color: #fff;
}
h1, h3, header .navigation-bar a, header .text span, .menu .box-model .close:hover, footer .text h2, footer .text p, footer .social-media .links a, .contact .text i, .contact .form form button {
    color: #fff;
}
header nav, header .navigation-bar.show, header .navigation-bar a:hover .underline, header .navigation-bar li.active .underline, header .text .arrow .left:after, .menu .box-model, .copyright .arrow-up {
    left: 0;
}
header .text .arrow .left:after, header .text .arrow .right:after, header .text span, footer .social-media .links a, footer .newsletter i, .copyright .arrow-up, .contact .text i, .contact .form form label {
    display: inline-block;
}
/*End Mutual*/

/*Start Dots*/
.dots {
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translate(0,-50%);
    z-index: 5;
}
.dots > div  {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 20;
    margin-bottom: 10px;
    border: 2px solid #fff;
}
.dots .black {
    border-color: #000;
}
.dots .active.black {
    background-color: #000;
}
/*End Dots*/

/*Start Loader*/
.loader-wrap, .loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.loader-wrap {
    background-color: #a96700;
    z-index: 30;
}
.loader-wrap.remove {
    display: none;
}
.loader {
    margin: auto;
    height: 40px;
    width: 80px;
    box-sizing: border-box;
}
.loader .loader-item {
    position: relative;
    float: left;
    height: 40px;
    width: 4px;
    margin: 0 2px;
    background-color: #fff;
}
.loader .loader-item:nth-child(1) {
    -webkit-animation: loader-item-1 2s linear infinite;
    animation: loader-item-1 2s linear infinite;
}
.loader .loader-item:nth-child(2) {
    -webkit-animation: loader-item-2 2s linear infinite;
    animation: loader-item-2 2s linear infinite;
}
.loader .loader-item:nth-child(3) {
    -webkit-animation: loader-item-3 2s linear infinite;
    animation: loader-item-3 2s linear infinite;
}
.loader .loader-item:nth-child(4) {
    -webkit-animation: loader-item-4 2s linear infinite;
    animation: loader-item-4 2s linear infinite;
}
.loader .loader-item:nth-child(5) {
    -webkit-animation: loader-item-5 2s linear infinite;
    animation: loader-item-5 2s linear infinite;
}
.loader .loader-item:nth-child(6) {
    -webkit-animation: loader-item-6 2s linear infinite;
    animation: loader-item-6 2s linear infinite;
}
.loader .loader-item:nth-child(7) {
    -webkit-animation: loader-item-7 2s linear infinite;
    animation: loader-item-7 2s linear infinite;
}
.loader .loader-item:nth-child(8) {
    -webkit-animation: loader-item-8 2s linear infinite;
    animation: loader-item-8 2s linear infinite;
}
.loader .loader-item:nth-child(9) {
    -webkit-animation: loader-item-9 2s linear infinite;
    animation: loader-item-9 2s linear infinite;
}
.loader .loader-item:nth-child(10) {
    -webkit-animation: loader-item-10 2s linear infinite;
    animation: loader-item-10 2s linear infinite;
}
.loader:after {
    content: 'Loading...';
    font-size: 16px;
    font-family: Arial, serif;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -32px;
    margin: auto;
}
@-webkit-keyframes loader-item-1 {
    1% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    11% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    21% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-1 {
    1% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    11% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    21% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-2 {
    7% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    17% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    27% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-2 {
    7% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    17% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    27% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-3 {
    13% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    23% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    33% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-3 {
    13% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    23% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    33% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-4 {
    19% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    29% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    39% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-4 {
    19% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    29% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    39% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-5 {
    25% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    35% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    45% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-5 {
    25% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    35% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    45% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-6 {
    31% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    41% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    51% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-6 {
    31% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    41% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    51% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-7 {
    37% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    47% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    57% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-7 {
    37% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    47% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    57% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-8 {
    43% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    53% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    63% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-8 {
    43% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    53% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    63% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-9 {
    49% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    59% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    69% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-9 {
    49% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    59% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    69% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes loader-item-10 {
    55% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    65% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    75% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes loader-item-10 {
    55% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    65% {
        -webkit-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    75% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
/*End Loader*/

/*Start Home Page*/

/*Start Header*/
header {
    height: calc(100vh - 22px);
    background-size: cover;
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988534/header.jpg") fixed bottom;
    padding: 20px 70px;
}
header nav {
    position: fixed;
    top: 0;
    padding: 36px 36px 20px;
    z-index: 20;
}
header nav .toggle {
    display: none;
    top: 26px;
    left: 20px;
    background-color: transparent;
    border: none;
    padding: 0;
    z-index: 21;
}
header nav .toggle:focus {
    outline: none;
}
header nav.active .toggle span {
    background-color: #000;
}
header nav .toggle.active {
    left: 32%;
}
header nav .toggle.active .first {
    top: 16px;
    transform: rotate(-45deg);
}
header nav .toggle.active .last {
    top: 0;
    transform: rotate(45deg);
}
header nav .toggle .hide {
    transition: 0s;
    visibility: hidden;
}
header nav .toggle span {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 40px;
}
header nav .toggle span:not(:last-of-type) {
    margin-bottom: 6px;
}
header nav .logo {
    flex-basis: 56%;
    padding-left: 50px;
}
header .navigation-bar.show {
    width: 40%;
}
header .navigation-bar.show a {
    color: #ccc !important;
}
header .navigation-bar.show a:hover {
    color: #fff !important;
}
header .navigation-bar ul li {
    flex: 1;
    padding: 0 10px;
}
header .navigation-bar a {
    text-decoration: none;
    transition: all .5s;
    font-size: 16px;
}
header nav.active .navigation-bar a {
    color: #000;
}
header .navigation-bar .underline {
    height: 2px;
    width: 0;
    left: 50%;
    bottom: -4px;
    transition: all .3s;
    display: block;
}
header .text {
    top: 24%;
}
header .text h1 {
    margin-bottom: 0;
}
header .text .arrow .left, header .text .arrow .right {
    height: 3px;
    width: 100px;
}
header .text .arrow .left {
    left: -4%;
}
header .text .arrow .right {
    right: -4%;
}
header .text .arrow .left:after, header .text .arrow .right:after {
    content: '';
    border: 10px solid transparent;
    border-left-color: #fff;
    top: -8px;
}
header .text .arrow .right:after {
    right: 0;
    border-color: transparent #fff transparent transparent;
}
header .text .arrow .fa-asterisk {
    vertical-align: super;
}
header .text span {
    font-family: "Source Code Pro", sans-serif;
    font-size: 15px;
    margin-bottom: 12px;
}
header .text .button button, .contact form button {
    border: none;
    padding: 9px 18px;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: source_sans_problack, sans-serif;
    border-radius: 3px;
}
header .text .button button, .contact form button:focus {
    outline: none;
}
header .svg-down {
    bottom: 0;
    left: 50%;
    z-index: 5;
    margin-left: -96px;
    margin-bottom: -12px;
    color: #fff;
}
header .arrow-down {
    width: 70px;
    height: 50px;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/arrow-down.png") no-repeat center;
}
/*End Header*/

/*Start About-Us*/
.about-us, .reservation {
    padding: 60px;
}
.about-us .text, .reservation .text {
    flex: 50%;
    padding: 40px 52px 0 0;
}
.about-us .text h3, .reservation .text h3 {
    color: #000;
}
.about-us .text .fa-asterisk, .reservation .text .fa-asterisk {
    color: #9a9998;
}
.about-us .image-container, .reservation .image-container {
    flex: 50%;
}
.about-us .image, .reservation .image {
    margin-left: 20px;
}
/*End About-Us*/

/*Start Recipes*/
.recipes .image {
    height: 350px;
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988529/three-col-1.jpg") fixed center;
    background-size: cover;
}
/*End Recipes*/

/*Start Menu*/
.menu {
    padding: 60px;
}
.menu .box-model {
    display: none;
    position: fixed;
    height: 100%;
    top: 0;
    z-index: 20;
    background-color: rgba(0,0,0,.7);
}
.menu .box-model.active {
    display: block;
}
.menu .box-model.active body {
    overflow: hidden;
}
.menu .box-model .close {
    color: #ccc;
    right: 25px;
    top: 10px;
    z-index: 20;
}
.menu .box-model .arrow .arrow-right,.menu .box-model .arrow .arrow-left {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 50%;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
    z-index: 20;
}
.menu .box-model .arrow .arrow-left {
    left: 20px;
    transform: rotate(-135deg);
}
.menu .box-image-container {
    height: 100%;
}
.menu .box-image-container .box-image img.active {
    animation: scale .5s;
}
@keyframes scale {
    from {transform: scale(0,0)}
    to {transform: scale(1,1)}
}
.menu .menu-image-container {
    flex-wrap: wrap;
    flex: 60%;
}
.menu .menu-image-container .image {
    margin: 0 20px 20px 0;
    flex: calc( 50% - 40px);
}
.menu .text {
    flex: 55%;
    padding: 40px 0 0 62px;
}
.menu .text h3 {
    color: #000;;
}
.menu .text .fa-asterisk {
    color: #9a9998;
}
/*End Menu*/

/*Start fixed-image*/
.fixed-image {
    background: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988533/frontpage-menu.jpg") fixed center;
    background-size: cover;
    height: 400px;
}
/*End fixed-image*/

/*Start Footer*/
footer {
    background-color: #121212;
    padding: 60px 20px;
}
footer .text {
    max-width: 500px;
    margin: auto;
}
footer .text h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 19px;
    letter-spacing: 1.9px;
    margin-bottom: 25px;
}
footer .text .fa-asterisk {
    font-size: 12px;
}
footer .text p {
    line-height: 27px;
}
footer .contact-container {
    padding: 40px 0;
    max-width: 1000px;
    margin: auto;
}
footer .contact-container > div {
    flex: 1;
}
footer .contact-container h3 {
    font-size: 19px;
    letter-spacing: 1.9px;
}
footer .social-media .links a {
    margin: 0 10px;
    font-size: 25px;
}
footer .newsletter input {
    padding: 10px;
    width: 270px;
    background-color: #eee;
    border: none;
    margin-left: -15px;
}
footer .newsletter i {
    margin-left: -40px;
    vertical-align: middle;
    font-size: 21px;
}
.copyright {
    padding: 15px 40px 30px;
    background-color: #262526;
}
.copyright .svg-up {
    top: 0;
    left: 50%;
    margin-left: -96px;
    margin-top: -50px;
}
.copyright .arrow-up {
    width: 40px;
    height: 30px;
    top: -45px;
    color: #fff;
    line-height: 1.9
}
.copyright ul {
    justify-content: center;
}
.copyright li {
    color: #919191;
    font-size: 14px;
}
.copyright li:not(:last-of-type):after {
    content: '•';
    margin: 10px;
}
.copyright .CTA {
    margin-top: 25px;
}
.copyright .CTA li a {
    color: #919191;
}

/*End Footer*/

/*End Home Page*/

/*Start Contact Page*/
.contact-header {
    background-image: url("https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988526/contact-food.jpg");
    height: 40vh;
}
.contact {
    padding: 78px 40px;
}
.contact > div {
    flex: 50%;
}
.contact .text p {
    margin-bottom: 30px;
}
.contact .text i {
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
    line-height: 48px;
    font-size: 24px;
}
.contact .text h2 {
    font-family: source_sans_problack, sans-serif;
    font-size: 24px;
    color: #262626;
    letter-spacing: 2.4px;
    margin-bottom: 20px;
}
.contact .form {
    margin-left: 48px;
}
.contact .form form label {
    margin-bottom: 5px;
    color: #515151;
}
.contact .form form input, .contact .form form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 24px;
    border-radius: 5px;
    border: 2px solid #D8D8D8;
    outline: none;
}
.contact .form form input:focus, .contact .form form textarea:focus {
    border-color: #a96700;
    box-shadow: 0 1px 1px #737373;
}
.contact .form form textarea {
    height: 212px;
    resize: none;
}
.contact .form form button {
    background-color: #262526;
    padding: 12px 30px;
    font-size: 12px;
}
/*End Contact Page*/

/*Start Home Page Responsive*/

@media (max-width: 1200px) {
    .menu, .about-us, .reservation {
        padding: 60px 40px;
    }
    .about-us .text, .reservation .text {
        padding: 0 32px 0 0;
    }
    .about-us .image-container, .reservation .image-container {
        align-items: center;
    }
    .menu .text {
        padding: 0 0 0 32px;
    }
}

@media (max-width: 992px) {
    body {
        padding: 0;
    }
    .dots {
        display: none;
    }
    header {
        height: calc(100vh - 10px);
    }
    header nav .logo {
        padding-left: 0;
    }
    .about-us {
        display: block;
        padding-top: 50px;
    }
    .about-us .text , .reservation .text {
        padding: 0 0 40px;
    }
    .about-us .image-container .image1, .reservation .image-container .image1 {
        margin-left: 0;
    }
    .menu {
        display: block;
        padding: 60px 20px 60px 40px;
    }
    .menu .text {
        padding: 20px 20px 0 0;
    }
    .reservation {
        display: block;
        padding: 30px 20px 60px;
    }
    .contact {
        display: block;
        padding: 78px 20px;
    }
    .contact .form {
        margin-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    header nav {
        display: block;
        text-align: center;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 25px;
    }
    header nav .toggle {
        display: block;
    }
    header .navigation-bar {
        position: fixed;
        top: 0;
        left: -174px;
        height: 100%;
        background-color: #262526;
        overflow: hidden;
        z-index: 20;
        padding: 40px;
    }
    header .navigation-bar ul {
        display: block;
        padding-top: 40px;
    }
    header .navigation-bar ul li {
        text-align: left;
        padding: 14px 0;
    }
    footer .contact-container {
        display: block;
    }
    footer .social-media {
        margin-bottom: 40px;
    }
    .copyright ul {
        display: block;
        margin-top: -20px;
    }
    .copyright li {
        margin-bottom: 5px;
    }
    .copyright li:not(:last-of-type):after {
        content: '';
    }

}

@media (max-width: 576px) {
    h3, h1 {
        font-size: 40px;
    }
    h2 {
        font-size:90px
    }
    header {
        padding: 0;
    }
    header nav .logo {
        padding-left: 0;
    }
    header nav .toggle.active {
        left: 36%;
    }
    header .navigation-bar.show {
        padding: 20px;
        width: 48%;
    }
    .about-us, .reservation {
        padding: 60px 20px;
    }
    .menu {
        padding: 60px 0 60px 20px;
    }
}
/*End Home Page Responsive*/

JS Editor

// constants
const body = document.querySelector("body"),
    loader = document.querySelector(".loader-wrap"),
    links = document.querySelectorAll('a[href="#"]'),
    nav = document.querySelector("header nav"),
    navToggle = document.querySelector("header nav .toggle"),
    navSpanMiddle = document.querySelector("header nav .toggle .middle"),
    navNavigationBar = document.querySelector("header nav .navigation-bar"),
    navNavigationBarLi = document.querySelectorAll(
        "header nav .navigation-bar li"
    ),
    headerText = document.querySelector("header .text"),
    headerSection = document.querySelector("header"),
    aboutSection = document.querySelector(".about-us"),
    recipeSection = document.querySelector(".recipes"),
    menuSection = document.querySelector(".menu"),
    fixedImageSection = document.querySelector(".fixed-image"),
    footerSection = document.querySelector("footer"),
    dotOne = document.querySelector(".dots .one"),
    dotTwo = document.querySelector(".dots .two"),
    dotThree = document.querySelector(".dots .three"),
    dots = document.querySelectorAll(".dots > div"),
    logoImage = document.querySelector("header nav .logo img"),
    svgDown = document.querySelector("header .arrow-down"),
    svgUp = document.querySelector(".copyright .arrow-up"),
    menuImgs = document.querySelectorAll(".menu .menu-image-container img"),
    boxModel = document.querySelector(".menu .box-model"),
    menuImageContainer = document.querySelector(".menu-image-container"),
    boxModelArrow = document.querySelector(".menu .box-model .arrow"),
    boxModelImage = document.querySelector(".menu .box-model img"),
    pageTitle = document.querySelector("title");

// remove loader
function fadeOutEffect() {
    const fadeEffect = setInterval(function() {
        if (!loader.style.opacity) {
            loader.style.opacity = 1;
        }
        if (loader.style.opacity > 0) {
            loader.style.opacity -= 0.4;
        } else {
            body.classList.remove('stop-scroll');
            loader.classList.add('remove');
            clearInterval(fadeEffect);
        }
    }, 100);
}
window.addEventListener("load", fadeOutEffect);

// prevent links click hash
links.forEach(link =>
    link.addEventListener("click", function(e) {
        e.preventDefault();
    })
);

// toggle hamburger menu button
navToggle.addEventListener("click", () => {
    navToggle.classList.toggle("active");
    navSpanMiddle.classList.toggle("hide");
    navNavigationBar.classList.toggle("show");
});

// show active navigationbar li
navNavigationBarLi.forEach(li =>
    li.addEventListener("click", () => {
        const arr = Array.from(li.parentElement.children);
        arr.forEach(li => li.classList.remove("active"));
        li.classList.add("active");
    })
);

// svg-up smooth scroll
svgUp.addEventListener("click", () => {
    window.scroll({
        top: 0,
        behavior: "smooth"
    });
});

window.onscroll = function() {
    // make navbar fixed & change logo color
    if (window.pageYOffset > headerSection.offsetHeight - 75) {
        nav.classList.add("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988525/logo-rosa.png";
    } else {
        nav.classList.remove("active");
        logoImage.src = "https://res.cloudinary.com/abdel-rahman-ali/image/upload/v1535988515/logo-rosa-white.png";
    }

    // header welcome fade out and in
    if (window.pageYOffset > 0) {
        headerText.style.opacity = -window.pageYOffset / 300 + 1;
    }
    // home page JS
    if (pageTitle.text === "ROSA- Restaurant") {
        //change dots background color
        if (window.pageYOffset < headerSection.offsetHeight * 0.5) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotOne.classList.add("active");
        } else if (
            window.pageYOffset > headerSection.offsetHeight * 0.5 &&
            window.pageYOffset < recipeSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (
            window.pageYOffset > recipeSection.offsetTop * 0.75 &&
            window.pageYOffset < menuSection.offsetTop * 0.81
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotOne.classList.remove("active");
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > menuSection.offsetTop * 0.81 &&
            window.pageYOffset < fixedImageSection.offsetTop * 0.86
        ) {
            dots.forEach(dot => dot.classList.add("black"));
            dotThree.classList.remove("active");
            dotTwo.classList.add("active");
        } else if (
            window.pageYOffset > fixedImageSection.offsetTop * 0.86 &&
            window.pageYOffset < footerSection.offsetTop * 0.72
        ) {
            dots.forEach(dot => dot.classList.remove("black"));
            dotTwo.classList.remove("active");
            dotThree.classList.add("active");
        } else if (
            window.pageYOffset > footerSection.offsetTop * 0.72 &&
            window.pageYOffset < footerSection.offsetTop * 0.901
        ) {
            dots.forEach(dot => dot.classList.add("black"));
        } else if (window.pageYOffset > footerSection.offsetTop * 0.901) {
            dots.forEach(dot => dot.classList.remove("black"));
        }
    }
};

// home page JS
if (pageTitle.text === "ROSA- Restaurant") {
    // svg-down smooth scroll
    svgDown.addEventListener("click", () => {
        window.scroll({
            top: aboutSection.offsetTop - 30,
            behavior: "smooth"
        });
    });

    // dots smooth scroll
    dots.forEach(dot =>
        dot.addEventListener("click", function() {
            window.scrollTo({
                top: document.querySelector(this.dataset.x).offsetTop - 100,
                behavior: "smooth"
            });
        })
    );

    // show box model
    menuImgs.forEach(img =>
        img.addEventListener("click", function() {
            const arr = Array.from(this.parentElement.parentElement.children);

            arr.forEach(div => div.classList.remove("active"));

            this.parentElement.classList.add("active");
            boxModel.classList.add("active");
            boxModelImage.src = this.src;
            boxModelImage.classList.add("active");
            body.classList.add("hide-scroll");
        })
    );

    // box model functions
    function boxModelFun(e) {
        // close box model
        if (
            e.code === "Escape" ||
            (e.target.tagName === "DIV" && !e.target.classList.contains("arrow")) ||
            e.target.classList.contains("close")
        ) {
            boxModel.classList.remove("active");
            body.classList.remove("hide-scroll");
        }

        if (boxModel.classList.contains("active")) {
            if (
                e.code === "ArrowRight" ||
                e.code === "ArrowLeft" ||
                e.target.classList.contains("arrow-right") ||
                e.target.classList.contains("arrow-left")
            ) {
                const arr = Array.from(menuImageContainer.children);
                const active = arr.find(div => div.classList.contains("active"));

                // change box model image
                if (
                    e.target.classList.contains("arrow-right") ||
                    e.code === "ArrowRight"
                ) {
                    if (active.nextElementSibling === null) {
                        active.parentElement.firstElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.firstElementChild.firstElementChild.src;
                    } else {
                        active.nextElementSibling.classList.add("active");
                        boxModelImage.src = active.nextElementSibling.firstElementChild.src;
                    }
                }

                // change box model image
                else if (
                    e.target.classList.contains("arrow-left") ||
                    e.code === "ArrowLeft"
                ) {
                    if (active.previousElementSibling === null) {
                        active.parentElement.lastElementChild.classList.add("active");
                        boxModelImage.src =
                            active.parentElement.lastElementChild.lastElementChild.src;
                    } else {
                        active.previousElementSibling.classList.add("active");
                        boxModelImage.src =
                            active.previousElementSibling.firstElementChild.src;
                    }
                }
                active.classList.remove("active");
            }
        }
    }

    window.addEventListener("keydown", boxModelFun);
    window.addEventListener("click", boxModelFun);
    boxModelArrow.addEventListener("click", boxModelFun);
}

HTML Editor

CSS Editor

JS Editor

Gestión de Landing