- Written by quench85
This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.
<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>
<div class="s5_redbox"> <div class="point"> Your text here </div> </div>
<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>
<div class="s5_graybox"> <div class="point"> Your text here </div> </div>
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>
This is an image with the "boxed" 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.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
<a> With readon_highlight1 class applied:
readon_highlight1
<a> With readon_highlight2 class applied:
readon_highlight2
<a> With highlight1_button class applied:
highlight1_button
<a> With highlight2_button class applied:
highlight2_button
<span> With highlight1_text class applied:
highlight1_text
<span> With highlight2_text class applied:
highlight2_text
<span> With uppercase_letters class applied:
uppercase_letters
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; }
#s5_code { width: 30px; color: #fff; line-height: 45px; }
- This is an Ordered List
- Congue Quisque augue elit dolor nibh.
- Condimentum elte quis.
- 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 plus
- 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 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>
Basic
$49/per monthStandard
$79/per monthPremium
$99/per month 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>
<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</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>
<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</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>
<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name
</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>
<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>
<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</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>
<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</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>
<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>
<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name
</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>
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:
Use the icons below in conjunction with the class icon_circle:
<i class="icon-cogs icon_circle" style="float:left"></i>
icon-adjust
icon-anchor
icon-archive
icon-asterisk
icon-barcode
icon-beer
icon-bell
icon-bolt
icon-book
icon-bookmark
icon-briefcase
icon-bug
icon-bullhorn
icon-bullseye
icon-calendar
icon-bullhorn
icon-bullseye
icon-calendar
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-circle
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-code-fork
icon-coffee
icon-cog
icon-cogs
icon-comment
icon-comments
icon-compass
icon-credit-card
icon-crop
icon-dashboard
icon-desktop
icon-download
icon-edit
icon-envelope
icon-eraser
icon-exchange
icon-exclamation
icon-external-link
icon-female
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-fire-extinguisher
icon-flag
icon-flag-checkered
icon-folder-open
icon-gamepad
icon-gear
icon-gears
icon-gift
icon-glass
icon-globe
icon-group
icon-headphones
icon-heart
icon-home
icon-inbox
icon-info
icon-key
icon-laptop
icon-leaf
icon-legal
icon-level-down
icon-level-up
icon-location-arrow
icon-lock
icon-magic
icon-magnet
icon-mail-forward
icon-mail-reply
icon-mail-reply-all
icon-male
icon-map-marker
icon-microphone
icon-minus
icon-mobile-phone
icon-money
icon-music
icon-pencil
icon-phone
icon-plane
icon-power-off
icon-print
icon-puzzle-piece
icon-qrcode
icon-question
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-reply
icon-reply-all
icon-retweet
icon-road
icon-rocket
icon-search
icon-share
icon-shield
icon-shopping-cart
icon-signal
icon-sitemap
icon-sort
icon-sort-up
icon-spinner
icon-star
icon-star-half
icon-star-half-empty
icon-star-half-full
icon-subscript
icon-suitcase
icon-superscript
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-terminal
icon-thumbs-down
icon-thumbs-up
icon-ticket
icon-trophy
icon-truck
icon-umbrella
icon-unlock
icon-unlock-alt
icon-upload
icon-user
icon-volume-down
icon-volume-off
icon-volume-up
icon-wrench
