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 Pageh1 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
<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>
- Create your code section like this:
<figure> <a href="images/about_images/client4big.jpg"> <img src="images/about_images/client4.jpg" alt=""> </a> </figure>
- The href attribute should contain the path to the big image.
- You can also add a lightbox-image class and rel="prettyphoto" title="Image 1" attributes in order to add a lightbox.
<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>
- 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>
- The href attribute should contain the path to the large image.
- You can also add lightbox-image class and rel="prettyphoto" title="Image 1" attributes in ordr to add a lightbox.
Image with caption
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.
Dropcap
<span class="dropcap_1">R</span>Some text go here
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>
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>
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 |
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>
List Styling
- Let's starts a list here. Quisque diam lorem interdum vitae.
- Here are some more.
- You can add as many as you like.
- Make the long or short.
- lIST lIST lIST lIST lIST
<ul class="list_1">
<li>Some Text</li>
<li>Some Text</li>
<li><a href="#"></a>
<ul>
<li>Some Text</li>
<li>Some Text</li>
</ul>
</li>
</ul>
- Activeden
- Themforest
- Audiojungle
- Graphicriver
- Videohive
- 3DOcean
- Codecanyon
- Tuts+
- Themforest
- Audiojungle
- Graphicriver
- Videohive
- 3DOcean
- Codecanyon
- Tuts+
<ol>
<li><a href="#"></a> </li>
<li><a href="#"></a> </li>
<li><a href="#"></a> </li>
</ol>
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.
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>
Box Styles
<div class="info-box">
<p class="icon"><img src="images/info.png" alt=""></p>
Cool info Box Icon...
</div>
<div class="download-box">
<p class="icon"><img src="images/dl.png" alt=""></p>
Download Box...
</div>
<div class="notification-box">
<p class="icon"><img src="images/note.png" alt=""></p>
Note this...
</div>
<div class="error-box">
<p class="icon"><img src="images/error.png" alt=""></p>
ERROR 404...
</div>