Categories:
- design
- News
- technology
- Tutorials

Free HTML5 template

26 Commentsin design10th Jan 2010by Peter

I’ve been playing around with some of the new HTML5 elements and ended up with a little template that I thought I would give away. I created one 2 column layout and another 3 column with a little contact box. No serverside code has been included so the form won’t work until you add the script of your liking.

In both versions I included the PSD so you can edit the sprites file if you wish to play around with it. Each zip file contains:

1 html file
1 css file
1 logo
1 sprite image

You are completely free to use them as is or modify these templates.

Download Demo

Download Demo

If you are interested in more layouts like these please leave a comment and let us know what kinds you would like to see more of.

Web designers london

Share this article

latest blog posts in design

Google looked different this morning

As most of you will know, Google actively A/B tests a multitude of elements and pages at any given ...

The common fonts of the web and why we use them

If your computer and browser does not support Verdana it will try and use Arial, if there is no support ...

Free wordpress 2.9 theme – Bright lemon

Bright Lemon is a free template to use with the open source blog WordPress. ...

Free download – Glossy PSD buttons

We thought we would give away some free glassy buttons! They are made using Photoshop and each button is made ...

read and write comments

26 Comments »

RSS feed for comments on this post. TrackBack URL

# 1
Social comments and analytics for this post…

This post was mentioned on Twitter by webdezign: New Blog Post: : Free HTML5 template http://www.webdezign.co.uk/blog/design-blog/free-html5-template/...

Trackback by uberVU - social comments — 10/01/2010 @ 8:38 pm
# 2
Can I implement it on Blogger/WP template?

Comment by Gojeg — 11/01/2010 @ 7:51 am
# 3
@ Gojeg, you are free to implement it wherever you would like. It does not work out of the box with either WP or Blogger but should you wish to turn it into a template please feel free to do so.

Comment by Peter — 11/01/2010 @ 10:49 am
# 4
[...] 9. Free HTML5 template [...]

Pingback by Html5 & CSS3 layout tutorials and templates — 15/03/2010 @ 8:34 pm
# 5
[...] 9. Free HTML5 template [...]

Pingback by 10个Html5和CSS3结构的模版下载 | Booto'Blog — 02/04/2010 @ 10:39 pm
# 6
[...] 9. Free HTML5 template [...]

Pingback by 10个Html5和CSS3结构的模版下载 - Loo Design — 02/04/2010 @ 10:42 pm
# 7
[...] Ampersand HTML5 [...]

Pingback by 15 Useful CSS3 and HTML3 Templates and Frameworks - Speckyboy Design Magazine — 16/04/2010 @ 11:55 am
# 8
[...] Ampersand HTML5 [...]

Pingback by 15 Useful CSS3 and HTML5 Templates and Frameworks | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! — 17/04/2010 @ 12:48 am
# 9
[...] Ampersand HTML5 [...]

Pingback by 15 Useful CSS3 and HTML5 Templates and Frameworks | Forum on China Wholesale Lots — 20/04/2010 @ 1:45 pm
# 10
[...] Template info [...]

Pingback by 10 usefull css3 and html 5 templates | webozaurus.com | from dinosaurs to today's web technologies — 28/04/2010 @ 9:24 am
# 11
Thank you very much. These two templates look easily customizable. You are a blessing to fledgling designers.

Comment by Gary — 07/05/2010 @ 9:24 pm
# 12
You are welcome Gary, let us know if there is anything in particular you are looking for in the future versions.

Comment by Peter — 10/05/2010 @ 10:06 am
# 13
[...] Free HTML5 Template [...]

Pingback by 10 plantillas HTML5/CSS3 para ir practicando | Recursos para Diseñadores Gráficos y Web | Creativos Online — 01/06/2010 @ 4:10 pm
# 14
[...] Free HTML5 Template [...]

Pingback by 10 plantillas HTML5/CSS3 | RiCoTeRo X Blog — 01/06/2010 @ 4:30 pm
# 15
[...] as a free download.Many new elements are used and Modernizr is integrated for IE compatibility.Free HTML5 TemplateA HTML layout that comes in 2-column and 3-column versions.It also includes the .PSD file of the [...]

Pingback by 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow) | Site Design Tips — 02/06/2010 @ 4:01 am
# 16
[...] Free HTML5 Template [...]

Pingback by 10+ Free HTML5-CSS3 Website Templates | WebDesign Collection — 02/06/2010 @ 5:30 am
# 17
[...] Free HTML5 Template [...]

Pingback by 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow) | Synergy Webdesign — 03/06/2010 @ 8:33 am
# 18
thanks for giving us, the webdeveloper community those basic templates. There are a lot of features and so much possibilites with the new techniques HTML5 and CSS3 for creating high end and modern websites. And even the old fashioned browsers are supported like IE6 an less!

Thanks a lot for those templates!

Comment by Ludwig König — 06/06/2010 @ 7:55 am
# 19
[...] Free HTML5 Template [...]

Pingback by 10 + HTML5-CSS3 Website Template: progettiamo il web di domani! | paitadesignblog — 06/06/2010 @ 4:15 pm
# 20
[...] 4. Free HTML5 template [...]

Pingback by 15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com — 07/06/2010 @ 7:53 am
# 21
[...] Free HTML5 Template [...]

Pingback by ” 10个免费的HTML5-CSS3网站模板– HTML5,CSS3,WEB前端设计开发资讯站 — 07/06/2010 @ 2:58 pm
# 22
Thank you!

I have an issue though, this might be simple CSS, but I’m not too familiar with it.. I have just begun editing this template a bit to use on my dad’s site.

http://uruapanauto.com/2col/ Only issue so far since i’m trying to get the layout right before I edit colors and such, is, how do I move my text more to the left from the article tags?

Comment by chris — 17/06/2010 @ 12:57 am
# 23
Thanks 4 templates.

Comment by Sandip Waghmare — 17/06/2010 @ 7:59 am
# 24
Hi Chris, I’m not really sure what you mean. If it is the text inside the article tag you can decrease the padding from 20px on article (line 52 of css) and if you do that you should also decrease the article h1 (line 189 of CSS) by the same amount to keep the text aligned.

The only other thing I can think of that you might mean is increasing the gap between the section of the left and the article itself. That can be done by reducing the width of the article (line 52 of css).

Let me know if you still need help.

Comment by Peter — 17/06/2010 @ 10:25 am
# 25
[...] Free HTML5 Template A HTML layout that comes in 2-column and 3-column versions. It also includes the .PSD file of the layout. [...]

Pingback by Free HTML5 CSS3 Website Templates | Beat Fly Blog | tutorial photoshop jquery css — 18/06/2010 @ 9:02 am
# 26
[...] Info | Demo | Download Template [...]

Pingback by HTML5- und CSS3-Templates und -Tutorials | CSS, HTML, Templates, Tutorials | Dr. Web Magazin — 26/07/2010 @ 12:38 pm

020 8446 1515

Free HTML5 template

tag cloud

latest blog posts in design

read and write comments

26 Comments »

Leave a comment