# Foodio - Fast Food & Restaurant HTML Template

Premium Html5 Templates and WP Themes by Winsfolio.net

## Introduction:

Foodio - Fast Food & Restaurant HTML5 Template - Food Retail Screenshots Foodio is a completely new and unique Idea of design for restaurants and online food ordering websites. In this PSD template, you will get fully creative elements that can help you to create your desired website

## Our Motto:

Every single product launched by the professionally experts. Winsfolio Team is planned and designed after extensive and laborious research work, thus bringing ultimate novelty to address the core issues effectively. The sole determination of our highly skilled and devoted team workers is to bring innovation in the field of HTML template & WordPress theme development that will provide the users with something that they would have never experienced ever before. While the website designing is becoming a promising business, there are also many serious and complex issues that are being faced by the global web community. The same, otherwise disappointing, problems are being addressed here for the utmost facilitation and convenience of the clients.

## The Package Includes:

- Restaurants Fast Food, Perfect for Restaurant
- Ultra-fresh and flexible layout. Well-commented, fully streamlined and differentiated coding for easier editing and personalization.
- 3 outstanding, creative & research-based homepages layouts with extreme level of flexibility and convenience in customization.
- Perfect for all pizza & fast food businesses
- Edge-to-edge responsiveness for a befitting display on all devices.
- Built for Fastfood, Sushi & Pizza Restaurants
- Advanced SEO practices & lightweight for out-and-out search engine visibility.
- Complete step-by-step and visually guiding documentation.
- Free 5-star customer support for 6 months.
- Regular template updates.

## Prominent Features:

Foodio Website Package: Foodio is a visually impressive, creative and vibrant, well structured, feature rich and responsive HTML5 Template

3 Fresh & Practical Homepage Designs: In addition to being unique and powerful, the 3 predefined homepages are ultra-fresh in design with immediate practical appeal. Each has a dynamic design with an unparalleled combination and arrangement of all the relevant features for your website. You can also further customize and personalize them with as much quickness and convenience as associated with a WordPress theme.

Fully Streamlined, Differentiated Coding: : The coding of the template is based on high standards and top-line professionalism. Special focus on minimalism makes it considerably lightweight for smoother and quicker page loading. Meanwhile, the streamlined and differentiated coding contributes to the convenient and interactive editing of the features and sections.

## Javasripts:

bootstrap.min.js:It is a Bootstrap file with the latest version (v5.0). Certain elements (such as tabs) in the template have been designed with the help of this file.

jquery.min.js:This particular jQuery file renders functionality to all the other jQuery files featured in the Foodio HTML template.

aos.js:This is animate on scroll js file. You can easily animate your desired section with the help of aos.js

jquery.counterup.min.js:This plugin is used to add animation on funfacts.

jquery.fancybox.min.js:This plugin is used to open an image in popup

slick.min.js:This plugin is used for creating awesome slider

Custom.js:It contains all the jQuery functions that have been incorporated in the template. It is well managed and properly commented.

## Css Files:

style.cssThis is the main style file on which the overall styling of the template is based.

responsive.cssThis CSS file gets automatically activated when you are using the template on smaller screen sizes.

bootstrap.min.cssAs the template has been developed on ‘bootstrap’, all the styles of this framework are based on this CSS file.

animate.min.cssThe style for adding unique animation on pages.

all.min.cssThe style for fontawesome icons.

color.cssAs the name suggests, the file belongs to the colour selection.

Slick.cssThis is very necessery file for making sliders for the webpages.

Animate.min.cssWith this file, We can apply very attractive animation effects on the section of the website.

Fancybox.min.cssThis file is use for showing images and videos in popup.

## CODE STRUCTURE:

## How to

## How to manage gaps between the sections?

For the top and bottom spacing for each section, the class `"gap"`has been used, which applies 120 pixels spacing to the section both from the top and bottom.

You can manage the inter-section spacing easily according to your page flow.When you use sections one after another, the spacing between the two sections becomes 120 pixels as the bottom space of the top section and the top space of the bottom section will join, and it will become awkward spacing.To manage this spacing between the consecutive sections use class `"no-bottom"` with the `"gap"` class in the section from which you want to avoid top space.

`<div class="no-top"`

## How to define your own new color scheme?

If you wish to change the color scheme of the template, it is very easy to define and apply it. Go to the "assets" folder. You will find "css" folder inside it. In this folder, you can locate "color.css" file. Open it in the editor. You will see a long list of classes separated with commas (,). Here you need to change the css properties for the background, color and border. For this purpose, just change the color code in that file and the color scheme will be changed in the whole template.

## Credits

The credit for the development of this marvelous template goes to:

- Google Fonts
- Bootstrap
- Fancybox
- Animation.style
- Slick Slider
- Developers of Javascript files which have been utilized herein.
- Team of Winsfolio.net