Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <meta name="description" content="Omnifood is a premium food delivery service with the mission of to bring affordable and healty meals to as many people as possible.">
        
        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
        <link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
        
        
        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
        <link rel="stylesheet" type="text/css" href="resources/css/queries.css">
        
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
        
        <title>Omnifood</title>
        
        
        
        <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
        <link rel="manifest" href="/resources/favicons/site.webmanifest">
        <link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="/resources/favicons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
    
        

    
    
    
    </head>
    
    <body>
        <header>
            
            <nav>
                <div class="row">
                    
                    <img src="resources/img/logo-white.png" alt="Omnifood logo" class="logo">
                    <img src="resources/img/logo.png" alt="Omnifood logo" class="logo-black">
                    
                    <ul class="main-nav js--main-nav">
                        <li><a href="#features">Food delivery</a></li>
                        <li><a href="#works">How it works</a></li>
                        <li><a href="#cities">Our cities</a></li>
                        <li><a href="#plans">Sign up</a></li>
                        
                    
                    </ul>
                
                    <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
                
                </div>
            
            
            </nav>
            <div class="hero-text-box">
                <h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
                
                <a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a>
                <a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
            
            
            </div>
        
        </header>
        
        <section class="section-features js--section-features" id="features">
            
            <div class="row">
            
                <h2>Get food fast &mdash; not fast food</h2>
                
                <p class="long-copy">
                   Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise! 
                </p>
            
            </div>
            
            <div class="row js--wp-1">
            
                <div class="col span-1-of-4 box">
                    
                    <i class="ion-ios-infinite-outline icon-big"></i>
                    
                    <h3>Up to 365 days/year</h3>
                    
                    <p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
                
                </div>

                
                <div class="col span-1-of-4 box">
                    
                    <i class="ion-ios-stopwatch-outline icon-big"></i>
                    
                    <h3>Ready in 20 minutes</h3>
                    
                    <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
                    </p>
                
                </div>
                
                <div class="col span-1-of-4 box">
                    
                    <i class="ion-ios-nutrition-outline icon-big"></i>
                    
                    <h3>100% organic</h3>
                    
                    <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!

                    </p>
                
                </div>
                
                <div class="col span-1-of-4 box">
                    
                    <i class="ion-ios-cart-outline icon-big"></i>
                    
                    <h3>Order anything</h3>
                    
                    <p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!

                    </p>
                
                </div>
            
            
            </div>
        
        
        </section>
        
        <section class="section-meals">
        
            <ul class="meals-showcase clearfix">
            
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
                    </figure>
                </li>
            </ul>
            
            
            <ul class="meals-showcase clearfix">
            
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
                    </figure>
                </li>
                <li>
                    <figure class="meal-photo">
                        <img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
                    </figure>
                </li>
            </ul>
        
        
        
        </section>
        
        
        <section class="section-steps" id="works">
        
            <div class="row">
                <h2>How it works &mdash; Simple as 1, 2, 3</h2>
            </div>
            
            <div class="row">
                <div class="col span-1-of-2 steps-box">
                    <img src="resources/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen js--wp-2">
                </div>
                
                <div class="col span-1-of-2 steps-box">
                    
                    <div class="works-step">
                        
                        <div>1</div>
                        <p>Choose the subscription plan that best fits your needs and sign up today</p>
                    </div>
                    
                    <div class="works-step">
                        <div>2</div>
                        <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
                    </div>
                    
                    <div class="works-step">
                        <div>3</div>
                        <p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
                    </div>
                    
                    <a href="#" class="btn-app"><img src="resources/img/download-app.svg" alt="App Store Button"></a>
                    
                    <a href="#" class="btn-app"><img src="resources/img/download-app-android.png" alt="Play Store Button"></a>
                    
                </div>
            
            </div>
        
        
        </section>
        
        
        <section class="section-cities" id="cities">
        
            <div class="row">
                        
                <div>
                    <h2>We're currently in these cities</h2>
                </div>
                
            <div class="row js--wp-3">
                <div class="col span-1-of-4 box">
                                      
                        <img src="resources/img/lisbon-3.jpg" alt="Lisbon">
                        <h3>Lisbon</h3>
                        
                        <div class="cities-features">
                            <i class="ion-ios-person icon-small"></i>
                            1600+ happy <span>eaters</span> 
                        </div>
                        <div class="cities-features">
                            <i class="ion-ios-star icon-small"></i>
                            60+ top chefs
                        </div>
                        <div class="cities-features">
                            <i class="ion-social-twitter icon-small"></i>
                            <a href="#">@omnifood_lx</a>
                        </div>
                        
                    
                    </div>
                
                
                <div class="col span-1-of-4 box">
                                      
                        <img src="resources/img/san-francisco.jpg" alt="San Francisco">
                        <h3>San Francisco</h3>
                        
                        <div class="cities-features">
                            <i class="ion-ios-person icon-small"></i>
                            3700+ happy <span>eaters</span> 
                        </div>
                        <div class="cities-features">
                            <i class="ion-ios-star icon-small"></i>
                            160+ top chefs
                        </div>
                        <div class="cities-features">
                            <i class="ion-social-twitter icon-small"></i>
                            <a href="#">@omnifood_sf</a>
                        </div>
                        
                    
                    </div>
                
            
                <div class="col span-1-of-4 box">
                                      
                        <img src="resources/img/berlin.jpg" alt="Berlin">
                        <h3>Berlin</h3>
                        
                        <div class="cities-features">
                            <i class="ion-ios-person icon-small"></i>
                            2300+ happy <span>eaters</span> 
                        </div>
                        <div class="cities-features">
                            <i class="ion-ios-star icon-small"></i>
                            110+ top chefs
                        </div>
                        <div class="cities-features">
                            <i class="ion-social-twitter icon-small"></i>
                            <a href="#">@omnifood_berlin</a>
                        </div>
                        
                    
                </div>
                
                <div class="col span-1-of-4 box">
                                      
                        <img src="resources/img/london.jpg" alt="London">
                        <h3>London</h3>
                        
                        <div class="cities-features">
                            <i class="ion-ios-person icon-small"></i>
                            1200+ happy <span>eaters</span> 
                        </div>
                        <div class="cities-features">
                            <i class="ion-ios-star icon-small"></i>
                            50+ top chefs
                        </div>
                        <div class="cities-features">
                            <i class="ion-social-twitter icon-small"></i>
                            <a href="#">@omnifood_london</a>
                        </div>
                        
                    
                </div>
                
                
            </div>
            
            
                
                
            </div>
        
        
        </section>
        
        <section class="section-testimonials">
        
            <div class="row">
                <h2>Our customers can't live without us</h2>
            </div>
            
            <div class="row">
                <div class="col span-1-of-3">
                    <blockquote>
                    Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
                        <cite><img src="resources/img/customer-1.jpg" alt="Testimonial 1">Alberto Duncan</cite>
                    </blockquote>
                </div>
                
                <div class="col span-1-of-3">
                    <blockquote>
                    Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
                        <cite><img src="resources/img/customer-2.jpg" alt="Testimonial 2">Joana Silva</cite>
                    </blockquote>
                </div>
                
                
                <div class="col span-1-of-3">
                    <blockquote>
                    I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
                        <cite><img src="resources/img/customer-3.jpg" alt="Testimonial 3">Milton Chapman</cite>
                    </blockquote>
                </div>
                
                
            </div>
        
        </section>
        
        <section class="section-plans js--section-plans" id="plans">
            
            <div class="row">
                <h2>Start eating healthy today</h2>
            </div>
            
            <div class="row">
            
                <div class="col span-1-of-3">
                
                    <div class="plan-box js--wp-4">
                        
                        <div>
                            <h3>Premium</h3>
                            <p class="plan-price">$ 399 <span>/ per month</span></p>
                            <p class="plan-price-meal">That’s only 13.30$ per meal</p>
                        
                        </div>
                        
                        <div>
                            <ul>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest <span>creations</span></li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
                            </ul>
                        </div>
                        
                        <div>
                            <a href="#" class="btn btn-full">Sign up now</a>
                        </div>
                        
                        
                    
                    </div>
                </div>
                
                <div class="col span-1-of-3">
                
                    <div class="plan-box">
                        
                        <div>
                            <h3>Pro</h3>
                            <p class="plan-price">$ 149 <span>/ per month</span></p>
                            <p class="plan-price-meal">That’s only 14.90$ per meal</p>
                        
                        </div>
                        
                        <div>
                            <ul>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest <span>creations</span></li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
                            </ul>
                        </div>
                        
                        <div>
                            <a href="#" class="btn btn-ghost">Sign up now</a>
                        </div>
                        
                        
                    
                    </div>
                </div>
                
                <div class="col span-1-of-3">
                
                    <div class="plan-box">
                        
                        <div>
                            <h3>Starter</h3>
                            <p class="plan-price">$ 19 <span>/ per meal</span></p>
                            <p class="plan-price-meal">&nbsp;</p>
                        
                        </div>
                        
                        <div>
                            <ul>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 <span>pm</span></li>
                                <li><i class="ion-ios-close-empty icon-small"></i></li>
                                <li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
                            </ul>
                        </div>
                        
                        <div>
                            <a href="#" class="btn btn-ghost">Sign up now</a>
                        </div>
                        
                        
                    
                    </div>
                </div>
                
                
            </div>
            
        </section>
        
        <div class="map-box">
            
            <div class="map"></div>
                
                <div class="form-box" id="form">

                    <div class="row">
                        <h2>We're happy to hear from you</h2>
                    </div>

                    <div class="row">
                        <form method="post" action="mailer-new.php" class="contact-form">


                        <div class="row">
                                  
                        <?php 
                            
                        if(isset($_GET['success'])) {
                            
                        if($_GET['success'] == 1) {
                            echo "<div class=\"form-messages success\">Thank You! Your message has been sent.</div>";
                        }
                            
                        if($_GET['success'] == -1) {
                            echo "<div class=\"form-messages error\">Oops! Something went wrong. Please try again.</div>";
                        } 
                        }
                        ?> 
                            
                        </div>
                            

                        <div class="row">

                            <div class="col span-1-of-3">
                                <label for="name">Name</label>
                            </div>

                            <div class="col span-2-of-3">
                                <input type="text" name="name" id="name" placeholder="Your name" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col span-1-of-3">
                                <label for="email">Email</label>
                            </div>

                            <div class="col span-2-of-3">
                                <input type="text" name="email" id="email" placeholder="Your email" required>
                            </div>
                        </div>

                        <div class="row">
                            
                            <div class="col span-1-of-3">
                                <label>How did you find us?</label>
                            </div>



                            <div class="col span-2-of-3">
                                <select name="find-us" id="find-us">
                                    <option value="friends" selected>Friends</option>
                                    <option value="search">Search engine</option>
                                    <option value="ad">Advertisement</option>
                                    <option value="others">Other</option>
                                </select>
                            </div>
                        </div>

                         <div class="row">   
                            <div class="col span-1-of-3">
                                <label>Newsletter?</label>
                            </div>

                            <div class="col span-2-of-3">
                                <input type="checkbox" name="news" id="news" checked>Yes please
                            </div>


                        </div>  



                        <div class="row">   
                            <div class="col span-1-of-3">
                                <label>Drop us a line</label>
                            </div>

                            <div class="col span-2-of-3">
                                <textarea name="message" placeholder="Your message"></textarea>
                            </div>


                        </div>  


                        <div class="row">   
                            <div class="col span-1-of-3">
                                <label>&nbsp;</label>
                            </div>

                            <div class="col span-2-of-3">
                                <input type="submit" value="Send it!">
                            </div>


                        </div> 

                    </form>    
                    </div>
                </div>
            </div>
            
        
        
        <footer>
        
            <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                        <li><a href="#">iOS App</a></li>
                        <li><a href="#">Android App</a></li>
                    </ul>
                </div> 
                
                <div class="col span-1-of-2">
                    <ul class="social-links">
                        <li><a href="#"><i class="ion-social-facebook"></i></a></li>
                        <li><a href="#"><i class="ion-social-twitter"></i></a></li>
                        <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
                        <li><a href="#"><i class="ion-social-instagram"></i></a></li> 
                    </ul>
                </div>
            </div>
            
            <div class="row">
                <p>
                Copyright &copy; 2015 by Omnifood. All rights reserved.
                </p>
            </div>
        </footer>
        
       

       



    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/selectivizr@1.0.3/selectivizr.min.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2T9HuWnoqm124-U97kfg4UIcBV_ahX1Q"></script> 
    

    <script type="text/javascript" src="vendors/js/gmaps.js"></script>

    <script src="vendors/js/jquery.waypoints.min.js"></script>
    <script src="resources/js/script.js"></script>

     
    </body>
    


   
    
</html>




              
            
!

CSS

              
                
/* 
orange color: #e67e22 
*/



/*--------------------------------*/
/*-----BASIC SETUP----------------*/
/*--------------------------------*/



* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}



html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato", "Arial", "sans-serif";
    font-weight:300;
    font-size:20px;
    text-rendering:optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}

.clearfix {zoom: 1}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/*--------------------------------*/
/*-----REUSABLE COMPONENTS--------*/
/*--------------------------------*/



.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    padding: 80px 0;
}

.box {
    padding: 1%;
}




/*-------HEADINGS-------------*/



h1,
h2,
h3  { 
    font-weight: 300;
    text-transform: uppercase; 
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-weight: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h2:after {
    display: block;
    height: 2px;
    background-color: #e67e22;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 30px;
}

h3 {
    font-size: 100%;
    margin-bottom: 15px;
}


/*-------PARAGRAPHS-----------*/

.long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}


.box p {
    font-size: 90%;
    line-height: 145%;
}



/*-------ICONS--------------*/

.icon-big {
    font-size: 240%;
    display: block;
    color: #e67e22;
    margin-bottom: 10px;
}


.icon-small {
    display: inline-block;
    width: 30px;
    text-align: center;
    color: #e67e22;
    font-size: 120%;
    line-height: 120%;
    vertical-align: middle;
    margin-top: -5px;
    margin-right: 10px;
}

/*-------BUTTONS--------------*/



.btn:link,
.btn:visited, 
input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300px;
    text-decoration: none;
    border-radius: 300px;
}

.btn-full:link,
.btn-full:visited, 
input[type=submit] {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
    margin-right: 15px;
    
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22;
}

.btn:hover,
.btn:active, 
input[type=submit]:hover,
input[type=submit]:active {
    background-color: #cf6d17;
    -webkit-transition: background-color 0,2s, border 0,2s, color 0,2s;
    transition: background-color 0,2s, border 0,2s, color 0,2s;
}


.btn-full:hover,
.btn-full:active, 
input[type=submit]:hover,
input[type=submit]:active {
    border: 1px solid #cf6d17;
}

.btn-ghost:hover,
.btn-ghost:active {
    border: 1px solid #cf6d17;
    color: #fff;
}


/*------LINKS--------------*/

a:link,
a:visited {
    color: #e67e22;
    text-decoration: none;
    border-bottom: 1px solid #e67e22;
    padding-bottom: 1px;
    -webkit-transition: border-bottom 0.2s, color 0.2s;
    transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
    border-bottom: 1px solid transparent;
    color: #555
}


/*--------------------------------*/
/*-----HEADER---------------------*/
/*--------------------------------*/


header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.70)), to(rgba(0, 0, 0, 0.70))), url(img/hero-min.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero-min.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
    
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



/*-----NAVIGATION-------*/


/* main navi */

.logo {
    height: 100px;
    width: auto;
    margin-top: 20px;
    float: left;
}

.logo-black {
    display: none;
    height: 50px;
    width: auto;
    margin: 5px 0;
    float: left;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 55px;
}


.main-nav li {
    display: inline-block;
    margin-left: 40px;
}


.main-nav li a:link,
.main-nav li a:visited {
    color: #fff;
    font-size: 90%;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0,2s;
    transition: border-bottom 0,2s;
    padding: 8px 0;
    
    
}


.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #e67e22;
    -webkit-transition: border-bottom 0,2s;
    transition: border-bottom 0,2s;
    
}



/* mobile navi */


.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}

.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}


/* sticky navi */


.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    -webkit-box-shadow: 0 2px 2px #efefef;
    box-shadow: 0 2px 2px #efefef; 
    z-index: 9999;
}

.sticky .main-nav {margin-top: 18px; }

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    color: #555;
    padding: 16px 0;    
}

.sticky .logo-black {display: block; }
.sticky .logo {display: none; }





/*------------------------------------------*/
/*--------MEALS-----------------------------*/
/*-----------------------------------------*/


.section-meals {
    padding: 0;
}


.meals-showcase {
    list-style: none;
    width: 100%;
}



.meals-showcase li {
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}


.meal-photo img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}

.meal-photo img:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
}



/*------------------------------------------*/
/*--------HOW IT WORKS-----------------------------*/
/*-----------------------------------------*/


.section-steps {
    background-color: #f4f4f4;
}



.steps-box:first-child {
    text-align: right;
    padding-right: 3%;
    margin-top: 30px;
}

.steps-box:last-child {
    padding-left: 3%;
    margin-top:70px;
    
}

.app-screen {
    width: 40%;
}

.works-step {
    margin-bottom: 50px;
}


.works-step div {
    color: #e67e22;
    border: 2px solid #e67e22;
    display: inline-block;
    border-radius: 50%;
    height: 55px;
    width: 55px;
    text-align: center;
    padding: 5px;
    font-size: 150%;
    float: left;
    margin-right: 25px;
}


.works-step:last-of-type {
    margin-bottom: 90px;
}

.btn-app img {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

.btn-app:link,
.btn-app:visited {
    border: 0;
}


/*------------------------------------------*/
/*--------CITIES--------------------------*/
/*-----------------------------------------*/


.box img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.cities-features {
    margin-bottom: 5px;
}





/*------------------------------------------*/
/*--------TESTIMONIALS----------------------*/
/*-----------------------------------------*/


.section-testimonials {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8))), url(img/back-customers-min.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(img/back-customers-min.jpg);
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

blockquote {
    padding: 2%;
    font-style: italic;
    line-height: 145%;
    position: relative;
    margin-top: 40px;
}

blockquote:before {
    content: "\201C";
    font-size: 400%;
    display: block;
    top: -5px;
    left: -5px;
    font-size: 500%;
}

cite {
    font-size: 90%;
    margin-top: 25px;
    display: block;
}

cite img {
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}


/*------------------------------------------*/
/*--------SIGN UP------------------------*/
/*-----------------------------------------*/


.section-plans {
    background-color: #f4f4f4;
}

.plan-box {
    background-color: #fff;
    border-radius: 5px;
    width: 90%;
    margin-left: 5%;
    -webkit-box-shadow: 0 2px 2px #e5e5e5;
    box-shadow: 0 2px 2px #e5e5e5;
}

.plan-box div {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
}

.plan-box div:first-child {
    background-color: #f8f8f8;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.plan-box div:last-child {
    text-align: center;
    border: 0;
}

.plan-price {
    font-size: 300%;
    font-weight: 100;
    color: #e67e22;
    margin-bottom: 10px;
}

.plan-price span {
    font-size: 30%;
    font-weight: 300;
}

.plan-price meal {
    font-size: 80%;
}

.plan-box ul {
    list-style: none;
}

.plan-box ul li {
    padding: 5px 0;
}



/*------------------------------------------*/
/*--------FORM----------------------*/
/*-----------------------------------------*/


.contact-form {
    width: 60%;
    margin: 0 auto;
}

input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

input[type=checkbox] {
    margin: 10px 10px 10px 0;
}

textarea {
    height: 100px;
}

*:focus {
    outline: none;
}


.map-box {
    width: 100%;
    height: 630px;
    position: relative;
    
}


.form-box {
    position: absolute;
    top: 0;
    right: 0;
    height: 630px;
    padding-top: 40px;
    width: 50%;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
}



.map {
    position: relative;
    width: 100%;
    height: 630px;
    z-index: 0;
}

.form-messages {
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 30px;
    color: #333;
}

.success {
    background-color: rgba(93, 188, 58, 0.8);
}

.error {
    background-color: rgba(219, 54, 24, 0.8);
}
}


/*----------------------------------------*/
/*-----------FOOTER-----------------------*/
/*-----------------------------------------*/


footer {
    background-color: #363636;
    padding: 60px;
    font-size: 80%;
}


.footer-nav {
    list-style: none;
    float: left;
}

.social-links {
    list-style: none;
    float: right;
}

.footer-nav li,
.social-links li {
    display: inline-block;
    margin-right: 20px;
}

.footer-nav li:last-child,
.social-links li:last-child {
    margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
    text-decoration: none;
    border: 0;
    color: #888;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #ddd;
}


.social-links li a:link,
.social-links li a:visited {
    font-size: 160%;
}

.ion-social-facebook:hover {
    color: #3b5998;
}

.ion-social-twitter:hover {
    color: #55acee;
}

.ion-social-googleplus:hover {
    color: #dd4b39;
}

.ion-social-instagram:hover {
    color: #fbad50;
}

.ion-social-facebook,
.ion-social-twitter,
.ion-social-googleplus,
.ion-social-instagram {
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}




footer p {
    color: #888;
    text-align: center;
    margin-top: 20px;
}




/*----------------------------------------*/
/*-----------ANIMATIONS-------------------*/
/*-----------------------------------------*/


.js--wp-1,
.js--wp-2,
.js--wp-3 {
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated {
    opacity: 1;
}

.js--wp-4 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}





















              
            
!

JS

              
                $(document).ready(function() {
    
  
/*for the sticky navigation*/
    
    $(".js--section-features").waypoint(function(direction) 
    {
        if (direction == "down") {
            $("nav").addClass("sticky");
        } else {
            $("nav").removeClass("sticky");
        } 
        
    }, {        
        offset: "60px;"
    });
    
    
/* scroll on buttons*/
    
    $(".js--scroll-to-plans").click(function() {
        $("html,body").animate({scrollTop: $(".js--section-plans").offset().top}, 1000);
        });
    
    $(".js--scroll-to-start").click(function() {
        $("html,body").animate({scrollTop: $(".js--section-features").offset().top}, 1000);
        });


 
    /*navigation scroll*/

  
    $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });


/*animation on scroll*/
    
    $(".js--wp-1").waypoint(function(direction) {
        
        $(".js--wp-1").addClass("animated fadeIn");
    }, {
        offset: "50%"
    });

     $(".js--wp-2").waypoint(function(direction) {
        
        $(".js--wp-2").addClass("animated fadeInUp");
    }, {
        offset: "50%"
    });
    
     $(".js--wp-3").waypoint(function(direction) {
        
        $(".js--wp-3").addClass("animated fadeIn");
    }, {
        offset: "50%"
    });
    
     $(".js--wp-4").waypoint(function(direction) {
        
        $(".js--wp-4").addClass("animated pulse");
    }, {
        offset: "50%"
    });


    
    /* mobile navigation */
    
    $(".js--nav-icon").click(function() {
       var nav = $(".js--main-nav");
       var icon = $("js--nav-icon i");
        
        nav.slideToggle(200);
        
        if(icon.hasClass("ion-navicon-round")) {
            icon.addClass("ion-close-round");
            icon.removeClass("ion-navicon-round");
            
        } else  {
            
            icon.addClass("ion-navicon-round");
            icon.removeClass("ion-close-round");
        }
        
    });
    
    $(window).resize(function(){

var nav = $('.js--main-nav');

var icon = $('.js--nav-icon i');

if ($(window).width() > 767){

nav.css("display", "block");

icon.addClass('ion-close-round');

icon.removeClass('ion-navicon-round');

} else {

nav.css("display", "none");

icon.addClass('ion-navicon-round');

icon.removeClass('ion-close-round');

}

});
    
    /* maps */
    
    
var map = new GMaps({

  div: '.map',
  lat: 38.7436266,
  lng: -9.05,
zoom: 12
});
    
map.addMarker({
    lat: 51.3114178,
    lng: -0.45,
    title: 'Woking',
    infoWindow: {
        content: "<p>Our Working Locale</p>"
    }
});
    
map.addMarker({
    lat: 38.7436266,
    lng: -9.1602037,
    title: 'Lisbon',
    infoWindow: {
        content: "<p>Our Lisbon HQ</p>"
    }
});

    
});



    



    












              
            
!
999px

Console