We’re excited to present our first free responsive HTML5/CSS3 template. Our team here at Web Code Builder likes to experiment and sometimes we come up with some really useful stuff. This template is a good example. You can use it absolutely free of charge.

The template includes:

  • W3C Valid HTML5/CSS3
  • Sticky Header
  • jQuery Scroller
  • jQuery Page Slider
  • jQuery Image Gallery

If you have any questions or comments, please let us know.

Comments (96)

  • TimMH

    May 9, 2012 at 8:10 am /

    I have to say a very nice template, great work on the resize elements of the visual. I can see this being downloaded a hell of a lot as it does exactly what you need to convert a site for mobile devices.

    Nice work.

    • admin

      May 9, 2012 at 8:53 pm /

      Thanks, Tim! Glad you liked it, this was our main goal. We’re actually planninig to make more free templates, so stay tuned

  • Nadav

    May 13, 2012 at 10:15 am /

    Great template! It looks really good, and the fact you’ve included several possible combinations of columns is amazing.

    I do have to ask, since I couldn’t find it not mentioned specifically, if I can: 1) Modify the template for my needs, not just replace the texts? 2) Can I use this for a site I am building myself for my office (self-employed, and my business is not web-building)?

    The reason I ask these questions is of course that I do not want to overstep your generosity in sharing this template free of charge.

    Whatever your decision may be, thanks again for sharing!

    • admin

      May 14, 2012 at 12:16 pm /

      Hi Nadav,

      Thank you for your comment.
      This template is free to use. So you can do whatever you want with it and for any aim.

  • Rex

    June 5, 2012 at 5:05 pm /

    A great theme, I found a dashboard theme made in HTML5 and CSS3

    • admin

      June 5, 2012 at 7:39 pm /

      Thank you. We’re glad that we found it useful

  • Kimmy | Html5xcss3.com

    June 11, 2012 at 4:04 pm /

    Thanks for sharing, good theme !

  • Peter Yee

    June 26, 2012 at 11:22 am /

    Question: How do you make Google Maps embed responsive? Or you are throwing it out to people with just image and claimed to be responsive?

    • admin

      July 3, 2012 at 1:34 pm /

      Thank you for the question. To make embed responsive you need to add #map .imgHolder embed {width: 100%; height: auto;} styles to it.

  • Elena

    June 26, 2012 at 1:57 pm /

    Thanks for making this. This will help a lot of people with responsive design.

  • Alvaro

    June 26, 2012 at 2:59 pm /

    Looks cool! Thanks!

  • Alan

    July 3, 2012 at 12:29 pm /

    Hi, love the template to bits!!

    Will you be implimenting menu’s into the design soon?
    If you view the template demo on a mobile device the top nav bar is missing.

    Thanks and can’t wait for the next templates.

    • admin

      July 3, 2012 at 1:33 pm /

      This is a template for landing page. We use navigation only as ancors to main blocks on it. That’s why we hide it on small resolution.

      • Sven

        August 9, 2012 at 1:06 pm /

        I don’t get it: why the navigation menu is hidden when on mobile devices?
        Mobile users would be pleased to go straight to the content from this menu.

        • admin

          August 10, 2012 at 1:14 pm /

          We hide navigation for smartphones because user can easily scroll down to necessary elements by sliding the screen. Also it took lot of place on the small screen which can be occupied by key content.

  • jason

    July 6, 2012 at 5:21 am /

    Amazing template!! This might be a stupid question, I am pretty new to web building and I would like to know where to plugin the receiver’s email address. Thank you !!

  • Jaison

    July 11, 2012 at 12:22 pm /

    but some errors in 1e8…

  • Sergey

    July 22, 2012 at 1:09 pm /

    Thank you for good example. I also want share some good example of free responsive templates on http://www.free-responsive-templates.com

    • admin

      July 23, 2012 at 8:58 pm /

      Thank you very much!

  • felix

    August 4, 2012 at 5:45 pm /

    Thanks so much for this template. It has been really helpful. You guys are doing a great job and I really appreciate that…thanks

    • admin

      August 10, 2012 at 1:14 pm /

      You’re welcome

  • Robert

    August 16, 2012 at 7:24 pm /

    Hi what’s a beatiful template. I have one question about licence can i remove “Subscribe to our blog and follow us on Twitter” and “Created by WebCodeBuilder.com” and change it to my website name ??

    • admin

      August 16, 2012 at 8:15 pm /

      Robert, yes of course

  • Tom

    August 22, 2012 at 8:44 pm /

    Hi there, love the template. Works fine for mobile. Only problem is the top menu does not appear in IE, I’m guessing this is due to the nature of IE’s usual problems with CSS3. Do you have a solution for this?

  • PC Tablet News

    August 25, 2012 at 8:52 am /

    Hello, i think that i noticed you visited my site thus i got here to go back the desire?.I’m attempting to in finding things to improve my site!I guess its ok to make use of some of your ideas!!

    • admin

      August 26, 2012 at 8:31 am /

      Hi, give us a link to your site please

  • Elise

    August 28, 2012 at 8:55 am /

    I found you and read your aticles which are very interesting. So I tried to subscribe to the RSS feed your provide and… guess what happened.

    • admin

      August 28, 2012 at 8:58 pm /

      Thanks for your comment. We fixed this bug

  • harald

    August 30, 2012 at 2:18 pm /

    thought I left a comment this morning but I can’t see it
    it was about Opera mobile.
    There are some issues.
    Will you fix them?

    • admin

      August 30, 2012 at 4:14 pm /

      Sorry, but we can’t see your comment. Which mobile device do you have a bug on?

  • harald

    September 5, 2012 at 2:08 pm /

    Sorry to be late…
    it’s on the Samsung Galaxy Tab2 10.1 ice cream sandwich.
    The Shadow effect on letters looks awfull.

  • Tom

    September 12, 2012 at 5:36 pm /

    Hi there. Very nice template. One quick question: how do I setup the contact form to send the information/message to my own email address? Your assistance would be most appreciated. Thanks!

  • Rakesh

    September 17, 2012 at 2:32 pm /

    Really… Amazing HTML5.

    I am very excite to use this code in our live project.

    Thanks A Lot for sharing.

    • admin

      September 17, 2012 at 7:49 pm /

      Thank you! We’re excited you found our template useful, glad to be of service!

  • Patrick Ziselberger

    September 18, 2012 at 12:06 pm /

    Love your template! I’ve used it on a small business site:

    I have a question, though. Since she’s an interior designer, she wants a fairly large portfolio. I’d like to swap out the slideshow gallery for jquery lightbox. While I can get the lightbox images to display properly, the thumbnails aren’t displaying properly.

    Thumbs are wrapped in li tags. Even if I set list-style: none; on the containing ul, I end up with bullets. (doesn’t matter if I specify a class on the ul, or get really specific in the css: #portfolio #lightbox ul (for example). Is there something in the javascript that would override user defined css in this way?


    • admin

      September 18, 2012 at 8:24 pm /

      Thanks for a great feedback. As to your question: I think, it’s a CSS problem, not JavaScript. Please check your code again, maybe with Firebug. I belive you’ll find an easy solution.

  • Mike Price

    September 18, 2012 at 2:09 pm /

    Great template. One question, the top nav dissapears when you resize the page, is there a way to still show it on resize?

    • admin

      September 18, 2012 at 8:18 pm /

      We hide top nav for smaller screens because user can easily scroll down to necessary elements by sliding the screen.

      • Mike Price

        September 19, 2012 at 10:10 am /

        Understand. I worked out how to get it working by amending the css media query values. Thanks once again.

        • Paul

          October 21, 2012 at 7:01 am /

          Hi, I need the nav bar to show at the top as I have linked other pages to template. Any chance I can have the code alteration to make the nav visible please? Thank you

          • admin

            November 6, 2012 at 11:11 pm /

            Hi, Paul. Please download a new version of the template. We’ve done 🙂

  • Enrique

    September 18, 2012 at 4:57 pm /

    Awsome! Thanx.

  • Steve

    September 20, 2012 at 7:06 am /

    Great responsive template! Take a look at these, they are also responsive and have a free downloading option: http://chocotemplates.com/category/responsive/

  • Award Winning Web Design Company in Dubai

    September 20, 2012 at 12:58 pm /

    Hello there, You’ve done a great job. I’ll certainly digg it and personally suggest to my friends. I am sure they will be benefited from this website.

    • admin

      September 20, 2012 at 8:32 pm /

      Great thanks and news!

  • JM

    September 22, 2012 at 8:19 am /

    Nice template.
    Just a question why those lines?

    • admin

      September 25, 2012 at 5:46 am /

      JM, thanks for the coomment. This lines including scripts and styles for older IE versions.

  • Henry Nokis

    September 25, 2012 at 9:48 am /

    Thank you for good example. I also want share some good example of free responsive templates on http://www.websitetemplates.me/

  • Sarah

    September 29, 2012 at 3:28 am /

    This is a fabulous template!
    I’m going to try modifying it to use as a link landing page! One question I had was is there a way of keeping the navigation bar dispayed at the top of the page when it’s viewed with the mobile view? (I’m using an iphone) I noticed that the grey navigation bar that’s visible on the top of the web view is missing in the mobile view.

    • admin

      September 30, 2012 at 7:54 am /

      In order to help the user find the needed elements by just sliding the screen, we hide the top nav for smaller resolutions.

  • WordpressFamily.com

    September 29, 2012 at 9:38 am /

    good. thanks

  • Limit Post

    October 3, 2012 at 12:04 pm /

    i hope comment form is not like WP

    • admin

      October 3, 2012 at 8:19 pm /

      Yes, it’s a regular contact form

  • Rich

    October 8, 2012 at 10:14 am /

    Thank you!!! finally!

    • admin

      October 8, 2012 at 7:40 pm /

      You’re welcome!

  • Bibimbap

    October 10, 2012 at 9:38 am /

    Thanks from a web programmer who really struggles with design – this will help me a lot!

    • admin

      October 16, 2012 at 7:48 am /

      HI Bibimbap,
      Happy to help!

  • Soma Roy

    October 16, 2012 at 7:08 am /

    Nice template. But if I click on the Download button, nothing happens. Is it not free now to download?

    • admin

      October 16, 2012 at 7:48 am /

      Thanks for the comment. Please try now

  • james

    October 17, 2012 at 9:04 am /

    its very useful, thank you very much

    • admin

      October 20, 2012 at 9:12 am /

      Thanks a lot!


    January 4, 2013 at 5:04 pm /

    Fantastic publish, very informative. I ponder why the other specialists of this sector don’t understand this. You should proceed your writing. I’m confident, you’ve a great readers’ base already!|What’s Taking place i’m new to this, I stumbled upon this I have discovered It absolutely useful and it has helped me out loads. I am hoping to contribute & assist different customers like its helped me. Great job.

    • admin

      January 5, 2013 at 10:05 am /

      Thanks for kind words. Good luck!

  • Johan

    January 4, 2013 at 5:34 pm /

    Very Great stuff!, want to embed iframe into this site but how to make the iframe responsive? and the item How to find us how can i change the googlemaps in to my place? tried to change the coords but it won`t work. and finaly how to make in the contactform the email address required?
    Would be very helpfull.

    • admin

      January 28, 2013 at 11:09 pm /

      In head section of html template you can find this code.

        function initialize() {
          var latlng = new google.maps.LatLng(-34.397, 150.644);

      Just change these coordinates to change the center position of the  map.

    • admin

      January 28, 2013 at 11:11 pm /

      You need to add some styles for it.
      Different sizes for different media selectors. To show them the way you want on any device.

  • mark

    January 30, 2013 at 4:46 pm /

    Hi like the template and looking at using it , just noticed a load of base64 code in the css what is this for ?

    • admin

      January 30, 2013 at 9:36 pm /

      We’re downloading small images this way. It’s faster than make a separate request for it to the server

  • mark

    February 1, 2013 at 11:07 am /

    thank you for last answer , i have just started to play with this template , i have addded a page link into one of the buttons (download) which takes you to the relavent section i.e boxes but it partially dissapears under the menu section, if i click the menu to take you to the same boxes section it aligns correctly under the menu section , i am now confused (i simply copied the menu link ahref to acheive this)

    • admin

      February 3, 2013 at 9:39 pm /

      Now scroll functionlity applied only for navigation.
      If you want to have a button in content that will work as sroll navigation button you need to make few adjustments in javascript.

  • Marcus

    March 5, 2014 at 8:01 pm /

    Thanks, this was awesome!

Comments are closed.