Freebie: “Halcyon Days” One Page Website Template

A creative one page portfolio template exclusively made for Codrops readers by Peter Finlan. It's especially fitting for a portfolio or start-up website.

FreebieHalcyonDays

Today we are happy to share a creative one page portfolio template with you.

Halcyon Days is a modern and stylish HTML5/CSS3 template with a pixel-perfect design and smooth effects. It’s especially fitting for a portfolio or start-up website, but it’s also very versatile and can be used for many other projects.

About the template

The responsive template is made with the latest web technologies and it’s build with Bootstrap, jQuery FlexSlider, Smooth Scroll, jQuery Waypoints and Animate.css.

Preview

halcyon-splash

Check out the demo of the template here: Halcyon Days Live Preview

Download the template for free:

You can download the ZIP file here:

Use it freely but please don’t republish or redistribute the template.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops just drop us a line.

Previous:
Next:

Tagged with:

Peter is a Digital Designer & Front End Developer from Sydney, Australia. He is an advocate for clean, usable and accessible design.

View all contributions by

Website: http://peterfinlan.com/

Related Articles

Feedback 107

  1. 1

    Love it. And love your generosity.
    Any advice for me on making it a WordPress theme? Or do you have plans?

    • 2

      Hey there, thanks for the kind words. There are no plans in the pipeline yet to make this template a WordPress theme. At this stage feel free to download this template and use for personal and commercial projects. You are free to develop this in to a WP theme but you cannot redistribute it (make available for free or paid download).

      Thanks :)

  2. 3

    The shadow is very dificult to reply with other color.

    .shadow { text-shadow: rgb(232, 80, 45) 1px 1px, …

  3. 4

    Hello, Peter, great template! I was wandering, in your template, you are using animate.css to animate some elements. Beside that, do you use something else? Because, when I use animate.css on my template, it just animates movement. In your template there’s really fading in. Mine is just moving up and down. Is there any transition that you are using so your fadInUp really fades in, not just moves up?

    Hope you understood what I meant. Best regards.

    • 5

      Hi Milos

      Yes I am using animate.css which is library of many different animation techniques. There are some animations that fade in and fade out, you just need to declare what animation you would like to use in your css and jQuery (for waypoints).

      Best of luck :)

  4. 6

    dear Peter,

    thank you very much for the design. it is neat and a clean lay out which leaves space to imagine content beyond what is being shown.

    i would like to ask you a questions about the ‘responsive web design’ section.
    on a full screen 50% is taken by the picture and 50% with the text. when reducing the screen to tablet or mobile size the picture disappears and only the text remains.
    is there a way to have the picture be present as well on tablet and mobile screen?

    all the best to you!

    • 9

      Hi there, the licence issued is Codrops standard licence seen here: http://tympanus.net/codrops/licensing/. You are free to download and use this template for personal or commercial projects only. You can’t redistribute this template online for free or paid download in any way, shape or form.

      Hope this helps :)

  5. 11

    Dear Peter,
    YOU ARE AWESOME!!
    This is the best template I’ve seen on web. Way better than paid ones. And the thing is, you are giving it for free. Every element in this template can teach something to new designers and developers. Have an awesome day :)

    • 12

      Hey Vipul!

      Thanks so much mate, this has made my day. This is the reason I design & develop free templates such as Halcyon Days. It’s so great to hear that you have have learnt something from this template. We are for ever learning in our industry!

      Thanks again for the kind words friend :)

  6. 13

    I copied the section containing the ‘portfolioSlider’ two times in the HTML source code. But no slider controls appear under the text abstracts.Instead all of the ‘container’/’rows’ are shown.

    If I uncomment the first whole ‘section’, the scond of the copied ones has the slider controls and the third one is still messed up.

    My guess it has something to do with CSS, but my knownledge is not enough to find a solution on my own.

    I imagine, one has to edit not only style.css but also flexslider.css and maybe even jQuery.FlexSlider ????

    • 14

      Hello, I forgot two things in my first comment yesterday :-(

      First, thanks a lot very much for this free template. I also find it to be one of the best if not the best free templates, because I probably downloaded almost every free HTML5-CSS3-Template I could find on the WWW and looked into their source code.

      Peters comments helped me edit his template without having a lot of knowledge of HTML5 and CSS3 because he structured and programmed everything very understandable and very comprehensible even for Newbies.

      The other stuff I forgot is a second question I have:

      How did some of you edited the Subscribe-Section? For example if you want to link it to your MailChimp.com-powered E-Mail-Newsletter?

      Neither Mailchimps admin nor support area let’s me find the right code snippets to paste them into Peter’s Template-Files. I tried all of the different code snippets but to no success.

      I wonder what I’m doing wrong there :-/

      Thanks,
      Oli

    • 15

      I now got the answer how to have two separate portfolio sliders with their own navigation controls from Peter. If you want to do the same, just let me know.

    • 16

      Hi Oli – Yes you emailed me directly and I was able to provide you the answer to this. If anyone else would like to implement another slider please do not hesitate to email me :)

  7. 17

    I’m sorry for writing like this, I didn’t see any “reply” button on your reply box. I am currently using this:

    $(‘.box’).waypoint(function() {
    $(‘.box’).addClass(‘animated fadeInUp’);
    }, {
    offset: ‘95%’
    });

    I think I am using it right. It animates, and it goes up. The thing is- it’s not fading. It just moves up. And in your template it’s moving up and fading in. What am I missing?

    p.s. Thank you for your reply.

    • 18

      Hi Milos – the above jQuery is correct as far as I can see – with 95% in to the viewport the waypoint should fire and add two classes ‘animated’ and ‘fadeInUp’ – the only thing I can think of that isn’t causing the element to fade is that in animate.css or your css file that contains the css transitions the fadeInUp class has been written incorrectly.

      Simply try adding your own class such as fadeInClass (or similar) and add your own fade animation. Here is a great tutorial on how to create a css fade animation. Hope this helps, if you’d like to discuss this in more detail please email me directly :)

      https://graphicfusiondesign.com/design/creating-fancy-css3-fade-in-animations-on-page-load/

  8. 19

    Hi! As you can see I use this for my portfolio (still making changes), but I´m wondering why I can´t make it work on any mobile device. It just appears Internal Server Error and I supposed it was missing the meta tag but it is there so idk what to do :c

  9. 20

    Hey, i just downloaded your template. however, it is a read only folder. did you change anything? i cant seem to open it in the browser

    • 21

      Hi there, I have just tried downloading the template myself and it is in Zip format and unzips perfectly in to a usable folder. Please refresh your browser and try downloading again. Thanks.

  10. 22

    Hi Peter,

    thank you very much for the awesome theme, this is exactly the style how I like it. I have just one question, is there a quick and easy way to disable the animations on mobile devices? The problem is that as long as you scroll on a mobile device the content doesn’t show up, only if you stop scrolling the content fades in. Thank you for this template and your help.

    Best, Rainer

    • 23

      Hey Rainer – very good question and good point.

      At this stage I haven’t looked in to this yet but it is a valid point and cause for good research. There is in fact several ways I know of that involved targeting a mobile device and then disabling the animations. I would have to look in to this further before implementing though, leave it with me!

      Thanks so much for your question!

  11. 24

    Hi there, Has anyone had any success integrating Lightbox 2 with this template? Whenever I add a lightbox to the existing portfolio images (with their lovely rollover) it simply links to the top of the page, even though it works if I insert a new picture underneath. Can anybody who’s got it to work share some tips/code please? Thanks.

    • 25

      Hey Jem, I am just waiting for permission to implement either FancyBox or Lightbox2. I would have included these in with the build but it requires permission from the creator. Leave it with me and thanks for the question! :)

  12. 26

    Hey,
    The design is very nice and the colors is nice and soft
    But don’t you all sick and tired from the new “landing page” style with the infinity scrolling page
    that the users even don’t know that they have a little menu, they just scrolling down and then scrolling up again

    I don’t find those templates unique, because second page that i see is the same as this, different colors… but the same boring idea
    themeforest.net/ – this site has like hundreds of them, i don’t understand, it’s all the same

  13. 29

    Hi Peter,
    thank you very much for the pattern, I really liked.
    Now here is a problem as I change it a template? Help … I do not understand

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>