Free XHTML & CSS3 One-Page Template

Free XHTML & CSS3 One-Page Template

In response to this week’s tutorial, where we are creating a HTML5 & CSS3 template, here is the pure XHTML version. It is compatible with all browser versions, SEO friendly, and features a sleek jQuery scroll effect. Perfect for those cases when you need something up fast.

It is easily modifiable and the code is properly commented.

Installation

Just download it from the button above, extract it from the archive, and upload it to your server.

License

Free for personal and commercial use, as long as you keep the link at the bottom.

Join our newsletter and get our PSDs!20,266 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

20 Comments

  1. Batfan says:

    Very nice! Thanks for the great freebie :)

    One suggestion I would make is having the 'Go Up' button at the base of each section, rather than just in the footer.

  2. Pavel says:

    Why you include jQuery before closing body tag? And why not in the header?

  3. Casimir says:

    Hi there,
    A very nice article about HTML 5 and CSS. I'm need to stuyd more about these topics, but I have one question: is there an alternative to get the round corners to work in IE 7? In my version of IE, 7.0.5730.11CO, it is not working.

    If you have a suggestion I'm all ears.
    Thanx,
    Casimir

  4. Martin Angelov says:

    @Batfan
    Actually this was the initial idea. However I decided to keep it clean and sacrifice some of the functionality (and decrease the laziness factor of the template).

    @Pavel
    It is considered a good practice to include the JS files at the bottom of the page (the browser does not have to wait for all the JavaScript includes to load so it can show the page). I've left the HTML5 enabling script in the head, though, because it does not work if it is included in the body.

    @Casimir
    Unfortunatelly IE does not support CSS rounded corners yet. You could optionally use the jQuery Corner plug-in. It is used in this manner:

    $('nav, article, nav ul li a,figure').corner("10px");

    I have no idea how it would look in the template though.

  5. Pavel says:

    Thank`s Martin for the tip and for the answering my question!

  6. Jude says:

    I'm playing around with this lovely template, and like Batfan I'm interested in having the 'Go Up' button at the end of each section. In fact, I've put it at the end of a section and it works fine, but it jumps rather than doing the smooth gliding thing that makes it so classy. Is there anything I can do to make it slide?

  7. Martin Angelov says:

    @ Jude

    This is because the scrollTo plug-in (responsible for the smooth page scroll) is not monitoring those new links. To fix this, you have to change this line in script.js:

    $('nav a,.footer a.up').click(function(e){
    

    To this:

    $('nav a,a.up').click(function(e){
    

    By removing the footer part of the selector, we are telling jQuery to look for links with a class set to up in the whole page, and not just the footer.

  8. Jude says:

    Ah yes, I got that to work. Now when I go DOWN from the navigation to an article on the page it jumps not scrolls. Have I done something stupid?

  9. Barton says:

    Hi,
    sorry I'm still trying to sort the CSS XHTML Template. All I have done is replace a single image. The first 2 of yours, work fine, but the final image has no rounded corners. What is trick please.

    http://www.maiocv.com/test/cssTemplate/template.html

    Many, many, thanks,

    Barton

  10. Martin Angelov says:

    @ Barton

    The only difference with the images I've used is that they have dark backgrounds, which blend with the border. If you look closely you will see that they are also not being rounded.

    You can easily solve this problem by just using rounded PNG images in the first place.

  11. Barton says:

    Thanks Martin,

    I though that you may have been using something similar to this method and I had missed it:

    http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

    Thanks for the reply.

  12. Barton says:

    Sorry wrong link:

    http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

  13. JC says:

    Great template....I really like the look and its simplicity. Great Job! I posted it up on my site @ http://resourcehive.com/2010/04/06/free-xhtml-css3-one-page-template-tutorialzine/

  14. Daniel Vernon says:

    playing around with this, as you can see the most fustrating thing is that the images although i have saved a transparent png are coming out as squares

    http://chunkfive.com/tests/test2.html

    http://chunkfive.com/tests/images/test1.png

    also in the tutorial part of this what sort of script is the white bit that hovers with a link back to the tutorial.

    great work with the site all the tutorials are brilliant

  15. Kusal says:

    This is great work, Ideal template for a quick job, Thank you :)

  16. davetiye says:

    thank you wery much

  17. ozzy says:

    thanks all! very very good templates.

  18. phebs says:

    @Pavel You might load jquery at that exact point just in case your page doesnt fully load, so you can show at least your page if it fails. Thats becoming a gd practice these days :)

  19. George says:

    Great Template, thanks for sharing!

    Since a lot of users using the "back" button of the browser, is there a possibility that the user is going back to the top of the site when he or she clicks the "back" button of the browser?

  20. rapha says:

    the menu doesn't eccept external links because of the script.js how can I change that?

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links