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

images/iacf1.jpg

Meet With One Of Our Professional Consultants

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et laoreet. Quis pharetra odio nunc.
Contact Us

Get In Touch Today

Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget massa mattis, dignissim mi id, lorem ipsum in elate soun facilisis purus. In elit justo, efficitur quis.
1257 Moyer Road / Littletown, AR 19872 / USA 1.800.555.1212

Responsive


You can easily adapt your site to any screen size or device. Simply resize your screen to see it all in action.
Read More

Flexible


This design comes with options like multiple menus, highlight colors, Google Fonts, dozens of positions, and more.
Read More

Extensions


This month we also are launching the new Image and Content Fader V4, now with an article integration method.
Read More

Technology


This design is built on the powerful Vertex4 template framework, which makes setting up your site quick and easy!
Read More

Learn More About Us

Let us help you make you make your business a success Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pellentesque velit, a dictum tortor. Donec euismod posuere diam, at imperdiet felis rhoncus at. Donec vitae ante odio. Nullam vel solliin mi. Proin ante magna, interdum lacinia interdum in, tristique pulvinar purus.
  • Lorem ipsum dolor sit amet
  • Consectur adipiscing elit
  • Integer molestie lorem at
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Vesti dignissim eget lectus
  • Sed condimentum justo
  • Aenean imperdiet dictum nibh
  • Proin ultricies arcu metus
  • Quisque mattis arcu nisl


Put Our Experience To The Test

We offer a large number of services for you and your company
The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.

Features at a glance:

  • Set a background image to the menu, gradient or solid color
  • Set to snap or smooth scroll in
  • Determine at which point as you scroll down your page that the menu drops in
  • and many more features, just check out the screenshot below


Admin area of the floating menu:

parallax menu admin
Parallax backgrounds as well as other background options are built directly into the Vertex Framework. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.

Features:

  • Set the scroll speed of the images
  • Set background repeat style
  • Set background image size, 100%, cover, contain, etc
  • Set custom backgrounds for all s5 rows in the framework.
  • Enable or disable parallax on a per row basis


Admin Area Of The Backgrounds Tab:

parallax menu admin

parallax menu admin

Drop Caps

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter">L</span>orem ipsum

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter2">L</span>orem ipsum


Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class">Porem ipsum</a>

Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class2">Porem ipsum</a>


Video Overlay

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur scelerisque ligula, sit amet fermentum metus.

The Video Above Is Not Included And May Be Downloaded From: http://www.videvo.net/video/working-on-laptop-1/3517

1. Enter the url of your video in the video src area.
2. Enter your background image under the video_overlay_wrap style area. This is the background image that appears before the video loads and at 1024px. Please note that all videos disable at 1024px due to restrictions on tablets and phones.
3. Enter an optional max-height under the video_overlay_wrap style area. This will prevent the video from becoming larger than the height specified.
4. Enter an optional min-height under the video_overlay_wrap style area. This will prevent the video from becoming smaller than the height specified. This is very useful for when the video is disabled at 750px, and the background image shows in its place.
4. Enter an optional width under the video_overlay_wrap style area. This will stretch the video to a specified length, but will be cropped off by the surrounding parent div.
4. Enter your desired text in the video_overlay_text_wrap_inner area. Text should be minimal to avoid any space issues on smaller screens; videos maintain ratio and decrease on smaller devices.
<div class="video_overlay_wrap" style="max-height:700px;min-height:300px;width:1500px;background: url('/images/video_preload.jpg');">
<video muted autoplay="autoplay" loop="loop" src="/images/video.mp4"></video>
<div class="video_overlay_text_wrap">
<div class="video_overlay_text_wrap_inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur scelerisque ligula, sit amet fermentum metus.
<div style="clear:both;height:0px;"></div>
</div>
</div>
</div>


Social Icons



Ion Icons must be enabled to use these icons.
<a href="/" class="social_icon ion-social-facebook"></a>
<a href="/" class="social_icon ion-social-twitter"></a>
<a href="/" class="social_icon ion-social-googleplus"></a>
<a href="/" class="social_icon ion-social-rss"></a>
<a href="/" class="social_icon ion-social-pinterest"></a>


Notifications

This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>


Images

This is an image with the "boxed" class applied:



This is an image with the "boxed_white" class applied:



This is an image with the "boxed_black" class applied:



This is an image with the "padded" class applied:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.



Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5


Ion Icons

<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="/" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-headphone icon_element"></span>
</div>
</div>

Click here for more icon examples

Dates

AUG
22
Top Sample Text When: August 22, 2014 at 7:00pm

<div class="date_outer_wrap">
<div class="date_wrapper">
<div class="date_top">
AUG
</div>
<div class="date_bottom">
22
</div>
</div>
<div class="date_text_wrap">
<span class="date_text1"><a href="/">Top Sample Text</a></span>
<span class="date_text2">When: August 22, 2014 at 7:00pm</span>
</div>
<div style="clear:both"></div>
</div>


Overlay

team3

Michelle Wright
Senior Developer

Dummy Text
team3

Photos credits by Daniele Zedda, JohnONolan, Daniele Zedda, Daniele Zedda, AllansBrain, rolands.lakis
Example of code used above. Notice on the first DIV there is a "four". You can enter one, two, three, four, five and six depending on how many team members you want on one row (Be sure to keep that space before the number too):

<div class="overlay_outer four">
<div class="overlay_inner">
<div class="overlay_hover_outer">
<div class="overlay_hover_inner">
<div class="overlay_socialicons">
<a class="overlay_facebook" href="https://www.facebook.com/shape5.templates" target="_blank"></a>
<a class="overlay_twitter" href="https://twitter.com/shape_5" target="_blank"></a>
</div>
</div>
<img src="http://www.shape5.com/demo/images/general/team/team1.jpg" alt="team1"/>
</div>
<br>
Mike Summerfield
<br>
<span style="color:#a8a8a8;">CEO/Owner</span>
<br> </div>
</div>


Video Play Overlay


UP: Carl and Ellie
iphone vid


<div class="overlay_outer">
<div class="overlay_hover_outer">
<div class="overlay_hover_video">
<div class="overlay_centered">
<a href="http://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video">
<span class="ion-play ion-play-size"></span>
</a>
<div class="s5_multibox youtube">UP: Carl and Ellie </div>
</div>
</div>
<img src="http://www.shape5.com/demo/images/general/typography_vidplay.jpg" alt="iphone vid" />
</div>
</div>


Image Hover Zoom


Overlay Text


<div class="img_hover_zoom">
<div class="image_hover_zoom_text">
Overlay Text
</div>
<img src="http://www.shape5.com/demo/images/general/typography_vidplay.jpg" alt="" />
</div>


Misc

<a> With readon class applied:

readon

<span> With uppercase class applied:

uppercase

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.


The following list will support plain text such as numbers of ion icons, class="ul_circle_content":

  • 01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
  • 02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
  • 03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.

<li><span class="circle_item">01</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.</li>

<li><span class="circle_item"><i class="ion-star"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.</li>


The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>


Price Table

Basic
$49/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
Premium
$99/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".



<div class="s5_pricetable_3">

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
<div class="s5_option">
FREE Domain Name
</div>
<div class="s5_option">
Personal Concierge
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space &amp; Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>


</div>
</div>

<div style="clear:both;"></div>
</div>


Responsive YouTube and Vimeo Videos

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:

Customer Service 95%
Business Satisfaction 75%
Overall Rating 85%
Marketing Skills 72%
Brand Awareness 95%
Sales Strength 87%

You can Trust Us. See What We Have Done

1,079 Cups of Coffee
87 Clients Worked
352 Projects Done
2,314 Hours of Work

Customer Testimonials

Hear what our customers have to say about us
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, velit ut tincidunt laoreet, nunc orci tristique est, at placerat ligula urna et neque. Sed sed mattis nibh. Sed venenatis tortor metus, vel volutpat mauris.”
George Hatfield CEO of Right Fods Inc.
“Duis commodo arcu vel sapien egestas molestie. Aliquam neque ligula, justo sed pellentesque convallis, magna dui fringilla iaculis nec diam et, fermentum aliquet ex. Sed dignissim euismod nisl, nec efficitur ante semper id.”
Sarah Reynolds Do Right Board of Trustees.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, velit ut tincidunt laoreet, nunc orci tristique est, at placerat ligula urna et neque. Sed sed mattis nibh. Sed venenatis tortor metus, vel volutpat mauris.”
Anthony Chung President of Montco Newspaper

Meet Our Team

Our company is built with experience, friendliness and proficiency
Brandon Daniels Product Supervisor Donec elementum ligula et metus fermentum molestie. Aenean vehicula ullamcorper libero sed efficitur. Sed in ornare mauris, a tempus.
Alex Smith CEO of Businessline Inc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, velit ut tincidunt laoreet, nunc orci tristique est, at placerat.
Melissa Anderson Business Developer In magna lorem, lacinia vitae ex quis, mattis aliquet ex. Pellentesque feugiat sapien eu neque pulvinar pretium. Sed ac ipsum efficitur.

Our Easy Steps To Success

Let’s start making your company a financial success today
1. Develop A Logical Plan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, velit ut tincidunt laoreet, nunc.
2. Planning For Success Nam volutpat fringilla dui sed dignissim. Nam venenatis bibendum nulla ac viverra. Ut at quam lobortis nisi.
3. Review The Process Aliquam iaculis aliquet eleifend. In dapibus non libero quis bibendum. Nunc quam mauris, bibendum a.
  • fr-FR
  • English (UK)

Businessline Inc.

1257 Moyer Road / Littletown, AR 19872 / USA 1.800.555.1212