123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header visible-xs">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><h2>TastyBox</h2></a>
            </div><!-- navbar-header -->
        <div id="navbar" class="navbar-collapse collapse">
            <div class="hidden-xs" id="logo"><a href="#header">
                <img src="https://41.media.tumblr.com/3172b0af03ae569209fe2b15c2757d78/tumblr_ntjox0Wmuv1ud7rr3o1_100.png" alt="">
            </a></div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#story">Story</a></li>
                <li><a href="#reservation">Reservation</a></li>
                <li><a href="#chefs">Our Chefs</a></li>

                
                <li><a href="#facts">Facts</a></li>
                <li><a href="#food-menu">Food Menu</a></li>
                <li><a href="#special-offser">Special Offers</a></li>
                
                <!--fix for scroll spy active menu element-->
                <li style="display:none;"><a href="#header"></a></li>

            </ul>
        </div><!--/.navbar-collapse -->
        </div><!-- container -->
    </div><!-- menu -->

    <div id="header">
        <div class="bg-overlay"></div>
        <div class="center text-center">
            <div class="banner">
                <h1 class="">TastyBox</h1>
            </div>
            <div class="subtitle"><h4>Fresh...Juicy...TastyBox!</h4></div>
        </div>
        <div class="bottom text-center">
            <a id="scrollDownArrow" href="#"><i class="fa fa-chevron-down"></i></a>
        </div>
    </div>
    <!-- /#header -->

    <div id="story" class="light-wrapper">
        <section class="ss-style-top"></section>
        <div class="container inner">
            <h2 class="section-title text-center">Our Story</h2>
            <p class="lead main text-center">We are a fast food chain taking Brazil by storm.</p>
            <div class="row text-center story">
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper"> <i class="fa fa-anchor"></i> </div>
                        <h3>EST. 2013</h3>
                        <p>We're the fastest growing fast food chain in Brazil since 2013.</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper"> <i class="fa  fa-cutlery"></i> </div>
                        <h3>Cooking Traditions</h3>
                        <p>American burger tradition fused with world famous Brazilian "Churrasco". </p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper"> <i class="fa fa-coffee"></i> </div>
                        <h3>Food Quality</h3>
                        <p>Award winning best sauce of the year 2 times in a row. 'Nough said!.</p>
                    </div>
                </div>
            </div>
            <!-- /.services --> 
        </div>
        <!-- /.container -->
        <section class="ss-style-bottom"></section>
    </div><!-- #story -->
    <div id="facts" class="parallax parallax2 facts">
      <div class="bg-overlay"></div>
        <div class="container inner">
            <div class="row text-center services-3">
                <div class="col-sm-3">
                    <div class="col-wrapper">
                    <div class="icon-border bm10"> <i class="fa fa-beer"></i> </div>
                    <h4>9796518</h4>
                    <p>Refreshments Served</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-wrapper">
                    <div class="icon-border bm10"> <i class="fa fa-cutlery"></i> </div>
                    <h4>5939472</h4>
                    <p>Meals Served</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-wrapper">
                    <div class="icon-border bm10"> <i class="fa fa-truck"></i> </div>
                    <h4>2188764</h4>
                    <p>Meals Delivered</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-wrapper">
                    <div class="icon-border bm10"> <i class="fa fa-users"></i> </div>
                    <h4>1480523</h4>
                    <p>Customers in Brazil</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container --> 
    </div><!-- #facts -->




    <div id="food-menu" class="light-wrapper">
        <section class="ss-style-top"></section>
        <div class="container inner">
            <h2 class="section-title text-center">Fresh, Juicy, TastyBox Menu!</h2>
            <p class="lead main text-center"></p>

                        <div class="row">
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://41.media.tumblr.com/bfd11a1b6b6ffab454a4bc067f34627b/tumblr_ntebgxU6941ud7rr3o1_400.jpg" alt="LambBancon"></div>
                    <div class="menu-titles"><h1 class="">LamBacon</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Lamb...</li>
                            <li>Bacon...</li>
                            <li>Fresh...</li>
                            <li>Lettuce...</li>
                            <li>Tomatos...</li>
                            <li>Mint-Cilantro-Garlic Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://40.media.tumblr.com/c468fcb7d4f4362b0de01e7e374bcfd5/tumblr_nted40Ix4z1ud7rr3o1_400.jpg" alt="El Dorado"></div>
                    <div class="menu-titles"><h1 class="">Dutch Von Cheesy </h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Dutch Cheddar Cheese...</li>
                            <li>Fresh...</li>
                            <li>Lettuce...</li>
                            <li>Tomatos...</li>
                            <li>Premium Smoky Gaucho Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://41.media.tumblr.com/5892daadaed762fbc9b3553a1b876a04/tumblr_nteecactZc1ud7rr3o1_1280.jpg" alt="Smoothies"></div>
                    <div class="menu-titles"><h1 class="">Swiss Champignon</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled Mushroom...</li>
                            <li>SirLoin Beef...</li>
                            <li>Fresh...</li>
                            <li>Tomatos...</li>
                            <li>Grilled Onions...</li>
                            <li>Smokey Mushroom Mayo&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://41.media.tumblr.com/6f3ee3d900b7018d98e9a63a6877ced9/tumblr_ntee05e9Y41ud7rr3o1_1280.jpg" alt="TastyBoxTasty"></div>
                    <div class="menu-titles"><h1 class="">TastyBoxTasty</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled...</li>
                            <li>Picanha Beef...</li>
                            <li>Fresh...</li>
                            <li>Lettuce...</li>
                            <li>Tomatos...</li>
                            <li>Premium SuperChipotle Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://40.media.tumblr.com/6a1ff4e6906784da2edce2aaef9180e9/tumblr_ntee2rarP71ud7rr3o1_400.jpg" alt="PremiumTasty"></div>
                    <div class="menu-titles"><h1 class="">PremiumTasty</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled...</li>
                            <li>Premium Angus Beef...</li>
                            <li>Fresh...</li>
                            <li>Premium Lettuce...</li>
                            <li>Premium Tomatos...</li>
                            <li>Premium Whisky 'n Herbs Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://36.media.tumblr.com/47514f75bd27eee85905be08781c1c37/tumblr_ntee57Pef51ud7rr3o1_1280.jpg" alt="CheeseBaconWar"></div>
                    <div class="menu-titles"><h1 class="">Cheese&Bacon War</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled...</li>
                            <li>SirLoin Beef...</li>
                            <li>Premium Bacon...</li>
                            <li>Smoked Cheddar...</li>
                            <li>More Premium Bacon...</li>
                            <li>Pepper-Garlic-Chilli Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://40.media.tumblr.com/249b55f25e49eddca7ed1b8cbef655a1/tumblr_ntee7hR7hG1ud7rr3o1_1280.jpg" alt="Smoothies"></div>
                    <div class="menu-titles"><h1 class="">Double Trouble</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled...</li>
                            <li>Angus Beef...</li>
                            <li>Premium Bacon...</li>
                             <li>Premium Lettuce...</li>
                            <li>Premium House Bun...</li>
                            <li>Premium Chipotle&Limones Sauce&copy;</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3">
                    <div class="menu-images "><img src="https://41.media.tumblr.com/f79a3418ac5c73450ad1d80e627dd36e/tumblr_ntee9uHgZT1ud7rr3o1_540.jpg" alt="Sargent Pepper!"></div>
                    <div class="menu-titles"><h1 class="">Sargent Pepper!</h1></div>
                    <div class="menu-items ">
                        <ul>
                            <li>Juicy...</li>
                            <li>Tasty...</li>
                            <li>Grilled...</li>
                            <li>TenderLoin Beef...</li>
                            <li>Premium Bacon...</li>
                            <li>Cheddar....</li>
                            <li>Dutch Cheddar Cheese...</li>
                            <li>Lime&Pepper&Onion Mayo&copy;</li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        <!-- /.container -->
        <section class="ss-style-bottom"></section>
    </div><!--/#food-menu-->




    <div id="special-offser" class="parallax pricing">
      <div class="bg-overlay-white"></div>
        <div class="container inner">
          

            <h2 class="section-title text-center">TastyBoxBites</h2>
            <p class="lead main text-center">Some of our all time favorites!</p>
            
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    
                    <div class="pricing-item">
                        
                        <a href="#"><img class="img-responsive img-thumbnail" src="https://40.media.tumblr.com/f2c88699722c4ff010cf4574f66ee615/tumblr_ntdeeqTPxs1ud7rr3o1_540.jpg" alt=""></a>
                        
                        <div class="pricing-item-details">
                            
                            <h3><a href="#">TastyBoxBite</a></h3>
                            
                            <p>Char Grilled Chicken Filet. Your Choice of: Fresh Lettuce, Tomatos and Red Onions, and Award Winning Premium Filet Sauce&copy;</p>
                            
                            <a class="btn btn-danger" href="#">Order now</a>
                            <div class="clearfix"></div>
                        </div>
                        <!--price tag-->
                        <span class="hot-tag br-red">$16</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    
                    <div class="pricing-item">
                        
                        <a href="#"><img class="img-responsive img-thumbnail" src="https://36.media.tumblr.com/0d9c63e8da5a52e19d58afba5a937f7c/tumblr_ntdeir37zJ1ud7rr3o1_400.jpg" alt=""></a>
                        
                        <div class="pricing-item-details">
                            
                            <h3><a href="#">JuicyBoxBite</a></h3>
                            
                            <p>Char Grilled Picanha Beef. Your Choice of: Fresh Lettuce, Tomatos, Jalapeños and Red Onions and Award Winning Premium Smoky Gaucho Sauce&copy;</p>
                            
                            <a class="btn btn-danger" href="#">Order now</a>
                            <div class="clearfix"></div>
                        </div>
                        <!--price tag-->
                        <span class="hot-tag br-lblue">$17</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix visible-md"></div>
                <div class="col-md-6 col-sm-6">
                    
                    <div class="pricing-item">
                        
                        <a href="#"><img class="img-responsive img-thumbnail" src="https://40.media.tumblr.com/90deb07aa9071a6de25739c32a6e6d62/tumblr_ntdejqEuUE1ud7rr3o1_400.jpg" alt=""></a>
                        
                        <div class="pricing-item-details">
                            
                            <h3><a href="#">FishyBoxBite</a></h3>
                            
                            <p>Char Grilled Breaded Salmon Filet. Your Choice of: Fresh Lettuce, Tomatos, Lime slices and Red Onions and Award Winning Premium Chipotle&Limones Sauce&copy</p>
                            
                            <a class="btn btn-danger" href="#">Order now</a>
                            <div class="clearfix"></div>
                        </div>
                        <!--price tag-->
                        <span class="hot-tag br-green">$14</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    
                    <div class="pricing-item">
                        
                        <a href="#"><img class="img-responsive img-thumbnail" src="https://40.media.tumblr.com/d341dd2b29c7de51d25b796a0110b8df/tumblr_ntddiizdyH1ud7rr3o1_400.jpg" alt=""></a>
                        
                        <div class="pricing-item-details">
                            
                            <h3><a href="#">ShrimppyBoxBite</a></h3>
                            
                            <p>Char Grilled Breaded Tiger Shrimps. Your Choice of: Fresh Lettuce, Tomatos, Lime slices and Red Onions and Award Winning Premium Chipotle&Limones Sauce&copy</p>
                            
                            <a class="btn btn-danger" href="#">Order now</a>
                            <div class="clearfix"></div>
                        </div>
                        <!--price tag-->
                        <span class="hot-tag br-red">$17</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container --> 
    </div><!-- /#special-offser -->




    <div id="reservation" class="light-wrapper">
        <section class="ss-style-top"></section>
        <div class="container inner">
            <h2 class="section-title text-center">Reservation</h2>
            <p class="lead main text-center">Reserve your table &amp; enjoy.</p>
            <div class="row">
                <div class="col-md-6">
                    <form class="form form-table" method="post" name="">
                        <div class="form-group">
                            <h4>Fill the form for table reservation (all fields required)</h4>
                        </div>

                        <div class="row">
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="first_name1">first name</label>
                            <input class="form-control hint" type="text" id="first_name1" name="first_name" placeholder="First name" required="">
                          </div>
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="last_name1">last name</label>
                            <input class="form-control hint" type="text" id="last_name1" name="last_name" placeholder="Last name" required="">
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="email1">email</label>
                            <input class="form-control hint" type="email" id="email1" name="email" placeholder="Email@domain.com" required="">
                          </div>
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="phone1">phone</label>
                            <input class="form-control hint" type="text" id="phone1" name="phone" placeholder="Phone" required="">
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="reserv_date1">reservation date</label>
                            <input class="form-control datepicker hasDatepicker hint" type="text" id="reserv_date1" name="reserv_date" placeholder="Reservation date" required="">
                          </div>
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="numb_guests1">number of guests</label>
                            <input class="form-control hint" type="text" id="numb_guests1" name="numb_guests" placeholder="Number of guests" required="">
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="alt_reserv_date1">time from</label>
                            <input class="form-control datepicker hasDatepicker hint" type="text" id="alt_reserv_date1" name="alt_reserv_date" placeholder="Time from" required="">
                          </div>
                          <div class="col-lg-6 col-md-6 form-group">
                            <label class="sr-only" for="time1">time</label>
                            <input class="form-control timepicker ui-timepicker-input hint" type="text" id="time1" name="time" placeholder="Time to" required="" autocomplete="off">
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-12 col-md-12">
                            <p></p>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-12 col-md-12">
                            <button type="submit" class="btn btn-danger btn-lg">Reserve!</button>
                          </div>
                        </div>
                      </form>
                </div><!-- col-md-6 -->
                <div class="col-md-5 col-md-offset-1">
                    
                    <h3><i class="fa fa-clock-o fa-fw"></i>Hours</h3>
                    <h4>Lunch</h4>
                    <p>Mon to Fri: 12:00 PM - 5:00 PM</p>
                    <h4>Dinner</h4>
                    <p>Mon to Sat: 6:00 PM -  1:00 AM<br>Sun: 5:30 PM - 12:00 AM</p>

                    <h3><i class="fa fa-map-marker fa-fw"></i>Directions</h3>
                    <p>Av das Américas, 4.666, Shopping Barra, Barra da Tijuca, Rio de Janeiro, RJ, Brazil</p>

                    <h3><i class="fa fa-mobile fa-fw"></i>Contacts</h3>
                    <p>Email: <a href="mailto:yourname@tastybox.com">tastybox@customerservice.com</a></p>
                    <p>Phone: +234 3456 678</p>

                </div><!-- col-md-6 -->
            </div>
            <!-- /.services --> 
        </div>
        <!-- /.container -->
        <section class="ss-style-bottom"></section>
    </div><!-- #reservation -->



    <div id="chefs" class="parallax pricing">
      <div class="bg-overlay"></div>
        <div class="container inner">

            <h2 class="section-title text-center">TastyBox Chefs</h2>
            <p class="lead main text-center">The most amazing TastyBox Talent you'll find below.</p>
            
            <div class="row text-center chefs">
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper">
                            <img src="https://40.media.tumblr.com/88bd9055c0827ae9d3184a37ccf095b1/tumblr_ntegw5xpqN1ud7rr3o1_400.jpg">
                        </div>
                        <h3>Coming Soon</h3>
                        <p>More Info Coming Soon.</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper">
                            <img src="https://40.media.tumblr.com/88bd9055c0827ae9d3184a37ccf095b1/tumblr_ntegw5xpqN1ud7rr3o1_400.jpg">
                        </div>
                        <h3>Coming Soon</h3>
                        <p>More Info Coming Soon.</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-wrapper">
                        <div class="icon-wrapper">
                            <img src="https://40.media.tumblr.com/88bd9055c0827ae9d3184a37ccf095b1/tumblr_ntegw5xpqN1ud7rr3o1_400.jpg">
                        </div>
                        <h3>Coming Soon</h3>
                        <p>More Info Coming Soon.</p>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container --> 
    </div><!-- /#chefs -->


    <footer id="footer" class="dark-wrapper">
        <section class="ss-style-top"></section>
        <div class="container inner">
            <div class="row">
                <div class="col-sm-6">
                    &copy; Copyright TastyBox 2013
                    
                </div>
                <div class="col-sm-6">
                    <div class="social-bar">
                        <a href="#" class="fa fa-instagram tooltipped" title="instagram"></a>
                        <a href="#" class="fa fa-youtube-square tooltipped" title="youtube"></a>
                        <a href="#" class="fa fa-facebook-square tooltipped" title="facebook"></a>
                        <a href="#" class="fa fa-twitter-square tooltipped" title="twitter"></a>
                        <a href="#" class="fa fa-google-plus-square tooltipped" title="google+"></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </footer>
            
          
!
            
              /*On Customer's Request*/
/*  
Theme Name: MeatKing
Version:    1.14.20
Author:     ThemeWagon


TABLE OF CONTENTS
    01 - General and Typography
    02 - Header
    03 - Navigation
    04 - Services
    05 - Parallax
    06 - Food menu
    07 - Special offers
    08 - Reservation
    09 - Chefs
    10 - Footer
    11 - Responsive styles
*/


/* ==========================================================================
    01. General and Typography 
========================================================================== */
body {
    font-family:'Kreon',serif;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
}
img {
    max-height:100%;
    max-width:100%;
}
section {
    position:relative;
    padding:0;
    background:#F0A830;
    color:#FFF;
    text-align:center;
}
section::before,section::after {
    position:absolute;
    content: '';
}

/* Separators Styles */
.ss-style-top::before {
    left:0;
    width:100%;
    height:30px;
    -webkit-background-size:25px 100%;
    -moz-background-size:25px 100%;
    -o-background-size:25px 100%;
    background-size:25px 100%;
    top:0;
    background-image:linear-gradient(315deg,#FFF 50%,transparent 50%),linear-gradient(45deg,#FFF 50%,transparent 50%);
    margin-top:-30px;
    z-index:100;
}
.ss-style-bottom::before {
    left:0;
    width:100%;
    height:30px;
    -webkit-background-size:25px 100%;
    -moz-background-size:25px 100%;
    -o-background-size:25px 100%;
    background-size:25px 100%;
    top:0;
    background-image:linear-gradient(583deg,#FFF 50%,transparent 50%),linear-gradient(136deg,#FFF 50%,transparent 50%);
    margin-top:0px;
    z-index: 100;
}


/* ==========================================================================
    02. Header 
========================================================================== */
#header {
    background-image:url(https://41.media.tumblr.com/82d8e8c4970c495ebba2ee285bb78a68/tumblr_nteg9aNhrp1ud7rr3o1_1280.jpg);
    -webkit-background-size:/*@@prefixmycss->No equivalent*/;
    -moz-background-size:cover;
    -o-background-size:/*@@prefixmycss->No equivalent*/;
    background-size:cover;
    background-position:center center;
    background-attachment:fixed;
    background-repeat:no-repeat;
    position:relative;
}
.bg-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(44,33,5,0.5);
    z-index:0;
}
#header .center {
    position:relative;
    z-index:1;
    color:white;
}
#header .bottom {
    color:white;
}
#header .center .slogan {
    font-size:26px;
    text-transform:uppercase;
}
#header .banner h1 {
    font-size:100px;
    color:white;
    text-transform:uppercase;
    font-weight:bold;
    display:inline-block;
    background:#ed0121;
    padding:0px 18px;
}
#header .subtitle h4 {
    display:inline-block;
    background:white;
    color:#ed0121;
    font-size:38px;
    padding:0px 15px;
}
#header .bottom {
    text-align:center;
    width:100%;
    position:absolute;
    bottom:30px;
}
#header .bottom a {
    font-size:36px;
    color:whitesmoke;
    position:relative;
    top:-5px;
}
.navbar-nav>li:nth-child(3) {
    margin-right: 110px;
}


/* ==========================================================================
    03. Navigation 
========================================================================== */
#menu {
    background:rgba(33,45,57,0.8);
    margin-bottom:0;
}
.navbar-brand h2 {
    margin-top:0;
    font-weight:bold;
    color:white;
}
.navbar-brand {
    padding-top:8px;
    padding-bottom:0;
}
/*logo*/
.navbar #logo {
  margin-top: -15px;
  background:rgba(33,45,57,0.0);
  background-position: bottom;
  -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
  color: #fff;
}

.navbar #logo:hover {
  background:#ed0121;
  -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
  
}
.navbar-inverse .navbar-nav>li>a {
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
    color:white;
    font-weight:bold;
}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>.active>a {
    background:#ed0121;
    color:white;
    text-shadow:none;
}


/* ==========================================================================
    04. Services 
========================================================================== */
.light-wrapper {
    background:#fbfbfb;
}
.inner {
    padding-top:100px;
    padding-bottom:100px;
}
.section-title {
    font-size:36px;
    line-height:40px;
    text-transform:uppercase;
    margin-bottom:15px;
    font-weight:600;
}
.main.lead {
    margin-bottom:80px;
}
.lead {
    font-size:17px;
    line-height:24px;
    font-weight:normal;
    text-transform:uppercase;
    margin-bottom:15px;
    color:#2e2e2e;
    position:relative;
}
.lead:after {
    position:absolute;
    content:' ';
    background:#ed0121;
    width:80px;
    height:3px;
    bottom:-22px;
    left:50%;
    margin-left:-40px;
}
.story .col-wrapper {
    padding:0 10px;
}
.story .icon-wrapper {
    position:relative;
    height:80px;
    margin-top: 40px;
}


/* ==========================================================================
    05. parallax 
========================================================================== */
.parallax {
  background: rgba(0,0,0,0.1);
}

.parallax {  background:url(https://40.media.tumblr.com/70854822907e1f1fd71d911c16b3086b/tumblr_ntds0hCPzI1ud7rr3o1_1280.jpg) fixed no-repeat center center;
    -webkit-background-size:/*@@prefixmycss->No equivalent*/;
    -moz-background-size:cover;
    -o-background-size:/*@@prefixmycss->No equivalent*/;
    background-size:cover;
    position:relative;
    color:#FFF;
}
.parallax .inner {
    padding-top:130px;
    padding-bottom:130px;
}
.parallax.parallax2 {
    background-image:url(https://36.media.tumblr.com/6f9bcb46c216fcd2e8e1129610b5ed7b/tumblr_nte8zuS6rv1ud7rr3o1_1280.jpg);
}
.bm10 {
    margin-bottom:10px !important;
}
.facts h4 {
    font-size:40px;
    margin-bottom:20px;
}
.parallax h1,.parallax h2,.parallax h3,.parallax h4,.parallax h5,.parallax h6 {
    color:#fff;
}
.facts p {
    font-size:16px;
    text-transform:uppercase;
    margin:0;
}
.story .icon-wrapper i {
    font-size:70px;
}
.facts i {
    font-size: 70px;
}


/* ==========================================================================
    06. Food menu 
========================================================================== */
.menu-items {
    text-align:center;
    margin:0 auto;
}
.menu-titles h1 {
    text-shadow:none;
    color:#ed0121;
    text-align:center;
    margin:0 auto;
    padding-top:30px;
    padding-bottom:15px;
}
#food-menu ul {
    margin:0;
    padding:0;
    list-style:none;
}
.menu-images img {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    border:5px solid #dadada;
    display:block;
    margin:auto;
    margin-top: 40px;
    height: 200px;
}


/* ==========================================================================
    07. Special offers 
========================================================================== */
/*Gets the overlay*/
.bg-overlay-white {
  position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255,255,255,0.2);
    z-index:0;
}
.hot-tag {
    position:absolute;
    bottom:0;
    right:0;
    z-index:15;
    display:inline-block;
    width:80px;
    height:80px;
    line-height:90px;
    text-align:center;
    font-weight:700;
    color:#fff;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:100px;
}
.br-red {
    background-color:#ed0121 !important;
}
.br-lblue {
    background-color:#32c8de !important;
}
.br-green {
    background-color:#51d466 !important;
}
.pricing {
    border-top:1px solid #f1f1f1;
}
/*gets tastyboxbites h2*/
.pricing h2 {
  color: #000;
}

.pricing .pricing-item {
    position:relative;
    margin-top:40px;
    margin-bottom:10px;
}
.pricing .pricing-item img {
    max-width:250px;
    float:left;
}
/*Gets a, p elements*/
.pricing-item-details a,.pricing-item-details p,.pricing .lead {
    color:#000;
    font-weight:bold;
}
.pricing .pricing-item .pricing-item-details {
    margin-left:265px;
}
.pricing .pricing-item .pricing-item-details h3 {
    margin-top:0;
    margin-bottom:8px;
   
}
.pricing .pricing-item .pricing-item-details p {
    color: #000;
}
.pricing .pricing-item .pricing-item-details a.btn {
    margin-top:10px;
}
.pricing .pricing-item .pricing-item-details a.view-link {
    display:inline-block;
    margin-top:7px;
    font-size:12px;
    border-bottom:1px dotted #aeaeae;
}
.pricing .pricing-item .hot-tag {
    top:0;
    left:0;
    margin-top:-15px;
    margin-left:-15px;
    width:55px;
    height:55px;
    line-height:50px;
    font-size:23px;
    font-weight:700;
    border: 4px solid white;
}


/* ==========================================================================
    08. Reservation 
========================================================================== */
.form-group {
    margin-bottom:24px;
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    cursor:not-allowed;
    background-color: transparent;
}
.form-control {
    height:38px;
    font-size:14px;
    vertical-align:middle;
    background-color:transparent;
    -webkit-border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}

.form p {
    margin: 10px 0 30px 0;
}


/* ==========================================================================
    09. Chefs 
========================================================================== */
.chefs img {
    border:5px solid #e7e7e7;
    width: 80%;
}


/* ==========================================================================
    10. Footer 
========================================================================== */
.dark-wrapper {
    background:#ed0121;
    color:white;
    font-size:20px;
    font-weight:bold;
}
.dark-wrapper .ss-style-top::before {
    background-image:linear-gradient(315deg,#ed0121 50%,transparent 50%),linear-gradient(45deg,#ed0121 50%,transparent 50%);
}
.social-bar {
    width:100%;
    text-align:right;
}
.social-bar a {
    display:inline-block;
    margin-right:11px;
    font-size:2.15em;
    text-decoration:none;
    color:#fff;
    opacity:1;
    filter:alpha(opacity=100);
    -webkit-transition:opacity 350ms ease;
    -moz-transition:opacity 350ms ease;
    -o-transition:opacity 350ms ease;
    transition:opacity 350ms ease;
}
.social-bar a:hover {
    opacity:0.5;
    filter: alpha(opacity=50);
}

.themeBy{
    color: #ed0121;
    background: white;
}

/* ==========================================================================
    11. Responsive styles 
========================================================================== */

@media (max-width: 991px){
    .pricing .pricing-item .pricing-item-details {
        margin-left: 0;
    }

    .pricing .pricing-item a img {
        float: none;
        margin-bottom: 30px;
    }
  .menu-titles h1 {
    font-size: 25px;
}
}

@media (min-width:768px) {
    .navbar-nav {
        float:none !important;
        width:100%;
        text-align:center;
        margin-left:9px;
    }
    .navbar-nav>li {
        display:inline-block;
        float:none;
    }
    #logo {
        position:absolute;
        display:block !important;
        width:110px;
        left:50%;
        margin-left:-55px;
        background:black;
        -webkit-border-radius:0 0 100% 100%;
        -moz-border-radius:0 0 100% 100%;
        border-radius:0 0 100% 100%;
        padding: 12px;
    }
}

@media (max-width:767px) {
    #header .banner h1 {
        font-size:60px;
    }
    #header .subtitle h4 {
        font-size: 22px;
    }
    .social-bar {
        text-align: left;
        margin-top: 30px;
    }
}
            
          
!
            
              (function($,sr) {
	// debouncing function from John Hann
	// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
	var debounce = function (func, threshold, execAsap) {
		var timeout;
		return function debounced () {
			var obj = this, args = arguments;
			function delayed () {
				if (!execAsap)
				                  func.apply(obj, args);
				timeout = null;
			}
			;
			if (timeout)
			              clearTimeout(timeout); else if (execAsap)
			              func.apply(obj, args);
			timeout = setTimeout(delayed, threshold || 100);
		}
		;
	}
	// smartresize 
	jQuery.fn[sr] = function(fn) {
		return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
	}
	;
}
)(jQuery,'smartresize');


$(document).ready(function() {
	///////////////////////////////
	// Set Home Slideshow Height
	///////////////////////////////
	function setHomeBannerHeight() {
		var windowHeight = jQuery(window).height();
		jQuery('#header').height(windowHeight);
	}
	///////////////////////////////
	// Center Home Slideshow Text
	///////////////////////////////
	function centerHomeBannerText() {
		var bannerText = jQuery('#header > .center');
		var bannerTextTop = (jQuery('#header').actual('height')/2) - (jQuery('#header > .center').actual('height')/2) - 20;
		bannerText.css('padding-top', bannerTextTop+'px');
		bannerText.show();
	}
	setHomeBannerHeight();
	centerHomeBannerText();
	//Resize events
	jQuery(window).smartresize(function() {
		setHomeBannerHeight();
		centerHomeBannerText();
	});
	
	function scroll() {
		if ($(window).scrollTop() == 0 ) {
			//$('.nav > li').removeClass('active');
			console.log($(window).scrollTop());
		} else {
			
		}
	}
	document.onscroll = scroll;
	var $scrollDownArrow = $('#scrollDownArrow');
	var animateScrollDownArrow = function() {
		$scrollDownArrow.animate( {
			top: 5,
		}
		, 400, "linear", function() {
			$scrollDownArrow.animate( {
				top: -5,
			}
			, 400, "linear", function() {
				animateScrollDownArrow();
			}
			);
		});
	}
	animateScrollDownArrow();
	//Set Down Arrow Button
	jQuery('#scrollDownArrow').click(function(e) {
		e.preventDefault();
		jQuery.scrollTo("#story", 1000, {
			offset:-(jQuery('#header #menu').height()), axis:'y'
		}
		);
	});
	jQuery('.nav > li > a, #logo a').click(function(e) {
		e.preventDefault();

		jQuery.scrollTo(jQuery(this).attr('href'), 400, {
			offset:-(jQuery('#header #menu').height()), axis:'y'
		}
		);
	});


});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console