Free Single-Page Scrolling HTML5 Portfolio Template + PSDs

by CSS, Templates, Web Design

We have another amazing freebie for you today — a completely free single-page HTML5 portfolio template and all of the accompanying PSDs.
It has been jointly designed by Hannah Milan & Joefrey Mahusay and is a beautifully crafted template perfect for any creative designer as a means of displaying their portfolio.
This template is also a great exercise in practical and semantic HTML5, it is well worth downloading, dissecting and experimenting with the code.

Free Single-Page HTML5 Portfolio Template

Single-Page HTML5 Portfolio Template
Click on the above image for a full image preview

Preview, Demo & Download

View Full-Size ScreenshotView The DemoDownload (HTML Template + PSDs)

License

This template has been licensed with a GPL General Public License, meaning you can freely use this theme for both personal and business use with no limitations.

Templates Features

Single-Page HTML5 Portfolio Template

This free single-Page HTML5 template would work perfectly for web designers, photographers and graphic designers as a means for displaying their portfolio. Have a look at just some of its features below:

• HTML5 website powered by Semantics and CSS3/Styling

• Ligtbox powered by the jQuery FancyBox Plugin

• Flawless scrolling between the templates elements

• The templates uses the HTML5 Boilerplate base template

• @fontface font replacement

Thanks to Hannah Milan & Joefrey Mahusay

SubmitQuicklyHTML5beauty.net

A big thank you to Hannah Milan and Joefrey Mahusay for designing this template for us. They are both the founders and creators of HTML5beauty.net (a gallery of beautiful sites that use HTML5), SubmitQuickly (a service for to help your site gain exposure and link building) and WebDesignerAid.

Author: (3 Posts)

Hannah is the founder and curator of MOObileFrames, a collection of wireframes, sketches and user interface drawings that focuses on mobile applications. You can follow her on Twitter or on her Tumblelog.

  • http://smartuts.com smartuts

    Really Love this..I love single page and you just share the high quality one..and it’s for free

    thank you

  • http://www.marketingnerd.co.uk Matt

    That is genuinely stunning! Its better than most “premium” templates, lovely work.

  • Bruno

    Thanks Hannah, thanks Joefre!
    Your websites go straight in my bookmarks! :)

  • Luciano

    Fantastic! Beautifull! Usefull! Thanks for share.

  • Bad Bunny

    Nice but no work so well in Chrome… had to refresh just to get all the images to load. Deck slider is wonky…

    No problems in IE or FF…

  • http://www.jireck.com Jireck

    Enorme !!!

    Bravo !!

    Great i like it

  • http://www.webdesigneraid.com Hannah Milan

    We would like to thank you everyone for a positive feedback from the community and big thank you goes to Speckyboy! :)

    More high-quality freebies to come!

    Thanks again!

  • http://www.sergioalberto.com Sergio Alberto

    Contenido muy bueno. Gracias por compartir

  • http://www.instinctdesigntuts.co.uk Robert Nash

    A fantastic freebie that is worthy of premium content. Thanks very much, a real inspiration.

  • Dejos De Brujo

    In Serbian: “To majstore, svaka čast!”
    In English: “Thanks mate, that’s lovely jovely!”

  • Pingback: Free Single-Page Scrolling HTML5 Portfolio Template + PSDs | Design Dealz

  • Pingback: Free Single-Page Scrolling HTML5 Portfolio Template + PSDs | WebDevKungfu

  • http://www.daftgrafix.dk/ Jarl Lyng

    Wow, I love it! Thanx!

  • Piotr

    The ‘Slider’ doesn’t work in safari (the oryginal one also didn’t work)

  • http://none Mike

    Thanks, and works fine in Chrome!

  • Pingback: Weekly HTML5 News and Inspirations – Tutorials, Tools, Resources and Freebies (V.1) | Web Designer Aid

  • http://creativenuts.com Creative Nuts

    very nice well designed clean layout.

  • http://dosomeawesome.com Karri

    Great file. Although not for me, at least not straight out of the box.

    That’s why I created from this myself a lightweight directory, where I keep some of my bookmarks. It’s like visual speed dial for internet.

    Here’s a screenshot: http://grab.by/9bNx

    Thanks and keep up the awesomeness!

  • Pingback: Plantilla de una sola pagina gratuita en HTML5 | Diego Mattei Blog

  • Pingback: www.AlrocMedia.com » Blog Archive » Plantilla de una sola pagina gratuita en HTML5

  • Jamie

    this is beautiful. I plan on using it for my portfolio. thank you!

  • Pingback: Tutoriales, recursos y técnicas HTML5 | davidcostales blog

  • Pingback: Esta semana compartí:  | EV Correu 2.0

  • http://www.thecityisburning.com Peter Butler

    Hey this is really cool, thanks for sharing. I recently made my own single page HTML5 scrolling portfolio website.

    Please take a look :D

    http://www.thecityisburning.com

    thanks!

    • Raj

      thanks very useful

  • MD

    I’m trying to work through this template to make my own site but I am really new to website design. Is there a way to change the contact form’s submit button so I can have messages directed to my email address? This is the code for the form:

    Your Message

    Thank you in advance to anyone who can help me.

    • Tim

      You have to setup a mail application server side to intercept the form submission and send it to your mail. I used this template and substituted a Google Docs form instead, because I’m using Mobile Me which won’t let me use server side apps.

      • Jeremy Bates

        hey tim, could u tell me exactly how you did that? thanks

  • Pingback: Free Single-Page Scrolling HTML5 Portfolio Template + PSDs | Web Design Resources

  • Pingback: Single-Page Scrolling HTML5 Template | Website Templates Depot

  • Neinou

    thanks so much for sharing :)

  • http://www.sigaspot.com/ SiGa

    Many thanks from me, too – great work, really!

  • http://www.sigaspot.com/ SiGa

    I really love this one, the design and the effects – allover. Thank you very much for sharing! It would be even better when it would work in Opera, too – and I don´t really understand why it doesn´t, yet…. Any idea?

  • Pingback: 5 Undeniably Awesome Things HTML5 Can Teach You Now! | Web Designer Aid

  • http://twitter.com/ribinpk Ribin

    thanx

  • http://twitter.com/ribinpk Ribin

    thanks, one thing I want mention that scrolling smoothness is comparatively less

  • Anonymous

    thanks so much for this! 

  • Kokologs

    that’s great template. 
    yesterday i wanted to create vertical scrolling website but i doesn’t know how to code that. Now it’s simple

  • Pingback: links for 2011-07-13 | axelintu : links

  • Pingback: Plantilla de una sola pagina gratuita en HTML5 | Ricardo SanMiguel

  • http://www.facebook.com/prasad1287 Jayaprasad Mohanan

    Thanks for this amazing free example. Like most of the people here I also wanted to create a beautiful single page scrolling website, doesn’t knowing anything about HTML5.. :) Thanks a lot! 

  • Cel Rod

    Thanks for this! Great work! But may I ask, what if I want the menu to be on top instead of at the left side? And I want it to not move too just like the sidebar. Will it be possible? Thanks in advance!

  • Tuckoli

    I am a newbie and need some serious advice before I use this template. Can I use a program like Dreamweaver with this template? I have no idea how to relate the index file to all of the elements in the template file….?

  • Olga Van Saane

    Hi,

    I’ve downloaded the theme and alas, it is broken: in the zipped package the stylesheet is missing, so it’s useless. Any comments or suggestions? 

  • guest

    How do I make the message delivered to my email account?

    • jemacba

      did u ever get an answer to this? im trying to work that out too

    • RDM

      You need to make a php file for this purpose.
      Try to google some html form examples.
      It will be helpful for you to understand.
      RDM

    • Kevernsolutions2009

      use the mailer.php

    • Edward Jimenez

       in the php code, you can add the following line:

      $to= ‘your email address goes here’;
      example: $to= ‘youremail@example.com’;

  • Suneth2

    Thanks bro…

  • Needs Help

    I’m using Windows 7 IE9. I’m having problems replacing the pictuers with my own. The picture don’t load. ex: images/work_img.jpg. Even if I name it by the same name the new images won’t load.

    • Ellen

      I’ve got the same problem. I made some new hyperlink buttons for another social site and the picture is not displayed…. Any suggestions? 

      • http://twitter.com/ahhh_dinosaurs Joscha Häring

        I’ve found this in a comment on the “sweet thumbnails gallery”-site:
        Replace this line:
        var newImageWidth = $newImage.width();

        with this:
        var img = new Image();
        img.src = $image;
        var newImageWidth = img.width;

        Works for me!

        http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/

        • http://twitter.com/helmutsmeskonis Helmuts

          tx Joscha,

          Problem solved!!

    • Arcn

      The slider works in IE9, Safari, Firefox, and Opera. However, it does not yet work in Google Chrome which I think is weird seeing how Google Chrome is supposed to be leading the way in HTML5/CSS3

  • Kevernsolutions2009

    really nice….

  • http://maverick42.wordpress.com/ Maverick42

    Very neat and robust code man. Well done. Appreciate the share!

  • Romy Ilano

    Thanks Jeremy! You rule! This is so useful!!!!

  • http://www.kooldot.com/ Kool Dot

    Nice, very, nice! And it’s all free, nice!

    Thanks

  • james

    does anybody know how to alter the speed in which the content comes into the view. For example, when I click the navigation links I would like to slow down the speed when the content comes down :)

    thanks

  • Lala

    thnks

  • Traildust

    The online demo scrolls perfectly on Safari, but the downloaded one doesn’t scroll. Anyone know what the difference is? 

  • http://senyumlah.tk/ Muhamad Jakfar Shodiq

    Thank’s very much :)

  • Shawn

    Has anyone found the solution for the slider not working in Chrome. It shows alright but the moment you change the image it goes blank.

    Any help would be great.

  • Ralfytm

    Thank you, i was looking to make a personal webpage, this is perfect :)

  • http://twitter.com/ditherorg Nathan Williams

    Unfortunately this temple does not work (or barely work) on the iPad or the iPhone.

    • http://twitter.com/hansengine Cristian Sánchez

      help us, the nav menu does not work on the ipad…. please.. anyone with the solution for this.. Thanks for your help..!!

  • Seo Singapore

    Great collection, i love this site, i always get great contents on this site. Thanks to the owner of the site….
    Seo Singapore

  • Solenzanga

    How to install it on WordPress?

  • Ram

    For me font is not coming properly. Is there a way to correct this?

  • http://www.topwebdesignworcester.co.uk/ Info

    cool template, I really like the grate at the background

  • Jorge Ferreira

    Thanks for share, its beautiful.

  • Jacoba10

    Can anyone post a new zip file to me and send a link to my mail at jacoba10@hotmail.com

  • http://twitter.com/jackhuaman Jack Huamán C.

    Muchisimas gracias, gran aporte… 

  • Mai

    Many Thanks 

  • Bsbizwerkz123

    Wow! load of templates.Thanks for sharing…
     

  • Ichwara

    I like what am seeing. Its a great simple template…You guyz rock

  • Laoistom

    How would I modify the code to Allow a Fifth menu option that also has the wrap around when scrolled to. I’ve added the and given it a unique id. I then added the tag and set that to a unique id however I think the Wrapper is most likely controlled by the Javascript and i’m useless with Javascript. If you can offer me any help at all I would be most appreciative. Thank you Laoistom

    • Mike

      Did this ever get answered? I am having the same issue.

  • Laoistom

    Figured it out. Cheers for the fantastic template. 

    • Akeem Cabarron

      i’m trying to add a fifth and sixth menu option, i think i pulled it off just fine, but the nav keeps on going to the “photos” section. -___-” check it out! :) http://www.akeemcab.com

  • http://pulse.yahoo.com/_YS3CARDF7JFFLURKPCMQR4RATY Paul

    Oddly I see neither a download or a preview. 

  • http://www.facebook.com/profile.php?id=638247714 Monica Sabado

    stupid question but… where do i download? can’t find the link.

  • http://palimadra.tumblr.com/ Pali Madra

    Hey guys

    The download is hidden in Chrome. I’m using Chrome.

    Just below the text “Preview, Demo & Download” there is some white space. Hover your mouse and magically three buttons will show “view full screenshot” “view demo” and “download PSD and HTML”. I do not think now I need to tell anyone which button to click for the download ;-)

    Thank you fro sharing though

    Cheers,

  • Mail2ramesh

    hi

  • Rajurajmatho

    i need exact php file for contact us. Because i have no idea about php . Please help me friends

    • Edward Jimenez

      if you’re looking for a simple contact.php for the form try this:

      $name= $_POST['name'];
      $email= $_POST['email'];
      $message= $_POST['message'];
      $from= ‘From: whatever you want it to say here’;
      $to= ‘EMAIL ADDRESS YOU WANT THE FORM TO REACH GOES HERE’;
      $subject= ‘whatever you want it to say here’;

      $body= “From: $namen E-mail: $emailn Message:n $message”;
      if($_POST['submit']){
      if($name != ” && $email !=”) {
      echo ‘Your message has been sent!’;
      }else {
      echo’Something went wrong.  Go back and try again!}
      }

      don’t forget to put this code inside the php opening and closing tags or else this code will not work.  Hope this helped you out

      • Christinabarnett7

        I added this code and it opens a new window when I hit submit.  Did I do something wrong or do I need to do something extra?

      • arun

        it didn’t worked..i didn’t receive the mail

  • http://dietetyczneprzepsy.pl/ Dietetyczneprzepsiy

    Best ever!
    Thanks fot sharing template – it`s awesome.
    regards,
    przepisy

  • Pedro Teixeira

    Amanzing template, thank you. Weirdly I was tweeking a little bit changing the images .. now the photo module doesn’t appear.. I basiclly just changed the .jpg files.. what can have gone wrong? any hint?

  • Luis Garcia

    Great work!!!

  • No

    anybody help with the contact form? I need to set required fields when empty. currently when ‘submit’ is clicked the form does nothing, and page scrolls to the top again.

  • Johhnny

    any suggestions as how I can make this presentable on a mobile device such as an iPad etc? Menu doesnt work there, and layout is quite off.
    thanks

  • Christa

    I can’t change the navigation id names or add more without the navigation breaking. I can’t seem to find where the ids are referenced by a script either. Anyone know? The help would be greatly appreciated.

  • Christa

    Disregard my last comment about editing and adding new menu items. You have to make sure you add the id to the style.css file under sections. 

  • Jack Soni

    the top slider has not working in google chrome browser, what to do now ???

  • VK

    really cool theme! 
    the only issue for now is that i can’t add new sections, i make the buttons and all but when i click i can only scroll to the original sections.

  • http://www.virtualidstudios.com David

    Freaking amazing, I love it!  For anyone who does use it, when your screen gets smaller than about 500px, things begin to break.  Which is very relevant for iPads and mobiles.  Then again, I’m on FF12, and it could possibly the browser.  

  • FrontPager

    This is a great design, but unfortunately it won’t work for me in FrontPage. Maybe I’m doing something wrong, as I know nothing about HTML5. :-(

  • Christinabarnett7

    I used the contact.php code below and it opens a new window when I click submit on the form.  WHY?!  Please help! Thanks in advance!

  • Steven Collins

    Hi, I have nearly finished creating my online portfolio using your template.  I think its great, thanks.  The one problem i am having is, after updating to the latest version of fancybox, the page scroll and selected menu graphics arent changing.  I think it may be a bit of inline javascript but unsure.  Could you point me in the right direction as to what it may be.  Thanks ;)

    http://www.collinscreative.co.uk

  • Armaita

    I love this but how do I change the scroll speed when I press the menu buttons? I think it’s going a bit to fast

  • http://www.facebook.com/kyle.reder Kyle Reder

    BTW: It was easy (VERY easy) to switch out the Facebook icon, but when I tried to re-dub the CSS for the rest of them I ran into a wall. Best, KJR