Typography Page

This is how your H1 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit.

This is how your H2 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit.

This is how your H3 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis.

This is how your H4 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis.

This is how your H5 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis.

This is how your H6 heading may look like

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis.

Image aligned left & right

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. Bel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auc. or ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis. Lobortis dignissim. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. 

<div class="wrapper">
	<figure class="fleft">
		<a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	</figure>
	Simple text ...
</div>
  1. Create a code section like this: 
    <figure>
	<a href="images/example-img.jpg">
		<img src="images/img1.jpg" alt="">
	</a>
</figure>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. Bel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auc. or ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis. Lobortis dignissim. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. 

<div class="wrapper">
	<figure class="fright">
		<a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	</figure>
	Simple text ...
</div>
  1. Create a code section like this: 
    <figure class="fright">
	<a href="images/example-img.jpg" ><img src="images/img1.jpg" alt=""></a>
</figure>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

Image with caption

 
Caption

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. Bel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auc. or ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis. Lobortis dignissim. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. 

<div class="wrapper">
	  <figure>
	    <a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	    <figcaption>Caption</figcaption>
	  </figure>
	  Simple text ...
</div>
  1. Create a code section like this: 
    < figure >
	< a href="images/example-img.jpg" > < img src="images/img1.jpg" alt="" > < /a >
	< figcaption > Caption < / figcaption >
< /figure >
  2. The href attribute should contain the path to the large image.
  3. In order to add image description you will need to use <figcaption> tag.
  4. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.
TOP

Dropcap

ALobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod.
Purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis stre.
BLobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod. Purus. Earum rerum hica.
Sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet. 
<span class="dropcap_1">R</span>orem ipsum adipiscing...
Add the <span> tag around the first letter and add dropcap_1, dropcap_2 classes to this tag.
TOP

Dropcap & Pullquotes

CLobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod. Purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores.
Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam se dapibus tincidunter.
Repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, conre secs tetuer adipis stre. Ceing elit. Pelle nametesque sed dolor. Aliquai porta ser congue fermentum nisls. Maurisse accumsane. La ster port. Bel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auc. or ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis. Lobortis dignissim. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapire ente delectus, ut aut reiciendis voluptatibus sters sre amet.
Maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante.
Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliqu.
Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, cons. Ses tetuer adipis. Ceing elit ster. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. el diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula.
Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim. Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Pelle nametesque sed dolor. Aliquai porta congue fermentum nisls. Maurisse accumsane. La ster port. Bel diam. Sed in lacus ut enim adipiscing aliquet.
TOP

Table styling

This is a simple table with 5 columns, 5 rows and a caption.

Header 1 Header 2 Header 3 Header 4 Header 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
TOP

Other elements styling

  • <abbr> </abbr> This is abbreviation
  • <strong> </strong> This is strong
  • <em> </em> This is emphasis
  • <b> </b> This is bold text
  • <i> </i> This is italic text
  • <cite> </cite> This is cite
  • <small> </small> This is small text
  • <big> </big> This is big text
  • <del> </del> This is deleted text
  • <ins> </ins> This is inserted text
  • <dfn> </dfn> This is defining instance
  • <kbd> </kbd> This is user input
  • <samp> </samp> This is sample output
  • <q> </q> This is "inline quotation"
  • <sup> </sup> This is superscript
  • <sub> </sub> This is subscript
  • <var> </var> This is a variable
TOP

Button links

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. Lobortis.

Learn more Learn more Any Button May be longer 
<a href="#" class="button">Learn more</a>
<a href="#" class="button2"><span>Read More</span></a>
<a href="#" class="button3">Any button may be longer</a>
  1. Create a common HTML link <a href="#"></a>.
  2. Add link_1 class (class="link_1").
  3. You may add additional classes (link_2, link_3) in order to change the button appearance.
TOP

Styling Lists

<ul class="list1">
	<li>Sample text</li>
	<li>Sample text</li>
	<li><a href="#">Sample text</a>
		<ul>
			<li>Sample text</li>
			<li>Sample text</li>
		</ul>
	</li>
</ul>
	
<ol>
	<li><a href="#">Sample text</a></li>
	<li><a href="#">Sample text</a></li>
	<li><a href="#">Sample text</a></li>
</ol>

A definition list

A definition term

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque ster.

A definition term

Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, sere nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem sre namet port gaslelu mislei port quqn msetrs.

TOP

Quotation

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit maurissew. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque pe natibus et magnis dis parturient montes, nascet.

Lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Earum rerum hica sapiente delectus, ut aut reiciendis voluptatibus maiores alias consquatur aut perferendis doloribus asperiores repellat. Fusce euis mod consequat ante. Lorem ripsum dolor sit amet, consecs tetuer adipis. Ceing elit. 

<div class="quote"><p class="font1">Suspendisse semper bibendum...</p></div>
TOP

Box styles

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus set porta. Fusce suscipit varius mi. Cum sociis natoque penat.

<div class="boxes">
	<p class="img_1">
		Vestibulum at aliquet est...
	</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus set porta. Fusce suscipit varius mi. Cum sociis natoque penat.

<div class="boxes">
	<p class="img_2">
		Vestibulum at aliquet est...
	</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus set porta. Fusce suscipit varius mi. Cum sociis natoque penat.

<div class="boxes">
	<p class="img_3">
		Vestibulum at aliquet est...
	</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus set porta. Fusce suscipit varius mi. Cum sociis natoque penat.

<div class="boxes">
	<p class="img_4">
		Vestibulum at aliquet est...
	</p>
</div>
TOP
Sign in form
 Enter