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 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.
Pingback: A free HTML5 and CSS3 theme | Jayj.dk | My Blog
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..
Pingback: Så er 2009 næsten ovre | Jayj.dk
Pingback: Html5 & CSS3 layout tutorials and templates
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!
Pingback: Kostenloses HTML5 CSS3 Theme zum Download - Webmaster Blog L1D.de
Pingback: 10 plantillas HTML5/CSS3 para ir practicando | Recursos para Diseñadores Gráficos y Web | Creativos Online
Pingback: 10 plantillas HTML5/CSS3 | RiCoTeRo X Blog
Pingback: 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow) | Site Design Tips
Pingback: 10+ Free HTML5-CSS3 Website Templates | WebDesign Collection
Pingback: A free HTML5 and CSS3 theme | Jayj.dk | WpMash - WordPress News
Pingback: 10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow) | Synergy Webdesign
Pingback: 10 + HTML5-CSS3 Website Template: progettiamo il web di domani! | paitadesignblog
Pingback: 15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com
Pingback: ” 10个免费的HTML5-CSS3网站模板– HTML5,CSS3,WEB前端设计开发资讯站
Pingback: 5 html5/css3 Tutorials og 5 html5/css3 Designs | Olufn.com
Pingback: Free HTML5 CSS3 Website Templates | Beat Fly Blog | tutorial photoshop jquery css
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
Pingback: 15 Free HTML5-CSS3 Templates to Start the Future of Web Design » abdie.web.id
Pingback: HTML5で構築されたテンプレート・フレームワークいろいろ | DesignWalkerdesignwalker.com | PORTFOLIO -POST批評空間-
Pingback: HTML5- und CSS3-Templates und -Tutorials | CSS, HTML, Templates, Tutorials | Dr. Web Magazin
Pingback: HTML 5.0 em só 2012 « Blog Estilos WebDesign
Pingback: 40款高质量精美网页布局模板
Pingback: 40 plantillas CSS y XHTML gratis y de alta calidad | CSSBlog ES
Great templates! :O
html 5 is the best!… thanks
Thanks
Pingback: 10个免费的HTML5-CSS3网站模板 | 俊顶视觉设计网 - 视觉创意,前端开发,web标准设计,高端网站,网页设计教程,网站策划,网站推广,网络营销。
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
Pingback: HTML5 Theme Updated to Version 1.2 « Jayj.dk
Pingback: 12 Free HTML5 and CSS3 Templates and Frameworks To Get You Started | Devlounge
Pingback: Fish XL » Blog Archive » A free HTML5 and CSS3 theme - Here are what I saw today …
Pingback: 50 Free CSS/(X)HTML Templates - Noupe Design Blog
Pingback: 彼岸(Into the wild) » Blog Archive » Free and Useful CSS/(X)HTML Templates
Pingback: 50 Free CSS/(X)HTML Templates | Best Web Design Tutorials
Pingback: 5 Free HTML5-CSS3 Templates to open the new online world | ZwebbieZ
Pingback: 从现在开始让我们爱上HTML5 | 完美时光
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?
Pingback: Coding Flexible Web Layouts in HTML5 and CSS | Android
This is a super. Loving it dude!
Thanks!
Pingback: Coding Flexible Web Layouts in HTML5 and CSS | My Blog
Pingback: Coding Flexible Web Layouts in HTML5 and CSS » TNT Factory - Web design studio, Graphic design, Search engine optimization
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
Pingback: 15 Excellent Step by Step HTML5 Website Coding Tutorials | Web Designer Aid
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
Pingback: 45 high quality CSS and XHTML web templates | WebsterBox
Pingback: How To Start Using HTML5 + CSS3 Now! | The KO Design Blog
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!
Pingback: Free Elegant XHTML/CSS Website Templates | YusraBlog
Pingback: 20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint
Pingback: 24 templates gratuits HTML5 et CSS3 | Kimly
Pingback: HTML5 Theme Updated to Version 1.2
Pingback: 5 Free HTML5 Wordpress Themes for Download | Wordpress Themes
Pingback: 10+ Free HTML5 Templates | Junenjuni.com :: Blog
Pingback: 10 thémes WordPress originaux en HTML5 | Quentin Zone
Pingback: WordPress Theme: HTML5Press
great elements i learned a lot
No problem – that’s the purpose of the theme
Pingback: Announcing HTML5Press - A free HTML5 and CSS3 WordPress theme
Pingback: WordPress Theme: HTML5Press 1.0
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 (:
Pingback: HTML5Press: A New Free HTML5 Theme for WordPress | WordPress News at WPMU.org
Pingback: HTML5 » Blog Archive » 15 temas gratuitos para WordPress en HTML5
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
Pingback: HTML5Press: A New Free HTML5 Theme for WordPress | Multidots Solutions
Pingback: SFCite | Blog | HTML5Press: A New Free HTML5 Theme for WordPress
Grate tutorial!! Thank you
Pingback: Teching » HTML 5 WP Thema
Pingback: 5 Best HTML5 Wordpress Themes Free Download | Web Design
Pingback: Free Download HTML 5 Web Template | Joshuadio WebDzGn® | I'm a Facebook, Android & Photoshop Lover. Not a GURU, just a GUY loving Social Media, IM, SEO, and Blogging.
Pingback: HTML5のフリーのWordPressフリーテーマ５ | WEB FREE
Pingback: Die 15 besten Free HTML5 WordPress Themes » Bloggonaut.net
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
Pingback: 15 Free HTML5 Website Templates for Your Stylish Designs | DesignFloat Blog
Pingback: 5 temas HTML5 para WordPress - wpargentina
Pingback: HTML5Press 1.8: Now With Update Notifications
Pingback: Latest Free HTML5 Website Templates 2011 |
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!
Pingback: 21 plantillas web gratuitas en HTML5 de gran calidad | Leska Peru – Recursos Webmaster Peru
Pingback: 21 free high quality HTML5 web templates | Tech Hum
Pingback: 30 High Quality & Fresh HTML5 And CSS3 Templates, Themes Free Download : DesignMock- Complete Design Sence
Pingback: Kostenlose und hochwertige Wordpress-Themes zum Download. | Geld verdienen im Internet - Suchmaschinenoptimierung, Affiliate Marketing,Selbständigkeit
Pingback: Beginner’s Guide To: Building HTML5/CSS3 Webpages
Pingback: Beginner’s Guide To: Building HTML5/CSS3 Webpages | Templates, Scripts, CMS, Graphics, Fonts, Flash, E-Books, 3D, Tutorials, Wallpapers.
Pingback: 15 Beautiful Hand-Drawn Free HTML5 Website Templates | PriscillaPresleyNg
Pingback: 20 World Top And Free HTML5 Website Templates : FreeThemes
Pingback: Temas HTML5 e CSS3 gratuitos para Wordpress
Pingback: Place » This is a NEW Place!
Pingback: Te recomendamos 5 temas en HTML5 para WordPress
Pingback: 20 Harika HTML5 Web Sitesi Şablonları | internet, tasarım, teknoloji ve kültür
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
Pingback: 21 plantillas web gratuitas en HTML5 de gran calidad | spp2
Pingback: New look on bexton.net | Bexton's Blog
Pingback: 20 Free HTML5/CSS3 Templates 2011 | 1step web design: Best for developer and designer
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?
Pingback: Jayj.dk - 2011 in Review | Jayj.dk
Pingback: 35 Plantillas Web Gratis en HTML5 y CSS3 | CreativaSfera
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
Pingback: My HTML5 theme is no longer free | Jayj.dk
Pingback: 15 Free and Handy HTML5 Frameworks | Pulse2 Technology and Social Media News
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
Pingback: Home Brew
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.
Pingback: Free HTML5 or CSS3 Templates For Web-Development
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
Pingback: 15 Free HTML5 Website & Admin Templates | Graphic & Web Design Inspiration + Resources
Pingback: Super Buby Theme, tema WordPress con Slider di immagini e testi in HTML5
Pingback: 40+ Useful; and Well Designed HTML5 Templates | GraphicsLava
Pingback: 40+ Useful and Well Designed HTML5 Templates | GraphicsLava
pretty theme, I will download and use it in my blog
Thank you