Spicy - Restaurant HTML Template

Bootstrap 4 Restaurant Template.

Thank you for purchasing My product. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Introduction

Spicy is a modern clean HTML template for Cafe & Restaurant and any food-related business website. It comes with a modern and smooth design. More features with 7 pages that fulfill almost all your needs. Using advanced Bootstrap 4 Framework with HTML5/CSS3. Clean and clear code, It's responsive and will fit great on all devices. buy it now and boost your restaurant and cafe business.

Features

HTML Structure

Perfo is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments.

Template includes 7 pages, they are:

Head Section Structure: Here is the example code of section 

<!DOCTYPE html>
<html lang="zxx">
    <head>
        <meta charset="utf-8">
        <!-- Responsive meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- IE Compatibility meta -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Description meta -->
        <meta name="description" content="...">
        <!-- Author meta -->
        <meta name="author" content="...">

        <!-- Page Title -->
        <title> Spicy - Restaurant HTML Template </title>

        <!-- Favicon -->
        <link rel="shortcut icon" href="img/favicon.ico">

        <!-- Font Awesome Stylesheet -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- Bootstrap 4 Stylesheet -->
        <link rel="stylesheet" href="css/bootstrap.css">

        <!-- Owl Carousel Stylesheet -->
        <link rel="stylesheet" href="css/owl.carousel.css">

        <!-- Animsition.CSS Stylesheet -->
        <link rel="stylesheet" href="css/animsition.css">

        <!-- Datepicker -->
        <link rel="stylesheet" href="css/datepicker.css">

        <!-- Time Picker -->
        <link rel="stylesheet" href="css/timepicki.css">

        <!-- Custom Stylesheet -->
        <link rel="stylesheet" href="css/style.default.css">
    </head>
    <body>
Body Section Structure: Here is the example code of section. If you will keep using Animsition plugin, please keep the .animsition wrapping your page content. 
<div class="animsition">

    <!--=============== Navbar ===============-->
    <nav class="navbar fixed-top navbar-toggleable-md">
        <div class="container">

            <div class="navbar-header">
                <!-- Navbar Brand -->
                <a href="#" class="navbar-brand">
                    <img src="img/logo.png" alt="spicy" class="img-fluid">
                </a>

                <!-- Toggle Button -->
                <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarcollapse" aria-controls="navbarcollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navbarcollapse">
                <!-- Navbar Menu -->
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link animsition-link active">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="about-us.html" class="nav-link animsition-link">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a href="dishes.html" class="nav-link animsition-link">Dishes</a>
                    </li>
                    <li class="nav-item dropdown menu-large">
                        <a href="#" data-toggle="dropdown" class="nav-link">Pages <i class="fa fa-angle-down"></i></a>
                        <!-- mega menu -->
                        <div class="dropdown-menu megamenu">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-lg-6"><strong class="text-uppercase">Main Pages</strong>
                                            <ul class="list-unstyled">
                                                <li><a href="index.html" class="animsition-link">Home</a></li>
                                                <li><a href="about-us.html" class="animsition-link">About Us</a></li>
                                                <li><a href="dishes.html" class="animsition-link">Dishes</a></li>
                                                <li><a href="contact.html" class="animsition-link">Contact Us</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6"><strong class="text-uppercase">Second Pages</strong>
                                            <ul class="list-unstyled">
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6"><strong class="text-uppercase">Third Pages</strong>
                                            <ul class="list-unstyled">
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6"><strong class="text-uppercase">Fourth Pages</strong>
                                            <ul class="list-unstyled">
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                                <li><a href="#" class="animsition-link">Sample Page</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="dish col-lg-6">
                                            <strong class="text-uppercase">New Dishes</strong>
                                            <div class="image">
                                                <img src="img/dish-1.png" alt="..." class="img-fluid">
                                            </div>
                                            <h5>Awosome dish name</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                                            <a href="reservation.html" class="btn-template btn-sm has-shadow animsition-link">Make a reservation</a>
                                        </div>
                                        <div class="dish col-lg-6">
                                            <strong class="text-uppercase">Featured Dishes</strong>
                                            <div class="image">
                                                <img src="img/dish-2.png" alt="..." class="img-fluid">
                                            </div>
                                            <h5>Awosome dish name</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                                            <a href="reservation.html" class="btn-template btn-sm has-shadow animsition-link">Make a reservation</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="menu.html" class="nav-link animsition-link">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a href="contact.html" class="nav-link animsition-link">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="search-btn nav-link">
                            <i class="fa fa-search"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--=============== /. Navbar ===============-->



    <!--===============  Search popup ===============-->
    <div class="search-popup has-pattern">
        <div class="search-popup-inner d-flex align-items-center justify-content-center">
            <div class="close-btn"> CLOSE
                <i class="fa fa-close"></i>
            </div>
            <form action="#" id="search-form">
                <h2 class="text-center">Search Our Website</h2>
                <div class="form-group">
                    <input type="search" class="form-control" placeholder="What are you searching for...">
                    <button type="submit">Search</button>
                </div>
            </form>
        </div>
    </div>
    <!--=============== /. Search popup ===============-->



    <!--=============== Hero Section ===============-->
    <section class="hero hero-home has-pattern has-background-text-gray" data-text="Spicy Restaurant">
        <div class="container d-flex align-items-center">
            <div class="row d-flex align-items-center">

                <!-- text column -->
                <div class="text col-lg-6">
                    <strong class="text-primary text-uppercase">Food Services</strong>
                    <h1>Welcome to your spicy restaurant</h1>
                    <span class="text-muted text-transform address">32 Radwan El-Tayeb, Giza Governorate, Egypt</span>
                    <p class="hero-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>

                    <div class="CTAs d-flex flex-wrap">
                        <a href="about-us.html" class="btn btn-template animsition-link">Discover More</a>
                        <a href="reservation.html" class="btn btn-template-outlined animsition-link">Make Reservation</a>
                    </div>
                </div>

                <!-- image column -->
                <div class="image col-lg-6">
                    <img src="img/dish.png" alt="dish" class="img-fluid hidden-lg-down">
                </div>
            </div>
        </div>
    </section>
    <!--=============== /. Hero Section ===============-->
How to customize HTML page:

You can use the pre-made helpers that the template provides, for example, if you need to addd a pattern background to a specific section, include the class .has-pattern

<section class="hero hero-home has-pattern"><section>

You can also customize your template from data-text attribute. this attribute is used for two purposes, for adding bacground text for heading and for sections.

Example for using the attribute for adding background text to a section:

<section class="hero hero-home has-pattern has-background-text-gray" data-text="Spicy Restaurant"><section>

Example for using the attribute for adding background text to a h2:

<h2 class="with-bg-text" data-text="Features">Our Chefs</h2>

CSS Files and Structure

I'm using latest CSS coding standard. Custom Style written into style.default.css which is override Bootstrap style somewhere else.

CSS Files included:

style.default.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label: 

/* ===================================================================

    Table of content:

    1.  General Styles

    2. Style Switcher

    3.  Helpers

    4.  Search Popup

    5.  Hero Section

    6.  Divider Section

    7.  About Section

    8.  Features Section

    9.  Dishes Section

    10.  Menu Section

    11.  Event Section

    12.  Chefs Section

    13. Reservation Section

    14. Testimonials Section

    15. Newsletter Section

    16. Footer

    17. Into Section [About Page]

    18. Vision Section [About Page]

    19. Statistics Section [About Page]

    20. Gallery Section [About Page]

    21. Signature Section [Menu Page]

    22. Separator Section [Menu Page]

    23. Main Course Section [Menu Page]

    24. Lunch Section [Menu Page]

    25. Contact Section [Contact Page]

    26. Branches Section [Contact Page]

    27. Preloader

    28. Scroll To Top Button

    29. Error 404 Section [404 Page]

===================================================================  */

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

If you change the style of Header section, find the following section in the stylesheet: 

/* ===================================================================
        HERO SECTION
===================================================================  */
section.hero {
    position: relative;
}

/* Home Hero Section */
section.hero.hero-home {
    padding: 0;
}

section.hero.hero-home .container {
    min-height: 100vh;
}

/* Other pages Hero Section */
section.hero.hero-page {
    padding: 130px 0;
}

section.hero.hero-page .hero-text {
    font-size: 1.2em;
    line-height: 1.7em;
    color: #555;
}

section.hero .row {
  width: 100%;
}

section.hero span.address {
    font-weight: 300;
    margin-top: 15px;
}

section.hero span.heading-bg-text,
section.hero span.heading-bg-text-gray {
    font-size: 12em;
    min-width: 2000px;
    text-align: center;
    text-transform: none;
    font-weight: 600;
    font-family: "Poppins", sans-serf;
}

section.hero p.hero-text {
    margin: 20px 0 30px;
    font-weight: 300;
    font-size: 1.05em;
}

section.hero .CTAs a {
    margin-right: 15px;
    margin-bottom: 10px;
}

/* Media Query Hero Section --------------------------------------- */
@media (max-width: 768px) {
  section.hero.hero-home, section.hero.hero-page {
    padding: 100px 0;
  }
}

Style.default.css contains some helpers that help you to customize your template from the HTML page, for example: .btn-template class helps you to add the current button style to your buttons.

Here is an Example for the included helpers:

/* ===================================================================
        HELPERS
===================================================================  */
.gray-bg {
    background: #f4f4f4;
}

.btn-template, .btn-template-outlined {
    padding: 0 30px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-weight: 400;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    background: #fd8a06;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: none;
    text-transform: uppercase;
    box-shadow: 0px 10px 22px 0px rgba(227, 137, 35, 0.44);
}

.btn-template:hover,
.btn-template-outlined:hover,
.btn-template:focus,
.btn-template-outlined:focus {
    color: #fd8a06;
}

.btn-template:hover::before,
.btn-template-outlined:hover::before,
.btn-template:focus::before,
.btn-template-outlined:focus::before {
    left: 0;
}

.btn-template::before,
.btn-template-outlined::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: calc(-100% - 10px);
    transition: all 0.5s;
    z-index: -1;
    background: #fff;
    border: 1px solid #fff;
}

.btn-template-outlined {
    background: none;
    color: #fd8a06;
    border: 1px solid #fd8a06;
    box-shadow: none;
}

.btn-template-outlined::before {
    background: #fd8a06;
    border: 1px solid #fd8a06;
}

.btn-template-outlined:hover,
.btn-template-outlined:focus {
    border-color: transparent;
    color: #fff;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.has-text-shadow {
    text-shadow: 0 0 35px rgba(0, 0, 0, 0.3);
}

.has-shadow,
.btn-template-outlined:hover,
.btn-template-outlined:focus,
section.divider a, #scrollTop {
    box-shadow: 0px 0px 33px 0px rgba(227, 137, 35, 0.39);
}

.has-shadow-on-hover:hover {
    box-shadow: 0px 0px 33px 0px rgba(227, 137, 35, 0.39);
}

.has-shadow-small {
    box-shadow: 0px 0px 10px 0px rgba(227, 137, 35, 0.44);
}

.has-shadow-small-on-hover:hover {
    box-shadow: 0px 0px 10px 0px rgba(227, 137, 35, 0.44);
}

.rounded {
    border-radius: 20px;
}

.ribbon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #fd8a06;
    color: #fff;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serf;
    font-weight: 500;
    font-size: 0.9em;
    position: absolute;
}

.ribbon::before {
    content: '';
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid #fd8a06;
    position: absolute;
    top: -4px;
    left: -4px;
    display: block;
}

.has-pattern, .has-pattern-on-hover,
section.dishes .item.sale {
    position: relative;
    z-index: 1;
}

.has-pattern::after, .has-pattern-on-hover::after,
section.dishes .item.sale::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/pattern.png);
    background-size: 200px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
    z-index: -1;
}

.has-pattern-on-hover::after {
    opacity: 0;
    transition: all 0.5s;
}

.has-pattern-on-hover:hover::after {
    opacity: 0.1;
}

.limited-width {
    max-width: 800px;
}

.text-primary {
    color: #fd8a06 !important;
}

.text-big {
    font-size: 1.4em;
    line-height: 1.8em;
    font-weight: 300;
}

.no-padding-bottom {
    padding-bottom: 20px !important;
}

.padding-top-small {
    padding-top: 100px !important;
}

.padding-bottom-small {
    padding-bottom: 100px !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.padding-small {
    padding: 70px 0 !important;
}

.bg-primary {
    background: #fd8a06 !important;
    color: #fff;
}

.bg-gray {
    background: #fafafa !important;
}

/** Form Elements **/
.form-group {
    position: relative;
    margin-bottom: 50px;
}

.input-material {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
    background: none;
    transition: all 0.3s;
    font-family: "Poppins", sans-serf;
    font-weight: 400;
    outline: none;
}

.input-material[type="password"] {
    color: #fd8a06;
}

.input-material::-moz-placeholder {
    font-weight: 300;
    font-family: "Poppins", sans-serf;
    color: #aaa;
}

.input-material::-webkit-input-placeholder {
    font-weight: 300;
    font-family: "Poppins", sans-serf;
    color: #aaa;
}

.input-material:-ms-input-placeholder {
    font-weight: 300;
    font-family: "Poppins", sans-serf;
    color: #aaa;
}

.input-material + label, label[for="time-alt"] {
    font-size: 0.9em;
    color: #999;
    font-weight: 400;
    transition: all 0.3s;
    font-family: "Poppins", sans-serf;
    position: absolute;
    top: 5px;
    left: 15px;
    cursor: text;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform-origin: top left;
    text-transform: uppercase;
}

.input-material + label.active, label[for="time-alt"].active {
    transform: translateY(-30px);
    font-size: 0.85em;
    color: #fd8a06;
}

:focus {
    border-color: #fd8a06;
}

.checkbox-template {
    display: none;
}

.checkbox-template + label {
    position: relative;
    padding-left: 30px;
    font-size: 1em;
    font-weight: 300;
    color: #777;
    font-family: "Poppins", sans-serf;
    cursor: pointer;
}

.checkbox-template + label::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    display: inline-block;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
}

.checkbox-template + label::after {
    content: '\f00c';
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #fd8a06;
    color: #fff;
    display: inline-block;
    font-size: 0.65em;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
    font-family: 'FontAwesome';
    transition: all 0.3s;
    opacity: 0;
}

.checkbox-template:checked + label::after {
    opacity: 1;
}

.radio-template {
    display: none;
}

.radio-template + label {
    position: relative;
    padding-left: 30px;
    font-size: 1em;
    font-weight: 300;
    color: #777;
    font-family: "Poppins", sans-serf;
    cursor: pointer;
}

.radio-template + label::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eee;
    display: inline-block;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
}

.radio-template + label::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid #fd8a06;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
    opacity: 0;
}

.radio-template:checked + label::after {
    opacity: 1;
}

Fonts

Template Uses two Google Fonts:

Images

All Images included are free and ready to use, you can add more great images from Pexels.com

Javascript

Perfo imports following Javascript files.

All code are beautifully written. You can customize easily. Just look at the js code.

Example: If you want to Configure the testimonials slider, just find the following block and play with the slider options: 

// ------------------------------------------------------------------- //
// Dishes Slider
// ------------------------------------------------------------------ //
$('.dishes-slider').owlCarousel({
    loop: true,
    margin: 0,
    dots: true,
    nav: true,
    smartSpeed: 400,
    navText: [
        "",
        ""
    ],
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: false
        },
        600: {
            items: 1,
            nav: false
        },
        1000: {
            items: 3,
            nav: true,
            loop: true
        }
    }
});

Not to make conflicts with other pages, the plguins that are not used in all pages, I put them into inline script tags on their pages. For example, Datepicker & Timepicker plugins initialization are index.html page like the following 

<script type="text/javascript">
    jQuery(function() {
        // ------------------------------------------------------- //
        // YouTubePopUp
        // ------------------------------------------------------ //
        jQuery("a.bla-1").YouTubePopUp({
            autoplay: 1
        });

        // ------------------------------------------------------- //
        // jQUery Counter Up
        // ------------------------------------------------------ //
        $('.counter').counterUp({
            delay: 10,
            time: 1500
        });
    });
</script>

Changelog

/*  =======================================================================
This css file will over write bootstarp css
------------------------------------------------------------------------
    * Template Name: Spicy Restaurant
    * Template URI: https://www.mohamdhasan.pro
    * Author: Mohamed Hasan
    * Author URI: https://www.mohamdhasan.pro
    * Description: Perfo - Responsive Bootstrap 4 Restaurant HTML Template
    * Version: 1.0
    * License: GPL v2 or later
    * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    * Tags: html, template, portfolio, marketing, designer, personal
----------------------------------------------------------------------
======================================================================= */

SASS Files

.scss files icluded:


All styles written in partials are automatically compiled to style.default.scss file.

Source & Credits

Style Swithcer
NEW

Style switcher works on both CSS and Javascript sides, it changes CSS style by changing the style.default.cssfile by one of the other style.[color-name].css files.

It also changes the image contain theme color by Javascript, like ..., so if you have an image with theme color, please follow the naming convention.

Thank You

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions related to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Mohamed Hasan.