Craftsmen

Joomla Template for Every Business


Craftsmen - Joomla Template for Every Business

Quickstart package for Joomla 3.x +  Template Only

Author: PixelHut

We hope Craftsmen will suit your needs in developing your site. With Craftsmen Template you can build your corporate / business / freelancer / blog / creative website. You can develop and boost your business. We hope to use our Joomla Template for your brand new site or to redesign your existing one.

We manage to create lots of Demo Pages for dedicated business such as: 

  1. Fitness / GYM
  2. Bakery
  3. Pet Vet
  4. Yoga Studio
  5. Coffee Shop
  6. Barber Shop
  7. Tailor
  8. Tattoo Studio

Enjoy Craftsmen's features and ideas!

! Helix 2 framework shortcodes will work like this:

1. In articles no need of changes, just add the code;
2. In Custom HTML module - open the module > click on the Options tab > enable the Prepare Content option and save;
3. In 3rd party extensions, per example RokSprocket, K2, etc, the shortcodes should be written in their HTML version.

Per example the button code from this:

[BUTTON TYPE="DEFAULT" SIZE="LARGE" LINK="#"]BUY TICKETS NOW[/BUTTON]

should be written like this:

<a class="btn btn-primary btn-large" target="" href="#">BUY TICKETS NOW</a>

To get easily the HTML versions of the shortcodes you can simply open the demo page for shortcodes of the template ->  choose the shortcode page for which you want to take the code, inspect the element with Firebug, copy the code and paste it in your module, edit and save.
 

You can choose to install Craftsmen with the full demo package or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation rather than only the template itself.

1. Install full Joomla 3 demo package:

 

2. Template installation:
If you already have an installed Joomla use the first method and if you want to make a fresh install of Joomla + the template use this installation method.

Template installation only:

1. Open your site administration (www.yoursite.com/administrator)
2. Go to "Extensions" > "Extension Manager"
3. Click "Browse" in the field called "Upload Package File" > locate the Helix framework plugin file (framework-v2.3.zip) in your computer and select it > Click "Upload & Install"
4. Then enable the plugin from Extensions > Plugin Manager.
5. Click "Browse" in the field called "Upload Package File" > locate the template-only file in your computer and select it > Click "Upload & Install"
7. Other modules - the complete list of modules can be found below in the documentation.
Installing only the template you'll need to install all the extensions by downloading them from the creator's sites - please check the credits to get extension links.

 

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.

1. JCE - Craftsmen comes with pre-installed JCE editor with custom option to not strip the code. You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus when you open an article or a module you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

EXAMPLE:
Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and you open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.

2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.

To use the presets and change colors go to:

1. Color Header (default):
- By default the header is in color, which color can be selected from Site admin > Extensions > Template manager > Craftsmen > click on the Presets tab > choose a preset > Preset Settings > Header Color > pick your color.

2. Trasnparent Header + Color Header on scroll:
- to make the header transparent you need to go to Site admin > Extensions > Template manager > Craftsmen > click on the Layout tab > click on the cog icon on the right side of the Header module position > a pop up window with the options will be displayed > in the field Custom Class you'll see the "container" class > you need to add "ts-menu" class after the "container" class, so the class will look like this: "container ts-menu" > save and test;
- Please note that this type of header is recommended to be used on pages where below the header you will have a slider or parallax section, otherwise the header will be on top of the module below!

3. White Header:
- to have a white header you need to replace the presets.less file (located in templates/craftsmen/less/) with the presets.less from White-Header-presets.zip file. These are the steps how to do it:

3.1. Open templates/craftsmen/less/ on your server;
3.2. Unzip the White-Header-presets.zip file (this file is located in your download package > White_Header_css folder);
3.3. Upload the presets.less file on your server and replace the existing presets.less file there.

4. Transparent + White Header on scroll:
- just follow the steps to add the transparent class from "2. Trasnparent Header + Color Header on scroll" above.

 

To have social icons or links above the Header:

1. Social Icons above the Header - create a Custom HTML module with the following content (this is the default code from the demo site):

<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
<a href="#" class="uk-icon-button uk-icon-dribbble"></a>
<a href="#" class="uk-icon-button uk-icon-pinterest"></a>
<a href="#" class="uk-icon-button uk-icon-instagram"></a>
<a href="#" class="uk-icon-button uk-icon-dropbox"></a>

remove the classes that you don't need or add new if you want + change the links with yours. The icons used are from FontAwesome.

Select "toolbar-r" module position for the module and publish it.

2. Toolbar Links - create a Custom HTML module with the following content (this is the default code from the demo site):

<a>Call Us Now: + 555.1234.678</a>

Edit as you like, place the module in "toolbar-l" module position and save.

Some of the menus (basically all of the Demo Home pages + some additional pages) are with Single Article layouts. Which should means that on this page you have an article with some content in it, BUT we have disabled the article content in order to display all of the content with modules.


How it's done:

1. In the Article manager we have created an article called Dummy Content and in this article we have placed the below code:

<p>Lorem ipsum...</p>
<p>[sp_hide /]</p>

The part that contains [sp_hide /] is actually making all of the article content to disappear.

2. We've linked this article to all major Demo Home pages from the menus created.

Now if you want to have article content on any of the pages:

- go to Article manager > create your article;
- go to Menu manager > Main menu > click on the menu you want > where you have "Select Article *" click the "Select" button and select your article;
- save and test the page.

NOTE: you can hide any article content on any page using the [sp_hide /] code, by simpy adding it to your article content. Again you can turn the visibillity of the article by removing the code.

Module Positions:

To add or rearrange modules you need to go to:


For creating new modules check the Helix documentation: http://www.joomshaper.com/documentation/helix
 

Module Variations:

This theme comes with different module styles. Here is a list of the available options (Module Class Suffixes):
color, color2,  color3,  title1,  title2, title3, white, border, dark and highlight

+ 15 Custom Module styles:

fitness, bakery, pet, account, beauty, yoga, coffee, pawn, barber, motel, tailor, clean, repair, tattoo, wash
 

To use module titles in every place in the template - article or somewhere in module content you can use this code:

For example:

<div class="module title1">
<h3 class="header">Your Title</h3>
</div>

<div class="module title2">
<h3 class="header">Your Title</h3>
</div>
<div class="module title3">
<h3 class="header">Your Title</h3>
</div>
<div class="module fitness">
<h3 class="header">Your Title</h3>
</div>

 

Use every module variation title, that you like.

 

 

These are elements used in the template and they are only part of UI kit elements - only Components, without Add-ons. You can explore all of UI kit possibilities here http://www.getuikit.com/docs/components.html

You can see the preview for all below codes in UI Kit Elements page in the demo.

 

<a href="#"><button class="uk-button" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger" type="button">Danger Button</button></a>

 
<a href="#"><button class="uk-button uk-button-mini" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-mini" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-mini" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-mini" type="button">Danger Button</button></a>
<p>Buttons Large size:</p>
<a href="#"><button class="uk-button uk-button-large" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-large" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-large" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-large" type="button">Danger Button</button></a>

 

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button" href="#">Link</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary" href="#">Link</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-success" href="#">Link</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-danger" href="#">Link</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 </div>
</div>

 

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>
<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>
<p>Full width button:</p>
<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>
<p>Full width primary button:</p>
<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

 

<span class="uk-badge uk-badge-urban">Badge</span>
<span class="uk-badge uk-badge-success">Success</span>
<span class="uk-badge uk-badge-warning">Warning</span>
<span class="uk-badge uk-badge-danger">Danger</span>
<span class="uk-badge uk-badge-percent">Danger</span>
<span class="uk-badge uk-badge-notification uk-badge-urban">1</span>
<span class="uk-badge uk-badge-notification uk-badge-success">2</span>
<span class="uk-badge uk-badge-notification uk-badge-warning">3</span>
<span class="uk-badge uk-badge-notification uk-badge-danger">4</span>
<span class="uk-badge uk-badge-notification uk-badge-percent">5</span>
</p>

 

<div class="uk-alert uk-alert-success" data-uk-alert>
<a href="" class="uk-alert-close uk-close"></a>
<p>To indicate success or a positive message add the <code>.uk-alert-success</code> class.</p>
</div>
<div class="uk-alert uk-alert-warning" data-uk-alert>
<a href="" class="uk-alert-close uk-close"></a>
<p>To indicate a message containing a warning add the <code>.uk-alert-warning</code> class.</p>
</div>
<div class="uk-alert uk-alert-danger" data-uk-alert>
<a href="" class="uk-alert-close uk-close"></a>
<p>To indicate an important message add the <code>.uk-alert-danger</code> class.</p>
</div>

<div class="uk-alert uk-alert-large uk-alert-danger" data-uk-alert>
<a href="" class="uk-alert-close uk-close"></a>
<h3>Title Large Alert</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 
<div class="uk-progress uk-progress-mini">
    <div class="uk-progress-bar" style="width: 50%;"></div>
</div>

<div class="uk-progress uk-progress-small">
    <div class="uk-progress-bar" style="width: 55%;"></div>
</div>

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 60%;"></div>
</div>

<div class="uk-progress uk-progress-striped">
    <div class="uk-progress-bar" style="width: 65%;"></div>
</div>

 

<button class="uk-button" data-uk-modal="{target:'#modal'}">Click Me</button>
<a href="#modal" data-uk-modal>Click Me</a>
    <div id="modal" class="uk-modal">
    <div class="uk-modal-dialog">
<a href="" class="uk-modal-close uk-close"></a>
    <h1>Headline</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

 

<p><button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Click Me</button>
    <a href="#offcanvas-1" data-uk-offcanvas>Click Me</a>
    <div id="offcanvas-1" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
    <div class="uk-panel">Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

    <div class="uk-panel">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>
</p>

 

<p>
    <button class="uk-button" data-uk-tooltip title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'bottom'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'bottom-right'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'top'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'top-left'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'top-right'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'left'}" title="Hello!">Hover me</button>
    <button class="uk-button" data-uk-tooltip="{pos:'right'}" title="Hello!">Hover me</button>
    <span data-uk-tooltip title="Hello!">Hover me</span>
</p>

 

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                                        <h3>Fade</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                                        <h3>Scale up</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                                        <h3>Scale down</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-3-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                                        <h3>Slide top</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                                        <h3>Slide bottom</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                                        <h3>Slide right</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                                        <h3>Slide left</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                                        <h3 class="uk-panel-title">Delay</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
                                        <h3 class="uk-panel-title">Delay</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
                                        <h3 class="uk-panel-title">Delay</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
                                        <h3 class="uk-panel-title">Delay</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                </div>
                            </div>

Craftsman is equiped with Font Awesome and you can use it in every module or content element in your site. 

You can use shortcode elements from Icon page on the site:

[icon name="ICON_NAME"]...[/icon] and to replace "ICON_NAME" with the icon, that you want.

 

You can use html code also in the content:

<i class="icon-twitter"></i>

 

Thin Stroke Icons 7 set by pixeden are integrated in Craftsmen Template. A series of iOS 7 inspired vector icons in a custom @font-face icon font that can be styled dynamically using CSS. Those retina ready icons have a very modern style that will beautifully complement any project.

Demo of icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/index.html

 

Documentation for usage of these icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/documentation.html#

 

Example usage:

<span class="pe-7s-map-marker"></span>
<i class="pe-7s-home"></i>

For purposes of Craftsmen template we have made a special selection of icons from Flaticon

You can find the whole list of icons here

The usage of icons:

<span class="flaticon-diamond12"></span>
<i class="flaticon-easter37"></i>

Instead of diamond12, easter37 etc. you place the name of the icont, that you choose from the list.

 

1. Helix 2 Shorcodes for buttons are:

[button type="default" size="" link="#"]Default[/button]
[button type="primary" size="" link="#"]Primary[/button]
[button type="info" size="" link="#"]Info[/button] [button type="info" size="" link="#"][icon name="cloud-upload"][/icon] Info with icon[/button]
[button type="success" size="" link="#"]Success[/button]
[button type="warning" size="" link="#"]Warning[/button]
[button type="danger" size="" link="#"]danger[/button]
[button type="inverse" size="" link="#"]Inverse[/button]
[button type="block btn-primary" size="large" link="#"]Block level button[/button]
[button type="default" size="large" link="#"]Large Primary[/button]

Attributes:

type - primary, success, warning, danger, inverse;

size - mini, small, normal, large;

link - "#";

target="_blank"   -  Default value is self.

The shortcode buttons are coded to open in the same window by default. If you want link to be opened in new window, you can use target="_blank". 

Example:

[button target="_blank" type="primary" size="" link="#"]Primary[/button]


Craftsmen comes with different buttons style and 3 sizes - mini, small, large. You can use Font Awesome as well to create more Awesome buttons!

2. Codes for UI kit buttons:

You can use and UI Kit buttons - the preview for them you can see on the demo site, on page Ui Kit Components.

<a href="#"><button class="uk-button" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger" type="button">Danger Button</button></a>

 
<a href="#"><button class="uk-button uk-button-mini" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-mini" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-mini" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-mini" type="button">Danger Button</button></a>
<p>Buttons Large size:</p>
<a href="#"><button class="uk-button uk-button-large" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-large" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-large" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-large" type="button">Danger Button</button></a>

 

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button" href="#">Link</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary" href="#">Link</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-success" href="#">Link</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-danger" href="#">Link</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 </div>
</div>

 

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>
<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>
<p>Full width button:</p>
<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>
<p>Full width primary button:</p>
<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

1. Social Icons from toolbar right:

Module name Social Icons

Modul position - toolbar-r

Module type: Custom HTML

These icons come from UI kit. You can use icons from Font Awesome and to expand your code. Remove the classes that you don't need or add new if you want + change the links with yours.

<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
<a href="#" class="uk-icon-button uk-icon-dribbble"></a>
<a href="#" class="uk-icon-button uk-icon-pinterest"></a>
<a href="#" class="uk-icon-button uk-icon-instagram"></a>
<a href="#" class="uk-icon-button uk-icon-dropbox"></a>

 

2. Social Icons from footer: (Module name Contact, position - bottom8)

These icons come from Helix Framework. You can use icons from Font Awesome and to expand your code.

<p><span style="line-height: 1.3em;">[button type="link social" link="#"][icon name="facebook" /][/button]&nbsp;[button type="link social" link="#"][icon name="twitter" /][/button]&nbsp;[button type="link social" link="#"][icon name="pinterest" /][/button]&nbsp;[button type="link social" link="#"][icon name="google-plus" /][/button]&nbsp;[button type="link social" link="#"][icon name="linkedin" /][/button]</span></p>

Headings:
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6 style="font-size: 20px;">h6. Heading 6</h6>
<h6 style="font-size: 20px;" class="header-subtitle">h6. Header Subtitle</h6>


Highlighted text:
<p class="hl-marker">p. Highlight Text</p>
<h4 class="hl-marker">h4. Highlight Text</h4>
<h3 class="hl-marker">h3. Highlight Text</h3>

Dropcap:
[dropcap]Dropcap Texts[/dropcap]

Highlighted marked text:
<span class="marker">Highlight</span>

Lists examples:
<li>This is a sample <strong>unordered list</strong></li>
</ul> <ul class="arrow">
<li>ul with class <strong>arrow</strong></li>
</ul> <ul class="arrow-double">
<li>ul with class <strong>arrow-double</strong></li>
</ul>

<ul class="tick">
<li>ul with class <strong>tick</strong></li>
</ul>

<ul class="cross">
<li>ul with class <strong>cross</strong></li>
</ul>

<ul class="star">
<li>ul with class <strong>star</strong></li>
</ul>

<ul class="rss">
<li>ul with class <strong>rss</strong></li>
</ul> <ul class="spot">
<li>ul with class <strong>spot</strong></li>
</ul> <ol>
<li>This is a sample <strong>ordered list</strong></li>
</ol>

Block Number
[blocknumber type="circle" text="01" color="#FFF" background="#dd4b32"]Circle Block Number[/blocknumber]
[blocknumber type="rounded" text="01" color="#FFF" background="#329491"]Rounded Block Number[/blocknumber]
[blocknumber text="01" color="#FFF" background="#999"]Normal Block Number[/blocknumber]

Block Examples
[block color="#FFF" background="#dd4b32"]Content[/block]
[block type="rounded" color="#FFF" background="#000000"]Lorem ipsum dolor[/block]
[block border="5px solid #99c864" padding="10px 15px"]Lorem ipsum dolor[/block]


Bubble Examples
[bubble background="#FFF" color="#666" border="3px solid #ccc" author="Chad M. Simmons"]Lorem ipsum dolor sit amet.[/bubble]
Panel with big icon behind the text
<div class="uk-grid uk-grid-divider-2" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-heart288"></i></div>
<h4 style="font-weight:800;">01 <span class="uk-text-primary">Cardio</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-thin37"></i></div>
<h4 style="font-weight:800;">02 <span class="uk-text-primary">Lose Fat</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-abdominals"></i></div>
<h4 style="font-weight:800;">03 <span class="uk-text-primary">Build Muscle</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-man429"></i></div>
<h4 style="font-weight:800;">04 <span class="uk-text-primary">Stay Healthy</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

</div>
 


Panel with big price behind the text and with image
<div class="uk-grid">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut1.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 15</strong></h3></div>
<h6 style="font-size: 20px;">Trim</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut2.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 30</strong></h3></div>
<h6 style="font-size: 20px;">Fade</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut3.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 35</strong></h3></div>
<h6 style="font-size: 20px;">Haircut</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

</div>

<div class="uk-grid">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut4.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 10</strong></h3></div>
<h6 style="font-size: 20px;">Beard Trim</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut5.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 30</strong></h3></div>
<h6 style="font-size: 20px;">Shave</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut6.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 60</strong></h3></div>
<h6 style="font-size: 20px;">Shave & Cut</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

</div>

Panel with icons and text with heading 6

<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
                            <h3 class="flaticon-cupcake3"></h3>
                        </div>
</div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Pastries</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
                            <h3 class="flaticon-croissant1"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Croissants</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:900}">
                            <h3 class="flaticon-bread9"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Bread & Baguettes</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1200}">
                            <h3 class="flaticon-chocolate1"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Fine Chocolates</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1500}">
                            <h3 class="flaticon-cupcake4"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Cupcakes</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1800}">
                            <h3 class="flaticon-chef15"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Delicious Food</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
   

Panel with icons and text with heading 4 and calss header subtitle

<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-mannequin1"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Clothing Alterations</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-male200"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Men’s Suits</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-stylish12"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Special Dresses</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-triple10"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Fashion Advising</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-female87"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Clothes copying</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-hanger"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Relining</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>

Panel with icon in circle color bubble

<div class="uk-grid uk-margin-large-top uk-text-white uk-text-center">
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-dog52"></i>
</div>
<h3>Cats and Dogs</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-rabbit5"></i>
</div>
<h3>Exotic and Avian</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-syringe"></i>
</div>
<h3>Animal Vaccines</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-310"></i>
</div>
<h3>Animal Food</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
</div>


Panel with icon inside the rhomb figure


[row id="ROW_ID" class="ROW_CLASS"]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-meditation1"></div>
<h4>Bikram</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-man272"></div>
<h4>Hatha</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-arch1"></div>
<h4>Vinyasa</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-yoga13"></div>
<h4>Kundalini</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[/row]


Panel with icon inside the rhomb figure with heading 6 for the title

<div class="uk-grid uk-grid-divider-2 uk-text-center">
<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-cup pe-3x pe-va"></span>
<h6 style="font-size: 20px;">Award Winning Barbers</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a href="#" target="" class="btn btn-primary btn-">Read More</a>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-scissors pe-3x pe-va"></span>
<h6 style="font-size: 20px;">Full Set Of Services</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a class="btn btn-primary btn-" target="" href="#">Read More</a>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-way pe-3x pe-va"></span>
<h6 style="font-size: 20px;">In Every Major City</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a class="btn btn-primary btn-" target="" href="#">Read More</a>
</div>
</div>

</div>

Panel with image with amazing effect

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model1.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Night <span>Wish</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model2.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Party <span>Star</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model3.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> French <span>Feel</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model4.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Haute <span>Coute</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

Panel with icon inside custom panel with different colors, depending on the preset color -  (hi-box1 and hi-box-dark). You can use also hi-box2 hi-box3 hi-box4 hi-box-white.

<div class="uk-grid uk-grid-divider-3" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box1">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/design.png" alt="How It Works">
<h4><strong>Choose Design</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-dark">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/fabric.png" alt="How It Works">
<h4><strong>Select Fabric</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box1">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/measure.png" alt="How It Works">
<h4><strong>Measure Yourself</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-dark">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/wear.png" alt="How It Works">
<h4><strong>Wear Your Suit</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

</div>

</br>


Panel with icon inside custom panel with different colors, depending on the preset color

<div class="uk-grid uk-grid-divider-3" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box1">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/design.png" alt="How It Works">
<h4><strong>Choose Design</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box2">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/fabric.png" alt="How It Works">
<h4><strong>Select Fabric</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box3">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/measure.png" alt="How It Works">
<h4><strong>Measure Yourself</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box4">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/wear.png" alt="How It Works">
<h4><strong>Wear Your Suit</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

</div>

</br>
 


Panel with big icon above

<div style="text-align: center;"  class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-horse110"></h3>
<h4>Designing Since '99</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-tribal3"></h3>
<h4>Award Winning Tattoo Artists</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-easter37"></h3>
<h4>Specialized In Tribal</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>


Panel box with icons and badges
[row id="ROW_ID" class="ROW_CLASS"]
[col class="span3"]
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge">1</div>
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon flaticon-diamond12"></span>
<h4>Brilliant Work</h4>
[button type="default" size="medium" link="#" target=""]More Information[/button]
</div></div>
[/col]
[col class="span3"]
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge">2</div>
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon pe-7s-light pe-3x pe-va"></div>
<h4>Creative Ideas</h4>
[button type="default" size="medium" link="#" target=""]More Information[/button]
</div></div>
[/col]
[col class="span3"]
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge">3</div>
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon pe-7s-ball pe-3x pe-va"></div>
<h4>Sport Training</h4>
[button type="default" size="medium" link="#" target=""]More Information[/button]
</div></div>
[/col]
[col class="span3"]
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge">4</div>
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon pe-7s-like pe-3x pe-va"></div>
<h4>Crafted with Love</h4>
[button type="default" size="medium" link="#" target=""]More Information[/button]
</div></div>
[/col]
[/row]


Stroke icons block
<div style="text-align: center;" class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-1-4">
<h4><i class="pe-7s-world pe-3x pe-va"></i></h4>
<h3>Marketing</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
[button type="primary" size="" link="#" target=""]Read More[/button]
</div>
<div class="uk-width-medium-1-4">
<h4><i class="pe-7s-light pe-3x pe-va"></i></h4>
<h3>Design</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
[button type="primary" size="" link="#" target=""]Read More[/button]
</div>
<div class="uk-width-medium-1-4">
<h4><i class="pe-7s-umbrella pe-3x pe-va"></i></h4>
<h3>Support</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
[button type="primary" size="" link="#" target=""]Read More[/button]
</div>
<div class="uk-width-medium-1-4">
<h4><i class="pe-7s-cash pe-3x pe-va"></i></h4>
<h3>Finance</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
[button type="primary" size="" link="#" target=""]Read More[/button]
</div>
</div>
 


Stack icons with text block

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span4"]
<h4><span class="icon-stack" style="border-radius: 50%;">
<i class="icon-share-alt icon-light"></i>
</span> Responsive Design</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack" style="border-radius: 50%;">
<i class="icon-share-alt icon-light"></i>
</span> Parallax Sections</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack" style="border-radius: 50%;">
<i class="icon-share-alt icon-light"></i>
</span> Portfolio Styles</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed don.</p>
[/col]

[col class="span4"]
<h4><span class="icon-stack">
<i class=" icon-thumbs-up icon-light"></i>
</span> Blog Layouts</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack">
<i class=" icon-thumbs-up icon-light"></i>
</span> Unlimited Colors</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack">
<i class=" icon-thumbs-up icon-light"></i>
</span> Different Headers</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed don.</p>
[/col]

[col class="span4"]
<h4><span class="icon-stack" style="border-radius: 10%;">
<i class="icon-tint icon-light"></i>
</span> Custom Demos</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack" style="border-radius: 10%;">
<i class="icon-tint icon-light"></i>
</span> Inner Pages</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>

<h4><span class="icon-stack" style="border-radius: 10%;">
<i class="icon-tint icon-light"></i>
</span> Revolution Slider</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed don.</p>
[/col]
[/row]
 

Teaser with Image, Overaly and Text
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<div class="uk-overlay">
<img alt="" src="images/Demo/portfolio/1.jpg">
<div class="uk-overlay-caption" style="text-align: center;"><i class="pe-7s-bicycle pe-3x pe-va"></i></div>
</div>
</div>
<h3 style="text-align: center;">Wild Nature</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p style="text-align: center;"><a class="uk-button uk-button-default" href="#">More information</a></p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<div class="uk-overlay">
<img alt="" src="images/Demo/portfolio/2.jpg">
<div class="uk-overlay-caption" style="text-align: center;"><i class="pe-7s-map pe-3x pe-va"></i></div>
</div>
</div>
<h3 style="text-align: center;">Metro Station</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p style="text-align: center;"><a class="uk-button uk-button-default" href="#">More information</a></p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<div class="uk-overlay">
<img alt="" src="images/Demo/portfolio/3.jpg">
<div class="uk-overlay-caption" style="text-align: center;"><i class="pe-7s-volume1 pe-3x pe-va"></i></div>
</div>
</div>
<h3 style="text-align: center;">Sound Check</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p style="text-align: center;"><a class="uk-button uk-button-default" href="#">More information</a></p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box">
<div class="uk-panel-teaser">
<div class="uk-overlay">
<img alt="" src="images/Demo/portfolio/4.jpg">
<div class="uk-overlay-caption" style="text-align: center;"><i class="pe-7s-umbrella pe-3x pe-va"></i></div>
</div>
</div>
<h3 style="text-align: center;">Undercover</h3>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p style="text-align: center;"><a class="uk-button uk-button-default" href="#">More information</a></p>
</div>
</div>
</div>

1. First Style Pricing Tables with 3 columns - flat styled tables with columns code for 3, 4, 5 columns (you choose how many columns you want to have.)

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span4"]
<div class="pricing-table">
            <div class="block personal fl">
                <h2 class="title">Personal</h2>
                <div class="content">
                    <h3 class="price">
                        <span>$29</span>
                    </h3>
                    <p class="hint">Perfect for freelancers</p>
                </div>
                <ul class="features">
                    <li><span class="icon-cog"></span>1 WordPress Install</li>
                    <li><span class="icon-star"></span>25,000 visits/mo.</li>
                    <li><span class="icon-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="icon-cloud"></span>10GB Local Storage</li>
                </ul>
                <div class="pt-footer">
                    <h4>Did you like it?</h4>
                </div>
            </div>
            </div>
[/col]
[col class="span4"]
<div class="pricing-table">
            <div class="block professional fl">
                <h2 class="title">Professional</h2>
                <div class="content">
                    <h3 class="price">
                        <span>$99</span>
                    </h3>
                    <p class="hint">Suitable for startups</p>
                </div>
                    <ul class="features">
                    <li><span class="icon-cog"></span>1 WordPress Install</li>
                    <li><span class="icon-star"></span>25,000 visits/mo.</li>
                    <li><span class="icon-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="icon-cloud"></span>10GB Local Storage</li>
                </ul>
                <div class="pt-footer">
                    <h4><a>Buy it from TF</a></h4>
                </div>
            </div>
            </div>
[/col]
[col class="span4"]
<div class="pricing-table">
            <div class="block personal fl">
                <h2 class="title">Business</h2>
                <div class="content">
                <h3 class="price">
                        <span>$249</span>
                    </h3>
                    <p class="hint">For established business</p>
                </div>
                <ul class="features">
                    <li><span class="icon-cog"></span>1 WordPress Install</li>
                    <li><span class="icon-star"></span>25,000 visits/mo.</li>
                    <li><span class="icon-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="icon-cloud"></span>10GB Local Storage</li>
                </ul>
                <div class="pt-footer">
                    <h4>Make a choice</h4>
                </div>
        </div>
        </div>
[/col]
[/row]

2. Second Style Pricing Tables with 4 columns and image above the price - flat styled tables with columns code for 3, 4, 5 columns (you choose how many columns you want to have.)
[row id="ROW_ID" class="ROW_CLASS"]
[col class="span3"]
<div class="pricing-table">
            <div class="block personal fl">
                <h2 class="title">Room 1</h2>
                <img src="images/Demo/gallery/room3.png" alt="Standart Room">
                <div class="content">
                    <h3 class="price">
                        <span>$29</span>
                    </h3>
                    <p class="hint">Street view</p>
                </div>
                <ul class="features">
                    <li><span class="icon-ok"></span>Air Condition</li>
                    <li><span class="icon-ok"></span>Fridge</li>
                </ul>
                <div class="pt-footer">
                    <a href="#"><h4>Book Now!</h4></a>
                </div>
            </div>
            </div>
[/col]
[col class="span3"]
<div class="pricing-table">
            <div class="block professional fl">
                <h2 class="title">Room 2</h2>
                <img src="images/Demo/gallery/room1.png" alt="Deluxe Room">
                <div class="content">
                    <h3 class="price">
                        <span>$45</span>
                    </h3>
                    <p class="hint">Mountain View</p>
                </div>
                    <ul class="features">
                    <li><span class="icon-ok"></span>Air Condition</li>
                    <li><span class="icon-ok"></span>Fridge</li>
                    <li><span class="icon-ok"></span>Pay Per View</li>
                </ul>
                <div class="pt-footer">
                    <a href="#"><h4>Book Now!</h4></a>
                </div>
            </div>
            </div>
[/col]
[col class="span3"]
<div class="pricing-table">
            <div class="block personal fl">
                <h2 class="title">Room 3</h2>
                <img src="images/Demo/gallery/room2.png" alt="Apartment">
                <div class="content">
                    <h3 class="price">
                        <span>$75</span>
                    </h3>
                    <p class="hint">Mountain View</p>
                </div>
                <ul class="features">
                    <li><span class="icon-ok"></span>Air Condition</li>
                    <li><span class="icon-ok"></span>Fridge</li>
                </ul>
                <div class="pt-footer">
                    <a href="#"><h4>Book Now!</h4></a>
                </div>
            </div>
            </div>
[/col]
[col class="span3"]
<div class="pricing-table">
            <div class="block personal fl">
                <h2 class="title">Room 4</h2>
                <img src="images/Demo/gallery/room3.png" alt="Standart Room">
                <div class="content">
                    <h3 class="price">
                        <span>$29</span>
                    </h3>
                    <p class="hint">Street view</p>
                </div>
                <ul class="features">
                    <li><span class="icon-ok"></span>Air Condition</li>
                    <li><span class="icon-ok"></span>Fridge</li>
                </ul>
                <div class="pt-footer">
                    <a href="#"><h4>Book Now!</h4></a>
                </div>
            </div>
            </div>
[/col]
[/row]

3. Third Style Pricing Tables with Roksprocket Module with TABLES layout.
 

For Magnifying Glass effect You need only one big image. The one from your example is with dimensions 2340 x 1000.

The code is:

<div class="magnify">
<div class="magnify-zoom"></div>
<img class="small" src="images/Demo/elements/chaos.jpg" /></div>

NOTE: in one page you can use only one magnifying option.

 

1. Example 1 - blue background.


Call To Action Example

Custom Module HTML

position: subinner

<h3 style="text-align: center;">Amazing Template, right?! Get It Now for just a few bucks &nbsp;&nbsp;  [button type="default" size="large" link="#"] Buy Me![/button]</h3>

 

2. Example 2 - white background, green button, h6 font style.

Call To Action Example 2

Custom Module HTML

position: subbiner2

<h6 style="text-align: center; font-size: 25px;">Craftsmen brings awesome features! &nbsp;&nbsp;  [button type="success" size="large" link="#"] Discover More[/button]</h6>

 

3. Example 3 - grey background, red button.

Call To Action Example 3

Custom Module HTML

position: inbottom1

<h3 style="text-align: center;">You like it don'cha!? Find out more now! &nbsp;&nbsp;  [button type="info" size="large" link="#"] Get Craftsmen![/button]</h3>

 

4. Hot Promo

position: inner1

<p class="uk-text-center">Hosting Package Pro!</p>
</br>
<p class="uk-text-center">[button type="default" size="large" link="#"]Get It Now[/button]</p>

 

5. Crazy Offers!

positionL inner2

<p class="uk-text-center">Best Joomla Templates!</p>
</br>
<p class="uk-text-center">[button type="default" size="large" link="#"]Get It Now[/button]</p>

 

6. Amazing Offer

position: inner3

<p class="uk-text-center">100+ Features!</p>
</br>
<p class="uk-text-center">[button type="default" size="large" link="#"]Get It Now[/button]</p>

You can make your own style of call to action using icons, <h> tags and button variations. Look at our Demo pages where we have call to action section.

 

 

 

In Counters code the important thing is to use the right class if you want to use more than 1 counter module in second, third, etc. position.

In first module, if you use

$('.counter') which corresponds to div class="counter"

so in the second module in new position, you need to use other class different from the first one. For example:

$('.counter2') which corresponds to div class="counter2"

 

1. Example 1 with <h> tag title

in title called Counters

<script>
        jQuery(document).ready(function($) {
            $('.counter').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>
[row id="ROW_ID" class="ROW_CLASS uk-text-center"]
[col class="span3"]
<h2 class="counter" style="font-weight: 800;">25000</h2>
<h3>Clients World Wide</h3>
[/col]
[col class="span3"]
<h2 class="counter" style="font-weight: 800;">1300</h2>
<h3>Employees</h3>
[/col]
[col class="span3"]
<h2 class="counter" style="font-weight: 800;">12000</h2>
<h3>Tax Declarations</h3>
[/col]
[col class="span3"]
<h2 class="counter" style="font-weight: 800;">18</h2>
<h3>Provided Services</h3>
[/col]
[/row]

 

2. Example 2 - with icons

Number Counter 1

Custom Module HTML

inner1

 

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>
[row id="ROW_ID" class="ROW_CLASS uk-text-center"]
[col class="span3"]
<h4><i class="pe-7s-world pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">365</h2>
<h4>Employees</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-like pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">28</h2>
<h4>Employees</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-science pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">107</h2>
<h4>Employees</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-config pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">407</h2>
<h4>Employees</h4>
[/col]
[/row]

 

3. Example 3 - with text and button below

Number Counter 2

Custom Module HTML

subinner

<script>
        jQuery(document).ready(function($) {
            $('.counter3').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>
[row id="ROW_ID" class="ROW_CLASS uk-text-center"]
[col class="span3"]
<h2 class="counter3" style="font-weight: 800;">365</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
[button type="default" size="medium" link="#"]Tell Me More[/button]
[/col]
[col class="span3"]
<h2 class="counter3" style="font-weight: 800;">28</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
[button type="default" size="medium" link="#"]Tell Me More[/button]
[/col]
[col class="span3"]
<h2 class="counter3" style="font-weight: 800;">107</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
[button type="default" size="medium" link="#"]Tell Me More[/button]
[/col]
[col class="span3"]
<h2 class="counter3" style="font-weight: 800;">407</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
[button type="default" size="medium" link="#"]Tell Me More[/button]
[/col]
[/row]

 

Style 1 - with overlay effect with the name and social icons below.

Article - Our Team 1

<div class="uk-grid">
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer1.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Michael Dupuis</h4>
<h5>Personal Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
95%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width:95%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
78%
</div>
<h5 style="font-weight: 800;">Experience</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 78%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
86%
</div>
<h5 style="font-weight: 800;">Customer Satisfaction</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 86%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:300}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer3.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Seymour Ferguson</h4>
<h5>Yoga Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
92%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 92%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
69%
</div>
<h5 style="font-weight: 800;">Harmony</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
84%
</div>
<h5 style="font-weight: 800;">Strong Spirit</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 84%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:600}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer2.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Nikita Wilson</h4>
<h5>Yoga Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
99%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 99%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
90%
</div>
<h5 style="font-weight: 800;">Experience</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 90%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
86%
</div>
<h5 style="font-weight: 800;">Fighting Will</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 86%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:900}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer4.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Madeline Watson</h4>
<h5>Personal Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
92%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 92%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
69%
</div>
<h5 style="font-weight: 800;">Harmony</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
84%
</div>
<h5 style="font-weight: 800;">Strong Spirit</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 84%;">
</div>
</div>
</div>


</div>
</div>

Style 2 - with 3 columns - bars, image, social icons and description

Article - Our Team 2

<div class="uk-grid">
    <div class="uk-width-medium-1-3">
<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">80%</div>
<h5 class="uk-panel-title uk-text-left">Marketing</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 80%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">69%</div>
<h5 class="uk-panel-title uk-text-left">Finance</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">73%</div>
<h5 class="uk-panel-title uk-text-left">Accounting</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 73%;"></div>
</div>
</div>

    </div>

    <div class="uk-width-medium-1-3">
<p class="uk-text-center"><img alt="" src="images/Demo/elements/man3.jpg"></p>
<h4 style="text-align: center;">Sean Stark</h4>
<p style="text-align: center;">Design and Development</p>
<p style="text-align: center;">
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>

    </div>
    <div class="uk-width-medium-1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto.</p>
    </div>

</div>
<hr></br>

<div class="uk-grid">
    <div class="uk-width-medium-1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto.</p>
    </div>

    <div class="uk-width-medium-1-3">
<p class="uk-text-center"><img alt="" src="images/Demo/elements/man2.jpg"></p>
<h4 style="text-align: center;">Crystal McGuire</h4>
<p style="text-align: center;">Senior Accountant / CEO</p>
<p style="text-align: center;">
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>

    </div>

    <div class="uk-width-medium-1-3">
<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">90%</div>
<h5 class="uk-panel-title uk-text-left">Joomla</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 90%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">99%</div>
<h5 class="uk-panel-title uk-text-left">Photoshop</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 99%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">77%</div>
<h5 class="uk-panel-title uk-text-left">Coding</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 77%;"></div>
</div>
</div>

    </div>

</div>
<hr></br>

<div class="uk-grid">
    <div class="uk-width-medium-1-3">
<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">80%</div>
<h5 class="uk-panel-title uk-text-left">Marketing</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 80%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">69%</div>
<h5 class="uk-panel-title uk-text-left">Finance</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;"></div>
</div>
</div>

<div class="uk-panel uk-margin-bottom" style="color: #fff;">
<div class="uk-panel-badge uk-badge uk-badge-percent">73%</div>
<h5 class="uk-panel-title uk-text-left">Accounting</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 73%;"></div>
</div>
</div>

    </div>

    <div class="uk-width-medium-1-3">
<p class="uk-text-center"><img alt="" src="images/Demo/elements/man1.jpg"></p>
<h4 style="text-align: center;">Martin Bean</h4>
<p style="text-align: center;">Deep-cover Operative</p>
<p style="text-align: center;">
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-google-plus"></a>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>

    </div>
    <div class="uk-width-medium-1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto.</p>
    </div>

</div>

 

You can check our Demo pages for other variants of our team presentation.

Services 1 page

Our Services

Custom HTML

Position - action

Modul class suffix - title3

<div class="uk-grid uk-margin-large-top uk-text-center">
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-imac"></i>
</div>
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</br>[button type="default" size="medium" link="#"]Learn More[/button]
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-easter37"></i>
</div>
<h4>Logo & Print Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</br>[button type="default" size="medium" link="#"]Learn More[/button]
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-dashboard1"></i>
</div>
<h4>Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</br>[button type="default" size="medium" link="#"]Learn More[/button]
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-pins42"></i>
</div>
<h4>Social Media</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</br>[button type="default" size="medium" link="#"]Learn More[/button]
</div>
</div>
</div>

 

Magic Process

Custom HTML

Position - intop

Modul class suffix - title3

<div class="uk-grid uk-text-left">
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#01 <span style="font-weight: 400; font-size: 20px;">/Identify Problem</span> <i class="pe-7s-right-arrow pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#02 <span style="font-weight: 400; font-size: 20px;">/Idea Generation</span> <i class="pe-7s-right-arrow pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#03 <span style="font-weight: 400; font-size: 20px;">/Project Development</span> <i class="pe-7s-bottom-arrow pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#06 <span style="font-weight: 400; font-size: 20px;">/Forever Friends</span> <i class="pe-7s-loop pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#05 <span style="font-weight: 400; font-size: 20px;">/It's time for celebration</span> <i class="pe-7s-left-arrow pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
<div class="uk-width-medium-1-3">
<h2 style="font-weight: 800;">#04 <span style="font-weight: 400; font-size: 20px;">/Testing and Observing</span> <i class="pe-7s-left-arrow pull-right"></i></h2>
<p>Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim. Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.</p>
</div>
</div>
 

 

Services 1 Call To Action

Custom HTML

Position - subinner

Show Title - NO

<div class="uk-text-center">
<i class="pe-7s-mail pe-4x"></i>
<h3 class="uk-margin-top">If You Like What You See, We Can Work Together And Bring Your Ideas Into Real.</h3>
<h3>So ... What Is Your Next Move?</h3>
<p>[button type="default" size="large" link="#"]Contact Us[/button]</p>
</div>
 

Services 2 page

Services 2

Custom HTML

Position - action

Show Title - NO

 

<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-gear4"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">CMS Development</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-workplace"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">Graphics Design</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-water1"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">Content Production</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-glass"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">Event Planning</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-dashboard1"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">Marketing</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-pay"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 class="header-subtitle">E-Commerce</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>

 

Services Numbers

Custom HTML

Position - position1

Show Title - NO

 

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>
[row id="ROW_ID" class="ROW_CLASS uk-text-center"]
[col class="span3"]
<h4><i class="pe-7s-light pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">100</h2>
<h4>Ideas Per Day</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-like2 pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">25000</h2>
<h4>Clients</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-joy pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">35</h2>
<h4>Vacations</h4>
[/col]
[col class="span3"]
<h4><i class="pe-7s-ribbon pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">1985</h2>
<h4>Est. In Year</h4>
[/col]
[/row]

 

FAQ Sections are modules based ot Roksprocket module. They Are placed in ARTICLES with roksprocket Shortcode [module-247] and [module-249].

FAQ 1

Roksprocket Module

position: without position in the field in order to use only the shortcode in the article.

Lists Layout

Default Theme

Strip HTML Tags: NO

Preview per page 8

Title and Description Text

 

FAQ 2

Roksprocket Module

position: without position in the field in order to use only the shortcode in the article.

Tabs Layout

Default Theme

Tabs Position: Left

Animation: Slide and Fade

Strip HTML Tags: NO

Tab Label and Description Text

Article - Single Portfolio Image

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span9"]
<img src="/sign/images/Demo/elements/logo-design.jpg" alt="Logo Design">
[/col]
[col class="span3"]
<table class="uk-table uk-table-hover">
<tbody>
<tr>
<td><i class="icon-user"></i> Client: <a href="#">DHsign</a></td>
</tr>
<tr>
<td><i class="icon-pencil"></i> Service: Logo Design</td>
</tr>
<tr>
<td><i class="icon-money"></i> Budget: $200</td>
</tr>
<tr>
<td><i class="icon-file-alt"></i> Project Description:</td>
</tr>
</tbody>
</table>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto. Et iusto odio dignissimos ducimus qui blanditiis praesentium lorem ipsum dolor.
<p>[button type="default" size="medium" link="#"]Read More[/button]</p>
[/col]
[/row]

 

2. Related Logo Projects

PRI Portfolio
Module Position: subinner;
Module Class Suffix: title3

Layout Slider

Item with Intro Image and Full Image

Portfolio Style 3

Colors Yes

Primary, secundary Color: #fff;

Article - Single Portfolio Video

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span9"]
[spvideo]https://www.youtube.com/watch?v=vb2eObvmvdI[/spvideo]
[/col]
[col class="span3"]
<table class="uk-table uk-table-hover">
<tbody>
<tr>
<td><i class="icon-user"></i> Client: <a href="#">Joomla!</a></td>
</tr>
<tr>
<td><i class="icon-film"></i> Service: Video Spot</td>
</tr>
<tr>
<td><i class="icon-money"></i> Budget: $200</td>
</tr>
<tr>
<td><i class="icon-file-alt"></i> Project Description:</td>
</tr>
</tbody>
</table>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto. Et iusto odio dignissimos ducimus qui.
<p>[button type="default" size="medium" link="#"]Read More[/button]</p>
[/col]
[/row]

 

2. Related Logo Projects

PRI Portfolio
Module Position: inbottom1;
Module Class Suffix: title3

Layout Slider

Item with Intro Image and Video URL

Portfolio Style 1

Colors Yes

Primary Color #00AEEF

Secondary Color: #333

#fff

 

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:

1. What We Have
Custom HTML module
Module Position: action
Module Class Suffix: barber

<div class="uk-grid uk-grid-divider-2 uk-text-center">
<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-cup pe-3x pe-va"></span>
<h6 style="font-size: 20px;">Award Winning Barbers</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a href="#" target="" class="btn btn-primary btn-">Read More</a>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-scissors pe-3x pe-va"></span>
<h6 style="font-size: 20px;">Full Set Of Services</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a class="btn btn-primary btn-" target="" href="#">Read More</a>
</div>
</div>

<div class="uk-width-medium-1-3">
<div class="hi-icon-wrap">
<span class="hi-icon-wrap hi-icon pe-7s-way pe-3x pe-va"></span>
<h6 style="font-size: 20px;">In Every Major City</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<a class="btn btn-primary btn-" target="" href="#">Read More</a>
</div>
</div>

</div>

 

2. Hotest Trends

Custom HTML module
Module Position: user1
Module Class Suffix: barber

<div data-uk-scrollspy="{cls:'uk-animation-scale-up'}">
<img src="images/Demo/elements/trends.jpg" alt="Moustache Trends" title="Moustache Trends" style="margin: 0 auto; display: block ">
</br><div style="text-align: center">[button type="primary" size="large" link="#"]Read The Full Article[/button]</div>
</div>

 

3. Barber Shop Parallax

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect Effect2
Content Padding 100px 0
Content Class container
Background size Cover
 

in content:

<div class="module barber">
<h3 class="header uk-text-white">Authentic Craftsmen Barber Shop Shampoo</h3>
</div>

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>

<div class="uk-grid uk-text-white">
<div class="uk-width-medium-3-10">
<img alt="Shampoo" src="images/Demo/elements/shampoo.png" />
</div>


<div class="uk-width-medium-3-10">
<p>
<h6 style="font-size: 20px;"><i class="icon-plus-sign uk-text-white"></i> Hair fall Control</h6>
<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</div>
</p>

<p>
<h6 style="font-size: 20px;"><i class="icon-plus-sign uk-text-white"></i> Adds shine to hair</h6>
<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</div>
</p>

<p>
<h6 style="font-size: 20px;"><i class="icon-plus-sign uk-text-white"></i> Remineralizes the skin</h6>
<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</div>
</p>

</div>

<div class="uk-width-medium-4-10 uk-margin-top">

<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="hi-box-white">
<div class="hi-icon-wrap">
<h6 class="counter2" style="font-size: 24px;">1739</h6>
<h4>Since</h4>
</div>
</div>
</div>

<div class="uk-width-medium-1-2">
<div class="hi-box1">
<div class="hi-icon-wrap">
<h6 class="counter2" style="font-size: 24px;">8560</h6>
<h4>U.S. Sales</h4>
</div>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="hi-box1">
<div class="hi-icon-wrap">
<h6 class="counter2" style="font-size: 24px;">7</h6>
<h4>Varieties</h4>
</div>
</div>
</div>

<div class="uk-width-medium-1-2">
<div class="hi-box-white">
<div class="hi-icon-wrap">
<h6 class="counter2" style="font-size: 24px;">2000</h6>
<h4>Happy Men</h4>
</div>
</div>
</div>
</div>


</div>
</div>

 

4. Our Hair Masters
Custom HTML module;
Module Position: top1;
Module Class Suffix: barber

 

<div style="text-align: center;">
[row]
[col class="span3"]
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-percent"><a data-uk-modal href="#barber-1"><img width="50" height="50" style="margin-right: 10px; " title="barber link" alt="Barber link" src="images/Demo/elements/cut3.png"></a></div>
<img alt="Barbers" src="images/Demo/elements/man1.jpg" />
<h6 style="font-size:18px;">Johny Camel</h6>
<p style="margin-top:-10px;color: #aaaaaa;">Master Coiffure<p>
<div id="barber-1" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-frameless">
<a href="" class="uk-modal-close uk-close uk-close-alt"></a>
<img src="images/Demo/elements/hairstyle.jpg" alt="hairstyle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</p>
</div>
</div>
</div>

[/col]

[col class="span3"]
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-percent"><a data-uk-modal href="#barber-2"><img width="50" height="50" style="margin-right: 10px; " title="barber link" alt="Barber link" src="images/Demo/elements/cut4.png"></a></div>
<img alt="Barbers" src="images/Demo/elements/man2.jpg" />
<h6 style="font-size:18px;">Sandra Gong</h6>
<p style="margin-top:-10px;color: #aaaaaa;">Hair Stylist<p>
<div id="barber-2" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-frameless">
<a href="" class="uk-modal-close uk-close uk-close-alt"></a>
<img src="images/Demo/elements/hairstyle.jpg" alt="hairstyle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</p>
</div>
</div>
</div>

[/col]


[col class="span3"]
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-percent"><a data-uk-modal href="#barber-3"><img width="50" height="50" style="margin-right: 10px; " title="barber link" alt="Barber link" src="images/Demo/elements/cut5.png"></a></div>
<img alt="Barbers" src="images/Demo/elements/man3.jpg" />
<h6 style="font-size:18px;">Patrick Connel</h6>
<p style="margin-top:-10px;color: #aaaaaa;">Pro Barber<p>
<div id="barber-3" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-frameless">
<a href="" class="uk-modal-close uk-close uk-close-alt"></a>
<img src="images/Demo/elements/hairstyle.jpg" alt="hairstyle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</p>
</div>
</div>
</div>

[/col]


[col class="span3"]
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-percent"><a data-uk-modal href="#barber-4"><img width="50" height="50" style="margin-right: 10px; " title="barber link" alt="Barber link" src="images/Demo/elements/cut6.png"></a></div>
<img alt="Barbers" src="images/Demo/elements/man4.jpg" />
<h6 style="font-size:18px;">Susanne Ohh</h6>
<p style="margin-top:-10px;color: #aaaaaa;">Hair Stylist<p>
<div id="barber-4" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-frameless">
<a href="" class="uk-modal-close uk-close uk-close-alt"></a>
<img src="images/Demo/elements/hairstyle.jpg" alt="hairstyle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui.</p>
</div>
</div>
</div>

[/col]
[/row]
 

 

5. Barber Services

Custom HTML module;
Module Position: intop1;
Module Class Suffix: barber

<div class="uk-grid">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut1.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 15</strong></h3></div>
<h6 style="font-size: 20px;">Trim</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut2.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 30</strong></h3></div>
<h6 style="font-size: 20px;">Fade</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut3.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 35</strong></h3></div>
<h6 style="font-size: 20px;">Haircut</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

</div>

<div class="uk-grid">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut4.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 10</strong></h3></div>
<h6 style="font-size: 20px;">Beard Trim</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut5.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 30</strong></h3></div>
<h6 style="font-size: 20px;">Shave</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="uk-panel">
<div class="pull-left"><img width="95" height="95" src="images/Demo/elements/cut6.png" alt="Barber Services" title="Barber Services" style="margin-right: 10px; "></div>
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 60</strong></h3></div>
<h6 style="font-size: 20px;">Shave & Cut</h6>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus.</p>
</div>
</div>
</div>

</div>

 

6. Barber Shop Parallax 2

PRI Parallax module;
Module Position: parallax2;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect Effect2
Content Padding 100px 0
Content Class container
Background size Cover

in content:
<div class="module barber">
<h3 class="header uk-text-white">Franchise Opportunities</h3>
</div></br></br>

<div class="uk-grid uk-text-white uk-text-center">

<div class="uk-width-medium-1-3">
<img alt="Franchise Step 1" src="images/Demo/elements/franchise1.png" />
<a class="btn btn-primary btn-large" target="" href="#">More Info</a>
</div>

<div class="uk-width-medium-1-3">
<img alt="Franchise Step 2" src="images/Demo/elements/franchise2.png" />
<a class="btn btn-primary btn-large" target="" href="#">More Info</a>
</div>

<div class="uk-width-medium-1-3">
<img alt="Franchise Step 3" src="images/Demo/elements/franchise3.png" />
<a class="btn btn-primary btn-large" target="" href="#">More Info</a>
</div>

</div>

 

7. Barber Shop Address

Custom HTML module;
Module Position: bottom1;
Show Title: NO

<div style="text-align: center;">
<img alt="Barber Shop" src="images/Demo/elements/barber-logo.png"/>
<h6 style="font-size:24px;">Address</h6>
<p>15 Cliff Street | Griswold CT 06351 | Book: 555.123.456</p>
</div>

 

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

 

Modules Used/ Created:

1. Crafts Fitness & Gym
Custom HTML module;
Module Position: action;
Module Class Suffix: fitness:
 

<div class="uk-grid uk-grid-divider-2" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-heart288"></i></div>
<h4 style="font-weight:800;">01 <span class="uk-text-primary">Cardio</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-thin37"></i></div>
<h4 style="font-weight:800;">02 <span class="uk-text-primary">Lose Fat</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-abdominals"></i></div>
<h4 style="font-weight:800;">03 <span class="uk-text-primary">Build Muscle</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
<div class="uk-panel">
<div class="hi-icon-big"><i class="flaticon-man429"></i></div>
<h4 style="font-weight:800;">04 <span class="uk-text-primary">Stay Healthy</span></h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

</div>



2. Classes

Custom HTML module;
Module Position: user1;
Module Class Suffix: fitness:

 

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span6"]
<div class="pricing-table">
<div class="block professional fl">
<h4 class="title">Cardio Class</h4>
<img src="images/Demo/elements/cardio.png" alt="Fitness Classes">
<div class="content"><h3 class="price"><span>$15</span></h3></div>
<ul class="features">
<li><span class="uk-text-primary pe-7s-clock pe-3x pe-va"></span>10h. - 12h.</li>
<li><span class="uk-text-primary pe-7s-date pe-3x pe-va"></span>Tuesday</li>
<li><span class="uk-text-primary pe-7s-user pe-3x pe-va"></span>Seymour</li>
</ul>
<div class="pt-footer"><a href="#"><h4>Book Now!</h4></a></div>
</div>
</div>
[/col]

[col class="span6"]
<div class="pricing-table">
<div class="block professional fl">
<h4 class="title">Zumba Class</h4>
<img src="images/Demo/elements/zumba.png" alt="Fitness Classes">
<div class="content"><h3 class="price"><span>$35</span></h3></div>
<ul class="features">
<li><span class="uk-text-primary pe-7s-clock pe-3x pe-va"></span>11h. - 13h.</li>
<li><span class="uk-text-primary pe-7s-date pe-3x pe-va"></span>Thursday</li>
<li><span class="uk-text-primary pe-7s-user-female pe-3x pe-va"></span>Madeline</li>
</ul>
<div class="pt-footer"><a href="#"><h4>Book Now!</h4></a></div>
</div>
</div>
[/col]
[/row]


3. Supplements
Custom HTML module;
Module Position: user2;

Roksprocket Module > Lists layout > Default theme
Module Class Suffix: fitness

 

Description field content:

 

<div id="ROW_ID" class="row-fluid ROW_CLASS"><div class="span6"><img src="/sign/images/Demo/elements/diet1.jpg" alt="Fitness Diets"></div><div class="span6"><table class="uk-table uk-table-hover"><tbody><tr><td><i class="icon-user"></i> Author: <a href="#">Seymour</a></td></tr><tr><td><i class="icon-calendar"></i> Duration: 10 Days</td></tr><tr><td><i class="icon-screenshot"></i> Target: Abs</td></tr><tr><td><i class="icon-file-alt"></i> Diet Details:</td></tr></tbody></table>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto.<p><a class="btn btn-primary btn-medium" target="" href="#">Schedule a diet</a></p></div></div><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
 


4. Fitness Parallax
PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect: none
Content Padding 100px 0
Content Class container
Background size Cover

in content:

<div class="uk-grid uk-text-white" data-uk-grid-margin="">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<img class="small" src="images/Demo/elements/pills.png" />
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="pad-spa"><i class="pe pe-7s-science pe-spin pe-3x pull-left"></i><h4 style="font-weight: 800;">Muscle Building</h4> <br />Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum.</div><a class="btn btn-default btn-small" target="" href="#">View More</a>
<div class="pad-spa"><i class="pe pe-7s-science pe-spin pe-3x pull-left"></i><h4 style="font-weight: 800;">Muscle Building</h4> <br />Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum.</div><a class="btn btn-default btn-small" target="" href="#">View More</a>
</div>
</div>

<div class="uk-width-medium-1-3">

</div>

</div>


5. Our Trainers
Custom HTML module;
Module Position: subinner2;
Module Class Suffix: fitness:
<div class="uk-grid">
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer1.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Michael Dupuis</h4>
<h5>Personal Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
95%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width:95%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
78%
</div>
<h5 style="font-weight: 800;">Experience</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 78%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
86%
</div>
<h5 style="font-weight: 800;">Customer Satisfaction</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 86%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:300}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer3.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Seymour Ferguson</h4>
<h5>Yoga Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
92%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 92%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
69%
</div>
<h5 style="font-weight: 800;">Harmony</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
84%
</div>
<h5 style="font-weight: 800;">Strong Spirit</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 84%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:600}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer2.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Nikita Wilson</h4>
<h5>Yoga Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
99%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 99%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
90%
</div>
<h5 style="font-weight: 800;">Experience</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 90%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
86%
</div>
<h5 style="font-weight: 800;">Fighting Will</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 86%;">
</div>
</div>
</div>

</div>
<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:900}">
<div class="uk-thumbnail">
<div class="uk-overlay">
<img alt="" src="images/Demo/elements/trainer4.png">
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4 style="font-weight: 800;">Madeline Watson</h4>
<h5>Personal Trainer</h5>
<a href="" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
</div>
</div>
</div>
</div>

<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
92%
</div>
<h5 style="font-weight: 800;">Dedication</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 92%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
69%
</div>
<h5 style="font-weight: 800;">Harmony</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 69%;">
</div>
</div>
</div>
<div class="uk-panel uk-margin-top">
<div class="uk-panel-badge uk-badge uk-badge-percent">
84%
</div>
<h5 style="font-weight: 800;">Strong Spirit</h5>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 84%;">
</div>
</div>
</div>


</div>
</div>

 

6. Fitness Parallax 2

PRI Parallax module;
Module Position: parallax2;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect: none
Content Padding 100px 0
Content Class container
Background size Cover

in content:

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>

<div class="uk-grid uk-text-white" data-uk-grid-margin="">
<div class="uk-width-medium-2-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}"><img src="images/Demo/elements/sneakers.png" /></div>
</div>

<div class="uk-width-medium-1-5">
<div class="hi-box-white">
<div class="hi-icon-wrap">
<h4><i class="pe-7s-users pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">1739</h2>
<h4>Clients</h4>
</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div class="hi-box1">
<div class="hi-icon-wrap">
<h4><i class="pe-7s-bicycle pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">120486</h2>
<h4>Calories</h4>
</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div class="hi-box-white">
<div class="hi-icon-wrap">
<h4><i class="pe-7s-light pe-3x pe-va"></i></h4>
<h2 class="counter2" style="font-weight: 800;">3451</h2>
<h4>Miles Per Day</h4>
</div>
</div>
</div>

</div>

 

7. Workouts: Exercises & Courses
PRI Portfolio module with 4 items;
Module Position: bottom1;
Module Class Suffix: fitness

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:

 

1. About Our Bakery
Custom HTML module;
Module Position: action;
Module Class Suffix: bakery
 

<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
                            <h3 class="flaticon-cupcake3"></h3>
                        </div>
</div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Pastries</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
                            <h3 class="flaticon-croissant1"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Croissants</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:900}">
                            <h3 class="flaticon-bread9"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Bread & Baguettes</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1200}">
                            <h3 class="flaticon-chocolate1"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Fine Chocolates</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1500}">
                            <h3 class="flaticon-cupcake4"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Cupcakes</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
 
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:1800}">
                            <h3 class="flaticon-chef15"></h3>
                        </div></div>
                        <div class="uk-width-5-6">
                              <h6 style="font-size: 20px;">Delicious Food</h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
 
<img src="images/Demo/elements/macarons.jpg" alt="Macarons">

<div class="module bakery">
<h3 class="header">Most Popular Products</h3>
</div>
<p class="uk-text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="uk-text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
2. Bakery Gallery
RokSprocket Module > Mosaic Layout > Theme: Gallery > Tags: None > Filters: None > 5 rows > 10 items;
Module Position: parallax1;
Module title hidden.

3. Special Weekly Features!
Custom HTML module;
Module Position: intop1;
Module Class Suffix: bakery

<div class="uk-grid">

<div class="uk-width-medium-1-3">
<img alt="Weekly Features" src="images/Demo/elements/cherry.png" style="margin: 0 auto; display: block;" />
<div class="hi-box1" style="width: 100px; margin: 0 auto; display: block;"><h6 class="uk-text-center" style="font-size: 20px;" >$ 4.50</h6></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<img alt="Badges" src="images/Demo/elements/badges-bakery.png" style="margin: 0 auto; display: block; margin-top: 10px;" />
</div>

<div class="uk-width-medium-1-3">
<img alt="Weekly Features" src="images/Demo/elements/walnut.png"  style="margin: 0 auto; display: block;" />
<div class="hi-box3" style="width: 100px; margin: 0 auto; display: block;"><h6 style="font-size: 20px;" class="uk-text-center">$ 3.50</h6></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<img alt="Badges" src="images/Demo/elements/badges-bakery.png" style="margin: 0 auto; display: block; margin-top: 10px;" />
</div>

<div class="uk-width-medium-1-3">
<img alt="Weekly Features" src="images/Demo/elements/choco.png"  style="margin: 0 auto; display: block;" />
<div class="hi-box4" style="width: 100px; margin: 0 auto; display: block;"><h6 style="font-size: 20px;" class="uk-text-center">$ 6.50</h6></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<img alt="Badges" src="images/Demo/elements/badges-bakery.png" style="margin: 0 auto; display: block; margin-top: 10px;" />
</div>

</div>

4. ARTICLE: Bakery Home - Our Story
<div class="module bakery">
<h3 class="header">Our Story</h3>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-2">
<h3 class="uk-margin-large-bottom">Started from little local bakery</h3>
<h5 class="uk-margin-large-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h5>
<div class="uk-grid uk-margin-large-bottom">
<div class="uk-width-1-2">
<ul class="spot">
<li>Delicious Tarts</li>
<li>Chocolate Delights </li>
<li>Fresh Apple Pies</li>
<li>Banana Muffins </li>
<li>Bread & Baguettes</li>
<li>Lemon Cheesecake</li>
</ul>
</div>
<div class="uk-width-1-2">
<ul class="spot">
<li>Delicious Tarts</li>
<li>Chocolate Delights </li>
<li>Fresh Apple Pies</li>
<li>Banana Muffins </li>
<li>Bread & Baguettes</li>
<li>Lemon Cheesecake</li>
</ul>
</div>
</div>
<a href="#" target="" class="btn btn-primary btn-large">Book Now!</a> <a href="#" target="" class="btn btn-default btn-large">Book Now!</a>
</div>
<div class="uk-width-medium-1-2">
<img alt="Touchless" src="images/Demo/elements/chef.png" />
</div>
</div>
 

5. Bakery Call To Action

Custom HTML module;
Module Position: subinner2;
Module Title: Hidden

<h6 style="text-align: center; font-size: 25px;">Do you want to bake with us? We're looking for a full-time baker &nbsp;&nbsp;  [button type="default" size="large" link="#"] Apply Now[/button]</h6>

 

6. Bakery Parallax 2

PRI Parallax module;
Module Position: parallax2;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect : None
Content Padding 100px 0
Content Class container
Background size Cover

Distance: 2000

 

in content:

<div class="module bakery">
<h3 class="header">Our Bakers Produce...</h3>
</div>
</br></br>

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>

<div class="uk-grid" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div class="hi-box-white">
<img style="margin-left: auto; margin-right: auto; display: block;" alt="Our Bakers" src="images/Demo/elements/cook1.png" title="Our Bakers">
<h4 class="uk-text-center" style="margin-bottom: -15px;">Stanly Marshmellow</h4>
</div>
</br>
<h2 class="counter2 uk-text-center" style="font-weight: 800;">7905</h2>
<h4 class="uk-text-center">Cakes Made</h4>
</div>

<div class="uk-width-medium-1-4">
<div class="hi-box1">
<img style="margin-left: auto; margin-right: auto; display: block;" alt="Our Bakers" src="images/Demo/elements/cook2.png" title="Our Bakers">
<h4 class="uk-text-center" style="margin-bottom: -15px;">Stephen Brewbaker</h4>
</div>
</br>
<h2 class="counter2 uk-text-center" style="font-weight: 800;">5020</h2>
<h4 class="uk-text-center">Cakes Made</h4>
</div>

<div class="uk-width-medium-1-4">
<div class="hi-box-white">
<img style="margin-left: auto; margin-right: auto; display: block;" alt="Our Bakers" src="images/Demo/elements/cook3.png" title="Our Bakers">
<h4 class="uk-text-center" style="margin-bottom: -15px;">Diana Sweettooth</h4>
</div>
</br>
<h2 class="counter2 uk-text-center" style="font-weight: 800;">3980</h2>
<h4 class="uk-text-center">Cakes Made</h4>
</div>

<div class="uk-width-medium-1-4">
<div class="hi-box1">
<img style="margin-left: auto; margin-right: auto; display: block;" alt="Our Bakers" src="images/Demo/elements/cook4.png" title="Our Bakers">
<h4 class="uk-text-center" style="margin-bottom: -15px;">Sandra Delicious</h4>
</div>
</br>
<h2 class="counter2 uk-text-center" style="font-weight: 800;">4320</h2>
<h4 class="uk-text-center">Cakes Made</h4>
</div>

</div>

 

7. You Can Find Our Poducts In:

Custom HTML module;
Module Position: bottom1;
Module Class Suffix: bakery

[row]
[col class="span6"][module-170][/col]
[col class="span6"]{loadposition bakery}[/col]
[/row]

 

Module 170 is a RokSprocket Module > Strips Layout > Separated theme > 3 per row; 6 per page items.

Module loaded in position "bakery" is called Bakery Map and it's BT Google Map module.

Both module are assigned to no positions.

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:


1. Request An Appointment
Custom HTML module;
Module Position: action2;
Module Title: Hidden

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}"><h3 style="text-align: center;">Request An Appointment&nbsp;&nbsp;  [button type="default" size="large" link="#"] Submit an appointment[/button] <img src="images/Demo/elements/pet-shcedule.png" alt="pet-shcedule" /></h3></div>

2. Dry vs. Wet vs. Natural Food

Custom HTML module;
Module Position: middle-2;
Module Class Suffix: pet

<div  class="uk-grid uk-grid-divider" data-uk-grid-margin="">

<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<img alt="Pros & Cons" src="images/Demo/elements/pros-cons.jpg">
</div>

<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:300}">
<h4>Dry Food</h4>
<h5><strong>Pros</strong></h5>
<p><i class="icon-plus-sign uk-text-primary"></i> Lower cost</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Ease of feeding & storage</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Dental benefits</p>
<h5><strong>Cons</strong></h5>
<p><i class="icon-minus-sign uk-text-danger"></i> Contain more grains</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Can contain preservatives</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Less palatable</p>
</div>

<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
<h4>Wet Food</h4>
<h5><strong>Pros</strong></h5>
<p><i class="icon-plus-sign uk-text-primary"></i> More appetizing</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Contain more protein & fat</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Easier to chew</p>
<h5><strong>Cons</strong></h5>
<p><i class="icon-minus-sign uk-text-danger"></i> Grater cost</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Easy to gain weight</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Must be kept refrigerated</p>
</div>

<div class="uk-width-medium-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:900}">
<h4>Natural Food</h4>
<h5><strong>Pros</strong></h5>
<p><i class="icon-plus-sign uk-text-primary"></i> Higher energy levels</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Shinier coats</p>
<p><i class="icon-plus-sign uk-text-primary"></i> Cleaner teeth</p>
<h5><strong>Cons</strong></h5>
<p><i class="icon-minus-sign uk-text-danger"></i> Very expensive</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Not suitable for every dog</p>
<p><i class="icon-minus-sign uk-text-danger"></i> Injury from chewed bones</p>
</div>

</div>
</br>
<p class="uk-text-center"><a class="btn btn-primary btn-large" target="" href="#">Read The Whole Article</a></p>

3. Pet Vet Parallax

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect Effect2
Content Effect: None
Content Padding 100px 0
Content Class container
Background size Cover

<div class="module pet">
<h3 class="header uk-text-white">Vet Services</h3></div>
<div class="uk-grid uk-margin-large-top uk-text-white uk-text-center">
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-dog52"></i>
</div>
<h3>Cats and Dogs</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-rabbit5"></i>
</div>
<h3>Exotic and Avian</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-syringe"></i>
</div>
<h3>Animal Vaccines</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel cr-panel">
<div class="cr-icon">
<i class="flaticon-310"></i>
</div>
<h3>Animal Food</h3>
<p>Veterinary medicine is the branch of medicine that deals with the prevention, diagnosis and treatment of disease, disorder and injury in animals</p>
<a class="btn btn-primary btn-large" target="" href="#">Learn More</a>
</div>
</div>
</div>

4. Adopt & Testimonials

Custom HTML module;
Module Position: top1;
Module Title: Hidden

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span6"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="module pet"><h3 class="header">Adopt A Pet</h3></div>
[module-283]
</div>
[/col]

[col class="span6"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="module pet"><h3 class="header">Testimonials</h3></div>
[module-159]
</div>
[/col]

[/row]

Module 283 is a RokSprocket module > Lists Layout > Default theme > Strip HTML Tags: No

Description code for one item:

<div id="ROW_ID" class="row-fluid ROW_CLASS"><div class="span6"><img src="/sign/images/Demo/elements/pet1.jpg" alt="Adopt A Pet"></div><div class="span6"><table class="uk-table uk-table-hover"><tbody><tr><td><i class="icon-bullhorn"></i> Name: <a href="#">Buch</a></td></tr><tr><td><i class="icon-hand-right"></i> Type: Dog</td></tr><tr><td><i class="icon-star"></i> Breed: Sheperd</td></tr><tr><td><i class="icon-calendar"></i> Years: 2</td></tr></tbody></table>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores, ducimus qui blanditiis eos et accusamus et iusto.<a class="btn btn-primary btn-medium" target="" href="#">Read More</a></div></div>

Module 159 is a RokSprocket module > Strips Layout > Separated theme > Strip HTML Tags: No

Title for one item:

<div> Darel Dexter, <small>Pet: Irish Setter, Lucky</small></div>

Description for one item:

<img style="margin-right: 10px; float: left;"   title="Testimonials" alt="Testimonials" src="images/Demo/elements/pet1.png"  class="img-circle"height="85" width="85" /><p class="uk-margin-top uk-text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque </p>

5. Featured Vaccine Plan - Puppy

Custom HTML module;
Module Position: subinner;
Module Class Suffix: pet

<div class="uk-grid uk-grid-divider-3" data-uk-grid-margin="">

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<span class="pe-7s-note2 pe-3x"></span>
<h3><strong>Week 8</strong></h3>
<h4>Vaccines starting at about 8 weeks of puppy's age.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<span class="pe-7s-note2 pe-3x"></span>
<h3><strong>Week 12</strong></h3>
<h4>The vaccines are repeated every 3-4 weeks until 4 months.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<span class="pe-7s-note2 pe-3x"></span>
<h3><strong>Week 16</strong></h3>
<h4>Each set includes age appropriate vaccines.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<span class="pe-7s-note2 pe-3x"></span>
<h3><strong>Week 20</strong></h3>
<h4>Each set includes an examination and costs $65.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box4">
<div class="hi-icon-wrap">
<span class="pe-7s-ribbon pe-3x"></span>
<h3><strong>More</strong></h3>
<h4>Vaccines for DHPP, Bordatella, Rabies.</h4>
</div>
</div>

</div>
</div>
</div>

</div>


6. Pets Gallery
PRI Parallax module > Grid Layout > 8 items > Item Gutter: 0 > Show Filters: No;
Module Position: position1;
Module Title Hidden

7. Working Hours

Custom HTML module;
Module Position: inbottom1;
Module Title: Hidden

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span6"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<div class="module pet"><h3 class="header">Common Emergencies</h3></div>
<img alt="Emergencies" src="images/Demo/elements/emergencies.jpg">
</div>
[/col]
[col class="span6"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<div class="module pet"><h3 class="header">Working Hours</h3></div>
<table class="uk-table uk-table-hover">
<tbody>
<tr>
<td>Monday - Friday</td>
<td><span class="pull-right"><i class="icon-time"></i> 9:00 AM - 08:00 PM</span></td>
</tr>
<tr>
<td>Saturday</td>
<td><span class="pull-right"><i class="icon-time"></i> 12:00 AM - 06:00 PM</span></td>
</tr>
<tr>
<td>Sunday</td>
<td><span class="uk-badge uk-badge-danger pull-right"> Closed</span></td>
</tr>
</tbody>
</table>
<h3 class="uk-margin-top uk-margin-bottom" style="text-align: center;"><i class="icon-phone uk-badge uk-badge-danger"></i> 555 - 896 - 366</h3>
<h3 class="" style="text-align: center;"><i class="icon-phone uk-badge uk-badge-danger"></i> 555 - 896 - 377</h3>
</div>
[/col]
[/row]
 

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:

1. Choose Your Type Of Yoga
Custom HTML module;
Module Position: action;
Module Class Suffix: yoga

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-meditation1"></div>
<h4>Bikram</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-man272"></div>
<h4>Hatha</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-arch1"></div>
<h4>Vinyasa</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[col class="span3"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
<div class="hi-icon-wrap">
<div class="hi-icon-wrap hi-icon flaticon-yoga13"></div>
<h4>Kundalini</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
[/col]
[/row]

2. About Yoga
Custom HTML module;
Module Position: action2;
Module Class Suffix: yoga

 

<div style="text-align: center;">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}"><img alt="Yoga" src="images/Demo/elements/yoga1.png"></div>
</br></br><div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><a class="btn btn-default btn-large" target="" href="#">Read More</a>
</div>

3. FAQ Yoga
Custom HTML module;
Module Position: action3;
Module Class Suffix: yoga

 

<div style="text-align: center;">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}"><img alt="Yoga" src="images/Demo/elements/yoga2.png"></div>
</br></br><div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><a class="btn btn-default btn-large" target="" href="#">Read More</a>
</div>

 

4. Yoga Vocabulary
Custom HTML module;
Module Position: action4;
Module Class Suffix: yoga

 

<div style="text-align: center;">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:900}"><img alt="Yoga" src="images/Demo/elements/yoga3.png"></div>
</br></br><div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><a class="btn btn-default btn-large" target="" href="#">Read More</a>
</div>

 

5. Yoga Courses & Trainings

Custom HTML module;
Module Position: user1;
Module Class Suffix: yoga

 

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose1.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Monday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose2.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Tuesday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose3.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Wednesday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose4.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Thursday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose5.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Friday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose6.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Saturday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose7.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Sunday</h3>
  <p>Check All Yoga Classes For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pose8.png" alt="Yoga Courses & Trainings"/>
  <figcaption>
  <h3>Levels<span> 1 - 4</span></h3>
  <p>Check All Yoga Trainings For This Day</p>
  <a href="#">All Classes</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

6. Meet Our Trainers
RokSprocket Module > Grids Layout > Columns: 4 > 6 items;
Module Position: middle-l;
Module Class Suffix: fitness

 

7. Yoga Parallax

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect: None
Content Padding 100px 0
Content Class container

Background size Cover

 

in content:

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>

<div class="uk-grid uk-text-white" data-uk-grid-margin="">
<div class="uk-width-medium-2-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}"><img src="images/Demo/elements/yogalicious.png" /></div>
</div>

<div class="uk-width-medium-3-5">
<div class="module yoga"><h3 class="header">Welcome to the 3rd Yoga Festival</h3></div>

<h4 class="uk-text-center">You're invited to the 3rd annual Yoga Festival in San Fran</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h5>
<div class="uk-grid uk-margin-large-bottom">
<div class="uk-width-1-2">
<ul class="spot">
<li>Meet all famous trainers</li>
<li>Learn what is Yoga</li>
<li>Get free vouchers for practices</li>
<li>Free training sessions all festival days</li>
<li>Learn from the best</li>
<li>Share your experience</li>
</ul>
</div>
<div class="uk-width-1-2">
<ul class="spot">
<li>Free Pilates courses vouchers</li>
<li>We're giving free Yoga mats</li>
<li>Lunch & Coffee included</li>
<li>Special appearance by Diego Kundalini</li>
<li>8 days of pure Yoga experience</li>
<li>And so much more...</li>
</ul>
</div>
</div>
<div class="uk-text-center"><a href="#" target="" class="btn btn-default btn-large">Book Your Ticket Now!</a></div>

</div>

</div>

 

8. Yoga Diets

Custom HTML module;
Module Position: top1;
Module Class Suffix: yoga

 

<div class="uk-grid">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
<img class="uk-border-circle" alt="Yoga Diets" src="images/Demo/elements/diet3.jpg" style="margin: 0 auto; display: block;" /></div></br>
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}"><div class="hi-box1" style="width: 200px; margin: 0 auto; display: block;"><h3 class="uk-text-center" style="padding-top: 10px;">Kundalini Diet</h3></div></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><div class="uk-text-center">[button type="default" size="medium" link="#"]Read More[/button]</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
<img class="uk-border-circle" alt="Yoga Diets" src="images/Demo/elements/diet4.jpg" style="margin: 0 auto; display: block;" /></div></br>
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}"><div class="hi-box1" style="width: 200px; margin: 0 auto; display: block;"><h3 class="uk-text-center" style="padding-top: 10px;">Bikram Diet Plan</h3></div></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><div class="uk-text-center">[button type="default" size="medium" link="#"]Read More[/button]</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay: 900}">
<img class="uk-border-circle" alt="Yoga Diets" src="images/Demo/elements/diet5.jpg" style="margin: 0 auto; display: block;" /></div></br>
<div data-uk-scrollspy="{cls:'uk-animation-slide-bootom', delay:900}"><div class="hi-box1" style="width: 200px; margin: 0 auto; display: block;"><h3 class="uk-text-center" style="padding-top: 10px;">Diet For Stomach</h3></div></div>
<div class="uk-margin-large-top uk-text-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</br><div class="uk-text-center">[button type="default" size="medium" link="#"]Read More[/button]</div>
</div>

</div>

 

9. Check our videos

Custom HTML module;
Module Position: subinner;
Module Class Suffix: yoga

<p style="text-align: center;">Educational Yoga Related Videos</p>

 

10. Yoga Videos

PRI Portfolio module with 4 items;
Module Position: parallax2;
Module Class Suffix: title3

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:

1. What We Offer
Custom HTML module;
Module Position: action;
Module Class Suffix: coffee
[row id="ROW_ID" class="ROW_CLASS"]

[col class="span6"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/coffee1.jpg" alt="Coffee"/>
  <figcaption>
  <h3><i class="pe-7s-coffee"></i> Tasteful <span>Coffee</span></h3>
  <p>Only the finest coffee blends in our coffee shops!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span6"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/coffee2.jpg" alt="Coffee"/>
  <figcaption>
  <h3><i class="pe-7s-star"></i> Delicious <span>Cakes</span></h3>
  <p>Take a moment and enjoy our amazing deserts!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

 

2. Morning Menu

Custom HTML module;
Module Position: user1;
Module Class Suffix: coffee

RokSprocket module > Tabs layout > Tabs position: Top > Strip HTML tags: No | Content is pulled from Articles

Article content:

<div class="uk-grid">
   <div class="uk-width-medium-2-10 uk-text-center"><img alt="coffee1" src="images/Demo/elements/menu1.png"></div>
   <div class="uk-width-medium-2-10">
   <h3>Coffee Latte</h3>
   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup.</p>
   </div>
   <div class="uk-width-medium-1-10"><h3><strong>$3.99</strong></h3></div>


   <div class="uk-width-medium-2-10 uk-text-center"><img alt="coffee2" src="images/Demo/elements/menu2.png"></div>
   <div class="uk-width-medium-2-10">
   <h3>Latte Macchiato</h3>
   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup.</p>
   </div>
   <div class="uk-width-medium-1-10"><h3><strong>$4.59</strong></h3></div>


</div>

<div class="uk-grid">
   <div class="uk-width-medium-2-10 uk-text-center"><img alt="coffee3" src="images/Demo/elements/menu3.png"></div>
   <div class="uk-width-medium-2-10">
   <h3>Cappucino</h3>
   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup.</p>
   </div>
   <div class="uk-width-medium-1-10"><h3><strong>$2.49</strong></h3></div>


   <div class="uk-width-medium-2-10 uk-text-center"><img alt="coffee4" src="images/Demo/elements/menu4.png"></div>
   <div class="uk-width-medium-2-10">
   <h3>Swartz Coffee</h3>
   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup.</p>
   </div>
   <div class="uk-width-medium-1-10"><h3><strong>$1.59</strong></h3></div>


</div>
 


3. Barista Advices Parallax
PRI Parallax module;
Module Position: parallax1;
Module Title Hidden

Effect Effect1
Content Effect: None
Content Padding 100px 0
Content Class container
Background size Cover
<div class="module coffee">
<h3 class="header uk-text-white">Barista Advices</h3>
</div>

<div class="uk-grid uk-text-white">

<div class="uk-width-medium-2-3">
<p>
<h4 class="uk-text-primary"><i class="pe-7s-coffee pe-2x pe-va  uk-margin-right"></i> How To Froth Milk</h4>
<div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti. Quisque sodales, purus et maximus condimentum, neque erat porttitor turpis, vitae eleifend lectus dolor non neque. Ut eget elementum ligula.</div>
</p>

<p>
<h4 class="uk-text-primary"><i class="pe-7s-coffee pe-2x pe-va uk-text-primary uk-margin-right"></i>  How To Make An Espresso</h4>
<div>Cras sit amet congue lorem, et euismod sapien. Sed sed semper mauris, vitae suscipit nunc.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti, commodo eget vehicula nec, aliquam sit amet mi.</div>
</p>


<p>
<h4 class="uk-text-primary"><i class="pe-7s-coffee pe-2x pe-va uk-text-primary uk-margin-right"></i>  How To Make A Cappuccino</h4>
<div>Suspendisse bibendum, libero ut molestie pretium, velit orci euismod erat, nec eleifend tellus sem a metus. Vestibulum vitae. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum. </div>
</p>

</div>

<div class="uk-width-medium-1-3">
<img alt="Barista" src="images/Demo/elements/barista.png" />
</div>

</div>


4. Served On Ice!
Custom HTML module;
Module Position: top1;
Module Class Suffix: coffee

<div class="magnify">
<div class="magnify-zoom"></div>
<img class="small" src="images/Demo/elements/1.png" /></div>

5. Choose Your Flavor
Custom HTML module;
Module Position: top2;
Module Class Suffix: coffee
[row id="ROW_ID" class="ROW_CLASS"]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/3.png" alt="Smoothies"/>
  <figcaption>
  <h3>Mango<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/4.png" alt="Smoothies"/>
  <figcaption>
  <h3>Strawberry<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/5.png" alt="Smoothies"/>
  <figcaption>
  <h3>Blueberry<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/6.png" alt="Smoothies"/>
  <figcaption>
  <h3>Apple<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/7.png" alt="Smoothies"/>
  <figcaption>
  <h3>Mint<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span4"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/8.png" alt="Smoothies"/>
  <figcaption>
  <h3>Bubblegum<span> Icy</span></h3>
  <p>Smoothies On Ice</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

6. Coffee Call To Action
Custom HTML module;
Module Position: su;
Module Title Hidden

<h3 style="text-align: center;">You want some of this Craftsmen coffee! Get It Now &nbsp;&nbsp;  [button type="warning" size="large" link="#"] Buy Coffee![/button]</h3>

7. We Are Organic Parallax

PRI Parallax module;
Module Position: parallax2;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect: None
Content Padding 100px 0
Content Class container
Background size Cover
<div class="module coffee">
<h3 class="header uk-text-white">We Are 100% Organic!</h3>
</div>
</br></br>

<script>
        jQuery(document).ready(function($) {
            $('.counter2').counterUp({
                delay: 10,
                time: 1000
            });
        });
</script>

<div class="uk-grid uk-text-center" data-uk-grid-margin="">

<div class="uk-width-medium-1-6">
</br></br></br></br>
<div class="hi-box-white">
<h2 class="counter2 uk-text-center" style="font-weight: 800;">18</h2>
<h4 class="uk-text-center">Variety</h4>
</div>
</div>

<div class="uk-width-medium-1-6">
</br></br></br></br>
<div class="hi-box1">
<h2 class="counter2 uk-text-center" style="font-weight: 800;">12075</h2>
<h4 class="uk-text-center">Coffees Made</h4>
</div>
</div>

<div class="uk-width-medium-2-6">
<img style="margin-bottom: -15px;" src="images/Demo/elements/organic.png" alt="Organic">
</div>

<div class="uk-width-medium-1-6">
</br></br></br></br>
<div class="hi-box1">
<h2 class="counter2 uk-text-center" style="font-weight: 800;">218</h2>
<h4 class="uk-text-center">Employees</h4>
</div>
</div>

<div class="uk-width-medium-1-6">
</br></br></br></br>
<div class="hi-box-white">
<h2 class="counter2 uk-text-center" style="font-weight: 800;">7</h2>
<h4 class="uk-text-center">Countries</h4>
</div>
</div>

</div>

8. Store Locator

Custom HTML module;
Module Position: full-l;
Module Title Hidden

<div style="text-align: right;">
<img src="images/Demo/elements/powder.jpg" alt="Coffee Shop Features">
</div>

9. Coffee Map
BT Google Maps module;
Module Position: full-r;
Module Title Hidden

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

1. Tailor Made / Collections

Custom HTML module;
Module Position: action;
Module Style Suffix: tailor

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model1.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Night <span>Wish</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model2.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Party <span>Star</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model3.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> French <span>Feel</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/model4.jpg" alt="img02"/>
  <figcaption>
  <h3><i class="pe-7s-scissors"></i> Haute <span>Coute</span></h3>
  <p>Be amazing with our latest dresses. <br>Take a look!</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

2. Tailor Services

Custom HTML module;
Module Position: user1;
Module Style Suffix: tailor

 

<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-mannequin1"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Clothing Alterations</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-male200"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Men’s Suits</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-stylish12"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Special Dresses</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
<div class="uk-grid">
                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-triple10"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Fashion Advising</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-female87"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Clothes copying</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-grid">
                        <div class="uk-width-1-6">
                            <h3 class="flaticon-hanger"></h3>
                        </div>
                        <div class="uk-width-5-6">
                              <h4 style="font-weight: 800;" class="header-subtitle">Relining</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>

 

3. How It Works

Custom HTML module;
Module Position: middle-l;
Module Class Suffix: tailor

 

<div class="uk-grid uk-grid-divider-3" data-uk-grid-margin="">

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box1">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/design.png" alt="How It Works">
<h4><strong>Choose Design</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-dark">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/fabric.png" alt="How It Works">
<h4><strong>Select Fabric</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box1">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/measure.png" alt="How It Works">
<h4><strong>Measure Yourself</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-4">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-dark">
<div class="hi-icon-wrap">
<img src="images/Demo/elements/wear.png" alt="How It Works">
<h4><strong>Wear Your Suit</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur elit.</p>
</div>
</div>

</div>
</div>
</div>

</div>

 

4. Tailor Parallax 1

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect: Effect2
Content Effect: Effect2
Content Padding 100px 0
Content Class container
Background size Cover

 

in content:

<div style="text-align: center;" class="uk-grid uk-text-white">
<div class="uk-width-medium-1-2">
<div class="uk-vertical-align uk-panel" style="height: 400px;">
<div class="uk-vertical-align-middle ">
<div class="module tailor"><h3 class="header">We Can Design Your Dress From A Concept...</h3></div>
<h4>Place your content in a parallax module wherever you want on the page and create a mindblowing presentation.</h4>
<h4 class="uk-margin-large-top">"A girl should be two things: classy and fabulous." /Coco Chanel/</h4>
</div>
</div>
</div>
<div class="uk-width-medium-1-2">
<img alt="dress" src="images/Demo/elements/dress-sketch.png" />
</div>
</div>

 

5. Tailor Parallax 2

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect: Effect2
Content Effect: Effect2
Content Padding 100px 0
Content Class container
Background size Cover

 

in content:

<div style="text-align: center;" class="uk-grid uk-text-white">
<div class="uk-width-medium-1-2">
<div class="uk-vertical-align uk-panel" style="height: 400px;">
<div class="uk-vertical-align-middle ">
<div class="module tailor"><h3 class="header">... and to bring into real your dream clothings. Be fabulous with tailor made clothes!</h3></div>
<h4 class="uk-margin-large-top">We selected for you a collection of more than 100 icons from Flaticon for many types of business. </h4>
<h4 class="uk-margin-large-top">"I like my money right where I can see it... hanging in my closet." /Carrie Bradshaw/</h4>
</div>
</div>
</div>
<div class="uk-width-medium-1-2">
<img alt="dress" src="images/Demo/elements/dress.png" />
</div>
</div>

 

6. Tailor Call To Action

Custom HTML module;
Module Position: top1;
Show title: No

 

<h3 class="uk-text-center"><strong>Are you interested enough? Order your suit now!</strong> &nbsp;&nbsp;  [button type="primary" size="large" link="#"] Order[/button]</3>

 

7. Custom Tailored Products

Custom HTML module;
Module Position: intop1;
Module class suffix: tailor

 

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro1.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $19</span></h3>
  <p>Jackets & Sweaters</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro2.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $12</span></h3>
  <p>Tank Tops</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro3.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $38</span></h3>
  <p>Outerwear</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro4.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $7</span></h3>
  <p>Beach Stuff</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

[row id="ROW_ID" class="ROW_CLASS"]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro5.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $22</span></h3>
  <p>Custom Shirts</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro6.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $69</span></h3>
  <p>Custom Shoes</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro7.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $55</span></h3>
  <p>Shoes</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[col class="span3"]
<div class="grid">
<figure class="effect-crafty">
  <img src="images/Demo/elements/pro8.png" alt="Custom Tailored Products"/>
  <figcaption>
  <h3>From<span> $49</span></h3>
  <p>Jackets Again</p>
  <a href="#">All Products</a>
  </figcaption>            
</figure>
</div>
[/col]

[/row]

 

8. Our Successful Story

Custom HTML module;
Module Position: subinner;
Module class suffix: tailor

 

[row id="ROW_ID" class="ROW_CLASS"]
[col class="span6"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
<img src="images/Demo/elements/sewing.png" alt="Sewing Machine">
</div>
[/col]
[col class="span6 uk-text-center"]
<div data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
<h4>We have started as a small sewing company...</h4>
<p>Back in 1997 we have started our business working mainly for individual customers, taking small custom jobs. 17 years later we own 23 studios in North America and 34 stores in Europe. We have build a brand and loyal customers all over the world. We strive for greatness and we have proved that we are one of the best custom tailor designer houses in the world.</p>
</br></br>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
</br></br>
[button type="default" size="large" link="#"]Read The Whole Story[/button]
</div>
[/col]
[/row]

IMPORTANT - WHEN USING SHORTCODES IN CUSTOM HTML MODULES ENABLE "Prepare Content" OPTION FROM "Options" TAB IN THE MODULE SETTINGS! Otherwise the shortcode would not work!

Modules Used/ Created:

1. About Crafts Tattoo Studio
Custom HTML module;
Module Position: action;
Module Class Suffix: tattoo

<div style="text-align: center;"  class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-horse110"></h3>
<h4>Designing Since '99</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-tribal3"></h3>
<h4>Award Winning Tattoo Artists</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
<div class="uk-width-medium-1-3  bigicon">
<h3 class="flaticon-easter37"></h3>
<h4>Specialized In Tribal</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>

 

2. If The Answer Is...

Custom HTML module;
Module Position: user1;
Module Class Suffix: tattoo
 

<div class="uk-grid uk-text-center">
<div class="uk-width-medium-1-5">
<div class="uk-panel">
<div class="hi-box1"><h4 class="uk-text-left" >Are you comfortable knowing the tattoo is permanent?</h4></div>
</div>

<div class="uk-panel">
<div class="hi-box4"><h4 class="uk-text-left" >Does the shop use disinfectant before and after each client?</h4></div>
</div>

<div class="uk-panel">
<div class="hi-box1"><h4 class="uk-text-left" >Are you okay knowing the tattoo will change over time?</h4></div>
</div>

</div>
<div class="uk-width-medium-3-5">
<div class="uk-panel">
<img src="images/Demo/elements/big-yes.png" alt="YES!">
</div>
</div>
<div class="uk-width-medium-1-5">
<div class="uk-panel">
<div class="hi-box1"><h4 class="uk-text-right" >Can you fix bad tattoos or refresh or remove the old ones?</h4></div>
</div>

<div class="uk-panel">
<div class="hi-box4"><h4 class="uk-text-right" >Can you take the pain & responsibility for your tattoo experience?</h4></div>
</div>

<div class="uk-panel">
<div class="hi-box1"><h4 class="uk-text-right" >Do you have the money right now to afford your dream tattoo?</h4></div>
</div>
</div>
</div>
 

3. Our Artists

Custom HTML module;
Module Position: middle-l;
Module Class Suffix: tattoo

<div data-uk-scrollspy="{cls:'uk-animation-fade'}">
[row id="ROW_ID" class="ROW_CLASS"]
[col class="span3"]
<h3>Armando Wells</h3>
<h5 class="uk-text-danger uk-text-bold">478 Tattoos Made</h5>
<p align="justify">Armando is the leading artist at Craftsmen Tattoo Studio. His known as "Leonardo" in New York City where all the stars have their tattoos made by him.</p>
<p align="justify">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
[button type="primary" size="medium" link="#"]Book Armando[/button]
[/col]
[col class="span3"]
<img title="Tattoo Artists" src="images/Demo/elements/artist.png" alt="Tattoo Artists" />
[/col]
[col class="span3"]
<img title="Tattoo Artists" src="images/Demo/elements/artist2.png" alt="Tattoo Artists" />
[/col]
[col class="span3 uk-text-right"]
<h3>Chris "CJ" Jones</h3>
<h5 class="uk-text-danger uk-text-bold">963 Piercings Made</h5>
<p align="justify">CJ is the newest member of Craftsmen Tattoo, but his is very experienced with more than 15 years in the Tats business. Known for his "star" tattoos</p>
<p align="justify">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
[button type="primary" size="medium" link="#"]Book CJ Jones[/button]
[/col]
[/row]
</div>

4. Tattoo Video Parallax

Parallax Type: Video

PRI Parallax module;
Module Position: parallax1;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect: none
Content Padding 150px 0
Content Class container
Background size Cover

in content:

<img alt="Lords Of The Ink" src="images/Demo/elements/lords.png">

5. Services & Rates

Custom HTML module;
Module Position: top1;
Module Class Suffix: tattoo

<div class="uk-grid uk-grid-divider-2" data-uk-grid-margin="">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-top'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 75</strong></h3></div>
<h4 style="font-weight:800;">Tattoo <span class="uk-text-primary">Pricing</span> / per hour</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-top'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>+ $ 25</strong></h3></div>
<h4 style="font-weight:800;">Tattoo <span class="uk-text-primary">Designing</span> / additional</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-top'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 120</strong></h3></div>
<h4 style="font-weight:800;">Tattoo <span class="uk-text-primary">Removal</span> / per session</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

</div>

<div class="uk-grid uk-grid-divider-2" data-uk-grid-margin="">

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 35</strong></h3></div>
<h4 style="font-weight:800;">Piercing <span class="uk-text-primary">Pricing</span> / ear</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 65</strong></h3></div>
<h4 style="font-weight:800;">Piercing <span class="uk-text-primary">Pricing</span> / facial/ oral</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

<div class="uk-width-medium-1-3">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">
<div  class="hi-icon-big"><h3 style="font-size: 82px; margin-top: -50px !important;"><strong>$ 42</strong></h3></div>
<h4 style="font-weight:800;">Piercing <span class="uk-text-primary">Pricing</span> / navel</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</div>
</div>
</div>

</div>

6. Our Projects: Tattoo Gallery

Workouts: Exercises & Courses
PRI Portfolio module with 4 items;
Module Position: intop1;
Module Class Suffix: tattoo

7. Tattoo After Care

Custom HTML module;
Module Position: subinner;
Module Class Suffix: tattoo

<div class="uk-grid uk-grid-divider-3" data-uk-grid-margin="">

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<h3><strong>Step 1</strong></h3>
<h4>Wash your hands before touching your tattoo.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<h3><strong>Step 2</strong></h3>
<h4>Remove bandage 2-3 hours after getting it.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<h3><strong>Step 3</strong></h3>
<h4>Use an anti-bacterial liquid soap to wash it.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<h3><strong>Step 4</strong></h3>
<h4>Pat your tattoo with a paper towel or let the tattoo air dry.</h4>
</div>
</div>

</div>
</div>
</div>

<div class="uk-width-medium-1-5">
<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom'}">
<div class="uk-panel">

<div class="hi-box-white">
<div class="hi-icon-wrap">
<h3><strong>Step 5</strong></h3>
<h4>Use lotion for 2 - 3 weeks, 2-3 days daily for your tattoo.</h4>
</div>
</div>

</div>
</div>
</div>

</div>

8. Tattoo Testimonials Parallax

PRI Parallax module;
Module Position: parallax2;
Module Title Hidden Show Title: NO

Effect Effect1
Content Effect Effect2
Content Padding 100px 0
Content Class container
Background size Cover

in content:

<div class="module tattoo"><h3 class="header uk-text-white">What Our Customers Are Saying</h3></div>
</br>
[module-280]

 

Module 280 is a RokSprocket Module > Quotes layout.

The google maps used in Contacts page  is from http://bowthemes.com.

If you use only the template, not the quickstart package, you can download the map module from here: http://bowthemes.com/bt-google-maps/download.html . You can find and extended documentation for the map at the same link. To be able to download the  module and documentation, You need to register in the developer's site - it is totally free.

 

Stock Videos

Stock Images

Free Images

Credits