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.
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.
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 🙂
Other versions of the theme
The theme is available as both WordPress and Blogger theme as well
- Download WordPress version by Tyler Longren
- Download MODx version by Ian (bit different design)
- Download Blogger version by Rethnaraj Rambabu (old version of the theme)
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.
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 😀
Mvh. Casper
Det kan blive fjernet ved at fjerne
-webkit-transition: margin-left 0.3s linear;fra.widget li aog-margin-left: 10px;fra.widget li a:hoverHej Jay.
Det var ikke fordi jeg ikke kunne finde ud af det hvis det var 😉
Det var mere “feedback” relateret..
Fedt template (html5) savner bare en dropdown i menuen ;o)
Doesn’t really look great in Opera 10.5
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
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 “;)?>
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”;)
Do your host support PHP?
Could you please send me an email on through my contactform
Thanks!
I guess that would help.
I was testing via localhost so it wasnt on any web host.
Silly me.
Ah, glad you made it work!
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
I can speak Italian, Spanish and a bit of English
Hello. There’s several tutorials on HTML to WordPress on the web
http://codex.wordpress.org/Theme_Development
http://themeshaper.com/wordpress-themes-templates-tutorial/
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ (a bit outdated, but still fine)
There’s also some Premium tuts from Net.tutsplus.com
http://net.tutsplus.com/articles/news/the-best-psd-to-html-to-wordpress-video-series-available-new-plus-tutorial/
http://net.tutsplus.com/articles/news/new-plus-tutorial-wordpress-beginner-to-master/
You can signup for Tutsplus here
Great templates! :O
html 5 is the best!… thanks 🙂
Thanks 🙂
Hi Jay,
I’ve converted this wonderful theme into a Blogger template. Please have a look at it.
http://www.bloggerbits.com/2010/09/css3-theme-free-blogger-template/
Nice!
I’ve updated the post with a link to it
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 🙂
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.
This is a super. Loving it dude!
Thanks! 🙂
Could you please use your real name next time?
This is a super. Loving it dude!
Thanks! 😀
Heeey I love this Design
Can u pleas help me to get it on my new fotboll blog maybe ?
Thanks mate
Thanks.
Are you using blogg.se? If so, I can’t really help you.
Sorry.
Hehe Fuck Blogg.se then 😀 nono but thanks anyway
U know something or someone or some site who can help
maybe u i want football theme design 😀 ?
Pis out
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
I see.
Try
#menu .current ul a { background: none; color: #333; text-shadow: none; }I make sure to have this in the next update. Thanks
You have wrongly added the link to 45 high quality CSS and XHTML web templates | WebsterBox its actually http://websterbox.com/?p=36 please update it..!!
The links are added automatically, but I’ve changed the link to the new one. Thanks
I was wondering if you were still going to be releasing this as a wordpress theme? Working on installing it myself but would love if a pro did it. Awesome template as well.
Sorry, but I don’t have any plan on releasing a WordPress version of it.
There’s several HTML5 WordPress themes out there such as
H5 by digwp.com http://themeclubhouse.digwp.com/
Toolbox by Automattic http://wordpress.org/extend/themes/toolbox
Hello mate, this is cool 😀
Could you tell me how to change the button’s color?
Thank you 😀
@John
You can find the button styles at
.btn, .more-link, input[type="submit"](style.css line 438)Rigel, see here:
http://www.longren.org/wordpress/html5press/
Jesper, sorry for the link in your comments, was just hoping this guy would get an email notification.
Excellent tutorial, I will use some of elements in my site such as links and logo
Thanks!
great elements i learned a lot
No problem – that’s the purpose of the theme 🙂
Your CSS3 &HTML5 theme is awesome!! The only thing is the pink color, i will change for another one, but apart of that, awesome!
Thanks! 🙂
I know many don’t like pink but lucky it’s very easy to change.
Really nice. i like it. Thanks for WP version.
Thanks (:
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 🙂
No problem 🙂
Grate tutorial!! Thank you 🙂
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.
You should take a look at
#wrapper {} #main {} #content {} #sidebar {}They control the width of the different areas.
Thanks, but I am using WordPress’d version 1.4
It’s still those you need to change the width of in style.css
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!
This is a HTML template, not a WordPress theme. You can the WordPress version by Tyler Longren here.
Hope that helps you 🙂
I just start learning about HTML 5 ( so late T_T ), tq for this useful resources. Hope I can share mine soon
cheers …
Glad you like it 🙂
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?
Hello Marcus,
Look at the bottom of the style.css. There’s CSS style for screens under 1024 pixels.
Sorry for the long reply – the comment landed in the spam folder
Thanks Jesper, Sorry didn’t check that far down 🙂 Got it all working now. Thanks
Great!
It’s a nice theme. It’s also funny that you included the ie6, ie7 warning, very good job!
Thanks, Vincent! 🙂
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.
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.
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…
There’s several guides on how to set up the mail function in Wamp
Here’s an example: Sending e-mail from localhost in PHP in Windows Environment
If you need a free host, you can try Zymic
Very cool Theme. Thanks for your excellent work!!
You’re welcome 🙂
hi jesper, so I wanted to put this new theme on my blog more I can not. as I do. please answer!
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
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
This is NOT a WordPress theme
The WordPress version is called HTML5Press
Where do I type in *MY* Email so it gets sent to me?
You can enter the email at line 12 in sendmail.php
I tried that but I didn’t get en email
Hello Nils,
Is the mail() function activated on your website?
Great theme! I’m making some color changes, etc.
Good job.
Thank you!
The theme is meant as a starting point so it’s great that you customize it to fit to you 🙂
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.
Thanks! Glad you like it 🙂
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
Hello ham,
Open
style.cssand 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.
Hi
Thanks for providing such a nice template.
I want to use this template for my PHP tutorial pages.Can I?
Regards,
MascotP
Yes, you’re free to use it 🙂
It’s licensed under New BSD License
pretty theme, I will download and use it in my blog 🙂
Thank you 🙂
thanks i try using this template for myblog …really good
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
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.
Thank for web thema 🙂
You’re welcome 🙂
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.
Hello Ian,
That looks great – thanks! I’ve added a link to your template in the posts.
– Jesper
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!
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
thanks for thema
You’re welcome 🙂
Thanks for your thema. I like it 🙂
You’re welcome 🙂
Thanks for your thema. I like this
Theme looks great. Do consider updating it to current trend.
Very nice theme.It is responsive and also looks great.
Time to seeing this post what great demo, i really happy with us. thank you.