Conto

Accounting, Tax, Finance Joomla Template


Conto - Accounting, Tax, Finance and Consulting Joomla Template

Quickstart package for Joomla 3.x +  Template Only

Author: PixelHut

Thank you for buying our theme! We hope Conto will suit your needs in developing your site. With Conto- Accounting, Tax, Finance and Consulting Joomla Template you can build your corporate / business even freelancer or creative Joomla website. This template is orientated to every company, involved in accounting, consulting and finance industry sector, but you cat use it basically for every business/corporate website, because you have everything that you ever need in it.  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.

Enjoy Conto's features and ideas!

You can choose to install the template 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 only use the 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 template file in your computer and select it > Click "Upload & Install"
4. 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.

 

All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in templates/TEMPLATE-NAME/css/custom.css.

Customizations from the template settings page:

First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called TEMPLATE-NAME - Default). You will find 9 tabs as follows:

  1. Basic (basic template options)
  2. Presets (define main color theme)
  3. Layout (template layout and module positions)
  4. Menu (menu options)
  5. Typography (define heading, menu and content fonts)
  6. Custom Code (add custom css or js)
  7. Advanced (cache and LESS settings)
  8. Blog (comments, social share and post format)
  9. Assignment (assign the template to specific menus)

1. Basic Tab:

Header:

Boxed Layout: choose between boxed or full-width layout.

Logo:

Body Background Image:

Footer:

Social Icons:

Contact Information:

Coming Soon:

2. Presets:

By default you have 4 preset styles with color schemes included. By default you can choose 3 main colors:

Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.

3. Layout:

By default in the Layout tab you will find the preset modle positions and template layout. You can either use the created module positions or create your own module positions.

Customizing module position or entire row from the template settings:

Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. Per example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.

Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.

4. Menu:

5. Typography:

From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.

6. Custom Code: here you can add custom lines of code if needed.

7. Advanced:

Cache Settings:

Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files.

8. Blog:

9. Assignment: assign any of your menus to the template.

This option is used mostly when you want to display different preset on a different menu.

If you want to have a different color theme on any of your menus you need to:

Site admin > Extensions > Template Manager -> click on Conto.

In the Basic Tabs:

Header
Sticky Header: Yes

Favicon
Select your favicon and save it.

Boxed Layout
Enable No, but if you want to use the boxed version, you can just switch to Yes.

Logo
Everything is explained in Changing the Logo section in the documentation.
 

To use the presets and change colors go to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on Conto template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

Conto template comes with 6 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6
 

Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > Conto > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.

To create new module positions you need to:

1. Open templates/conto/templateDetails.xml and locate the following lines:

<positions>
        <position>title</position>
        <position>logo</position>


2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):

<positions>
        <position>title</position>
        <position>newposition</position>
        <position>logo</position>


- save and close the file

3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.

4. Go to templates/conto/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition


5. Finally create a module and publish it in the new position.

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 - download and install JCE from https://www.joomlacontenteditor.net/

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 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.

Now with the new Helix 3 Framework you can set your font family and font size from the Admin manager of the template. You can choose different font for every heading size, body font and menu font. YOu can even set a Custom Font (Apply this google font to any custom CSS selector.).

 

Headings

<h1 class="uk-margin-bottom">h1. Heading 1</h1>
<h2 class="uk-margin-bottom">h2. Heading 2</h2>
<h3 class="uk-margin-bottom">h3. Heading 3</h3>
<h4 class="uk-margin-bottom">h4. Heading 4</h4>
<h5 class="uk-margin-bottom">h5. Heading 5</h5>
<h6 class="uk-margin-bottom">h6. Heading 6</h6>

Dropcap

<p class="sp-dropcap">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. 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. 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>

HTML & Highlights

<p><strong>Lorem</strong> <code>(bold)</code> is the most <em>Awesome</em> <code>(italic)</code> sample text invented eever. We are here from the beginning to the end, delivering <u>Great Combinations</u> <code>(underline)</code> of text example. Duis aute irure dolor in reprehenderit <ins>voluptate velit</ins> <code>(ins)</code> dolore magna aliqua <mark>7 years</mark> <code>(mark)</code>  aliquip ex ea commodo! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <mark>eiusmod tempor incididunt ut labore</mark> 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 esse cillum dolore eu fugiat nulla pariatur. <ins>Excepteur sint occaecat cupidatat non proident</ins>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Blockquotes

<p class="blockquote-pc">The function of education is to teach one to think intensively and to think critically. Intelligence plus character - that is the goal of true education.</p>
<p class="blockquote-pc2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character.</p>


List class spot

<ul class="spot">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
</ul>


List class line

<ul class="uk-list uk-list-line">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
</ul>


List class stripped

<ul class="uk-list uk-list-striped">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
</ul>

 

Place vector icons anywhere using an icon font.

UI Kit component integrated in our template  is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 600 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

This is an icon

<i class="uk-icon-cog"></i>

This is an icon in a link

<a href=""><i class="uk-icon-cog"></i> ...</a>

More about Font Awesome icons you can find here: http://getuikit.com/docs/icon.html

Buttons - Default Size:

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


Buttons - Mini Size:

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



Buttons Large size:

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


Buttons Groups wtih default size buttons:


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

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

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

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


Buttons Groups wtih large size buttons:

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

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


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></p>



Badges:

<p><span class="uk-badge uk-badge-primary">Primary</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">Percent</span> <span class="uk-badge uk-badge-notification uk-badge-primary">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>

Alert Messages:


<div class="uk-alert uk-alert-success" data-uk-alert=""><a 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 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 class="uk-alert-close uk-close"></a>
<p>To indicate an important message add the <code>.uk-alert-danger</code> class.</p>
</div>

<div data-uk-alert="" class="uk-alert uk-alert-large uk-alert-danger"><a 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>

Progress Bars:

<div class="uk-progress">
<div class="uk-progress-bar" style="width: 90%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-small">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 43%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-warning">
<div class="uk-progress-bar" style="width: 75%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-danger">
<div class="uk-progress-bar" style="width: 65%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-success">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>


Modal Dialogs:

<p><button class="uk-button" data-uk-modal="{target:'#modal'}">Click Me</button>
<a href="#modal2" data-uk-modal="{center:true}">Click Me</a>
</p>
<div id="modal" class="uk-modal">
<div class="uk-modal-dialog"><a 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>
<div id="modal2" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-large"><a 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>


Off-canvas Sidebars:

<p><button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Click Me</button> <a href="#offcanvas-1" data-uk-offcanvas="">Click Me</a></p>
<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>


Tooltips:

<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>

 

Scrollspy animations - Triggers events and animations while scrolling your page.

<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>

Examples:

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

For more icons you can check the page from UI Kit dedicated to icons: http://getuikit.com/docs/icon.html

Buttons - Default Size:

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

Buttons - Mini Size:

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

Buttons Large size:

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

Full width button:

<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>

Full width primary button:

<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

Button Group

<div class="uk-button-group"><a class="uk-button uk-button-primary" href="#">Browse Products</a> <a class="uk-button uk-button-primary" href="#">Browse Categories</a> <a class="uk-button uk-button-primary" href="#">Shop Now</a></div>

We used UI Kit Parallax code to make this beautiful parallax sections.

 

<div style="height: 100%; background-image: url(images/Demo/elements/parallax1.jpg); background-color: #3e5050; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-flex uk-flex-centrer">

<div class="uk-container-center uk-text-center uk-text-white container" style="padding:150px;" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:400}">

<h1>Accounting <span class="uk-text-primary">COUNTS!</span></h1>
<br>
<h4>This is simply amazing! Cool Parallax Example</h4>
<h4>do 'em as you like :)</h4>
<br>
<p><a href="#" class="uk-button uk-button-primary uk-button-large">Become one of us!</a></p>

</div>

</div>

 

<div style="height: auto; background-image: url(images/Demo/elements/parallax2.jpg); background-color: #26c566; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-flex uk-flex-centrer">

<div class="uk-container-center uk-text-white container" style="padding:150px;" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">

<div data-uk-grid-margin="" class="uk-grid uk-grid-match uk-grid-width-1-1 uk-grid-width-medium-1-1 uk-grid-width-large-1-1">
    <div>
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry3.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel uk-text-default">
                    <h4>Technology</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-primary uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>
    </div>
 </div>

</div>

</div>

 

UIkit provides a number of options that you can add to the data-uk-parallax attribute:

Option Description
x Animate translateX in pixels.
xp Animate translateX in percent.
y Animate translateY in pixels.
yp Animate translateY in percent.
bg Animate a background image.
bgp Animate a background image in percent.
rotate Animate rotation clockwise in degree.
scale Animate scaling.
color Animate color (needs start and stop value).
background-color Animate background-color (needs start and stop value).
border-color Animate border color (needs start and stop value).
opacity Animate the opacity.

You can see many other variation of usage here: http://getuikit.com/docs/parallax.html

 

1. Main Slider Home Page

Unite Revolution Slider 2
Module Position: slide
Show Title: hide
Module Class Suffix:



2. Main Services

RokSprocket Module
Module Position: top3
Show Title: Show
Module Class Suffix: title1

Simple Provider
Strips Layout

Title None
Image None
Link None
Description

<div class="conto-box">
 <a href="#"><span class="conto-icon"><i class="uk-icon-black-tie"></i></span>
  <div class="conto-content">
    <h4 class="conto-main">Advisory</h4>
     <p class="conto-desc">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores sed ut perspiciatis.</p>
  </div>
 </a>
</div>

Strips Layout Options

Theme: Parallel
Display Limit articles: ∞
Preview Length words: ∞
Strip HTML Tags: No
Previews per Page: 4
Items Per Row: 4
Arrow Navigation: Show
Pagination: Show
Article Details: Hide author and date
Animation Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize Disable
Max Width: 0px
Max Height: 0px
Strips Article Defaults
Default Title: Default Article Title
Default Image: Default Article Image
Default Article Text: Default Article Text
Default Link: Default Article Link


3. Main Services Description
(text in the image: We Help your business grow)

Custom HTML Module
Module Position: top3
Show Title: hide
Module Class Suffix:

<hr class="uk-grid-divider"><br>
<div class="uk-grid uk-grid-divider">
  <div class="uk-width-large-1-2">
    <p>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 onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="uk-width-large-1-2">
    <img src="images/Demo/elements/grow.png" alt="Grow" class="uk-container-center">
  </div>
</div>

 

4. Industries

Custom HTML Module
Module Position: top7
Show Title: Show
Module Class Suffix: title1

<div data-uk-grid-margin="" class="uk-grid uk-grid-match uk-grid-width-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-3">
    <div>
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry1.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel uk-text-default">
                    <h4>Financial Services</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-primary uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>

        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry2.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel">
                    <h4>Public Sector</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-inverted uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>
    </div>

    <div>
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry3.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel uk-text-default">
                    <h4>Technology</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-primary uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>
    </div>

    <div>
        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry4.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel">
                    <h4>Construction</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-inverted uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>

        <div class="uk-panel">
            <figure class="uk-overlay">
                <img class="uk-border-rounded" src="images/Demo/elements/industry5.jpg" alt="Industries">
                <figcaption class="uk-overlay-panel uk-text-default">
                    <h4>Healthcare</h4>
                    <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit,<br> sed do eiusmod tempor.</p>
                    <a class="uk-button uk-button-primary uk-margin-top" href="#">READ MORE</a>
                </figcaption>
            </figure>
        </div>
    </div>
 </div>


5. Conto Financial Advices


Custom HTML Module
Module Position: top11
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">
  <div class="uk-width-large-1-2">
    <img src="images/Demo/elements/advices.png" alt="Conto Financial Advices" class="uk-container-center">
  </div>
  <div class="uk-width-large-1-2">
    [module-94]
  </div>
</div>

[module-94] is for RokSprocket Module, that you have to create. When you save it, do not choose any module position - you do not need it, because you use it RokSprocket shortcode in the custom module Conto Financial Advices.

Conto Financial Advices | Accordion - module title RokSprocket Module
Module Position:  you do not have to choose any position
Show Title:
Module Class Suffix:

Simple Provider
Lists Layout


Example code for one item:
Title: 1. Get in the financial markets
Image: None
Link: None
Description: 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.

Lists Layout Options
Theme: Default
Display Limit articles: ∞
Collapsible Preview: Enable
Preview Length words: ∞
Strip HTML Tags: Yes
Previews per Page: 4
Arrow Navigation: Show
Pagination Show
Autoplay: Disable
Autoplay Delay:
Image Resize Disable
Max Width: 0px
Max Height: 0px
Lists Article Defaults

Default Title: Default Article Title
Default Image: Default Article Image
Default Article Text: Default Article Text
Default Link: Default Article Link

 

6. Contact our financial advisors

Custom HTML Module
Module Position: top11
Show Title: Hide
Module Class Suffix:

<hr class="uk-grid-divider"><br>
<div class="uk-grid">
  <div class="uk-width-large-3-4">
    <h4>Contact our financial advisors</h4>
    <p>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 onsequat.</p>
  </div>
  <div class="uk-width-large-1-4 uk-text-right">
    <a href="#" class="uk-button uk-button-primary uk-button-large uk-margin-top">CONTACT US NOW</a>
  </div>
</div>

 

7. Accounting experts

RokSprocket Module
Module Position: user1
Show Title: Show
Module Class Suffix: title1

Simple Provider
Strips Layout

Example code for one item:
Title: Aldo Fiore
Image: images/Demo/elements/adviser1.png
Link: None
Description:

<h5 class="uk-text-primary">| Chief Financial Officer - CFO</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Strips Layout Options

Theme: Separated
Display Limit articles: ∞
Preview Length words: ∞
Strip HTML Tags: No
Previews per Page: 3
Items Per Row: 3
Arrow Navigation: Show
Pagination: Show
Article Details: Hide author and date
Animation Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize Disable
Max Width: 0px
Max Height: 0px
Strips Article Defaults
Default Title: Default Article Title
Default Image: Default Article Image
Default Article Text: Default Article Text
Default Link: Default Article Link


8. Bookkeeping Training - Article Home

<div class="sp-module title1"><h3 class="sp-module-title">Bookkeeping Training</h3></div>
<br>
[module-97]

[module-97] is for RokSprocket Module, that you have to create first. When you save it, do not choose any module position - you do not need it, because you use it RokSprocket shortcode inside the article.


Bookkeeping Training - module title RokSprocket Module

Simple Provider
Strips Layout

Example code for one item:
Title: Accounting Basics
Image: images/Demo/elements/training1.jpg
Link: index.php/training/21-accounting-basics
Description:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Strips Layout Options

Theme: Default
Display Limit articles: ∞
Preview Length words: ∞
Strip HTML Tags: No
Previews per Page: 8
Items Per Row: 4
Arrow Navigation: Hide
Pagination: Hide
Article Details: Hide author and date
Animation Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize Disable
Max Width: 0px
Max Height: 0px
Strips Article Defaults
Default Title: Default Article Title
Default Image: Default Article Image
Default Article Text: Default Article Text
Default Link: Default Article Link
 

9. Latest News

RokSprocket Module
Module Position: position1
Show Title: Show
Module Class Suffix: title1

Joomla! Provider
Strips Layout

Example code for one item:
Title: Default
Image: images/Demo/elements/news1.jpg
Link: Default
Description: Default


Strips Layout Options

Theme: Separated
Display Limit articles: ∞
Preview Length words: 18
Strip HTML Tags: No
Previews per Page: 3
Items Per Row: 3
Arrow Navigation: Show
Pagination: Hide
Article Details: Show author and date
Animation Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize Disable
Max Width: 0px
Max Height: 0px

Strips Article Defaults
Default Title: Default Article Title
Default Image: Default Article Image
Default Article Text: Default Article Text
Default Link: Default Article Link
 

10. Testimonials

RokSprocket Module
Module Position: position5
Show Title: Show
Module Class Suffix: title1
 

Simple Provider
Quotes Layout

Example code for one item:

Quote Text: 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  aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Image: images/Demo/elements/testimonial1.png
Author: Manuela Quaranta
Subtext: | Accounting manager / <span class="uk-text-primary">Sierra Rana</span>
Link: None
Direction: No Arrow

Quotes Layout Options
Theme: Default
Display Limit articles: ∞
Preview Length words: ∞
Strip HTML Tags: No
Previews per Page: 1
Items Per Row: 1
Arrow Navigation: Hide
Pagination: Show
Animation: Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize: Disable
Max Width: 0px
Max Height: 0px
Quotes Defaults
Default Quote Text: Default Quote Text
Default Image: Default Article Image
Default Link: Default Article Link

 

11. Contact Us Now Call To Action | Home

Custom HTML Module
Module Position: bottom5
Show Title: Hide
Module Class Suffix:

<div class="uk-grid">
  <div class="uk-width-large-3-4">
    <h4>Get the best accounting & taxation services!</h4>
    <p>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 onsequat.</p>
  </div>
  <div class="uk-width-large-1-4 uk-text-right">
    <a href="#" class="uk-button uk-button-large uk-margin-top">CONTACT US NOW</a>
  </div>
</div>

1. All Services

Custom HTML Module
Module Position: top3
Show Title: hide
Module Class Suffix:

 

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

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-money"></i></span>&nbsp;&nbsp;&nbsp;Accounting & Payroll</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-dollar"></i></span>&nbsp;&nbsp;&nbsp;Corporate Finance</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-file"></i></span>&nbsp;&nbsp;&nbsp;Company Registration</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

</div>
<hr class="uk-grid-divider">
<div class="uk-grid uk-grid-divider">

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-percent"></i></span>&nbsp;&nbsp;&nbsp;Tax Service</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-support"></i></span>&nbsp;&nbsp;&nbsp;Consulting</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

<div class="uk-width-medium-1-3">
<h4><span class="uk-badge uk-badge-primary uk-badge-notification"><i class="uk-icon-pencil"></i></span>&nbsp;&nbsp;&nbsp;Audits</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Read More</a></p>
</div>

</div>

 

2. 15% Discount

Custom HTML Module
Module Position: user1
Show Title: hide
Module Class Suffix: title5 uk-text-center

<p>We offer</p>
<h1 class="uk-margin-remove">15% OFF</h1>
<h3 class="uk-margin-remove">DISCOUNT</h3>
<p>For our 15th Anniversary</p>
<a class="uk-button uk-button-inverted uk-margin-top" href="#">Get It Now</a>


3. Discount Gallery

Custom HTML Module
Module Position: user2
Show Title: hide
Module Class Suffix:

 

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

<div>
  <a title="Discount Gallery" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/portfolio1.jpg">
    <img width="600" height="400" alt="Discount Gallery" src="images/Demo/elements/portfolio1.jpg" class="uk-border-rounded">
  </a>
</div>

<div>
  <a title="Discount Gallery" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/portfolio2.jpg">
    <img width="600" height="400" alt="Discount Gallery" src="images/Demo/elements/portfolio2.jpg" class="uk-border-rounded">
  </a>
</div>

<div>
  <a title="Discount Gallery" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/portfolio3.jpg">
    <img width="600" height="400" alt="Discount Gallery" src="images/Demo/elements/portfolio3.jpg" class="uk-border-rounded">
  </a>
</div>

</div>

 

4. Insights (with number on the left)

Services Article

<div class="uk-grid uk-grid-divider">
    <div class="uk-width-medium-1-4 uk-text-center">
        <h1 class="uk-text-primary"><i class="uk-icon-user"></i></h1>
        <h1>3945</h1>
        <p>Clients</p>
    </div>
    <div class="uk-width-medium-1-4 uk-text-center">
        <h1 class="uk-text-primary"><i class="uk-icon-folder"></i></h1>
        <h1>1298</h1>
        <p>Audits</p>
    </div>
    <div class="uk-width-medium-2-4">
        <div class="sp-module title1"><h3 class="sp-module-title">Insights</h3></div>
        {loadposition insights}
    </div>
</div>

{loadposition insights} is for Insights Module in position "insights" with type Articles - Category, with Mode: Normal. In Position filed you need to write insights which corresponds to insights in  {loadposition insights} in the article.

Articles - Category Module
Module Position: insights
Show Title: hide
Module Class Suffix:

This module displays a list of articles from one or more categories.

Mode: Normal

Display Options
Linked Titles: Yes
Date: Show
Date Field: Start Publishing
Date Format: d M, Y
Category: Hide
Hits: Hide
Author: Hide
Introtext: Hide
Introtext Limit: 100
Show "Read More": Hide
Show Title with Read More: Show
Read More Limit: 15

5. Plans

RokSprocket Module
Module Position: bottom1
Show Title: Show
Module Class Suffix: title2

Simple Provider
Tables Layout

    Title <i class="uk-icon-shopping-bag uk-icon-medium"></i><br><br>Small
    Description Small Business
    Image: None
    Class: None
    Price <span class="currency">$</span>270
    Feature 1 Asset Protection
    Feature 2 Family Office Service
    Feature 3 Tax Declaration
    Feature 4 None
    Link #
    Link Text Order Now


Tables Layout Options
Theme Product
Display Limit articles ∞
Preview Length words: 20
Strip HTML Tags: No
Previews per Page: 3
Items Per Row: 3
Arrow Navigation: Show
Pagination: Show
Animation Fade: Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize: Disable

Tables Article Defaults
Default Title: Default Article Title
Default Article Text: Default Article Text
Default Image: Default Article Image
Default Link: Default Article Link
 

6. Contact Us Now Call To Action | Home

Custom HTML Module
Module Position: bottom5
Show Title: Hide
Module Class Suffix:

<div class="uk-grid">
  <div class="uk-width-large-3-4">
    <h4>Get the best accounting & taxation services!</h4>
    <p>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 onsequat.</p>
  </div>
  <div class="uk-width-large-1-4 uk-text-right">
    <a href="#" class="uk-button uk-button-large uk-margin-top">CONTACT US NOW</a>
  </div>
</div>

 

 

1. About us - Article, named About us (image with people and "We Come with Solutions & Results" label)

<img style="margin-bottom: -85px;" width="890" height="555" class="uk-container-center" src="images/Demo/elements/people2.png" alt="About us">

 

2. About us| Mission (Mission, Vision, Values)

Custom HTML Module
Module Position: position1
Show Title: Hide
Module Class Suffix:

<div class="uk-grid">
  <div class="uk-width-large-1-3">
    <img width="600" height="400" alt="Mission" src="images/Demo/elements/mission.jpg" class="uk-container-center uk-border-rounded">
    <div class="sp-module title1"><h3 class="sp-module-title">Mission</h3></div>
    <p>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 aboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="uk-width-large-1-3">
    <img width="600" height="400" alt="Vision" src="images/Demo/elements/vision.jpg" class="uk-container-center uk-border-rounded">
    <div class="sp-module title1"><h3 class="sp-module-title">Vision</h3></div>
    <h4>100% Professionals</h4>
    <div class="uk-progress uk-progress-small">
      <div style="width: 100%;" class="uk-progress-bar">&nbsp;</div>
    </div>
    <h4>0% Useless Taxes</h4>
    <div class="uk-progress uk-progress-small">
      <div style="width: 1%;" class="uk-progress-bar">&nbsp;</div>
    </div>
  </div>

  <div class="uk-width-large-1-3">
    <img width="600" height="400" alt="Values" src="images/Demo/elements/values.jpg" class="uk-container-center uk-border-rounded">
    <div class="sp-module title1"><h3 class="sp-module-title">Values</h3></div>
    <p>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 aboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

 

3. Testimonials

RokSprocket Module
Module Position: position5
Show Title: Show
Module Class Suffix: title1
 

Simple Provider
Quotes Layout

Example code for one item:

Quote Text: 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  aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Image: images/Demo/elements/testimonial1.png
Author: Manuela Quaranta
Subtext: | Accounting manager / <span class="uk-text-primary">Sierra Rana</span>
Link: None
Direction: No Arrow

Quotes Layout Options
Theme: Default
Display Limit articles: ∞
Preview Length words: ∞
Strip HTML Tags: No
Previews per Page: 1
Items Per Row: 1
Arrow Navigation: Hide
Pagination: Show
Animation: Fade Delayed
Autoplay: Disable
Autoplay Delay: s
Image Resize: Disable
Max Width: 0px
Max Height: 0px
Quotes Defaults
Default Quote Text: Default Quote Text
Default Image: Default Article Image
Default Link: Default Article Link

 

4. Contact Us Now Call To Action | Home

Custom HTML Module
Module Position: bottom5
Show Title: Hide
Module Class Suffix:

<div class="uk-grid">
  <div class="uk-width-large-3-4">
    <h4>Get the best accounting & taxation services!</h4>
    <p>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 onsequat.</p>
  </div>
  <div class="uk-width-large-1-4 uk-text-right">
    <a href="#" class="uk-button uk-button-large uk-margin-top">CONTACT US NOW</a>
  </div>
</div>

Menu Item Type: Single Contact

Select Contact: select your contact (you need to make the contact first from Components > Contact > New

By doing this you will have the contact form like the one in the demo.

 

In Language Overrides we have placed the text  "Drop us a line"

The Language COnstant for this is: COM_CONTACT_CONTACT_DEFAULT_LABEL

 

1. Contact us | Professional Help

Custom HTML Module
Module Position: top3
Show Title: Hide
Module Class Suffix: title6

<h4 class="uk-text-center">If you need <span class="uk-text-primary">professional help</span>, feel free to contact us.<br> Our responsive team will reply to all your questions.</h4>


2. Call:

Custom HTML Module
Module Position: top7
Show Title: show
Module Class Suffix: title5

<p>01962 123 123 457</p>
<p>+01 (0) 3 5671 3652</p>

 

3. Address 1

Custom HTML Module
Module Position: top8
Show Title: hide
Module Class Suffix: title1

 

<div class="uk-panel">
    <figure class="uk-overlay">
        <img class="uk-border-rounded" src="images/Demo/elements/winchester.jpg" alt="Winchester">
        <figcaption class="uk-overlay-panel">
            <h4>24 Eastgate St.</h4>
            <p>Winchester, SO23 8EB<br> United Kingdom</p>
        </figcaption>
    </figure>
</div>

 

4. Address 2

Custom HTML Module
Module Position: top9
Show Title: hide
Module Class Suffix: title1

 

<div class="uk-panel">
    <figure class="uk-overlay">
        <img class="uk-border-rounded" src="images/Demo/elements/australia.jpg" alt="Australia">
        <figcaption class="uk-overlay-panel">
            <h4>10 Jaques Ave</h4>
            <p>Bondi Beach, NSW 2026<br> Australia</p>
        </figcaption>
    </figure>
</div>

 

5. Write:

Custom HTML Module
Module Position: top10
Show Title: show
Module Class Suffix: title5

<p>accounting_uk@conto.com</p>
<p>accounting_aus@conto.com</p>


6. Working Hours

Custom HTML Module
Module Position: left
Show Title: Hide
Module Class Suffix: title1

<h4>Working Hours:</h4>
<hr>
<p><i class="uk-icon-clock-o"></i> Monday - Friday</p>
<h4 class="uk-text-primary">9:00 / 17:00</h4>
<hr>
<p><i class="uk-icon-clock-o"></i> Saturday</p>
<h4 class="uk-text-primary">10:00 / 15:00</h4>
<hr>
<p><i class="uk-icon-clock-o"></i> Sunday</p>
<h4 class="uk-text-primary">Closed</h4>


7. Contact Google Maps

Due to new rules of Google from 22nd of June 2016, you must have Google Map API Key first, in order to have a working map. More info you can find here
 

BT Google Maps Type Module
Show Title: Hide
Module Position: parallax2

You can color every element (as road, landscape, all, water, poi.park)  in the map as you want, by using Custom Style Manager tab.

Images & Videos used in the demo site and NOT included in the download file: