Lofotweb

HTML5 & CSS3 Template

This CSS3- & HTML5-based website template has a Creative Commons Attribution-Share Alike 3.0 Unported License.

Dubai, U.A.E. 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.

Press Agency

#
Sample Image Description

Let the Show Begin - Sample Multi-Colum Paragraph

#

Berlin Germany 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.

Press Agency

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 Jacek
During 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.

Mini HTML5 Reference Guide
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.

  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.


Author: Jonas Jacek | Date: 2010-09-16 | Comments: 7

Tags: , , ,