FOXERESTO is a beautiful easy to use restaurant template built on bootstrap, Its can be used especially for modern restaurants, cafe and bar.The template is responsive, so you can view it also in the mobile/tablets devices and it looks very nice in thoose devices. TASTY is retina ready that means it looks great and very sharp in high resolution devices.
The template have :
When you download the main download file you will find several folder :
To install the template in your server you need to upload all HTML files along with all directories (css,js,assets) in the structure that they appear in your download package. That is, all HTML files should reside in the root directory, and all other files should reside inside their associated folder.
The files that you will need to upload to your server are located in the main download file in the HTML folder.
Make sure that you make all the css style changes inside a custom.css file and leave all the main.css and the bootstrap.css file without making any changes. This will make template update very easy, you will only need to preserve your custom.css file.
In this section a guide to understanding how FOXERESTO is structured.
This folder contain all the files needed to setup the template and upload it to your server including sub folder that contains the core of the template setup css files, js files, webfonts files and assets files.
This folder contain all the css files that are required by the template those files are :
bootstrap-dropdownhover.min.css
main.css
flexslider.css
magnific-popup
font.css
This folder contain all the js files required by the template those files are :
This subfolder contain other subfolders : the img subfolder and the svg subfolder, evenif those are not included in the main download files and replaced with placeholders, but you can replace theme easly with your own assets.
/assets/img./assets/svg.
This folder contain all the webfonts from fontawsome used in this template, you can use a wide range of icons that suits your need and the . For more info on how to setup and use fontawsome please visit this link below :
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
An overview of the plugins supplied with FOXERESTO
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software using the permissive MIT License.
Bootstrap Dropdown Hover is a simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way.
A full javascript source for the version of bootstrap used in this templatte. FOXERESTO ships with Bootstrap 4.1.3. This will be updated as further Bootstrap versions are released.
An awesome, fully responsive jQuery slider toolkit to display your products in a neatly designed, responsive slideshow
A lightweight script to animate scrolling to anchor links. This provides a better user experience for navigating one-page sites or long landing pages.
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js).
Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Local Videos parallax supported.
Instafeed is a dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript.
Placeholders.js is a polyfill (or shim, or whatever you like to call it) for the HTML5 placeholder attribute, as defined in the HTML5 specification. Placeholder attributes are valid on input elements of various types and textarea elements.
Contains additional scripts required by FOXERESTO.
FOXERESTO uses fontawsome icons and Flaticon svg , the template come with a set of icons that you can use as you want, and change the default icons to fit your needs.You can find the list of the icons in the fonts.css in the css folder then you can choose the icon that you want and change it in the html code.
Flaticon has been used for demo purposes only and are not included in the main download file, but you can use them without any problems by your own,
Icons used from flaticon :
Font generated by http://www.flaticon.com
Under http://creativecommons.org/licenses/by/3.0/ CC
Author Eucalyp : https://www.flaticon.com/authors/smashicons
The images used in this template are not included with the main purchased files, but there are freebies and you can download them from the links below :
The svg icons used in this template are scalable Vector Graphics and are easy to use and customize.
The svg used in this template are from Flaticon and undraw illustration
To customize the svg and use theme in your project just go to this links below and download the icons and the svg illustration that you want to use and you can open them in your prefered graphic tool progam
https://www.flaticon.com/authors/smashicons
Below the markups that setup the navbar of the template. You can changes the html markup to customize the navigation of the site very easy.
<nav class="navbar navbar-expand-lg header-navbar ">
<a class=" navbar-brand navbar-logo scroll" href="#wrapper">
<img class="mb-0 logo-light" src="assets/svg/logo-light.svg" alt="">
<img class="mb-0 logo-dark" src="assets/svg/logo-dark.svg" alt="">
</a>
<button class="navbar-toggler btn-navbar-toggler" type="button" data-toggle="collapse" data-target=".nav-menu" aria-expanded="true" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<div class="nav-menu collapse navbar-collapse navbar-collapse justify-content-end py-0 ">
<ul class=" navbar-nav header-navbar-nav">
<li><a class=" nav-link scroll" href="#wrapper">Home</a></li>
<li><a class=" nav-link scroll" href="#about">Resto</a></li>
<li><a class=" nav-link scroll" href="#special">Special</a></li>
<li><a class=" nav-link scroll" href="#menu">Menu</a></li>
<li><a class=" nav-link scroll" href="#gallery">Gallery</a></li>
<li><a class=" nav-link scroll" href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Pages<span class="dropdown-arrow ml-2">
</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog-full.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-sidebar.html">Blog Sidebar</a></li>
<li><a class="dropdown-item" href="blog-single.html">Blog Single</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="reservation.html">Reservation</a></li>
<li><a class="dropdown-item" href="menu-detailed.html">Menu Detailed</a></li>
<li><a class="dropdown-item" href="gallery.html">Look Book</a></li>
</ul>
</li>
<li class="ml-lg-auto"><a class=" nav-link nav-divider scroll" href="#reservation">
<img src="assets/svg/ring-bell-light.svg" alt="" class="max-width-xsm bell-light">
<img src="assets/svg/ring-bell-dark.svg" alt="" class="max-width-xsm bell-dark"></a>
</li>
<li><a class=" nav-link pr-0 pb-sm-4 pb-sm-0" href="index.html"><span class="fa fa-phone mr-3"></span>513 352-3209</a></li>
</ul>
</div>
</nav>
The header image is a background image positioned usiing position absolute. To change the background image jus replace the img src in the html code with the image that want, see below how the background image markup is setup :
<div class="background-img gradient-overlay gradient-overlay-white">
<img src="assets/img/1.jpg" alt="">
</div>
Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Local Videos parallax supported. :
<section class="spacer-xlg jarallax gradient-overlay gradient-overlay-dark" >
<img class="jarallax-img" src="assets/img/14.jpg" alt="">
<!--Container-->
<div class="container">
<!--Row-->
<div class="row justify-content-center">
<div class="col">
<div class=" text-center">
<h1 class=" display-4 font-alt text-white mb-0">Lunch</h1>
</div>
</div>
</div>
<!--End row-->
</div>
<!--End container-->
</section>
The template use svg icon instead of a standard img or png file, they are three size available, large, medium and small icon, you can setup the svg into an img tag like below :
<img class="max-width-lg " src="assets/svg/trophy-icon.svg" alt="">
<img class="max-width-md " src="assets/svg/trophy-icon.svg" alt="">
<img class="max-width-sm " src="assets/svg/trophy-icon.svg" alt="">
Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
An awesome, fully responsive jQuery slider toolkit to display your products in a neatly designed, responsive slideshow .
The setup of the review slider like below :
Html setup
<section class="spacer-lg jarallax gradient-overlay gradient-overlay-dark">
<img class="jarallax-img" src="assets/img/3.jpg" alt="">
<!--Container-->
<div class="container">
<!--Row-->
<div class="row justify-content-center text-center">
<div class="col-md-8 col-lg-6">
<div class="review-slider flexslider">
<ul class="slides">
<li>
<div class="bg-dark p-4">
<div class="border-light p-5">
<h4 class="h6 text-white font-alt text-uppercase">Food Magazine</h4>
<p class="text-light">"The food is plentiful and delicious, huge portions. It is all part of the "old world" sort of dining experience"</p>
<div class="d-flex justify-content-center">
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green"></i>
</div>
</div>
</div>
</li>
<li>
<div class="bg-dark p-4">
<div class="border-light p-5">
<h4 class="h6 text-white font-alt text-uppercase">The Telegraph</h4>
<p class="text-light">"It’s an unlikely setting for an exquisite dining experience served up by a couple straight out of a rom-com plot. "</p>
<div class="d-flex justify-content-center">
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green"></i>
</div>
</div>
</div>
</li>
<li>
<div class="bg-dark p-4">
<div class="border-light p-5">
<h4 class="h6 text-white font-alt text-uppercase">Magazin restaurant</h4>
<p class="text-light">"Huge portions, great food, fast service. This location obviously is always packed due to being in Times Sq. "</p>
<div class="d-flex justify-content-center">
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green mr-1"></i>
<i class="fa fa-star text-light-green"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--End row-->
</div>
<!--End container-->
</section>
Javascript setup
$('.review-slider').flexslider({
animation: "slide",
slideshow: true,
directionNav: true,
controlNav: false,
pauseOnAction: false,
animationSpeed: 500
});
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
An example of a card used in the pricing sectio of te template
<div class="card text-left "> <div class="card-body"> <div class="mb-3"> <h4 class="h6 text-grey mb-2">Basic</h4> <div class="d-flex justify-content-left "> <span class="h1 mb-0">Free</span> </div> </div> <ul class="list-unstyled mb-4"> <li class="d-flex align-items-center py-2"> <span class="fa fa-check text-azure font-size-13 mr-3"></span> 250 templates </li> <li class="d-flex align-items-center py-2"> <span class="fa fa-check text-azure font-size-13 mr-3"></span> Web event tracking </li> <li class="d-flex align-items-center py-2"> <span class="fa fa-check text-azure font-size-13 mr-3"></span> Campaign consulting </li> <li class="d-flex align-items-center py-2"> <span class="fa fa-check text-azure font-size-13 mr-3"></span> Prioritized Support </li> </ul> <a href="javascript:;" class="btn btn-sm btn-light btn-primary btn-block">Get Started</a> </div> </div>
A set of CSS classes large, medium and small to easily format avatar images.
<img class="avatar-lg shadow-lg rounded-circle mx-auto mb-4" src="assets/img/p1.jpg" alt=""> <img class="avatar-md shadow-lg rounded-circle mx-auto mb-4" src="assets/img/p1.jpg" alt=""> <img class="avatar-sm shadow-lg rounded-circle mx-auto mb-4" src="assets/img/p1.jpg" alt="">
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it’s current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
FOXERESTO come with instagram feed section to display user, popular or tags photo feeds inside your site, by default this area in the footer display a default set of images for demo purposes, but od cours you can display your own instagram fee, popular or tags photo feeds....
To change the instafeed widget located in the footer to display the images that want(your user feed, popular or tags photo feeds), simply open script.js file located in js folder inside the main HTML folder then locate the instagram feed setup section look for the line of codes that setup the instagram feed then replace the userId and accessToken variables by yours.
More info about instgram feed option can be found here :
Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Local Videos parallax supported.
More info about jarallax feed setup can be found here :
For more information, see the official Bootstrap documentation.
FOXERESTO is very easy to customize because it's a block based design template so you can move sections arround , and put them the order you want.
Because FOXERESTO is built using bootstrap, you can cutomize the element and the display of the element by simply modifying class names.
Please see this links below on how to setup or customize the grid system of bootstrap :
Updates will be released periodically to add new features, provide fixes where necessary and maintain compatibility.
Manly the updated files are javascript or CSS and your project should need little adjustment in order to stay up to date.
You will be notified by the author once some updates are made to the template.