• Facebook
  • Twitter

Booze - Pub HTML Template – Responsive HTML5 Template


Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure


This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

 

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :


CSS files and structure


If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

style.less
1. Animations
2. Utilities
3. Font Awesome
4. Menu
5. Slick Slider
6. Media Sections
7. Selectize
8. Light Gallery
9. Typography
10. Article Box
11. Buttons
12. Socials buttons
13. Footer
14. Main Slider
15. Booking Form
16. Forms
17. Accordions
18. Blog
19. Blog Single Page
20. Pagination
21. Testimonials
22. Google Maps


Javascript Components


JavaScript files:

  • Gmaps – google map plugin
  • Light Gallery – plugin for the gallery
  • Portfolio – istotpe and masonry plugins
  • Jquery Gray – Gray-scale plugin for the pictures
  • Jquery Pagescroller – plugin for the onepager section
  • DataTime Picker – this is plugin for the calendar
  • Skrollr – plugin for the media sections
  • Slick – this is the plugin for the slider
  • Booze.min.js –  One big file where are minifixed javascript files:
    1. jquery
    2. boostrap
    3. placeholder
    4. easing
    5. device.min.js
    6. jquery browser
    7. Snap min JS
    8. jquery appear
  • Main.js – The main javascript initializaions and other major snippets.

Screenshot

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here

Screenshot

Booze map

Booze map

HTML Markup

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/


Menu


HTML markup

Screenshot

Menu Fixed Color

Menu Fixed Color


Parallax


HTML markup

Screenshot

Parallax Example

Parallax Example


Buttons


In Booze - Pub HTML Template we have several flavours from which you can choose:

Booze flavours

  • Btn-primary.btn-borde
    HTML markup
    Screenshot
    Booze Button Example
  • Btn-default.btn-border
    HTML markup
    Screenshot
  • Btn-link.btn-border
    HTML markup
    Screenshot
  • Btn-primary.btn-stretched
    HTML markup
    Screenshot

Castro Flavour

  • Btn-primary.btn-border
    HTML markup
    Screenshot
  • Btn-default.btn-border
    HTML markup
    Screenshot
  • Btn-link.btn-border
    HTML markup
    Screenshot
  • Btn-primary.btn-stretched
    HTML markup
    Screenshot

Rooftop Flavour

  • Btn-primary.btn-border
    HTML markup
    Screenshot
  • Btn-default.btn-border
    HTML markup
    Screenshot
  • Btn-link.btn-border
    HTML markup
    Screenshot
  • Btn-primary.btn-stretched
    HTML markup
    Screenshot

Footer


HTML markup

Screenshot

Footer example

Footer example


Gallery


HTML markup

Screenshot

Gallery example

Gallery example


Slick Slider


HTML markup

Screenshot

Slick Slider example

Slick Slider example


Accordions


HTML markup

Screenshot


Menu Restaurant


HTML markup

Screenshots

Menu Restaurant ver 1

Menu Restaurant ver 1

Menu Restaurant ver 2

Menu Restaurant Version 2


Blog – main page


HTML markup:

Screenshot

Blog main page

Blog main page


Blog – single page


HTML markup

Screenshot

Blog Single page

Blog Single page


Blog Page Navigations


HTML markup

Screenshot

Blog Page Navigation example

Blog Page Navigation example


Comment Box


HTML markup

Screenshot

Comment Box example

Comment Box example


Contact Form


HTML markup

Screenshot

Contact Form example

Contact Form example


Booking Form


HTML markup

Screenshot

Booking Form example

Booking Form example


Twitter


HTML markup

Screenshot

Twitter example

Twitter example


Social icons


HTML markup

Screenshot

Social Icons example

Social Icons example


Sources & Credits


The following sources and files have been used to build up this theme

Twitter Bootstrap http://twitter.github.com/bootstrap/

jQuery – http://www.jquery.com


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!