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 

  1. <!DOCTYPE html>
  2. <html lang="zxx">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <!-- Responsive meta -->
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <!-- IE Compatibility meta -->
  8.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.         <!-- Description meta -->
  10.         <meta name="description" content="...">
  11.         <!-- Author meta -->
  12.         <meta name="author" content="...">
  13.  
  14.         <!-- Page Title -->
  15.         <title> Spicy - Restaurant HTML Template </title>
  16.  
  17.         <!-- Favicon -->
  18.         <link rel="shortcut icon" href="img/favicon.ico">
  19.  
  20.         <!-- Font Awesome Stylesheet -->
  21.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  22.  
  23.         <!-- Bootstrap 4 Stylesheet -->
  24.         <link rel="stylesheet" href="css/bootstrap.css">
  25.  
  26.         <!-- Owl Carousel Stylesheet -->
  27.         <link rel="stylesheet" href="css/owl.carousel.css">
  28.  
  29.         <!-- Animsition.CSS Stylesheet -->
  30.         <link rel="stylesheet" href="css/animsition.css">
  31.  
  32.         <!-- Datepicker -->
  33.         <link rel="stylesheet" href="css/datepicker.css">
  34.  
  35.         <!-- Time Picker -->
  36.         <link rel="stylesheet" href="css/timepicki.css">
  37.  
  38.         <!-- Custom Stylesheet -->
  39.         <link rel="stylesheet" href="css/style.default.css">
  40.     </head>
  41.     <body>
  42.
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. 
  1. <div class="animsition">
  2.  
  3.     <!--=============== Navbar ===============-->
  4.     <nav class="navbar fixed-top navbar-toggleable-md">
  5.         <div class="container">
  6.  
  7.             <div class="navbar-header">
  8.                 <!-- Navbar Brand -->
  9.                 <a href="#" class="navbar-brand">
  10.                     <img src="img/logo.png" alt="spicy" class="img-fluid">
  11.                 </a>
  12.  
  13.                 <!-- Toggle Button -->
  14.                 <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">
  15.                     <span></span>
  16.                     <span></span>
  17.                     <span></span>
  18.                 </button>
  19.             </div>
  20.  
  21.             <div class="collapse navbar-collapse" id="navbarcollapse">
  22.                 <!-- Navbar Menu -->
  23.                 <ul class="navbar-nav ml-auto">
  24.                     <li class="nav-item">
  25.                         <a href="index.html" class="nav-link animsition-link active">Home</a>
  26.                     </li>
  27.                     <li class="nav-item">
  28.                         <a href="about-us.html" class="nav-link animsition-link">About Us</a>
  29.                     </li>
  30.                     <li class="nav-item">
  31.                         <a href="dishes.html" class="nav-link animsition-link">Dishes</a>
  32.                     </li>
  33.                     <li class="nav-item dropdown menu-large">
  34.                         <a href="#" data-toggle="dropdown" class="nav-link">Pages <i class="fa fa-angle-down"></i></a>
  35.                         <!-- mega menu -->
  36.                         <div class="dropdown-menu megamenu">
  37.                             <div class="row">
  38.                                 <div class="col-lg-6">
  39.                                     <div class="row">
  40.                                         <div class="col-lg-6"><strong class="text-uppercase">Main Pages</strong>
  41.                                             <ul class="list-unstyled">
  42.                                                 <li><a href="index.html" class="animsition-link">Home</a></li>
  43.                                                 <li><a href="about-us.html" class="animsition-link">About Us</a></li>
  44.                                                 <li><a href="dishes.html" class="animsition-link">Dishes</a></li>
  45.                                                 <li><a href="contact.html" class="animsition-link">Contact Us</a></li>
  46.                                             </ul>
  47.                                         </div>
  48.                                         <div class="col-lg-6"><strong class="text-uppercase">Second Pages</strong>
  49.                                             <ul class="list-unstyled">
  50.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  51.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  52.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  53.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  54.                                             </ul>
  55.                                         </div>
  56.                                         <div class="col-lg-6"><strong class="text-uppercase">Third Pages</strong>
  57.                                             <ul class="list-unstyled">
  58.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  59.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  60.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  61.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  62.                                             </ul>
  63.                                         </div>
  64.                                         <div class="col-lg-6"><strong class="text-uppercase">Fourth Pages</strong>
  65.                                             <ul class="list-unstyled">
  66.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  67.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  68.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  69.                                                 <li><a href="#" class="animsition-link">Sample Page</a></li>
  70.                                             </ul>
  71.                                         </div>
  72.                                     </div>
  73.                                 </div>
  74.                                 <div class="col-lg-6">
  75.                                     <div class="row">
  76.                                         <div class="dish col-lg-6">
  77.                                             <strong class="text-uppercase">New Dishes</strong>
  78.                                             <div class="image">
  79.                                                 <img src="img/dish-1.png" alt="..." class="img-fluid">
  80.                                             </div>
  81.                                             <h5>Awosome dish name</h5>
  82.                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  83.                                             <a href="reservation.html" class="btn-template btn-sm has-shadow animsition-link">Make a reservation</a>
  84.                                         </div>
  85.                                         <div class="dish col-lg-6">
  86.                                             <strong class="text-uppercase">Featured Dishes</strong>
  87.                                             <div class="image">
  88.                                                 <img src="img/dish-2.png" alt="..." class="img-fluid">
  89.                                             </div>
  90.                                             <h5>Awosome dish name</h5>
  91.                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  92.                                             <a href="reservation.html" class="btn-template btn-sm has-shadow animsition-link">Make a reservation</a>
  93.                                         </div>
  94.                                     </div>
  95.                                 </div>
  96.                             </div>
  97.                         </div>
  98.                     </li>
  99.                     <li class="nav-item">
  100.                         <a href="menu.html" class="nav-link animsition-link">Menu</a>
  101.                     </li>
  102.                     <li class="nav-item">
  103.                         <a href="contact.html" class="nav-link animsition-link">Contact</a>
  104.                     </li>
  105.                     <li class="nav-item">
  106.                         <a href="#" class="search-btn nav-link">
  107.                             <i class="fa fa-search"></i>
  108.                         </a>
  109.                     </li>
  110.                 </ul>
  111.             </div>
  112.         </div>
  113.     </nav>
  114.     <!--=============== /. Navbar ===============-->
  115.  
  116.  
  117.  
  118.     <!--===============  Search popup ===============-->
  119.     <div class="search-popup has-pattern">
  120.         <div class="search-popup-inner d-flex align-items-center justify-content-center">
  121.             <div class="close-btn"> CLOSE
  122.                 <i class="fa fa-close"></i>
  123.             </div>
  124.             <form action="#" id="search-form">
  125.                 <h2 class="text-center">Search Our Website</h2>
  126.                 <div class="form-group">
  127.                     <input type="search" class="form-control" placeholder="What are you searching for...">
  128.                     <button type="submit">Search</button>
  129.                 </div>
  130.             </form>
  131.         </div>
  132.     </div>
  133.     <!--=============== /. Search popup ===============-->
  134.  
  135.  
  136.  
  137.     <!--=============== Hero Section ===============-->
  138.     <section class="hero hero-home has-pattern has-background-text-gray" data-text="Spicy Restaurant">
  139.         <div class="container d-flex align-items-center">
  140.             <div class="row d-flex align-items-center">
  141.  
  142.                 <!-- text column -->
  143.                 <div class="text col-lg-6">
  144.                     <strong class="text-primary text-uppercase">Food Services</strong>
  145.                     <h1>Welcome to your spicy restaurant</h1>
  146.                     <span class="text-muted text-transform address">32 Radwan El-Tayeb, Giza Governorate, Egypt</span>
  147.                     <p class="hero-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
  148.  
  149.                     <div class="CTAs d-flex flex-wrap">
  150.                         <a href="about-us.html" class="btn btn-template animsition-link">Discover More</a>
  151.                         <a href="reservation.html" class="btn btn-template-outlined animsition-link">Make Reservation</a>
  152.                     </div>
  153.                 </div>
  154.  
  155.                 <!-- image column -->
  156.                 <div class="image col-lg-6">
  157.                     <img src="img/dish.png" alt="dish" class="img-fluid hidden-lg-down">
  158.                 </div>
  159.             </div>
  160.         </div>
  161.     </section>
  162.     <!--=============== /. Hero Section ===============-->
  163.
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

  1. <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:

  1. <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:

  1. <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: 

  1. /* ===================================================================
  2.  
  3.     Table of content:
  4.  
  5.     1.  General Styles
  6.  
  7.     2. Style Switcher
  8.  
  9.     3.  Helpers
  10.  
  11.     4.  Search Popup
  12.  
  13.     5.  Hero Section
  14.  
  15.     6.  Divider Section
  16.  
  17.     7.  About Section
  18.  
  19.     8.  Features Section
  20.  
  21.     9.  Dishes Section
  22.  
  23.     10.  Menu Section
  24.  
  25.     11.  Event Section
  26.  
  27.     12.  Chefs Section
  28.  
  29.     13. Reservation Section
  30.  
  31.     14. Testimonials Section
  32.  
  33.     15. Newsletter Section
  34.  
  35.     16. Footer
  36.  
  37.     17. Into Section [About Page]
  38.  
  39.     18. Vision Section [About Page]
  40.  
  41.     19. Statistics Section [About Page]
  42.  
  43.     20. Gallery Section [About Page]
  44.  
  45.     21. Signature Section [Menu Page]
  46.  
  47.     22. Separator Section [Menu Page]
  48.  
  49.     23. Main Course Section [Menu Page]
  50.  
  51.     24. Lunch Section [Menu Page]
  52.  
  53.     25. Contact Section [Contact Page]
  54.  
  55.     26. Branches Section [Contact Page]
  56.  
  57.     27. Preloader
  58.  
  59.     28. Scroll To Top Button
  60.  
  61.     29. Error 404 Section [404 Page]
  62.  
  63. ===================================================================  */
  64.

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: 

  1. /* ===================================================================
  2.         HERO SECTION
  3. ===================================================================  */
  4. section.hero {
  5.     position: relative;
  6. }
  7.  
  8. /* Home Hero Section */
  9. section.hero.hero-home {
  10.     padding: 0;
  11. }
  12.  
  13. section.hero.hero-home .container {
  14.     min-height: 100vh;
  15. }
  16.  
  17. /* Other pages Hero Section */
  18. section.hero.hero-page {
  19.     padding: 130px 0;
  20. }
  21.  
  22. section.hero.hero-page .hero-text {
  23.     font-size: 1.2em;
  24.     line-height: 1.7em;
  25.     color: #555;
  26. }
  27.  
  28. section.hero .row {
  29.   width: 100%;
  30. }
  31.  
  32. section.hero span.address {
  33.     font-weight: 300;
  34.     margin-top: 15px;
  35. }
  36.  
  37. section.hero span.heading-bg-text,
  38. section.hero span.heading-bg-text-gray {
  39.     font-size: 12em;
  40.     min-width: 2000px;
  41.     text-align: center;
  42.     text-transform: none;
  43.     font-weight: 600;
  44.     font-family: "Poppins", sans-serf;
  45. }
  46.  
  47. section.hero p.hero-text {
  48.     margin: 20px 0 30px;
  49.     font-weight: 300;
  50.     font-size: 1.05em;
  51. }
  52.  
  53. section.hero .CTAs a {
  54.     margin-right: 15px;
  55.     margin-bottom: 10px;
  56. }
  57.  
  58. /* Media Query Hero Section --------------------------------------- */
  59. @media (max-width: 768px) {
  60.   section.hero.hero-home, section.hero.hero-page {
  61.     padding: 100px 0;
  62.   }
  63. }
  64.  
  65.

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:

  1. /* ===================================================================
  2.         HELPERS
  3. ===================================================================  */
  4. .gray-bg {
  5.     background: #f4f4f4;
  6. }
  7.  
  8. .btn-template, .btn-template-outlined {
  9.     padding: 0 30px;
  10.     height: 35px;
  11.     line-height: 35px;
  12.     color: #fff;
  13.     font-weight: 400;
  14.     border-radius: 50px;
  15.     text-transform: uppercase;
  16.     letter-spacing: 0.05em;
  17.     font-size: 0.9em;
  18.     background: #fd8a06;
  19.     position: relative;
  20.     z-index: 1;
  21.     overflow: hidden;
  22.     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  23.     border: none;
  24.     text-transform: uppercase;
  25.     box-shadow: 0px 10px 22px 0px rgba(227, 137, 35, 0.44);
  26. }
  27.  
  28. .btn-template:hover,
  29. .btn-template-outlined:hover,
  30. .btn-template:focus,
  31. .btn-template-outlined:focus {
  32.     color: #fd8a06;
  33. }
  34.  
  35. .btn-template:hover::before,
  36. .btn-template-outlined:hover::before,
  37. .btn-template:focus::before,
  38. .btn-template-outlined:focus::before {
  39.     left: 0;
  40. }
  41.  
  42. .btn-template::before,
  43. .btn-template-outlined::before {
  44.     content: '';
  45.     display: block;
  46.     width: 100%;
  47.     height: 100%;
  48.     border-radius: 50px;
  49.     position: absolute;
  50.     top: 0;
  51.     left: calc(-100% - 10px);
  52.     transition: all 0.5s;
  53.     z-index: -1;
  54.     background: #fff;
  55.     border: 1px solid #fff;
  56. }
  57.  
  58. .btn-template-outlined {
  59.     background: none;
  60.     color: #fd8a06;
  61.     border: 1px solid #fd8a06;
  62.     box-shadow: none;
  63. }
  64.  
  65. .btn-template-outlined::before {
  66.     background: #fd8a06;
  67.     border: 1px solid #fd8a06;
  68. }
  69.  
  70. .btn-template-outlined:hover,
  71. .btn-template-outlined:focus {
  72.     border-color: transparent;
  73.     color: #fff;
  74. }
  75.  
  76. .no-margin-bottom {
  77.     margin-bottom: 0 !important;
  78. }
  79.  
  80. .no-margin-top {
  81.     margin-top: 0 !important;
  82. }
  83.  
  84. .no-margin {
  85.     margin: 0 !important;
  86. }
  87.  
  88. .has-text-shadow {
  89.     text-shadow: 0 0 35px rgba(0, 0, 0, 0.3);
  90. }
  91.  
  92. .has-shadow,
  93. .btn-template-outlined:hover,
  94. .btn-template-outlined:focus,
  95. section.divider a, #scrollTop {
  96.     box-shadow: 0px 0px 33px 0px rgba(227, 137, 35, 0.39);
  97. }
  98.  
  99. .has-shadow-on-hover:hover {
  100.     box-shadow: 0px 0px 33px 0px rgba(227, 137, 35, 0.39);
  101. }
  102.  
  103. .has-shadow-small {
  104.     box-shadow: 0px 0px 10px 0px rgba(227, 137, 35, 0.44);
  105. }
  106.  
  107. .has-shadow-small-on-hover:hover {
  108.     box-shadow: 0px 0px 10px 0px rgba(227, 137, 35, 0.44);
  109. }
  110.  
  111. .rounded {
  112.     border-radius: 20px;
  113. }
  114.  
  115. .ribbon {
  116.     width: 60px;
  117.     height: 60px;
  118.     line-height: 60px;
  119.     border-radius: 50%;
  120.     background: #fd8a06;
  121.     color: #fff;
  122.     text-transform: uppercase;
  123.     font-family: "Montserrat", sans-serf;
  124.     font-weight: 500;
  125.     font-size: 0.9em;
  126.     position: absolute;
  127. }
  128.  
  129. .ribbon::before {
  130.     content: '';
  131.     width: 68px;
  132.     height: 68px;
  133.     border-radius: 50%;
  134.     border: 2px solid #fd8a06;
  135.     position: absolute;
  136.     top: -4px;
  137.     left: -4px;
  138.     display: block;
  139. }
  140.  
  141. .has-pattern, .has-pattern-on-hover,
  142. section.dishes .item.sale {
  143.     position: relative;
  144.     z-index: 1;
  145. }
  146.  
  147. .has-pattern::after, .has-pattern-on-hover::after,
  148. section.dishes .item.sale::after {
  149.     content: '';
  150.     display: block;
  151.     width: 100%;
  152.     height: 100%;
  153.     background: url(../img/pattern.png);
  154.     background-size: 200px;
  155.     position: absolute;
  156.     top: 0;
  157.     left: 0;
  158.     opacity: 0.1;
  159.     z-index: -1;
  160. }
  161.  
  162. .has-pattern-on-hover::after {
  163.     opacity: 0;
  164.     transition: all 0.5s;
  165. }
  166.  
  167. .has-pattern-on-hover:hover::after {
  168.     opacity: 0.1;
  169. }
  170.  
  171. .limited-width {
  172.     max-width: 800px;
  173. }
  174.  
  175. .text-primary {
  176.     color: #fd8a06 !important;
  177. }
  178.  
  179. .text-big {
  180.     font-size: 1.4em;
  181.     line-height: 1.8em;
  182.     font-weight: 300;
  183. }
  184.  
  185. .no-padding-bottom {
  186.     padding-bottom: 20px !important;
  187. }
  188.  
  189. .padding-top-small {
  190.     padding-top: 100px !important;
  191. }
  192.  
  193. .padding-bottom-small {
  194.     padding-bottom: 100px !important;
  195. }
  196.  
  197. .no-padding-top {
  198.     padding-top: 0 !important;
  199. }
  200.  
  201. .padding-small {
  202.     padding: 70px 0 !important;
  203. }
  204.  
  205. .bg-primary {
  206.     background: #fd8a06 !important;
  207.     color: #fff;
  208. }
  209.  
  210. .bg-gray {
  211.     background: #fafafa !important;
  212. }
  213.  
  214. /** Form Elements **/
  215. .form-group {
  216.     position: relative;
  217.     margin-bottom: 50px;
  218. }
  219.  
  220. .input-material {
  221.     width: 100%;
  222.     border: none;
  223.     border-bottom: 1px solid #ddd;
  224.     padding: 5px 0;
  225.     background: none;
  226.     transition: all 0.3s;
  227.     font-family: "Poppins", sans-serf;
  228.     font-weight: 400;
  229.     outline: none;
  230. }
  231.  
  232. .input-material[type="password"] {
  233.     color: #fd8a06;
  234. }
  235.  
  236. .input-material::-moz-placeholder {
  237.     font-weight: 300;
  238.     font-family: "Poppins", sans-serf;
  239.     color: #aaa;
  240. }
  241.  
  242. .input-material::-webkit-input-placeholder {
  243.     font-weight: 300;
  244.     font-family: "Poppins", sans-serf;
  245.     color: #aaa;
  246. }
  247.  
  248. .input-material:-ms-input-placeholder {
  249.     font-weight: 300;
  250.     font-family: "Poppins", sans-serf;
  251.     color: #aaa;
  252. }
  253.  
  254. .input-material + label, label[for="time-alt"] {
  255.     font-size: 0.9em;
  256.     color: #999;
  257.     font-weight: 400;
  258.     transition: all 0.3s;
  259.     font-family: "Poppins", sans-serf;
  260.     position: absolute;
  261.     top: 5px;
  262.     left: 15px;
  263.     cursor: text;
  264.     -webkit-user-select: none;
  265.     -moz-user-select: none;
  266.     -o-user-select: none;
  267.     -ms-user-select: none;
  268.     user-select: none;
  269.     transform-origin: top left;
  270.     text-transform: uppercase;
  271. }
  272.  
  273. .input-material + label.active, label[for="time-alt"].active {
  274.     transform: translateY(-30px);
  275.     font-size: 0.85em;
  276.     color: #fd8a06;
  277. }
  278.  
  279. :focus {
  280.     border-color: #fd8a06;
  281. }
  282.  
  283. .checkbox-template {
  284.     display: none;
  285. }
  286.  
  287. .checkbox-template + label {
  288.     position: relative;
  289.     padding-left: 30px;
  290.     font-size: 1em;
  291.     font-weight: 300;
  292.     color: #777;
  293.     font-family: "Poppins", sans-serf;
  294.     cursor: pointer;
  295. }
  296.  
  297. .checkbox-template + label::before {
  298.     content: '';
  299.     width: 20px;
  300.     height: 20px;
  301.     border: 1px solid #ddd;
  302.     display: inline-block;
  303.     position: absolute;
  304.     top: calc(50% - 10px);
  305.     left: 0;
  306. }
  307.  
  308. .checkbox-template + label::after {
  309.     content: '\f00c';
  310.     width: 20px;
  311.     height: 20px;
  312.     line-height: 20px;
  313.     text-align: center;
  314.     background: #fd8a06;
  315.     color: #fff;
  316.     display: inline-block;
  317.     font-size: 0.65em;
  318.     position: absolute;
  319.     top: calc(50% - 10px);
  320.     left: 0;
  321.     font-family: 'FontAwesome';
  322.     transition: all 0.3s;
  323.     opacity: 0;
  324. }
  325.  
  326. .checkbox-template:checked + label::after {
  327.     opacity: 1;
  328. }
  329.  
  330. .radio-template {
  331.     display: none;
  332. }
  333.  
  334. .radio-template + label {
  335.     position: relative;
  336.     padding-left: 30px;
  337.     font-size: 1em;
  338.     font-weight: 300;
  339.     color: #777;
  340.     font-family: "Poppins", sans-serf;
  341.     cursor: pointer;
  342. }
  343.  
  344. .radio-template + label::before {
  345.     content: '';
  346.     width: 18px;
  347.     height: 18px;
  348.     border-radius: 50%;
  349.     background: #eee;
  350.     display: inline-block;
  351.     position: absolute;
  352.     top: calc(50% - 10px);
  353.     left: 0;
  354. }
  355.  
  356. .radio-template + label::after {
  357.     content: '';
  358.     width: 18px;
  359.     height: 18px;
  360.     border-radius: 50%;
  361.     background: #fff;
  362.     border: 6px solid #fd8a06;
  363.     display: inline-block;
  364.     position: absolute;
  365.     top: 0;
  366.     left: 0;
  367.     transition: all 0.3s;
  368.     opacity: 0;
  369. }
  370.  
  371. .radio-template:checked + label::after {
  372.     opacity: 1;
  373. }
  374.  
  375.  
  376.

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: 

  1. // ------------------------------------------------------------------- //
  2. // Dishes Slider
  3. // ------------------------------------------------------------------ //
  4. $('.dishes-slider').owlCarousel({
  5.     loop: true,
  6.     margin: 0,
  7.     dots: true,
  8.     nav: true,
  9.     smartSpeed: 400,
  10.     navText: [
  11.         "",
  12.         ""
  13.     ],
  14.     responsiveClass: true,
  15.     responsive: {
  16.         0: {
  17.             items: 1,
  18.             nav: false
  19.         },
  20.         600: {
  21.             items: 1,
  22.             nav: false
  23.         },
  24.         1000: {
  25.             items: 3,
  26.             nav: true,
  27.             loop: true
  28.         }
  29.     }
  30. });
  31.

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 

  1. <script type="text/javascript">
  2.     jQuery(function() {
  3.         // ------------------------------------------------------- //
  4.         // YouTubePopUp
  5.         // ------------------------------------------------------ //
  6.         jQuery("a.bla-1").YouTubePopUp({
  7.             autoplay: 1
  8.         });
  9.  
  10.         // ------------------------------------------------------- //
  11.         // jQUery Counter Up
  12.         // ------------------------------------------------------ //
  13.         $('.counter').counterUp({
  14.             delay: 10,
  15.             time: 1500
  16.         });
  17.     });
  18. </script>
  19.

Changelog

  1. /*  =======================================================================
  2. This css file will over write bootstarp css
  3. ------------------------------------------------------------------------
  4.     * Template Name: Spicy Restaurant
  5.     * Template URI: https://www.mohamdhasan.pro
  6.     * Author: Mohamed Hasan
  7.     * Author URI: https://www.mohamdhasan.pro
  8.     * Description: Perfo - Responsive Bootstrap 4 Restaurant HTML Template
  9.     * Version: 1.0
  10.     * License: GPL v2 or later
  11.     * License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
  12.     * Tags: html, template, portfolio, marketing, designer, personal
  13. ----------------------------------------------------------------------
  14. ======================================================================= */
  15.  
  16.

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.