Elemente 2

Alerts


<div class="alert info_msg">Text goes here... </div>
<div class="alert error_msg">Text goes here... </div>
<div class="alert note_msg">Text goes here... </div>
<div class="fixed_alert tip_msg">Text goes here... </div>

<div class="alert succes_msg">Text goes here... </div>
<div class="alert saved_msg">Text goes here... </div>
<div class="alert exclamation_msg">Text goes here... </div>
<div class="fixed_alert battery_msg">Text goes here... </div>
Info: This is an informative message.
Error: Uhh, here is a critical error in functions.php on line 274.
Note: Please verify data again before submit.
Tip: This message is fixed, you can't close it!
Succes: Your message was added successfully.
Saved: Your personal settings were saved..
Exclamation: Attention, editing of this file may harm the server.
Custom: This message is fixed, you can't close it!
 

CSS3 Buttons


<a href="#" class="button color size form">Text on button</a>

color size form are optional. You can create a button only with this class button

For example - blue button structure: <a href="#" class="button blue small">Small Button</a>
<a href="#" class="button blue">Default Button</a>
<a href="#" class="button blue large">Large Button</a>
<a href="#" class="button blue bigger">Bigger Button</a>
<a href="#" class="button blue bigger rect">Rectangle Button</a>
<a href="#" class="button blue bigger embossed">Embossed Button</a>
<a href="#" class="button blue bigger rounded">Rounded Button</a>
 

 
 

Table


Table Default Style

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5
 

Table Default Style w/h footer

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Footer line 1 Footer line 2 Footer line 3 Footer line 4 Footer line 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5
 

Table Style 2

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5
 

Table Style 2 w/h footer

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Footer line 1 Footer line 2 Footer line 3 Footer line 4 Footer line 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5
 

Table Style 3 (CSS3 based)

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5
 

Table Style 4 (CSS3 based)

Table Head 1 Table Head 2 Table Head 3 Table Head 4 Table Head 5
Frontline 1 Frontline 2 Frontline 3 Frontline 4 Frontline 5
Second line 1 Second line 2 Second line 3 Second line 4 Second line 5
Third line 1 Third line 2 Third line 3 Third line 4 Third line 5
Fourth line 1 Fourth line 2 Fourth line 3 Fourth line 4 Fourth line 5

Columns


This is a sample page with the sidebar on the right. You will also find various column layout examples that should help you out.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum.

 
1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

 
1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

 
3/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum.

1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

 
1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.

 
2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus. Aenean erat ligula, pharetra non eleifend a, luctus ac orci. Integer euismod dignissim sodales. Curabitur massa lorem, consequat quis consectetur vel, imperdiet id dui. Integer tristique risus placerat tellus convallis et interdum lorem feugiat. Etiam pretium lacus vel eros semper at feugiat eros rutrum.

1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In augue dolor, semper eu cursus et, pulvinar tempor nisl. Nullam iaculis rutrum posuere. Morbi volutpat tempus nisi sit amet ultrices. Nullam nec sollicitudin enim. Integer a diam nisi, non vestibulum lacus.