Thank you for purchasing our Dine Restaurant & Food Template. If you have any questions that are beyond the scope of this help file, please feel free to mail us at webmaster@makewebbetter.com

Dine Restaurant & Food Template is a HTML5 & CSS3 responsive template created for Food. Dine Food template is best suited for the restaurant. It’s fully responsive design and clean, was tested on all major handheld devices. It is a fully responsive, feature rich and beautifully designed to host a website or create the online identity. We have created 4 layouts in this template. It supports bootstrap framework and integrated font awesome icon set so easy to customize and develop your own styles. Dine Food template is a retina ready so it works nicely on smartphones, tablet PCs, and desktops. Easily customizable, 24/7 support time.

2.General Information

Software requirements
  • Sublime Text 3 used to edit the .HTML, .JS, .CSS and .SCSS files.
  • Grunt used as precompiler for SCSS to CSS convert.

The following scheme displays the theme files structure.

  • Documentation – contains documentation on template customization and support
  • Template – contains the main files of the template. which will be uploaded to the server.
    • CSS – contains all Stylesheets used for UI.
    • Font Awesome – contains Font awesome files.
    • Images – contains all the images.
    • JS – contains all javascript library or plugin files.
    • SASS – contains all SCSS and variable files.
    • Index.html – contains all UI code.
    • + More.html – contains all UI code.
  • Screenshot- Contains screenshot of the template.
  • readme.txt- contains the information about the template.

3.File Structure

HTML Structure

This template has a responsive layout.


CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block in your colored style.css.


Js Structure

This template has Owl slider(for customization) and contact form, which have been implemented in JQUery. The JS file is custom.js





4.Reference File

In this theme, we have used google font Poppins. You can learn more about using Google Web Fonts by checking the tutorial on how to work with Google Web Fonts.

JQuery Plugin:

In this theme jQuery libraries and plugins have been used for dynamic animation.

  • JQuery
  • AOS(js/aos.js)
  • Bootstrap(vendor/bootstrap/js/bootstrap.min.js)
  • Datepicker(js/jquery-ui.js)
  • Owl Carousel(js/owl.carousel.min.js)
  • Portfolio popup(js/magnif_popup.js)
  • Bootstrap js(bootstrap/js/bootstrap.min.js)
Stylesheet (CSS) Reference File
  • Aimate.css(css/animate.css)
  • font-awesome(css/font-awesome.min.css)
  • AOS(css/aos.css)
  • POPUP(css/popup.css)
  • Bootstrap(bootstrap/css/bootstrap.min.css)
  • Datepicker(css/jquery-ui.css)
Font awesome Icon

Font Awesome icons have been used in this template. Learn more about font awesome icon from font awesome website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that’s possible with CSS. Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.

5.pages Nomenclature

We have designed 4 landing pages for Dine Food Template. You can easily use it and customize it as you want. We have used bootstrap layout structure. See below for their file nomenclature.

  1. Layout1 (Classic)
  2. Layout2 (Espresso)
  3. Layout3 (Creative)
  4. Layout4 (Organic)


It is HTML5, CSS3, and Js based template so you can edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system.

7.Upload Document

Unzip package in an empty directory and you will see template folder. In template folder change content according to yours then upload this folder to server root directory.

8.Help & Support

24/7 Support, Just mail us any issue we will be happy to help.

You can email us.

Email- webmaster@makewebbetter.com
Thank you for purchasing Dine Food Template. If you have any question that is beyond the scope of this documentation, Please feel free to email us webmaster@makewebbetter.com

Suggest Edit