Typography Info

The Typography page will explain the following: Heading appearance, Left and right aligned images, Image with caption, Dropcaps, Dropcap and Pullquotes, Styling tables, Elements styling, Buttons & Links, List styling, Definitions list, Quotations, and Box styles.

Just follow the code and How to Explanation on how to use these parts in the template pages.

***Ok, so let's start with the Heading Appearance than move down to the rest of the goodies.***

Typography Page

h1 Heading Appearance

Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo.

h2 Heading Appearance

Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.

h3 Heading Appearance

Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros.

h4 Heading Appearance

Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.
h5 Heading Appearance
Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros.
h6 Heading Appearance
Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa..

Left & Right Aligned Images

Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa. Quae ablo inve ntore veritatis et qrch itect vitae dicta sunt explicaboemo entatem quia voluptas sit aspatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione ptatem sequi nescunteque porro quisquam est, qui dolorem psum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam. enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboosam, nisi ut aliquid ex. Сommodi consequatur ellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla veenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem.
<div class="wrapper">
<figure>
<a href="images/about_images/client3big.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/about_images/client3.jpg" alt=""></a>
</figure>
Some text ...
</div>
  1. Create your code section like this:
    <figure>
    <a href="images/about_images/client4big.jpg">
    <img src="images/about_images/client4.jpg" alt="">
    </a>
    </figure>
  2. The href attribute should contain the path to the big image.
  3. You can also add a lightbox-image class and rel="prettyphoto" title="Image 1" attributes in order to add a lightbox.
Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa. Quae ablo inve ntore veritatis et qrch itect vitae dicta sunt explicaboemo entatem quia voluptas sit aspatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione ptatem sequi nescunteque porro quisquam est, qui dolorem psum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam. enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboosam, nisi ut aliquid ex. Сommodi consequatur ellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla veenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem.
<div class="wrapper">
<figure class="fright">
<a href="images/about_images/client3big.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/about_images/client3big.jpg" alt=""></a>
</figure>
Some text
</div>
  1. Create a code section like this:
    <figure class="fright">
    <a href="images/about_images/client3big.jpg" ><img src="images/about_images/client3big.jpg" alt=""></a>
    </figure>
    
  2. The href attribute should contain the path to the large image.
  3. You can also add lightbox-image class and rel="prettyphoto" title="Image 1" attributes in ordr to add a lightbox.

Image with caption

Caption
Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa. Quae ablo inve ntore veritatis et qrch itect vitae dicta sunt explicaboemo entatem quia voluptas sit aspatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione ptatem sequi nescunteque porro quisquam est, qui dolorem psum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam. enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboosam, nisi ut aliquid ex. Сommodi consequatur ellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla veenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem.

Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae.

<div class="wrapper">
  <figure>
    <a href="images/about_images/client5big.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/about_images/client5.jpg" alt=""></a>
    <figcaption>Caption</figcaption>
  </figure>
  Some text ...
</div>
  1. Create a code section like this:
    < figure >
    < a href="images/about_images/client5big.jpg" > < img src="images/about_images/client5.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. You can also add a lightbox-image class and rel="prettyphoto" title="Image 1" attributes in ordr to add a lightbox.
TOP

Dropcap

Asce sit varius mi. Cum sociis nat penatibus et magnis dis partt montes, nascetur ridic. Maecenas tri orci ac sem. Duis ultricies pharetra magna. Donec accsan malesuada orci. Donec sit amet eros. Lore dolor sit amet. Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.
Bsce sit varius mi. Cum sociis nat penati us et mgnis dis partt montes, nascetur ridic. Duis ultricies phtra magna donec. Donec sit aos. Lore dolor sit amet, consectetuer adipiscing elit. Mauris ferme dictum. Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.
<span class="dropcap_1">R</span>Some text go here
Add the <span> tag around the first letter and add dropcap_1, dropcap_2 classes to this tag.
TOP
Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.

Dropcap & Pullquotes

Altrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Quisque diam lorem interduitae daibacerat cinia ferme ntunec in vet vel ipsumc touvin arr urna et feisu lum iaculis lacinia estnan nulla el diad iacus ut enim a nec sagittis eui purt perspi unde omnsusa ntium dolorque laudantiam rem aperipsa.
Fusce euismod consequat ante. Lorem ipsuolet, consectetuer adipiscing elit. Pellentesque sed dolor.
Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar.
<blockquote class="right">Some text go here</blockquote>
Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Proin ullamcorper urna.
Lorem ipsum, consectetuer adipiscing elit. Pellentesque sed dolor.
Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adtipiscing 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, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam. Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel.
<blockquote class="left">Some text go here</blockquote>
TOP

Styling Tables

This table has 6 columns, 7 rows and caption text.
Header One Header Two Header Three Header Four Header Five Header Six
Division One Division Two Division Three Division Four Division Five Division Six
Division One Division Two Division Three Division Four Division Five Division Six
Division 1 Division 2 Division 3 Division 4 Division Five Division Six
Division 1 Division 2 Division 3 Division 4 Division Five Division Six
Division 1 Division 2 Division 3 Division 4 Division Five Division Six
Division 1 Division 2 Division 3 Division 4 Division Five Division Six
Division 1 Division 2 Division 3 Division 4 Division Five Division Six
TOP

Elements Styling

  • Here is an Abbreviation <abbr> </abbr>
  • We get Strong <strong> </strong>
  • Put on some Emphasis <em> </em>
  • We go Bold Text <b> </b>
  • Become Italic Text <i> </i>
  • This is Cite <cite> </cite>
  • Big to Small Text <small> </small>
  • Small to Big Text <big> </big>
  • Not needed Deleted Text <del> </del>
  • Here some Defining Instance <dfn> </dfn>
  • Here is a User Input <kbd> </kbd>
  • Outputting Large Sample Output <samp> </samp>
  • This is an "Inline Quotation" <q> </q>
  • Whoa superscript <sup> </sup>
  • Umm what script Subscript <sub> </sub>
  • I love a variable <var> </var>
TOP TOP

Definitions List

Define something
This is a definitions list. Nam elit magna, hendrerit sit amet, tinci dunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum.
Some more definitions
Pellentesque sed dolor. Aliquam coue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliuet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem.
TOP

Quotations

You can add quotations also. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tinci dunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum.
Let's qoute something for good luck. Not just good luck but because we are having too much fun hehe.

Pretty cool i guess eh? Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tinci dunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum.

<blockquote class="quote">Some fun text here yo...</blockquote>
TOP

Box Styles

Here is a supper cool looking info box full of awesome useless information.
<div class="info-box">
<p class="icon"><img src="images/info.png" alt=""></p>
Cool info Box Icon...
</div>

Lets check out our download box cus there might be something in there.
<div class="download-box">
<p class="icon"><img src="images/dl.png" alt=""></p>
Download Box...
</div>

This box we can note stuff, lots of notes cus you might forget if you don't make a note.
<div class="notification-box">
<p class="icon"><img src="images/note.png" alt=""></p>
Note this...
</div>

This would be the Error box. Pretty neat looking thing no.
<div class="error-box">
<p class="icon"><img src="images/error.png" alt=""></p>
ERROR 404...
</div>
TOP