Booze – Pub HTML Template – createIT support – the place to get all the help for your WordPress Themes

Support

Outsourcing

Booze - Pub HTML Template – Responsive HTML5 Template

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:

Responding to questions or problems regarding the item and its features

Fixing any discovered item’s bugs

Providing updates to ensure compatibility with new software versions

Was this article helpful ?

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:

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>

</div>

</div>

</div>

</div>

Page structure

Below you will find default page structure :

<!DOCTYPE html>
   <html>
   <head>
 
   [css]
 
   </head>
   <body>
 
   [header]
   [main menu]
 
   <!-- main container -->
   <div id="wrapper">
 
     [component 1]
 
     <!-- fullwidth element -->
       </div>
         [fullwidth parallax]
       <div class="container">
     <!-- / fullwidth element -->
 
     [component 6]
 
 
   </div>
   <!-- / main container -->
 
 
   [footer]
 
   [javascripts]
 
   </body>
   </html>

<!DOCTYPE html>

<html>

<head>

[css]

</head>

<body>

[header]

[main menu]

[component 1]

</div>

[fullwidth parallax]

[component 6]

</div>

[footer]

[javascripts]

</body>

</html>

Was this article helpful ?

CSS files and structure

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

#primaryContent a {color: #someColor;}

1	#primaryContent a {color: #someColor;}

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.

#wrap #primaryContent a {color: #someColor;}

1	#wrap #primaryContent a {color: #someColor;}

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:

<head>
    (..)
    <link rel="stylesheet" type="text/css" href="css/motive.css">
    (..)
    </head>

<head>

(..)

(..)

</head>

Icons

We’ve included 360+ font icons.

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

HTML markup:

<!-- Awesome Icons -->
        <i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

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

Was this article helpful ?

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

HTML Markup

<section class="ct-mapSection">
        <div data-location="666 Hells Kitchen, New York City" data-height="420" data-zoom="13" class="ct-googleMap ct-googlemapStyle"></div>
      </section>

</section>

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/

if (jQuery().appear) {
        if (device.mobile()) {
            // disable animation on mobile
            jQuery("body").removeClass("withAnimation");
        } else {
            jQuery('.withAnimation .animated').appear(function () {
                jQuery(this).each(function () {
                    jQuery(this).addClass('activate');
                    jQuery(this).addClass($(this).data('fx'));
                });
            }, {accY: -150});
        }
    }

if (jQuery().appear) {

if (device.mobile()) {

// disable animation on mobile

jQuery("body").removeClass("withAnimation");

} else {

jQuery('.withAnimation .animated').appear(function () {

jQuery(this).each(function () {

jQuery(this).addClass('activate');

jQuery(this).addClass($(this).data('fx'));

});

}, {accY: -150});

}

Was this article helpful ?

<nav class="navbar navbar-default ct-centeredMenu ct-menu--color navbar-fixed-top">
  <div class="container">
    <ul class="nav navbar-nav ct-leftSide ct-navbar--fadeIn">
      <li class="onepage"><a href="#home" class="ct-js-btnScroll">home</a></li>
      <li class="onepage"><a href="#menus" class="ct-js-btnScroll">menus</a></li>
      <li class="onepage"><a href="#blog" class="ct-js-btnScroll">blog</a></li>
      <li class="onepage"><a href="#events" class="ct-js-btnScroll">events</a></li>
    </ul>
    <div class="navbar-header"><a href="index.html" class="navbar-brand"><img src="../assets/images/demo-content/booze/logo.png" alt="Image"></a></div>
    <ul class="nav navbar-nav ct-rightSide">
      <li class="onepage"><a href="#master" class="ct-js-btnScroll">masterclass</a></li>
      <li class="onepage"><a href="#gallery" class="ct-js-btnScroll">gallery</a></li>
      <li class="onepage"><a href="#contact" class="ct-js-btnScroll">contact</a></li>
    </ul>
    <div class="clearfix"></div>
  </div>
</nav>

<li class="onepage"><a href="#menus" class="ct-js-btnScroll">menus</a></li>

<li class="onepage"><a href="#events" class="ct-js-btnScroll">events</a></li>

</ul>

<li class="onepage"><a href="#master" class="ct-js-btnScroll">masterclass</a></li>

<li class="onepage"><a href="#gallery" class="ct-js-btnScroll">gallery</a></li>

<li class="onepage"><a href="#contact" class="ct-js-btnScroll">contact</a></li>

</ul>

</div>

</nav>

Screenshot

Menu Fixed Color

Was this article helpful ?

Parallax

HTML markup

<div data-background="../assets/images/demo-content/booze/parallax.png" data-height="58%" data-parallax="50" class="ct-parallax tablex ct-eventsSection ct-u-displayTableVertical">
  <section data-height="58%" class="ct-u-displayTableCell">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <header class="ct-u-color--white">Upcoming Events</header>
          <div class="ct-eventsSection-paragraphBox">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p class="ct-u-paddingTop10">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><img src="../assets/images/demo-content/booze/symbol.png" alt="Image" class="ct-u-paddingTop25 ct-u-paddingBottom25">
            <ul class="list-inline list-unstyled">
              <li><a href="events.html" data-padding-left="64" data-padding-right="64" class="btn btn-primary btn-border btn-sm ct-js-btnSize">events</a></li>
              <li><a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<header class="ct-u-color--white">Upcoming Events</header>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p class="ct-u-paddingTop10">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><img src="../assets/images/demo-content/booze/symbol.png" alt="Image" class="ct-u-paddingTop25 ct-u-paddingBottom25">

<li><a href="events.html" data-padding-left="64" data-padding-right="64" class="btn btn-primary btn-border btn-sm ct-js-btnSize">events</a></li>

<li><a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a></li>

</ul>

</div>

</section>

</div>

Screenshot

Parallax Example

Was this article helpful ?

Buttons

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

Booze flavours

Btn-primary.btn-borde
HTML markup

<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">lets have one!</a>

1	<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">lets have one!</a>

Screenshot
Booze Button Example

Btn-default.btn-border
HTML markup

CSS

<a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a>

1

<a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a>

Screenshot
Btn-link.btn-border
HTML markup

CSS

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

1

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

Screenshot
Btn-primary.btn-stretched
HTML markup

CSS

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

1

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

Screenshot

Castro Flavour

Btn-primary.btn-border
HTML markup

<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">lets have one!</a>

1	<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">lets have one!</a>

Screenshot

Btn-default.btn-border
HTML markup

CSS

<a href="events.html" class="btn btn-default btn-border btn-sm">join a class</a>

1

<a href="events.html" class="btn btn-default btn-border btn-sm">join a class</a>

Screenshot
Btn-link.btn-border
HTML markup

CSS

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

1

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

Screenshot
Btn-primary.btn-stretched
HTML markup

CSS

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

1

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

Screenshot

Rooftop Flavour

Btn-primary.btn-border
HTML markup

<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">get one!</a>

1	<a href="#menus" data-padding-left="30" data-padding-right="30" class="btn btn-primary btn-border btn-sm ct-js-btnSize ct-js-btnScroll" style="padding-left: 30px; padding-right: 30px;">get one!</a>

Screenshot

Btn-default.btn-border
HTML markup

CSS

<a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a>

1

<a href="contact.html" class="btn btn-default btn-border btn-sm">book an event</a>

Screenshot
Btn-link.btn-border
HTML markup

CSS

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

1

<a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a>

Screenshot
Btn-primary.btn-stretched
HTML markup

CSS

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

1

<button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>

Screenshot

Was this article helpful ?

Footer

HTML markup

<footer class="ct-footer">
  <section class="ct-preFooter">
    <div class="container">
      <div class="row ct-row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-left"><a href="index-multipager.html"><img src="../assets/images/demo-content/booze/logo-footer.png" alt="Image"></a></div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ct-contactBox">
          <h6 class="ct-headerBottom">Contact us</h6>
          <ul class="list-unstyled ct-contactList">
            <li>Adress:<br/> 600 Gtrand St. New York, NY, 11211<i data-icon-size="22" data-left="0" class="fa fa-map-marker ct-js-iconSize ct-js-position"></i></li>
            <li>Phone:<br/>Tel:<a href="tel:070088087">&nbsp;0049 -  123 456 789 - 0</a><i data-icon-size="20" data-left="-2" class="fa fa-phone ct-js-iconSize ct-js-position"></i></li>
            <li>Web:<br/><a href="http://booze.html.themeforest.createit.pl/">www.booze.com<br/></a><a href="mailto:hello@booze.com">hello@booze.com</a><i data-icon-size="16" data-left="-2" class="fa fa-envelope ct-js-iconSize ct-js-position"></i></li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ct-twitterBox">
          <h6 class="ct-headerBottom">Latest Tweets</h6>
          <div class="ct-js-twitter ct-tweet"></div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 ct-followBox">
          <h6 class="ct-headerBottom">Follow us</h6>
          <ul class="list-unstyled">
            <li><a href="https://www.facebook.com/createITpl">Facebook</a><i data-left="4" data-top="5" data-icon-size="23" class="fa fa-facebook ct-js-position ct-js-iconSize"></i></li>
            <li><a href="https://twitter.com/createitpl">Twitter</a><i data-left="0" data-top="5" data-icon-size="27" class="fa fa-twitter ct-js-position ct-js-iconSize"></i></li>
            <li><a href="#">Instagram</a><i data-left="0" data-top="5" data-icon-size="27" class="fa fa-instagram ct-js-position ct-js-iconSize"></i></li>
          </ul>
        </div>
      </div>
    </div><a href="#" class="ct-js-btnScrollUp is-active"><span><i class="fa fa-angle-up"></i></span></a>
  </section>
  <section class="ct-postFooter">
    <div class="container ct-containerFix">
      <div class="row">
        <div class="ct-u-displayTableVertical">
          <div class="ct-u-displayTableCell ct-footerCol1">
            <p class="ct-copyright">Copyright &copy; 2016 BOOZE</p>
          </div>
          <div class="ct-u-displayTableCell ct-footerCol2 text-right">
            <ul class="ct-map-links list-inline list-unstyled text-uppercase">
              <li><a href="index-multipager.html" class="ct-js-btnScroll"><span data-hover="home">home</span></a></li>
              <li><a href="menus.html" class="ct-js-btnScroll"><span data-hover="menus">menus</span></a></li>
              <li><a href="blog.html" class="ct-js-btnScroll"><span data-hover="blog">blog</span></a></li>
              <li><a href="events.html" class="ct-js-btnScroll"><span data-hover="events">events</span></a></li>
              <li><a href="masterclass.html" class="ct-js-btnScroll"><span data-hover="masterclass">masterclass</span></a></li>
              <li><a href="gallery.html" class="ct-js-btnScroll"><span data-hover="gallery">gallery</span></a></li>
              <li><a href="contact.html" class="ct-js-btnScroll"><span data-hover="contact">contact</span></a></li>
            </ul>
          </div>
          <div class="ct-u-displayTableCell ct-footerCol3 text-right">
            <p class="ct-authorPage"><span>Design by<a href="http://www.createit.pl/">&nbsp; CreateIT</a></span></p>
          </div>
        </div>
      </div>
    </div>
  </section>
</footer>

<h6 class="ct-headerBottom">Contact us</h6>

<li>Adress:<br/> 600 Gtrand St. New York, NY, 11211<i data-icon-size="22" data-left="0" class="fa fa-map-marker ct-js-iconSize ct-js-position"></i></li>

<li>Phone:<br/>Tel:<a href="tel:070088087"> 0049 - 123 456 789 - 0</a><i data-icon-size="20" data-left="-2" class="fa fa-phone ct-js-iconSize ct-js-position"></i></li>

<li>Web:<br/><a href="http://booze.html.themeforest.createit.pl/">www.booze.com<br/></a><a href="mailto:hello@booze.com">hello@booze.com</a><i data-icon-size="16" data-left="-2" class="fa fa-envelope ct-js-iconSize ct-js-position"></i></li>

</ul>

</div>

<h6 class="ct-headerBottom">Latest Tweets</h6>

</div>

<h6 class="ct-headerBottom">Follow us</h6>

<li><a href="https://www.facebook.com/createITpl">Facebook</a><i data-left="4" data-top="5" data-icon-size="23" class="fa fa-facebook ct-js-position ct-js-iconSize"></i></li>

<li><a href="https://twitter.com/createitpl">Twitter</a><i data-left="0" data-top="5" data-icon-size="27" class="fa fa-twitter ct-js-position ct-js-iconSize"></i></li>

<li><a href="#">Instagram</a><i data-left="0" data-top="5" data-icon-size="27" class="fa fa-instagram ct-js-position ct-js-iconSize"></i></li>

</ul>

</div>

</div><a href="#" class="ct-js-btnScrollUp is-active"><span><i class="fa fa-angle-up"></i></span></a>

</section>

</div>

<li><a href="menus.html" class="ct-js-btnScroll"><span data-hover="menus">menus</span></a></li>

<li><a href="events.html" class="ct-js-btnScroll"><span data-hover="events">events</span></a></li>

<li><a href="masterclass.html" class="ct-js-btnScroll"><span data-hover="masterclass">masterclass</span></a></li>

<li><a href="gallery.html" class="ct-js-btnScroll"><span data-hover="gallery">gallery</span></a></li>

<li><a href="contact.html" class="ct-js-btnScroll"><span data-hover="contact">contact</span></a></li>

</ul>

</div>

<p class="ct-authorPage"><span>Design by<a href="http://www.createit.pl/">  CreateIT</a></span></p>

</div>

</section>

</footer>

Screenshot

Footer example

Was this article helpful ?

Gallery

HTML markup

<section id="gallery" class="ct-gallerySection onepager">
  <div class="ct-topContent">
    <div data-bg="../assets/images/demo-content/booze/main-picture.jpg" class="ct-imageComponent ct-js-background ct-u-displayTable ct-u-displayTableVertical">
      <div class="ct-u-displayTableCell text-center">
        <header>Booze Gallery</header>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada <br/> fames ac turpis egestas.</p>
        <ul class="ct-gallery-filters list-unstyled list-inline">
          <li><a data-filter="*" class="active">All<span class="rel">All</span></a></li>
          <li><a data-filter=".rooms">Rooms<span class="rel">Rooms</span></a></li>
          <li><a data-filter=".drinks">Drinks<span class="rel">Drinks</span></a></li>
          <li><a data-filter=".food">Foods<span class="rel">Foods</span></a></li>
          <li><a data-filter=".staff">Staff<span class="rel">Staff</span></a></li>
          <li><a data-filter=".events">Events<span class="rel">Events</span></a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <div class="ct-bottomContent">
    <div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-popupGallery ct-bottomBorder">
      <div class="_js-lightGallery"><a href="../assets/images/demo-content/booze/gallery1.jpg" data-sub-html="Sed ut perspiciatis" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery1.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">all,</li>
              <li class="text-uppercase">drinks</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery2.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery2.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">people,</li>
              <li class="text-uppercase">party</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery3.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery3.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">&nbsp;</li>
              <li class="text-uppercase">&nbsp;</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery4.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery4.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">&nbsp;</li>
              <li class="text-uppercase">&nbsp;</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery5.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery5.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">all,</li>
              <li class="text-uppercase">people</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery6.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery6.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">mohito,</li>
              <li class="text-uppercase">orange juice</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery7.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery7.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">food,</li>
              <li class="text-uppercase">party</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery8.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery8.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">party,</li>
              <li class="text-uppercase">drinks</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery9.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery9.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">drinks,</li>
              <li class="text-uppercase">pizza</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery10.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery10.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">&nbsp;</li>
              <li class="text-uppercase">&nbsp;</li>
            </ul>
          </div></a><a href="../assets/images/demo-content/booze/gallery11.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery11.jpg" alt="Image">
          <div class="ct-galleryHover text-center">
            <div class="ct-title"><span>THE BEST BLEND</span></div>
            <ul class="ct-category list-unstyled list-inline">
              <li class="text-uppercase">&nbsp;</li>
              <li class="text-uppercase">&nbsp;</li>
            </ul>
          </div></a></div>
    </div>
  </div>
</section>

100

101

<header>Booze Gallery</header>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada <br/> fames ac turpis egestas.</p>

<li><a data-filter=".rooms">Rooms<span class="rel">Rooms</span></a></li>

<li><a data-filter=".drinks">Drinks<span class="rel">Drinks</span></a></li>

<li><a data-filter=".food">Foods<span class="rel">Foods</span></a></li>

<li><a data-filter=".staff">Staff<span class="rel">Staff</span></a></li>

<li><a data-filter=".events">Events<span class="rel">Events</span></a></li>

</ul>

</div>