HTML5 Theme Updated to Version 2.0

HTML5 Theme Updated to Version 2.0

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 53,406 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

43 responses

  1. Pingback: HTML5Press 1.5
  2. 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;
      }
      
  3. 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. 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.

Leave a Reply