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.

From our sponsor: Front-end developers, save time and convert designs into clean React, Vue and HTML code using Anima

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.



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.

Tagged with:

Peter Finlan

Peter's a UX lead @ Google. Crafting memorable, emotive and engaging experiences through research, testing and data science.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 159

Comments are closed.
  1. Hi

    Amazing work!
    Quick question: in the portfolio section, how can I manage to have something opened on top of my page (without changing window) when clicking on the view more?

    • Hey Cissou

      You can implement a light box effect to do exactly what you are after. An easy solution to this is to use a plugin like Fancy box or Light box 2.

      Hope this helps 🙂

    • Another question: about the slider, I noticed in the js that there is a function pauseInvisible: true, to pause the slider when it is invisible. However it doesn’t seem to work (when I am in the top of the page, the slider is still running, although I would need to scroll down in order to see it). Am I not understanding the purpose of this function right? Any other way to stop the slider when it’s not clearly displayed on the screen?

      Thanks again

    • For light box effects or overlay effects, search for “Overlay” here on tympanus. There are excellent overlay effects tutorials and examples.

  2. Clicking on the Portfolio images jumps to an anchor at the top of the page. Is this the intended function?

    • Yes that is intended. There is no light box effect implemented to these links. I left this open to interpretation, depending on what the end user would to integrate here.

  3. Wow! nice! simple and clean.

    That photo effect of the background is just amazing ! Mind to share how to achieve that kind of effect? 😛

    • Hey Jeffrey I’m not too sure about what effect you are talking about, just let me know in more details and I’ll try to help 🙂

  4. Parabéns pelo lindo trabalho e também por disponibilizar como um freebie.
    Congrats for the beautiful work and to make it available for free!

  5. Hi Peter,

    I was wondering if you could tell me how to implement a paypal system and how to install a plugin or the like in order to have the page run multilingual via a button.

    Thanks and Greets!

  6. Hi Peter thanks for the template!

    Just a quick question. In the HTML I see where you called the animated classes “fadeIndown” and “fadeInup”. My question is where in the HTML are you calling the other animated affects i see happening? I see other animations happening but no where in the HTML do i see it being called. Am I missing something here?

    • Hi there!

      Yes you can see in the scripts.js file that I am calling the animations at a certain trigger point using Waypoints.js – have a look inside the scripts.js file and if you still have any questions be sure to yell out 🙂

  7. I seem to be having font loading problems with this on pcs. (Macs & apple devices seem to work ok)

    Fonts have the correct shape, but are jagged.

    Anyone else have this?

  8. Not sure if this happens to anyone else, but this theme makes Internet Explorer crash. Unfortunately I cannot use it because of this. Anyone know how to fix it?

  9. Hi, and thanks for the template! I hope I find soon a chance to put it to work 😉

  10. Hi !
    Thank you so much ! This is an amazing job ! And what’s even more amazing is that you share your work with everyone, thanks for that !
    And you inspired me ! 🙂
    Keep up the good work !

  11. HowTo…USE THE EMAIL FORM in Halcyon Template.
    code example for the the email SEND button…
    DO i need to have my host provider make email changes to except this form in HALCYON
    email for dummy’s type of thing…