A free HTML5 and CSS3 theme

A free HTML5 and CSS3 theme

I continue my November Christmas and it’s now in week 2, which means I’ll giveaway the second theme out of 3. HTML5 and CS3 is hot topics for web developers right now. Especially CSS3, because it’s so much easier to build beautiful websites. HTML5 is also so much nicer than HTML4.

It wasn’t the plan to actually release this theme, but it was so fun to make and I really like it, so I want to share it with all of you.

Download Demo Downloaded 56,890 times

HTML5, CSS3 – What?!

HTML5 is the next major revision of HTML. Instead of, let’s say <div id="header"></div>, can you now use <header></header>. Cool, right? You can read more about HTML on Wikipedia or on html5doctor.

CSS3 is currently under development, but the most modern browsers as Safari, Chrome and Firefox support some of the features. Read about CSS3 on CSS3.info, or use Google to find something about it.

The Theme, please!

You are free to use this theme for any purpose – both private and commercial. You’re allowed to remove the credit link in the footer, but please, please leave it there. It allows me continuing creating free themes.

HTML5 v2 thumb Download Demo Downloaded 56,890 times

Features

  • Uses HTML5 and CSS3
  • Uses the CSS preprocessor LESS
  • Awesome design with a hot pink color! (can easily be changed)
  • Fully working Ajax PHP contact form
  • Modernizr for enabling of HTML5 elements & feature detects
  • Uses the fonts Open Sans and Merriweather, both loaded from Google Fonts
  • Uses a 12-col grid system, known from Twitter Bootstrap
  • The theme supports Google Prettify but it is not included in the download. Download google-code-prettify and view the readme for how to use
  • Friendly IE6 & IE7 warning; user is recommended to update or install Google Chrome Frame
  • Free to use! (: – It’s released under New BSD License. The license is included in license.txt

The theme has been tested in all major browsers and it’s awesome! It might not work totally awesome in IE6 and IE7, but who cares?

Any comments/suggestions are much appreciated :)

Download Demo Downloaded 56,890 times

Other versions of the theme

The theme is available as both WordPress and Blogger theme as well

Update March 25, 2010

  • Dropdown menu support
  • Cleaner and better code
  • More CSS3 included

Update September 1, 2010

Rethnaraj Rambabu has converted into a Blogger template. Download it here.

Update September 6, 2010

Version 1.2 has been released. Code improvements and more CSS3. The theme it now released under New BSD License.
Read the full 1.2 update post

Update April 16, 2011

Tyler Longren has made a WordPress theme of this theme.
Download now at his website

Update May 19, 2011

Version 2.0 of the theme has been released! New design and major improvements. Click the link to read more.

Update August 1, 2012

Version 2.1 of the theme has been released! Improved design and other major improvements. It now uses LESS as a CSS preprocessor and introduces a responsive grid-system. Click the link to read more.

Posted in , on
46 likes

187 responses

  1. Hej Jay.

    Det ser da meget godt ud..
    Jeg har dog en ting som jeg ikke helt kan lide..
    “Sidebar heading”, dens link syntes jeg ikke skal have padding, ved hover.
    Bare min mening ;)

    Fortsat det gode arbejde :D

    Mvh. Casper

    1. Det kan blive fjernet ved at fjerne -webkit-transition: margin-left 0.3s linear; fra .widget li a og -margin-left: 10px; fra .widget li a:hover

    1. Could you please provide more information on that?

      Some of the CSS3 features doesn’t work in Opera yet, but it should still be nice and functional

  2. Hej, awesome skabelon, men hvordan får jeg kontakt siden til at arbejde 100%. Hvad jeg mener med dette er jeg skrive i mit navn, min e-mail, emne, besked. Jeg Klik på Send og det siger beskeden er sendt, men det siger også dette nedenfor; else echo ‘
    Der var et problem at sende din e-mail

    »;) Else (/ / fejl blev fundet, output alle fejl til brugeren. echo ‘
    «Echo implodere (‘
    «$ Fejl); echo ‘

    »;)) Else (/ / Brugeren har forsøgt at få adgang til denne side direkte eller en Spambot echo” Du er ikke tilladelse til at få adgang til denne side direkte “;)?>

  3. Hi, awesome template, BUT how do I get the contact page to work 100%. What I mean by this is to type in my name, my email, the subject, the message. I click submit and it says the message has been sent, however it also says this below; else echo ‘
    There was a problem sending your email

    ‘;) Else (/ / Errors were found, output all errors to the user. echo ‘
    ‘; Echo implode (‘
    ‘, $ Errors); echo’

    ‘;)) Else (/ / The user have tried to access this page directly or is a Spambot echo “You’re not allowed to access this page directly”;)

      1. I guess that would help.
        I was testing via localhost so it wasnt on any web host.
        Silly me.

  4. Hello, i would install this template in my site of school, but i must convert this template in a WordPress Theme.
    I am not able to convert this template and i don’t find any tutorial.
    Can you explain me how convert this fantastic template?
    I will the leave the credit link in the footer :)
    Thank’s

  5. As i can tell its awesome BUT html 5 and css3 doesn’t supported with IE 6,7,8 . The Microsoft doesn’t know what it is for now so i can’t reccomend my clients to build the websites with this new technology.

    Anyway its great to see the progress and see what can be done with it. Thanks for this free example of HTML5 theme example. Will go to see what can i learn from it :)

    1. Thanks.

      The theme adds some javascript for HTML5 support in IE.
      Why wait using CSS3? It adds awesome stuff in browsers that support it. If they don’t, just make sure there’s a fallback.

  6. Very nice theme. One problem I’ve noticed that I can’t seem to fix. When About is current, the menu items are all shown as selected. Click on About and you’ll see what I mean. Any ideas how to fix that?

    Thanks
    gb

      1. Hello mate, this is cool :D
        Could you tell me how to change the button’s color?
        Thank you :D

  7. hello jesper,
    I want to say many thanks for this free html5 and css3 web template, And also follow you with twitter cause i found really helpful and creative web designs.

    thansk a lot again :)

  8. Hey, Nice theme.
    How can I make it more wider?
    Like add another sidebar(make it 3 columns)
    I dont get what portions I will need to edit in CSS…
    Thanks.

  9. I just installed this theme on wordpress 3.2 and it said the theme was broken, reverting to default theme. Now I get a white screen for the front-end and the admin area!

  10. Hello All – Has anyone had any issues with Google Chrome and this template? With a max 1024 screen the template doesn’t lay properly on the screen. But I cant find anywhere where it is wider than 1000pixels. The #wrapper #content and #sidebar are all within the 1000pixels so it should display properly on 1024 monitors, instead the sidebar displays at the bottom of the content.

    Any ideas where to look in the css file?

  11. Hi,

    I´m trying to get the “Ajax PHP contact form” of the previous version of this template to work in localhost using Wamp and the PHP Mailer v5.1, but I´m having some problems since I´m a newbie with PHP…

    Can someone please help me?

    Thanks in advance.

    1. Hello,

      No, sorry. I don’t know anything about PHP Mailer.

      Why do you want to send mails from your localhost? If it’s for testing, I suggest you upload it to a live server.

  12. Yes, I just want to show that works in a project developed to the University. I don´t know any free live servers to test it, and has I said, I just need to show that works without the need to purchase any live server.

    I mentioned PHP Mailer just because it´s one of the ways that I checked in the Web that can help me, if there is any other better way to put it to work, it would be awesome to know about it once I´m really needing this to work…

    1. I’m sorry, but I not sure I understand what you mean

      You want to use this theme on your blog but you can’t?

      This is just a HTML template and not a functional theme. There’s a WordPress version called HTML5Press

  13. I put the files in the wp-content/theme/html5-v2 but the theme does not show up in wp theme admin :/

    Any advice?

    br Anders

  14. Great work! I like your colours. I found out about this theme from Yii version of this theme some weaks ago and now I found out that there is available wordpress version. Exactly what I need. Thank you very much.

  15. Pingback: Home Brew
  16. hi plz i want to change the place of the side to the left because i have a lot of elements to add can you pls help with that and thanks for the design i’ll keep your name on it once i’ll finishe

    1. Hello ham,

      Open style.css and find:

      #content {
      	float: left;
      	width: 620px;
      }
      
      #sidebar {
      	float: right;
      	width: 300px;
      }
      

      Change the floats, so #sidebar has float: left; and #content has float: right;
      You might have to adjust the width as well

      Hope that helps you.

  17. Sorry me again,

    OK to nest boxes inside of your content boxes looks needed something like this:

    a box here
    a box here
    a box here

    Never worked out quite why but the styles applied to the div with style content stop the boxes from displaying.

    AS far as I can tell also it appears that the nested cols also need to add up to 12 and not the number of the parent container.

    Many thanks

    Ian

    1. Hello Ian,

      Do you have a link to an example of what you’re talking about? That will make it easier for me to understand what the problem is.

  18. I have made a few changes to this template mostly the colour and a few other things and converted for use on the MODx cms. If anyone uses MODx and wants this template for use on that platform then it can be downloaded from here http://manleynet.co.uk/blog.html/2014/01/29/download-modx-template/
    What you see on my site is this template in action and the download file of this explains everything you need to get it working on MODx
    Thanks Jay for this template.

  19. When I originally commented I seem to have clicked the -Notify me when new comments are
    added- checkbox and now every time a comment is added I recieve 4 emails with the exact same comment.
    Perhaps there is a means you can remove me from that service?
    Kudos!

    1. Hello,

      That sounds very weird. I just tested it and I can’t reproduce your issue.

      In the email you get, there should be a line called “Want less email? Unsubscribe from all follow-up comments or modify your Subscription Options.”

      You should be able to unsubscribe by clicking that.

      – Jesper

Leave a Reply