Spicy - Restaurant HTML Template
Bootstrap 4 Restaurant Template.
- Created:20/09/2017
- Created By: Mohamed Hasan
- Author Email: Mhmdhasan7@outlook.com
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
- Fully Responsive, Compatible with all screen sizes.
- Major Browsers compatibility.
- Modern and clean design.
- SEO Friendly Markup.
- W3C Valide Code.
- Bootstrap 4 Based.
- Google Fonts used.
- Font Awesome Icons used.
- Easy Customization.
- SASS files included (more customization).
- Smooth Scroll Used.
- Sticky Navigation.
- Premium Support.
HTML Structure
Perfo is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments.
Template includes 7 pages, they are:
- Home Page [index.html]
- About Page [about-us.html]
- Menu Page [menu.html]
- Reservation Page [reservation.html]
- Dishes Page [dishes.html]
- Contact Page [contact.html]
- 404 Error Page [404-error.html]
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:- Bootstrap CSS
- Font Awesome CSS
- Animsition CSS
- Owl Carousel CSS
- Datepicker CSS
- Time Picker CSS
- YouTubePopUp CSS
- Custom CSS 7 style page each for every color
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:
- Montserrat Font for heading.
- Poppins Font for the remain text.
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.
- jQuery 2.2.4 CDN
- Bootstrap 4
- Tether CDN
- Easy Scroll
- Owl Carousel
- Animsition
- Date Picker
- Date Picker En
- Time Picke
- YouTubePopUp
- jQuery Counterup
- Custom Script
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:
- Partials
- _variables.scss
- _general.scss
- _helpers.scss
- _mixins.scss
- style.default.scss
- style.green.scss
- style.red.scss
- style.pink.scss
- style.red.scss
- style.sea.scss
- style.blue.scss
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.css
file 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.