This is a test

NEWS RELEASE

FOR IMMEDIATE RELEASEs

October 13, 2023s

Teenage Mutant Ninja Turtles & Other Strangeness Role-Playing Game is Back!

Westland, MI – October 13, 2023 – Palladium Books and Paramount Consumer Products have joined forces to reissue the ever-popular role-playing game Teenage Mutant Ninja Turtles & Other Strangeness.

The beloved, out-of-print Teenage Mutant Ninja Turtles role-playing game and its sourcebooks are sought-after collector items that have enthralled generations since its release in 1985 as one of the first licensed TMNT products. They are returning to print as two deluxe hardcover collections of the RPG and sourcebooks. Each is being completely remastered by industry veteran Sean Owen Roberson and presented in full color, and Kevin Eastman, co-creator of Teenage Mutant Ninja Turtles, will also provide a new painted cover.

Bonus material includes an array of new artwork, never before seen behind-the-scenes info and art, plus remembrances and tributes by renowned comic book and RPG creators including Eastman, Peter Laird, Freddie E. Williams II, Steven Cummings, Sophie Campbell, David Petersen and many more.

“This is incredibly exciting! I am 1000% onboard to help bring this historic and original TMNT Role Playing Game series back in a truly deluxe collector’s edition that will thrill original fans and open the door for new ones,” said Eastman. “I've made all my archives available for expanded behind-the-scenes content as well as a few top secret surprises you need to be part of. Stay tuned!”

Teenage Mutant Ninja Turtles & Other Strangeness Kickstarter

The Kickstarter campaign, launching October 31, 2023, will offer a host of mind-blowing Kickstarter exclusives: TMNT miniatures based on the role-playing game, dice sets, variant book covers, art prints by legacy TMNT creatives, a card deck, and more, including special stretch goals to entice role-playing fans and TMNT fans alike. All products ship in 2024. To be among the first to hear about the entire exciting slate of releases, creators, exclusives and stretch goals to be unlocked with your support, be sure to go to the Kickstarter page and subscribe for updates.

https://www.kickstarter.com/projects/palladiumbooks/teenage-mutant-ninja-turtles-and-other-strangeness

About Palladium Books®

Palladium Books was established in 1981 by visionary game designer Kevin Siembieda, renowned for his world-building. Together he and Erick Wujcik created one of the best-selling and most beloved RPGs of all time, Teenage Mutant Ninja Turtles & Other Strangeness. Other popular Palladium RPG titles over the years include Rifts, Robotech, Heroes Unlimited, Ninjas & Superspies, Palladium Fantasy RPG, Nightbane, and Dead Reign, among many others.

For more information visit the Teenage Mutant Ninja Turtles & Other Strangeness Kickstarter starting October 31 or www.palladiumbooks.com

About Paramount Consumer Products

Paramount Consumer Products oversees all licensing and merchandising for Paramount (Nasdaq: PARA, PARAA), a leading global media and entertainment company that creates premium content and experiences for audiences worldwide. Driven by iconic consumer brands, Paramount Consumer Products’ portfolio includes a diverse slate of brands and content from BET, CBS (including CBS Television Studios and CBS Television Distribution), Comedy Central, MTV, Nickelodeon, Paramount Pictures and SHOWTIME®. With properties spanning animation, live-action, preschool, youth and adult, Paramount Consumer Products is committed to creating the highest quality product for some of the world’s most beloved, iconic franchises. To view our range of consumer products and Paramount branded apparel, visit ParamountShop.com.

Palladium Books® is a Registered Trademark of Palladium Books Inc.

Scroll Reveal

Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add "data-scroll-reveal" to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you'd like to animate your HTML element.

Example of this in action (refresh this page if you didn't see it already):

Enter from the left and move up 50px in 1.33 seconds.

Enter from the bottom after 1 second.

Wait 2.5 seconds and then ease-in-out 100px.

Code used for the above:

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Enter from the left and move up 50px in 1.33 seconds. </div>

<div data-scroll-reveal="enter from the bottom after 1s"> Enter from the bottom after 1 second. </div>

<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px"> Wait 2.5 seconds and then ease-in-out 100px. </div>

Usage:

For a lengthier explanation on this visit the following page: https://github.com/julianlloyd/scrollReveal.js

404 Error

This design comes with a matching 404 page for users who reach an unrecognized site url. Below is a screenshot of that link or you can see it live here.

Shape5 Vertex uses articles to display a 404 page rather than a hard coded php file that's hard to modify, like many other designs do. This means you can modify the look or wording of the page very easy without having to modify a file, and it keeps all of your site navigation in tact for ease of use for your site viewers since it uses the template and not an external file. It's as simple as editing an article through the CMS to make any desired changes, or simply leave it as shown! Our site shapers come pre-packaged with the custom 404 page article. If you are setting up a brand new site without a site shaper the easy follow instructions are below the screenshot on this page.

Setup Instructions

These instructions are for non site shaper installs. If you're installing with a shaper just make sure to leave the article titled "404 Error Page" published and you're done!
If you are installing a fresh installation with no sample data simply create an article and make sure it's titled "404 Error Page". It must be given this name for the Vertex framework to identify the page needed to be used.
You can put any content that you want on this new article, or we've provided the code used on this demo below.
Save the article to any category, just make sure it's published.
That's it, you're done! The site will now redirect to this article when ever an unrecognized url is detected.

The Code Used For This Demo

<div id="wrap_404">
<h3 class="title_404">404</h3>
<span class="line_1_404">Opps, sorry we can't find that page!</span>
<br />
<span class="line_2_404">Either something went wrong or the page doesn't exist anymore.</span>
<br />
<a href="" class="readon">Home Page</a>
</div>

Typography Overview

HTML Typography

This page shows all the template typography in its HTML format. An easy way to grab these styles from another page is to Inspect the element or View Source on a page. Duplicate the classes/ID's and structure in the content you're editing.

Rifter-18-Poster-PO118_100x140

This is a ComponentHeading

By adding style="margin:10px;" class="rt-image" to an image's code, you can get the border displayed there with room for separating the image from the text.

This is a Contentheading

<p class="rt-readon-surround"><a href="/{url}" class="readon" title=""><span>{text}</span></a></p>

rokbox album=|Fullsize Gallery| thumbsize=|54 54| }images/Images/Products/Full-Size-223x286/Clothing/T-Shirts/{/rokbox} will make a multiple thumbnail gallery of any folder or use rokbox album=|Unique Album Title| thumbcount=|1| thumbsize=|54 54| }images/*{/rokbox} to only display one thumbnail for the whole gallery. (you'll need to put a { before the first rokbox.)

{rokbox album=|FullsizeGallery| thumbsize=|54 54|}images/Images/Products/Full-Size-223x286/Clothing/T-Shirts/*{/rokbox}

Makes a Read More button like this!

Demo Title (colored text)

add class="demo-title" to a sentence (or less) of text you want to highlight near a heading in your content.

This is a demo title.

® © ™

™

This is a H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is a H2 Header

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor

This is a H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit.

This is a H4 Header

Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante.

This is a H5 Header

Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat sodales sed. Aenean hendrerit fringilla sem, et tincidunt libero ornare at.

Blockquote Example

This is a blockquote, you will want to use the following formatting: <blockquote><p>content</p></blockquote>. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy.

DropCap Styles

PPraesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis.

You will need to use the following formatting: <p class="dropcap"><span class="dropcap">P</span></p>

Number Examples

1 You will need to use the following formatting: <p class="dropcap"><span class="dropcap">1</span></p>.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

2 You will need to use the following formatting: <p class="dropcap"><span class="dropcap">2</span></p>.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

3 You will need to use the following formatting: <p class="dropcap"><span class="dropcap">3</span></p>.
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

List Styles - Icon Bullets

Below is a list with icons. <ul class="class name"><li>content</li><li>content</li>...</ul>

<ul class="bullet-add"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-add"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-arrow"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-arrow"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-arrow2"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-arrow2"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-briefcase"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-briefcase"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-calendar"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-calendar"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-check"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-check"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-crank"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-crank"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-delete"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-delete"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-docs"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-docs"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-email"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-email"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-home"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-home"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-key"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-key"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-lock"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-lock"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-minus"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-minus"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-monitor"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-monitor"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-notes"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-notes"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-post"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-post"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-printer"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-printer"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-rss"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-rss"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-star"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-star"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-star2"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-star2"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-unlock"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-unlock"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-warning"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-warning"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-write"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-write"><li>content</li><li>content</li>...</ul>.

List Styles - Numbers

Below is a list with numbers. <ul class="class name"><li>content</li><li>content</li>...</ul>

<ul class="bullet-no1"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no2"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no3"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no4"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no5"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no6"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no7"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no8"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no9"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-no10"><li>content</li><li>content</li>...</ul>.

List Styles - Bullets

Below is a list with bullets. <ul class="class name"><li>content</li><li>content</li>...</ul>

<ul class="bullet-1"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-1"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-2"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-2"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-3"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-3"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-4"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-4"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-5"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-5"><li>content</li><li>content</li>...</ul>.

<ul class="bullet-6"><li>content</li><li>content</li>...</ul>.
<ul class="bullet-6"><li>content</li><li>content</li>...</ul>.

Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. <em class="italic">...</em>

This is a emphasis tag that allows you to highlight words or phrases. <em class="bold">...</em>

This is a emphasis tag that allows you to highlight words or phrases. <em class="bold2">...</em>

Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> content </span> ... some content ... </span> Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> content </span> ... some content ... </span> Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Notice Styles

This is a sample of the alert style. Use this style to highlight information to your users. Use the following html: <div class="alert"><div class="typo-icon">content</div></div>.

This is a sample of the approved style. Use this style to highlight information to your users. Use the following html: <div class="approved"><div class="typo-icon">content</div></div>.

This is a sample of the attention style. Use this style to highlight information to your users. Use the following html: <div class="attention"><div class="typo-icon">content</div></div>.

This is a sample of the camera style. Use this style to highlight information to your users. Use the following html: <div class="camera"><div class="typo-icon">content</div></div>.

This is a sample of the cart style. Use this style to highlight information to your users. Use the following html: <div class="cart"><div class="typo-icon">content</div></div>.

This is a sample of the doc style. Use this style to highlight information to your users. Use the following html: <div class="doc"><div class="typo-icon">content</div></div>.

This is a sample of the download style. Use this style to highlight information to your users. Use the following html: <div class="download"><div class="typo-icon">content</div></div>.

This is a sample of the media style. Use this style to highlight information to your users. Use the following html: <div class="media"><div class="typo-icon">content</div></div>.

This is a sample of the note style. Use this style to highlight information to your users. Use the following html: <div class="note"><div class="typo-icon">content</div></div>.

This is a sample of the notice style. Use this style to highlight information to your users. Use the following html: <div class="notice"><div class="typo-icon">content</div></div>.

This is a sample of the quote style. Use this style to highlight information to your users. Use the following html: <div class="quote"><div class="quote-l"><div class="quote-r">content</div></div></div>

Pre Example

This is a sample <pre>...</pre> tag:
div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}
div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}
div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Typography Options

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

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>

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

Social Icons

Ion Icons must be enabled to use these icons.

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

Click here for more icon examples

Dates

AUG

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

Michelle Wright
Senior Developer

Dummy Text

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

<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

<span> With lowercase class applied:

lowercase

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

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

Choose

Standard

$79/per month

Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name
Personal Concierge

Choose

Premium

$99/per month

Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name

Choose

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>

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: