Berghoef – Contemporary HTML5 One-Page Restaurant Template

This template is a perfectly responsive and retina-ready HTML5 website, based on bootstrap. It is optimized for mobile touch and swipe.

Features

  • Based on Twitter Bootstrop
  • Valid HTML5 / CSS3 pages
  • Perfectly responsive
  • Retina-Ready
  • Unique Layout
  • Cross browser compatible – tested in IE 9,10,11; Firefox; Safari; Chrome; Edge and Opera.
  • Well formatted and commented, so it should be easy to adapt and extend
  • Working ajax contact form with validation and working PHP mailer script
  • Hundreds of Retina-Ready Icons included (fontawesome.com/cheatsheet)
  • Documentation included

Updates

  • November 2018 – Initial Release

Documentation / Support

An item documentation is included and the source code is properly commented and formatted, so you shouldn’t have any problem working with this item.

If you need support, please leave a comment. Please include the template name, website URL and detailed information about your problem. You can expect a response within 48 hours on weekdays, depending on the number of requests in queue.

Credtis

The Logo and all images are NOT included, but can be purchased here. We'll send you the links upon request.

Support & FAQ

Thank you for purchasing this HTML Template! I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

How do I add or remove the preloader?

Place the preloader code right below the body tag.

<div id="preloader">
  <div id="status">
    <div class="parent">
      <div class="child">
        <p>loading</p>
      </div>
    </div>
  </div>
</div>

The code within the preloader brackets needs to be added to have the preloader active. The JavaScript (preloader.js) is already included in the JS folder and just needs to be linked at the bottom of each HTML file.

How to create another subpage?

Simply use one of the existing subpages and alter it to your specifications. If you need help, don't hesitate to leave a ticket on our support forum.

How to implement a slideshow?

Link the flexslider JS and CSS file from project.html and add in the designated content area:

<div class="flexslider slideshow">
<ul class="slides">
<li><img src="images/image01.jpg" alt="" /></li> 
<li><img src="images/image02.jpg" alt="" /></li>
</ul> 
</div>

How to add fancybox lightbox and create groups of images/videos?

Wrap this around the image(s) or icon(s) where you want to add a larger image opening in lightbox upon mouseclick: For single Image:

<a href="images/pic-large.jpg" data-title="" class="popup"></a>
For a group of images: 
<a href="images/pic-large.jpg" data-title="Image Title here"
data-fancybox-group="group1" class="popup"></a>
For a video popup: 
<a href="http://player.vimeo.com/video/48792900?title=0&byline=0&portrait=0&color=ffffff" data-title="" class="video-popup"></a>

Need more icons?

If you need more font-awesome icons, then you’ll find what you need on this cheat sheet.

How to change the email address to which emails are sent from the contact form?

Find in contact.php: $address = 'hello@email.com';
There you can enter your email address. A few lines further down, you can also change the text which is displayed in the email.