Howdy!

You are a shining owner of a regular license based on Burger House Theme

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are entitled to get free updates to this product + exceptional support (as per market policy) from the author directly.

This documentation is to help you understand the template's structure. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template.

1. Getting Started


When you are ready to use this template, you must first upload the template files to a local or remote server. In this regard, unzip the template package you have downloaded from themeforest. In extracted folder you can see following folders:

Package contents:

  • template — Contains all the original template files comprises of HTML, CSS, JS etc. This is the folder which you'll upload on your server after necessary modifications.
  • documentation — Inside this folder, you will find the same documentation updated with the latest changes.

Details regarding contents and structure of template folder is given below.

2. HTML Structure


This theme is a responsive landing page which built with Bootstrap fraemwork and you can customize it very easily. All of the information within the main content area is nested within a div with an class of "sections". The general template structure is the same throughout the template. Here is the general structure. Note that for brevity, I'm not including content that isn’t relevant to the technique.

2.1. Skeleton Details


From the above skeleton it can be seen that there are 7 major logical code blocks in page. Most of the contents displayed on the screen goes in one of this block.

div class="loading-overlay" shows a loading overlay on the whole page or over single DOM elements

div class="banner" contains main slider

div class="banner-grid" contains the code for banner about discount or new campaigns

section id="menu" section id="events" section id="gallery" section id="reservation" section contains the page specific content as well as their details.

footer id="contact" section typically remains the same. It consist of short about info, contact details, social icons and copyright text note also.

Further, skeleton shows two additional markup tags. div class="scroll-up" contains the code scroll to the top of the page. div id="address-popup"shows address popup and open when you click address link at the footer. div id="cd-nav" contains the menu for the mobile version. div class="cd-overlay" when mobile menu showed this layer visibled under mobile menu above content too.

3. Stylesheet Files


All styling related files of this template can be found in this folder path template/src/assets/css

  
    css/plugins/
    |
    |-- bootstrap.min.css
    |-- bootstrap-datepicker.css
    |-- bootstrap-datetimepicker.css
    |-- scrolling-nav.css
    |-- aos.css
    |-- slick.css
    |-- slick-theme.css
    |-- jquery.fancybox.min.css
    |-- touch-sideswipe.css


    css/
    |
    |-- main.css
    |-- style.css

As it can be seen, the folder contains 10 css files.
bootstrap.min.css is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system.
bootstrap-datepicker.css provides a flexible datepicker widget in the Bootstrap style.
bootstrap-datetimepicker.css widget based on twitter bootstrap.
scrolling-nav.css is a one page Bootstrap template with smooth scrolling animations and a collapsing fixed top navigation bar.
aos.css animate on scroll library.
slick.css slick-theme.css is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more.
jquery.fancybox.min.css is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
touch-sideswipe.css widget-library for mobile navbar (vanilla js and little bit pure css) main.css main style file.
style.css custom style file.

4. Javascript Files


All client-side related javascript files can be found in this folder path template/src/assets/js

  
    js/plugins/
    |    
    |-- jquery-2.1.1.min.js  
    |-- bootstrap.min.js 
    |-- jquery.easing.min.js      
    |-- bootstrap-datepicker.js
    |-- bootstrap-datetimepicker.js
    |-- moment.js
    |-- aos.js
    |-- jquery.fancybox.min.js
    |-- jquery.mousewheel.min.js
    |-- jquery.touchSwipe.min.js
    |-- slick.min.js


    js/
    |
    |-- main.js

In this folder there are 12 files.
jquery-2.1.1.min.js is a fast, small, and feature-rich JavaScript library
bootstrap.min.js is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system
jquery.easing.min.js a jQuery plugin from GSGD to give advanced easing options
bootstrap-datetimepicker.js widget based on twitter bootstrap
bootstrap-datepicker.js provides a flexible datepicker widget in the Bootstrap style moment.js a JavaScript date library for parsing, validating, manipulating, and formatting dates
aos.js animate On scroll library
jquery.fancybox.min.js is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
jquery-mousewheel.min.js a jQuery plugin that adds cross-browser mouse wheel support.
jquery.touchSwipe.min.js widget-library for mobile navbar (vanilla js and little bit pure css)
slick.min.js is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more
main.js contains all the custom programmed javascript coded specifically for this template

5. Support Desk


Please be reminded that you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally, we will help with small tweaks, but these requests will be put on a lower priority due to their nature.

Support for my items includes:


  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates to ensure compatibility with new software versions

Item support does not include:


  • Customization and installation services
  • Support for third party software and plug-ins

Before seeking support, please...


  • Make sure your question is a valid item issue and not a customization request.
  • Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  • Make sure to double check the item FAQs.
  • If you have customized your item and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • Make sure to state the name of the item you are having issues with when requesting support via ThemeForest.

6. Files & Resources


The template uses following resources by third parties.

7. PHP Code Explanation


index.php file for deploy and init on docker container or heroku

9. Regular Updates


We’re always improving our skills and knowledge so we’re making changes regularly. From bug fixes to new awesome features, updates generally come at least twice a month.


  V. 1.1.1 – 27.08.2023
  - New: Home page version 2 added;
  - Added gallery section with Fancybox popup plugin to all versions
  - Fixed: all validation errors and warnings
  - Tweak: Improved Documentation
  
  V. 1.0.0 – 20.01.2021
  - Initial release