this is the .gradientclass, using background-image property with linear gradient, and fallbacks, like 'background-color:', and 2nd level such as 'background:'.

this is the .gradient basic class structure implementation.

this is the .gradient left to right, etc. class

this is the .gradient CORNERS left to right, etc. class

this is the ANGLE gradient class

this is the COLORS in the GRADIENT class

this is the COLOR-STOPS in the GRADIENT class

this is the COLOR-STOPS in COLUMNS (level,equal values) class

this is the RADIAL GRADIENTS start at a single point, and emanate outwards. ('Ellipse' is the default here; next comes 'circle' explicitly specified) class

this is the RADIAL GRADIENTS with 'circle'explicitly specified. class

this is the RADIAL circle CLOSEST SIDE. class

this is the Circle top right. class

this is the Circle top right. class

this is the Circle top right. class


CS COLEMAN

rokseo.com

web • development • audio • design

rokseo.com


CS$MONEY

Stylin the Future

CS$MONEY

Stylin the Future

CS$MONEY

Stylin the Future

This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!

Preformatted text

HTML Headings

This is an H1 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H2 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H3 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H4 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H5 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H6 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

HTML pre tag & code class

Below is a sample of <pre> tag or code class:

#ja-rightcol {
  width: 180px;
  float: right;
  color: #EEEEEE;
}

Highlight

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

Blockquote

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Dropcaps

This is a sample Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!

01This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">01</span>Your content goes here!</p> to form a block dropcap!

02This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">02</span>Your content goes here!</p> to form a block dropcap!

03This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">03</span>Your content goes here!</p> to form a block dropcap!

AThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">A</span>Your content goes here!</p> to form a block dropcap!

BThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">B</span>Your content goes here!</p> to form a block dropcap!

CThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">C</span>Your content goes here!</p> to form a block dropcap!

aThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">a</span>Your content goes here!</p> to form a block dropcap!

bThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">b</span>Your content goes here!</p> to form a block dropcap!

cThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">c</span>Your content goes here!</p> to form a block dropcap!


Lists Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur
  5. Lorem ipsum dolor sit amet consectetur
  6. Lorem ipsum dolor sit amet consectetur

Unordered List

Definition List

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Condimentum quis sapien.
Congue Quisque augue elit dolor.
Nunc cursus sem et pretium sapien eget.
Condimentum quis sapien.
Congue Quisque augue elit dolor.
Nunc cursus sem et pretium sapien eget.

Unordered Lists with classes


Icons Style


quiz


quiz


quiz

Use <p class="icon-error">Your message goes here!</p> to make this.

Use <p class="icon-message">Your message goes here!</p> to make this.

Use <p class="icon-tips">Your message goes here!</p> to make this.

Use <p class="icon-note">Your message goes here!</p> to make this.

Use <p class="icon-tag">Your message goes here!</p> to make this.

Use <p class="icon-rss">Your message goes here!</p> to make this.

Use <p class="icon-cart">Your message goes here!</p> to make this.

Use <p class="icon-page">Your message goes here!</p> to make this.

Use <p class="icon-demo">Your message goes here!</p> to make this.

Use <p class="icon-download">Your message goes here!</p> to make this.

Use <p class="icon-discussion">Your message goes here!</p> to make this.

Use <p class="icon-info">Your message goes here!</p> to make this.

Use <p class="icon-readmore">Your message goes here!</p> to make this.

Use <p class="icon-doc">Your message goes here!</p> to make this.

Use <p class="icon-submit">Your message goes here!</p> to make this.

Use <p class="icon-extension">Your message goes here!</p> to make this.


Button & Tags Style

Button Style

Live demo Club Info Discussion Download Read More
Documentation Sign Up Submit A Ticket Extension Login

 


Make screenshots for images





fa-5x fa-5x fa-5x fa-5x

Hello, world!

This is a Bootstrap

RAISE the BAR!!! GET 'Strapped' !!!

Examples of simple Bootstrap styles

Example lead class in a paragraph block of text

Using a small tag shows that particular style here.

that was small by itself, but now we'll mix in some p tags to enclose some smaller text...

Why is Bootstrapthe best thing since sliced bread?my friend?

For a special lightweight emphasis, use the italics tag.

What about em tag I thought EMphasis, use the italics tag.beeuth

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

abbr tag here

Everybody knows that HTML is the best thing since sliced bread!

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title
  1. make an Ordered list
  2. check it twice
  3. then check it again
  4. review and revise