Webdezign - Web design London

We love web design; do you?
Twitter Google+ facebook Follow @webdezign

Free HTML5 template

Estimated reading time: 0 minutes, 55 seconds

Update!

The templates on this page has been very popular so I decided to make another one. This one includes a little javascript by Nathan Searles and is based on the 960grid. If you like this template, decide to use it or have any questions, please feel free to comment.

2column with slides
Download   Demo


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
2columnDownloadDemo
3columnDownloadDemo

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.

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

Web designers london

ShareTweet about this on TwitterShare on FacebookShare on Google+Share on RedditDigg this

57 Responses to “Free HTML5 template”

  1. Gojeg says:

    Can I implement it on Blogger/WP template?

  2. Peter says:

    @ 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.

  3. Html5 & CSS3 layout tutorials and templates says:

    [...] 9. Free HTML5 template [...]

  4. 15 Useful CSS3 and HTML3 Templates and Frameworks - Speckyboy Design Magazine says:

    [...] Ampersand HTML5 [...]

  5. 10 usefull css3 and html 5 templates | webozaurus.com | from dinosaurs to today's web technologies says:

    [...] Template info [...]

  6. Gary says:

    Thank you very much. These two templates look easily customizable. You are a blessing to fledgling designers.

  7. Peter says:

    You are welcome Gary, let us know if there is anything in particular you are looking for in the future versions.

  8. 10 plantillas HTML5/CSS3 para ir practicando | Recursos para Diseñadores Gráficos y Web | Creativos Online says:

    [...] Free HTML5 Template [...]

  9. 10 plantillas HTML5/CSS3 | RiCoTeRo X Blog says:

    [...] Free HTML5 Template [...]

  10. 10 + HTML5-CSS3 Website Template: progettiamo il web di domani! | paitadesignblog says:

    [...] Free HTML5 Template [...]

  11. 15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com says:

    [...] 4. Free HTML5 template [...]

  12. chris says:

    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.

    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?

  13. Sandip Waghmare says:

    Thanks 4 templates.

  14. Peter says:

    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.

  15. HTML5- und CSS3-Templates und -Tutorials | CSS, HTML, Templates, Tutorials | Dr. Web Magazin says:

    [...] Info | Demo | Download Template [...]

  16. web tasarımı says:

    thanks for sharing, nice templates..

  17. seolar says:

    Very useful basic template. I think it will be really good starting point for own creations.

  18. 12 Free HTML5 and CSS3 Templates and Frameworks To Get You Started | Devlounge says:

    [...] Free HTML5 Template [...]

  19. DWW Dennis Weidmann Webdesign Koblenz says:

    nice informations thank you!!!

  20. silvia says:

    hi!
    I’d like to see an image gallery in html5. with different sections image zoom

  21. 25 Best Html5 Tutorials & Demos and Resources says:

    [...] CSS 3: The Techniques You’ll Soon Be UsingHTML5 canvas clockCoding A HTML 5 Layout From ScratchFree HTML5 templateView Demo1View Demo2Building a live news blogging system in php. Spiced with HTML5, CSS3 and [...]

  22. 16 Plantillas HTML5 gratis y útiles says:

    [...] 1. HTML5 Template [...]

  23. 从现在开始让我们爱上HTML5 | 完美时光 says:

    [...] Tutorial Using HTML 5 and CSS 3 7. A free HTML5 and CSS3 theme 8. A free HTML5 and CSS3 theme 9. Free HTML5 template 10. Free HTML5 Templates 固定链接: http://www.wmtimes.cn/post/20101117665.html | [...]

  24. How To Start Using HTML5 + CSS3 Now! | The KO Design Blog says:

    [...] HTML5/CSS3 webpage templates available for free download/use Free HTML5 & CSS3 Theme Free HTML5 Template Create an Elegant Website with HTML5 & CSS3 Tweet this! This entry was posted in web design [...]

  25. Pat says:

    Hello,
    The HTML5 templates are very interesting.
    I’m curious as to how you constructed them. What WYSIWYG editor was used?

    I’m using an ancient DreamweaverMX2004 editor.

    What would you suggest be used to design in HTML5 and CSS3?

    Also, ‘article’ seems to replace ‘div’, is this correct?

    Thanks!

  26. Peter says:

    Hi Pat,

    I’m glad you are excited about the new HTML5 tags; as are we, unfortunately it will take quite some time before we can implement the majority of them while taking browser support into account. See http://www.findmebyip.com/litmus/ and you will know what I mean.

    The templates were hand coded in Dreamweaver MX but not in WYSIWYG mode. I don’t think there is any WYSIWYG software with support for all the new tags yet, but I may be wrong. So as you can see it doesn’t matter how old your software is, you can use what you have, but you need to get into the code. The same goes for the CSS, you need to learn the new selectors, understand what works in which browsers and make judgment calls on what to use and what to wait with.

    Article is just one of the new tags in HTML5 and it doesn’t really replace the div, as we use divs for other things (as divs) the article is a new semantic tag, telling us this is the main article of the page. Same as the “header” and “footer” has its own tags.

    A few good resources if you are just starting out would be:
    http://www.html5rocks.com/
    http://www.focus.com/images/view/11905/
    http://diveintohtml5.org/
    http://www.css3.info/

    Good luck, and keep us posted on your progress!

  27. matrobriva says:

    Wonderful layout.

  28. 20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint says:

    [...] 10. Two Column HTML5 Template with Slider [...]

  29. 24 templates gratuits HTML5 et CSS3 | Kimly says:

    [...] Template 2 colonnes avec slider HTML5 [...]

  30. Karen Denning says:

    Very nice looking template!

    Thank you for generously sharing this with others to learn from :-)

    ~Karen

  31. Sanju says:

    Nice templates. Thanks for Sharing

  32. 15 Free HTML5 and CSS Templates says:

    [...] Form and a lot more stuff for various functionalities. VividPhoto Download PageView the Demo →HTML5 Template HTML5 Template Download PageView the Demo →HTML5 Admin Template HTML5 Template Download [...]

  33. Photoshop VIP ☞ HTML5とCSS3でデザインされた無料テンプレート素材15個まとめ (PSDファイル付) says:

    [...] Free HTML5 Template [...]

  34. 免费html5模板 | 老K博客 says:

    [...] HTML5 Template 免费html5模板-html5 [...]

  35. yannick says:

    i want more template.
    please ok
    you are the best

  36. Peter says:

    Yannick, we are working on some more, check back soon.

  37. FREE HTML5 and CSS3 Themes for Wordpress | TBX Studio says:

    [...] Demo/Download [...]

  38. Jess says:

    Thanks for the demo, great inspiration for a newbie at HTML5 and CSS3

  39. Kristen says:

    HTML5 template with slides does not work in IE 7 or 8 – images and pagination don’t show up.

    Changing $(‘#slides’).slides({
    to $(‘aside#slides’).slidesContent({ and changing the appropriate names in the html and css makes the initial image show up in IE 7 and 8, but then the slide functionality doesn’t work.

    The downloaded index file doesn’t even seem to run in IE. Any ideas on either problem?

  40. 40 Beautiful Free HTML5 & CSS3 Templates says:

    [...] 38. HTML5 template [...]

  41. 15 Templates HTML5 y CSS | Soy programador says:

    [...] HTML5 Template [...]

  42. Peter says:

    @Kristen, I’ve downloaded the template and have no problems running it in IE6, 7 and 8. Try and download the zip again, maybe one of the files got corrupted during download?

  43. Pricilla Macmillen says:

    Hey, your is a Amazing page. I love this page, I have liked it on Twitter.

  44. Lynn Allen says:

    thank you so much! I have a faculty member who needs a personal page. We both love this template, and you so so kind to offer it for free.

  45. Charlie says:

    Hi, really liking your work. Guys, I have been teaching myself css and html over the past few months and now I am currently working on some wordpress/joomla templates :) if I can get my templates looking nearly half as good as yours that would be great hehe :) keep up the good work will lookin from time to time :)

  46. Paul says:

    Hi

    This is the best site ever keep them coming.

    Please send me other Active Webdezign Ltd. link tamplates

  47. 17 قالب رایگان و زیبا برای HTML5 و CSS - تیم طراحی و بهنیه سازی آیدیز says:

    [...] HTML5 Template [...]

  48. 21 Free HTML5 and CSS3 Corporate & Folio Templates | codeManiac - Snippets, Templates, API and the best developer content says:

    [...] Free HTML5 Template [...]

  49. Govardhana says:

    cool templates, thanks for sharing

  50. 30 Useful HTML5 and CSS3 Web Templates says:

    [...] HTML5 template [...]

  51. 40 Beautiful Free HTML5 & CSS3 Templates | HTML 5 Examples says:

    [...] javascript and more to help you create your own HTML5 powered website. Info & Download 38. HTML5 template A simple HTML template that comes in one column, two column and three column variations. Info [...]

  52. Michelle says:

    I love your template designs! I was just wondering though. I downloaded them to play around with and I notice when I click on the demo on your website they take up the full width of my browser screen (although some sections still need size adjusting) but the download versions are much smaller and don’t take up the full length of the screen. How would I change this to take up the width of the screen?

  53. Peter says:

    Hi Michelle, they should be the same size. Let me email you and get some screenshots to figure out what is happening here.

    I’m glad you liked the templates.

  54. Top Free HTML5 & CSS3 Templates | Web Duos says:

    [...] 38. HTML5 template [...]

  55. Designrshub - Design Articles, Inspirations, Resources and Freebies says:

    [...] 45. Two Column HTML5 Template with Slider [...]

  56. ee says:

    Thank you for sharing… really appreciate it. nice work

  57. j0lly says:

    yep, really nice and easy to implement as layout for a site! thanks so much

Leave a Reply