HTML5 & CSS3 Template

This W3C-compliant, CSS-based website template has a Creative Commons Attribution-Share Alike 3.0 Unported License.

Feel free to remix, copy, distribute and transmit this template. Just know that you must attribute the work in the manner specified by me. Please see the license. Also, if you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. All I ask is that you keep the credit links in the footer intact.

Let the Show Begin - Pre and Code

This is how it looks if you use pre and code together, for example to highlight and nicely markup a piece of code:

pre {
 font-size : 12px;
 background : #F0F0F0;
}

Example Blockquote

If you want to quote somebody, you can use this perfectly semantic example for a blockquote:

With the first link, the chain is forged. The first speech censored, the first thought forbidden, the first freedom denied, chains us all irrevocably.

Examples Alerts, Notice & Confirmation

These sample styles for alerts and notices are useful if you want to use the template in content management systems.

Alert: This is how an alert looks like.

Notice: This is how a notice looks like.

Confirmation: This is how a confirmation looks like.

Example Table

The following is the design for a table. The style is simple and user-friendly. Some of the effects were made with CSS3.

Example hCalendar

The following is a definition list in combination with the hCalendar microformat.

11-18-2010

Conference Name

http://www.conference-website.com/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec eleifend diam. Fusce lobortis odio ac sem scelerisque sed iaculis purus ornare.

Example Video

You can put your Video-Files here...

Example Audio

You can put your Audio-Files here...

Example Lists

Two different kinds of lists were styled: Ordered lists (ol) and unordered (ul) lists.

1. This is
2. The Ordered
3. Listing

• This is
• The Unordered
• Listing

Example Form

This is how a form will look like in this template.