Styles

This is the page that shows Html elements with styles that are applied by default and some elements with custom styles.

Headings Styles default and custom

Samples of the heading text for this theme: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>


This is a Heading 1 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.


This is a Heading 2 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.


This is a Heading 3 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.


This is a Heading 4 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.


This is a Heading 5 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.


This is a Heading 6 Element

Text Sample - Lorem ipsum commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.

This is a Heading 1 Element for Page Title

This is a Heading 1 Element

<h1 id="pageTitle" class="pageTitle">This is a Heading 1 Element</h1>

This is a Heading 3 with styles (star)

Design

<h3 class="star_title">Design</h1>

This is a Heading 3 Element for News Block Title with styles for Posted text, link and date

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris

Posted by WebmasterJuly 22, 2010
<div class="news_content_header w100 clearfix">
    <h3>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris</h3>
    <div class="date2">
        <span>Posted by <a href="works.html">Webmaster</a></span><span class="date">July 22, 2010</span>
    </div>
</div>

This is a Heading 4 Element for Rewards Block included in Our History Tab Content on About Us Page with no border for first block

We won another FWA Award

We won another FWA Award

<div>
    <div class="rewards">
        <h4>We won another FWA Award</h4>
    </div>
    <div class="rewards">
        <h4>We won another FWA Award</h4>
    </div>
</div>

Text Styles

This is a Sample of Simple Text and Heading 1

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin sem nec nunc commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus.

<p>Lorem ipsum dolor sit amet, consectetura adipiscing elit...</p>

This is a Sample of Underlined Text and Heading 2

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin sem nec nunc commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus.

<p><span class="underlined">Lorem ipsum dolor sit amet, consectetura adipiscing elit...</span></p>

This is a Sample of Text + Image and Heading 3

What We Do

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin

Lorem ipsum dolor sit amet, consectetura adipiscing elit nullam sollicitudin sem nec nunc commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.nunc commodo cum aliquet adipiscing cum mauris vehicula. Maecenas placerat gravida vulputate torttor at. Donec vitae tempus risus. Ut metus sem, commodo ac gravida et, interdum ut urna. Vestibulum tempus gravida odio, amet lobortis justo a molestie in. Aliquam venenatis hendrerit tortor ac blandit. Cras luctus bibenduma sem quis tempus. Ut in ante quis mi posuere lobortis at eu purus.

Styles for Lists

This is a Sample of Unordered List without styles

  • Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri
  • Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite
  • Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet
<ul>
    <li>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet </li>
    <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri</li>
    <li>Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite</li>
    <li>Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet</li>
</ul>

This is a Sample of Ordered List without styles

  1. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
  2. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri
  3. Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite
  4. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet
<ol>
    <li>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet </li>
    <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri</li>
    <li>Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite</li>
    <li>Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet</li>
</ol>

This is a Sample of Unordered List with styles (star)

  • Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri
  • Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite
  • Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet
<ul class="what_list">
    <li>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet </li>
    <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri</li>
    <li>Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite</li>
    <li>Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet</li>
</ul>

This is a Sample of Unordered List with styles (arrow)

  • Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri
  • Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite
  • Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet
<ul class="what_list_new">
    <li>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet </li>
    <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultri</li>
    <li>Luctus pulvinar,hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus hendrerite</li>
    <li>Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit morbi est est, blandit sit amet</li>
</ul>

Buttons Styles

This is a Sample of Button - right alignment

<div class="news_link">
    <a href="news.html" class="fr">read more</a>
</div>    

This is a Sample of Button - left alignment

<div class="news_link">
    <a href="news.html" class="fl">read more</a>
</div>

This is a Sample of Send Button - right alignment

<input type="submit" value="Send" class="send" />

This is a Sample of Send Button - left alignment

<input type="submit" value="Send" class="send fl" />

Abbreviation, blockquote, cite, delete, insert...

blockquote
<blockquote>
kbd <kbd>
abbr <abbr>
This is cited. <cite>
Deleted text <del>
Inserted text <ins>
This is a definition. <dfn>
With emphysis <em>
Strong (bold) <strong>
Code text sample <code>
q <q>
Code text sample <samp>
Code text sample <small>
Code text sample <sub>
Code text sample <sup>
Code text sample <var>

Form Elements

This is a Sample of Form Elements: form, fieldset, label, input, input (type="submit"), textarea

<form action="" method="post" id="commentForm">
    <fieldset class="clearfix">
        <div class="f_row">
            <label for="cname">Name:<span>*</span></label>
            <input name="name" id="cname">
        </div>
        <div class="f_row">
            <label for="ccomment">Message:<span>*</span></label>
            <textarea name="comment" id="ccomment"></textarea>
        </div>
    </fieldset>
    <div class="clearfix">
        <input type="submit" value="Send" class="send fl">
    </div>
</form>

Table Layout

 

Column Title

Column Link

Column Title

Column Link

Column Title

Column Link

Column Title

Column Link

Item value / option value / option value / option value / option
Item value / option value / option value / option value / option
Item value / option value / option value / option value / option
Item value / option value / option value / option value / option
<table class="default_table">
    <tbody>
        <tr>
            <td> </td>
            <td>
                <h3>Column Title</h3>
                <p><a href="#">Column Link</a></p>
            </td>
            <td>
                <h3>Column Title</h3>
                <p><a href="#">Column Link</a></p>
            </td>
            <td>
                <h3>Column Title</h3>
                <p><a href="#">Column Link</a></p>
            </td>
            <td>
                <h3>Column Title</h3>
                <p><a href="#">Column Link</a></p>
            </td>    
        </tr>
        <tr>
            ...
        </tr>
        <tr>
            <td>Item</td>
            <td>value / option</td>
            <td>value / option</td>
            <td>value / option</td>
            <td>value / option</td>
        </tr>
    </tbody>
</table>    
Хостинг от uCoz