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.

By Peter Finlan in Freebies on
Code

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.

Peter Finlan

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

Ideas for Grid to Slideshow Switch Animations

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Shape Lens Blur Effect with SDFs and WebGL

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 159

Comments are closed.

  11. The portfolio reminds me of jeans with fake pockets. They look nice but when you go to use them for their intended purpose, you realize it’s not possible. Rather than displaying a fake lightbox effect, the author should have just used a plain image.

    Otherwise, a nice and simple template.

  17. Thank you for the theme, I would like to see a theme created using all of your Blueprints released so far, That would look awesome and can be used for multiple purposes.

  18. Fantastic looking theme. Well done. I’ve downloaded it to test and play around with. It should be fun.

  20. Why this Mobile Menu?! Well…. great work, great layout but i’m sad for this terrible menu 🙁

  24. Hi, I want to know where I can have some icons to change the actual icons, thanks.

  26. HI Peter Finlan !
    Have you version PSD from photoshop, this teamplate so nice , i like this 🙂

    • Hi Kiditran,

      Thanks for the kind words. I do plan on releasing the PSD as a free resource in the coming weeks so keep an eye out for the release on my Dribbble page and my website!

  28. This is a stunning design and development, I like it… Thanks a lot for sharing

  30. It is not a good practice to hide the menu in one page designs. What’s the purpose for it, if you can’t choose the right section to scroll to?
    The design is great, but it requires a sticky menu.
    Thanks

  33. Excuse me I am new to this website. What is meant by republish? I really like this design. May I change it with my own colors and pictures and so on and use it as a base for my website? Thank you very much for sharing.

  37. Excellent.
    Thank you very much.
    Dzi?kuj? bardzo – szacunek za to

    Pozdrawiam
    Tomek

  38. Wow – stunning! Is there a blog on it? Couldn’t see one – although it really is beautiful regardless… just wondering…

    • Hey Brin

      Although a good idea , there is no blog functionality that comes with this template.

      I’m glad you like it.

  39. @slider999

    You can use this template to make your own site. You’re just not allowed to offer/give the theme file to anyone else directly. You gotta refer them to this page for download.

  40. I’m having issues where clicking on the portfolio images brings me back to the top of the page as opposed to making a “lightbox” or fullscreen version of that image.
    Is this something I need to edit in JS or an issue with my own browser?
    Anyone else having this issue?

    • Hey there

      No issue here, there is actually no lightbox implemented to these links – this would be something you would have to code yourself, or simply use a plug in like Fancy box or Light box 2.

      Let me know how you get on.

  41. 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?
    thanks

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

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

  43. 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 🙂

  48. 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!

  50. 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!