HTML5 Theme Updated to Version 2.0

HTML5 Theme Updated to Version 2.0
Please note: This is an old post. The information is probably not accurate and up-to-date anymore.

I’ve just released version 2.0 of my free HTML5 and CSS3 theme. Both design and code has been been through major improvements and is much much better than before.

Download Demo Downloaded 79,076 times

Here’s a preview of the new design (click for demo)

Screenshot of version 2.0

Features of the Jayj HTML5 theme

  • Uses HTML5 and CSS3
  • Awesome design with a hot pink color!
  • Fully working Ajax PHP contact form
  • Modernizr for enabling of HTML5 elements & feature detects
  • Respond.js – a lightweight polyfill for min/max-width CSS3 Media Queries
  • Uses Droid Serif, loaded from Google Fonts, for the headings
  • IE6 & IE7 warning (can easily be edited to IE6 only or removed)
  • 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 looks a bit funny in IE6 and IE7, but who cares?

See the original post for more information

Other versions of the theme

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

48 responses

  1. Pingback: A free HTML5 and CSS3 theme
  2. Pingback: HTML5Press 1.5
  3. Pingback: HTML5Press 1.5

    1. That’s strange. I’ve noticed some issues as well

      I think it might be because of the gradient background on the body element.

      Could you please trying to change the body element styling to this?

      body { 
	color: #333;
	font: 16px/28px Georgia, 'Times New Roman', Times, serif;
	background: #eee url(images/bg.png) repeat fixed;
}

  7. Hi,
    Great template. Looks similar in most modern browsers.
    Found a few little bugs though in FF 3.6.13 installed on FreeBSD:
    – looks like some FF ignore background-size property when -moz-linear-gradient is used with not-fixed units, so “-moz-background-size: 16px 16px;” should be added to body style (I recommend adding -webkit and -o properties as well..) in order for your diagonals to look as expected.
    – looks like #site-description gets 100% width of it’s parent and needs text-align:right, instead of float:right (or maybe, for cross-compatibility, both?) in order to look as expected in my tested FF..
    – in 1024×786 resolution I get horizontal scrollbar, caused by “*box-shadow” properties, untill I add overflow:hidden; to #wrapper.. Am not sure if this is the best solution, please let me know if you find a better one..

    I enjoyed working with you code and the design is just great. Thank you for sharing this! Today-tomorrow will upload final branch to my new website – TopRiddle.com

    1. Thanks.

      I know there’s issues with Firefox 3.6 – Update it. Firefox 5 is already out and Firefox 6 is coming very soon.

      Is it only in Firefox 3.6 you get the horizontal scrollbar?

    1. That’s a personal preference. I’ve never used the body as a wrapper.

      But feel free to change it – and if you do, it would be awesome if you could make a pull request on the GitHub page 🙂

  11. Pingback: 40 Beautiful Free HTML5 & CSS3 Templates
  12. Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40 Beautiful Free HTML5 & CSS3 Templates
  13. Pingback: 40 templates HTML5 & CSS3 | Geekotron
  14. Pingback: 40 Plantillas gratis en HTML5 y CSS3
  15. Pingback: 40款非常漂亮的免费 HTML5 & CSS3 网站模板 | Fly mini
  17. Pingback: 20 قالب رایگان فوق العاده HTML5 « پرتال پارسیس وب
  18. Pingback: 35 Beautiful HTML5 and CSS3 Templates for Your Website - Creative Can Creative Can

    1. Hello Vijey,

      Open style.css and find this

      /* Current nav, buttons, more-link */
#menu .current > a,
.btn,
.more-link,
input[type=submit],
legend {
	background: #fa4fab;
	background: -moz-linear-gradient(top, #fa4fab 0%, #f7387c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa4fab), color-stop(100%,#f7387c));
	background: -webkit-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
	background: -o-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
	background: -ms-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
	background: linear-gradient(top, #fa4fab 0%,#f7387c 100%); 

	[...]
}

      Change the color codes, #fa4fab and #f7387c, to the colors you want.

      Hope it helps you and I’m sorry for the long answer time.

  21. Pingback: 31 Absolutely Best Free HTML5 WordPress Themes With Premium Design — Web 2e Design
  22. Pingback: 20+ Great Free HTML5 and CSS3 Templates | Designs Madness
  23. Pingback: 10+ Amazing HTML5 and CSS3 Templates | Designs Madness
  24. Pingback: Beautiful HTML5 and CSS3 TemplatesDwebTech
  25. Pingback: 10个优秀的HTML5和CSS3网站模版 | 创意悠悠花园
  27. Pingback: Web Entwicklung | Developer KS | © Information Technology – Help For PC
  28. Pingback: Web Entwicklung | Developer KS | © Portfolio
  29. Pingback: Elegant Yet Free HTML5 Web Templates And Layouts | SmashingApps.com
  30. Pingback: 40 Free and Elegant HTML5 Web Templates and Layouts

  31. Iam using this template for few month now and its awesome 🙂 Thanks man

    But I’ve an question – can i change the fonts of the template?

    Thanks, see you

Comments are closed.