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 93

  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.

  7. 16

    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.

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>