Free Single-Page Scrolling HTML5 Portfolio Template + PSDs

By on CSS / 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 free web 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 ScreenshotDownload (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

You might also like...

(2 Posts)

Hannah is the founder and curator of moobileframes.tumblr.com, a collection of wireframes, sketches and user interface drawings that focuses on mobile applications. You can follow her @humbleuidesigns or on her Tumblelog (humbleuidesigns.tumblr.com).

Comments

  • thanx

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

  • 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

  • prasad1287

    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?

  • Suneth2

    Thanks bro…

  • jemacba

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

  • Jeremy Bates

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

  • 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

  • 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? 

  • Kevernsolutions2009

    really nice….

  • Kevernsolutions2009

    use the mailer.php

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

  • Romy Ilano

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

  • 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

  • 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? 

  • 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.

  • Klimek Ralf

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

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

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

  • Solenzanga

    How to install it on WordPress?

  • Ram

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

  • cool template, I really like the grate at the background

  • Jorge Ferreira

    Thanks for share, its beautiful.

  • JackHuaman

    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

  • laoistom

    Figured it out. Cheers for the fantastic template. 

  • Oddly I see neither a download or a preview. 

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

  • 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

  • Mike

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

  • Rajurajmatho

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

  • 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. 

  • 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

  • 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.

  • 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. :-(

  • Raj

    thanks very useful

  • 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!

  • 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?

  • 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

  • tx Joscha,

    Problem solved!!

  • 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

  • arun

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

  • nailer

    is it possible to have captions on the slider?

  • Victor

    Great thanks but is it possible to make it having a time interval automatic scrolling function?

  • Irena

    Greate theme!

  • Brad Grubbs

    I’m having trouble adding a menu item and getting it to work properly. The menu scrolls, but clicking the menu item does nothing. I’ve added a unique id name and referenced it in the section id, but no luck. Anyone know what I’m doing wrong or what I’ve missed?