Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

Sample Sidebar Module

This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.

Search our Site

Register

Custom Code Used For This Design

Details
Category: Demo Info
Hits: 4583
Occasionally we need to use custom html to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor. Some area may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the template configuration.

Top Text and Image:

This area consists of the custom_1 and custom_2 position. The image is a custom html module published to custom_1, and the text is a custom html module published to custom_2. Alternatively you can also publish the S5 Image and Content Fader module to custom_1, the S5 Tab Show is also stylized for custom_2. Scroll reveal must be enabled under the Javascripts tab in the template configuration.



Top Image:
<img id="top_image" alt="" src="images/arthur.jpg" />


Top Text:
<div id="top_text_effect" data-sr="move 16px scale up 20%, over 0.7s" style="visibility:hidden;">
<img class="top_text_signature" alt="" src="images/arthur_signature.png" />
<span class="top_text_sub1">
Hello! My Name Is <br />Arthur Klein
</span>
<span class="top_text_sub2">
Photographer and Graphic Artist
</span>
<a class="readon" href="index.php/pages/contact-us">Hire Me Today</a>
</div>


Top Text and Image:

This area consists of two modules. The About Me area and social icons are a custom html module that is published to top_row1_1 position. The module uses the class suffix "larger_title". The three boxes below that are published to the S5 Tab Show positions. The Tab Show itself is also published to top_row1_1. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show



About Me and Social Icons:
<div class="about_left">
Meis simul clitNec id aperiri labores, usu ut inimicus reprehendunt, laud lorem ipsum ele utamen em labitur mentitum per ut.a at qui, dolores quaerendum usu an. Vim at magna quando, omnis disputationi te his.
</div>
<div class="about_right">
<a href="" target="_blank" class="social_icon ion-social-facebook"></a>
<a href="" target="_blank" class="social_icon ion-social-twitter"></a>
<a href="" target="_blank" class="social_icon ion-social-googleplus"></a>
<a href="" target="_blank" class="social_icon ion-social-pinterest"></a>
<a href="" target="_blank" class="social_icon ion-social-linkedin"></a>
</div>


Tab Show Content:
<div class="top_boxes">

<div class="top_box">
<div class="top_box_inner">
<i class="ion-ios-cloud-download-outline"></i>
<h3>Website Construction</h3>
<div class="top_box_text">
Aliquam tincidunt et risus sed semper. Maecenas ullamcorper risus quis rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac imperdiet metus. Nullam posuere interdum eleifend.
</div>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon">Learn More</a>
</div>
</div>

<div class="top_box">
<div class="top_box_inner">
<i class="ion-ios-list-outline"></i>
<h3>Frontend Development</h3>
<div class="top_box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac imperdiet metus. Nullam posuere interdum eleifend. Aliquam tincidunt et risus sed semper. Maecenas ullamcorper risus quis rhoncus
</div>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon">Learn More</a>
</div>
</div>

<div class="top_box">
<div class="top_box_inner">
<i class="ion-ios-paperplane-outline"></i>
<h3>Graphic Artist</h3>
<div class="top_box_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac imperdiet metus. Nullam posuere interdum eleifend. Aliquam tincidunt et risus sed semper. Maecenas ullamcorper risus quis rhoncus
</div>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon">Learn More</a>
</div>
</div>

<div style="clear:both;height:0px;"></div>
</div>


My Abilities:

This is a custom html module that is published to the top_row2_1 position. The module uses the class suffixes "white larger_title extra_padding". The background for this area is controlled under the Main/Layout screen in the template configuration. Scroll reveal must be enabled under the Javascripts tab in the template configuration.



My Abilities:
<div class="abilities_wrap">

<div class="abilities_left">
Meis simul clitNec id aperiri labores, usu ut inimicus reprehendunt, laud lorem ipsum ele utamen em labitur mentitum per ut.a at qui, dolores quaerendum usu an. Vim at magna quando, omnis disputationi te hies.
<br /><br />
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon">Learn More</a>
</div>

<div class="abilities_right">
<div class="progress_bar">
<div class="progress_bar_title">Photography</div>
<div class="progress_bar_percentage">90%</div>
<br />
<div class="progress_bar1">
<div class="progress_bar2" style="width:90%;" data-sr="enter left, over 1.5s, opacity 1, move 700px"></div>
</div>
</div>

<div class="progress_bar">
<div class="progress_bar_title">Web Development</div>
<div class="progress_bar_percentage">75%</div>
<br />
<div class="progress_bar1">
<div class="progress_bar2" style="width:75%;" data-sr="enter left, over 1.5s, opacity 1, move 700px, wait 0.2s"></div>
</div>
</div>

<div class="progress_bar">
<div class="progress_bar_title">Graphic Arts</div>
<div class="progress_bar_percentage">70%</div>
<br />
<div class="progress_bar1">
<div class="progress_bar2" style="width:70%;" data-sr="enter left, over 1.5s, opacity 1, move 700px, wait 0.4s"></div>
</div>
</div>

<div class="progress_bar">
<div class="progress_bar_title">Filmography</div>
<div class="progress_bar_percentage">85%</div>
<br />
<div class="progress_bar1">
<div class="progress_bar2" style="width:85%;" data-sr="enter left, over 1.5s, opacity 1, move 700px, wait 0.6s"></div>
</div>
</div>
</div>

<div style="clear:both;height:0px;"></div>
</div>


Stats Row:

This is a custom html module that is published to the custom_3 position. Scroll reveal must be enabled under the Javascripts tab in the template configuration.



Stats Row:
<div class="stats_wrap">

<div class="stats_box" data-sr="move 16px scale up 20%, over 0.7s">
<div class="stats_number">872</div>
<div class="stats_text">Cups of Coffee</div>
</div>

<div class="stats_box" data-sr="move 16px scale up 20%, over 0.7s, wait 0.2s">
<div class="stats_number">37</div>
<div class="stats_text">Clients Worked</div>
</div>

<div class="stats_box" data-sr="move 16px scale up 20%, over 0.7s, wait 0.4s">
<div class="stats_number">129</div>
<div class="stats_text">Projects Done</div>
</div>

<div class="stats_box" data-sr="move 16px scale up 20%, over 0.7s, wait 0.6s">
<div class="stats_number">4715</div>
<div class="stats_text">Hours of Work</div>
</div>

<div style="clear:both;height:0px;"></div>
</div>


Education and Work Experience:

This is custom html that is published to an article. The article is set to Featured in the Article Manager. Scroll reveal must be enabled under the Javascripts tab in the template configuration.



Education and Work Experience:
<div class="experience_wrap">

<div class="experience_left">
<h3 class="large_title">Education & Work Experience</h3>
</div>

<ul class="experience_right">
<li class="experience_right_section" data-sr="move 16px scale up 20%, over 0.7s">
<div class="experience_right_circle"></div>
<div class="experience_right_text">
2011 - Present
<strong>Merkel Computing and Consultant LLC</strong>
<div class="experience_right_detail">
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum uspendisse ac imperdiet. Donec ac finibus lacus, dictum convallis nisi.
</div>
</div>
</li>
<li class="experience_right_section" data-sr="move 16px scale up 20%, over 0.7s, wait 0.2s">
<div class="experience_right_circle"></div>
<div class="experience_right_text">
2008 - 2011
<strong>Graner Advertising Group</strong>
<div class="experience_right_detail">
Donec vel lobortis tellus. Vestibulum venenatis sapien et lacus ullamcorper suscipit. Sed ac lorem blandit, pretium orci et, sodales nisi. Aenean ullamcorper aliquam mattis. Mauris accumsan orci condimentum faucibus varius.
</div>
</div>
</li>
<li class="experience_right_section" data-sr="move 16px scale up 20%, over 0.7s, wait 0.4s">
<div class="experience_right_circle"></div>
<div class="experience_right_text">
2006 - 2008
<strong>Independent Consulting and Advertising</strong>
<div class="experience_right_detail">
Nullam ac ligula ut lorem euismod euismod. Donec ac finibus lacus, dictum convallis nisi. Suspendisse enim massa, porttitor non metus ut, pulvinar rutrum nunc.
</div>
</div>
</li>
<li class="experience_right_section" data-sr="move 16px scale up 20%, over 0.7s, wait 0.6s">
<div class="experience_right_circle"></div>
<div class="experience_right_text">
2002 - 2006
<strong>Alabama State University</strong>
<div class="experience_right_detail">
Praesent non ultricies augue, quis imperdiet est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean lorem nibh, bibendum blandit sagittis nec, malesuada in metus. In pharetra nisl nec semper consequat.
</div>
</div>
</li>
</ul>

<div style="clear:both;height:0px;"></div>
</div>


S5 Masonry:

This module is published to the custom_4 position, and does not use any custom html. The images are defined as the article's intro image in the settings of the article. For setup instructions for S5 Masonry please visit: http://www.shape5.com/documentation/WordPress/Widgets/S5-Masonry



Download Bar:

This is a custom html module that is published to the custom_5 position.



Download Bar:
<div class="download_bar">
Arthur is the best Joomla template available on the market today
<a href="http://www.shape5.com/join-now.html" target="_blank" class="readon">Join Today To Download</a>
</div>


My Clients:

This area uses the S5 Tab Show module published to the bottom_row1_1 position. The module uses the class suffix "larger_title". The text shown is defined in the Tab Show settings under "Pre and Post Text Options/Pre-Text Inside Wrapper". For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show



Bottom Contact Area:

This is a custom html module that is published to the custom_6 position. Scroll reveal must be enabled under the Javascripts tab in the template configuration. The large image in the background is meant to disappear on smaller screens.



Bottom Contact Area:
<div class="bottom_contact">

<img alt="" src="images/bottom_person.jpg" data-sr="move 16px scale up 20%, over 0.7s" />

<div class="bottom_contact_word_wrap">
<div class="s5_wrap">
I would love to help you with your next project. I have years of experience in photography, filmography, web design, graphic arts and much more. Please contact me today and we will being our free consultation. I look forward to hearing from you!
<br />
<a class="readon" href="index.php/pages/contact-us">Contact Me Today</a>
</div>
</div>

<div style="clear:both;height:0px;"></div>
</div>
I would love to help you with your next project. I have years of experience in photography, filmography, web design, graphic arts and much more. Please contact me today and we will being our free consultation. I look forward to hearing from you!
Contact Me Today

Login

Register