Elements

Columns

<div class="one_half"><p> Your Content </p></div> 
<div class="one_half_last"> <p> Your Content  </p> </div> 
<div class="clear"></div>

<div class="one_third"> <p> Your Content </p></div> 
<div class="one_third"> <p> Your Content </p></div> 
<div class="one_third_last"> <p> Your Content </p> </div> 
<div class="clear"></div>

<div class="one_fourth"><p> Your Content </p></div> 
<div class="one_fourth"><p> Your Content </p></div> 
<div class="one_fourth"><p> Your Content </p></div> 
<div class="one_fourth_last"> <p> Your Content </p> </div> 
<div class="clear"></div>

Hi there! My name is Jonathan and I've been doing web development for as long as I can remember. This site is the place where I share my passion for the web.

Hi there! My name is Jonathan and I've been doing web development for as long as I can remember. This site is the place where I share my passion.

Hi there! My name is Jonathan and I've been doing web development for as long as I can remember. This site is the place where I share my passion..

Hi there! My name is Jonathan and I've been doing web development for as long as I can remember.

Box Styles

<div class="boxinfo">HaHa Info - Insert your text here right now! </div>  
<div class="boxsucces">HaHa Succes - Insert your text here right now!</div> 
<div class="boxerror">HaHa Warning - Insert your text here right now!</div> 
<div class="boxnotice">HaHa Notice - Insert your text here right now!</div>

HaHa Info - Insert your text here right now!

HaHa Succes - Insert your text here right now!

HaHa Warning - Insert your text here right now!

HaHa Notice - Insert your text here right now!

List styles – ul

<ul class="simplelist">
    <li>Ha List styles - Insert text</li>
</ul>

<ul class="minus-blue-list">
    <li>Ha List styles - Insert text</li>
</ul>

<ul class="minus-green-list">
    <li>Ha List styles - Insert text</li>
</ul>

<ul class="minus-orange-list">
    <li>Ha List styles - Insert text</li>
</ul>

<ul class="minus-gold-list">
    <li>Ha List styles - Insert text</li>
</ul>

<ul class="minus-black-list">
    <li>Ha List styles - Insert text</li>
</ul>

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Ha List styles - Insert text
Ha List styles - Insert text
Ha List styles - Insert text

Buttons 3D

<a href="#" class="button">Download</a>
<a href="#" class="button green">Download</a>
<a href="#" class="button blue">Download</a>
<a href="#" class="button yellow">Download</a> 
<a href="#" class="button red">Download</a>
<a href="#" class="button purple">Download</a>
<a href="#" class="button grey">Download</a>
<a href="#" class="button black">Download</a>

Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8 HaHa Info - Insert your text here right now! Nice :) If you say so! Oki doki :)

Simple buttons

<a href="#" class="simplebtn blue">Button 1</a>
<a href="#" class="simplebtn green">Button 2</a>
<a href="#" class="simplebtn orange">Button 3</a>
<a href="#" class="simplebtn gold">Button 4</a>
<a href="#" class="simplebtn black">Button 5</a>

Button 1 Button 2 Button 3 Button 4 Button 5

Tabs

                <div id="tabs_wrapper">
                    <div id="tabs_container">
                        <ul id="tabs">
                            <li class="active"><a href="#tab1">Tab 1</a></li>
                            <li><a href="#tab2">Tab 2</a></li>
                            <li><a href="#tab3">Tab 3</a></li>
                        </ul>
                    </div>
                    <div id="tabs_content_container">
                        <div id="tab1" class="tab_content" style="display: block;">
                            <p>1. content</p>
                        </div>
                        <div id="tab2" class="tab_content">
                            <p>2. content</p>
                        </div>
                        <div id="tab3" class="tab_content">
                            <p>3. content</p>
                        </div>
                    </div>
                </div>

Tab 1
Tab 2
Tab 3

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Sed eleifend, lectus at pulvinar laoreet, augue nunc ullamcorper dolor, sed accumsan est arcu sed risus. Quisque eget nibh sem. In sit amet sem in lacus tempus congue eget sit amet felis. Praesent ut enim nunc the place where I share my passion for the web.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor.

Accordion

<div class='accordionButton first'> HaHa Accordion! </div>
<div class='accordionContent'>Vivamus nec est purus, nec sodales metus.</div> 

<div class='accordionButton'> HaHa Accordion! </div>
<div class='accordionContent'>Vivamus nec est purus, nec sodales metus.</div> 

<div class='accordionButton'> HaHa Accordion! </div>
<div class='accordionContent'>Vivamus nec est purus, nec sodales metus.</div>
<div class="clear"></div>

HaHa Accordion - Insert your text here right now!

Consectetur adipiscing elit. Integer vehicula sem eget lacus porta interdum. Maecenas tincidunt faucibus felis eget malesuada. Donec ac felis dolor. Nulla tristique justo purus, vel consequat enim. Vestibulum at felis felis, eu vestibulum quam. Suspendisse molestie lobortis convallis. Vivamus nec est purus, nec sodales metus.

HaHa Accordion - Insert your text here right now!

Nulla tristique justo purus, vel consequat enim. Vestibulum at felis felis, eu vestibulum quam. Suspendisse molestie lobortis convallis. Vivamus nec est purus, nec sodales metus.