1. Technology

Serenity HTML5 and CSS3 Template


HTML5 Design Gallery
Serenity HTML5 and CSS3 Template Demo

Serenity HTML5 and CSS3 Template Demo

Image submitted for the HTML5 Design Gallery courtesy FreeHTML5Templates.com


I tend to prefer designs that are already in use for websites, but this free template was really appealing to me. I like the tie-in of the colors with the pink flower logo and the pink link text on the black background. I like the fact that the meat of the page is a readable black (or light gray) on white.

I love the interactivity. The way the photo slider moves across the screen in a smooth transition with everything getting larger on the focus image. When you mouse over the navigation, the subtle pink line below the “Home” button slides over (with CSS3 transitions) to below whatever you're thinking about clicking on.

In fact, the only thing I don't like about this layout is the text size. It is 11px, which is difficult to read on the white background, and will be nearly invisible pink blurs on the background for some readers. But that is something that is easily fixed with a few CSS tweaks.

The code is nice looking and would be fairly easy to adjust to add your own content to. It uses HTML5 sectioning elements a bit and includes the HTML5Shiv from Google Code to help it work in older versions of IE. My biggest frustration with the code is that there is a lot of use of <p>&nbsp;</p> and multiple BR elements to add spacing to the layout that should be done in the CSS. But you can add that in yourself as well.

This template was created by Patrick Best, aka Gekko for FreeHTML5Templates.com.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Inspiration
  6. Design Gallery - Serenity HTML5 and CSS3 Template

©2014 About.com. All rights reserved.