HTML5 & CSS3 Template
This CSS3- & HTML5-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 - Sample Multi-Colum Paragraph
Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Quisque elit libero, ullamcorper vitae tempor nec, auctor a turpis. Etiam pellentesque sodales lobortis. Proin nunc nisi, tincidunt quis tincidunt quis, suscipit sit amet est. Praesent aliquet justo eu lorem adipiscing quis feugiat magna interdum. Quisque non justo in ipsum tincidunt elementum eu eu nulla. Donec non ipsum leo, in ultricies orci. Proin ornare, urna a lobortis tempor, quam dui consequat nisl, vel pharetra enim odio ac libero.
Sample Headline
Proin eget massa eget urna ullamcorper cursus. Curabitur sodales posuere felis, in pulvinar odio sollicitudin id. Nullam nec lacinia odio. Fusce vitae mauris eu tellus feugiat euismod nec eu lorem. Sed eros arcu, egestas eget varius malesuada, ipsum tinci dunt element um eu, mollis vel dolor. Sed vel velit sapien.
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:
Jonas JacekDuring my years in the Internet Marketing business I have seen and done many things I never thought would be of interest to me or anyone else.
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.
| Tag | Info | Attributes |
|---|---|---|
| <abbr> | abbreviation | global attributes** |
| <area> | in an image map | alt, coords, href, hreflang, media, ping, rel, shape, target, type |
| <article> | article/ content | global attributes** |
| <aside> | sidebar | global attributes** |
| <audio> | sound content | autobuffer, autoplay, controls, loop, src |
| <b> | bold text | global attributes** |
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.
- This is
- The Ordered
- Listing
- This is
- The Unordered
- Listing
Example Form
This is how a form will look like in this template.