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's an Interaction Designer @ Google. Crafting memorable, emotive and engaging experiences through research, testing and data science.

View all contributions by

Website: http://peterfinlan.com/

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 156

Comments are closed.
  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, …

    • 4

      Hello Peter,

      Fantastic template!

      Might you have any tips on how to create this shadow effect with other colors?

      Thanks so much,

      Deivid

  3. 5

    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.

    • 6

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

    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!

  5. 9

    Hi there, just asking about licensing, don’t want to mess with copyright issues. Thanks

    • 10

      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 :)

  6. 11

    Very interesting. Very creative. But having played with it for hours I wonder how practical it is…

  7. 12

    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 :)

    • 13

      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 :)

  8. 14

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

    • 15

      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

    • 16

      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.

    • 17

      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 :)

  9. 18

    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.

    • 19

      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/

  10. 20

    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

  11. 21

    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

    • 22

      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.

  12. 23

    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

    • 24

      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!

  13. 25

    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.

    • 26

      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! :)

  14. 27

    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

    • 29

      Hey Cheetos, the font is called Varela Round and is available for web use over at Google Fonts. Cheers.

  15. 31

    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

  16. 33

    There is a probable bug with deep linking of the template.
    Step 1) go to http://tympanus.net/Freebies/HalcyonDaysTemplate/
    Step 2) Expand the menu on top and select team, takes you exactly where intended.

    Now the issue:
    Go back to the top, right click on team and then open in a new tab. The location it comes to is the bottom of the page. Not the team anchor link.

    After a few hours of findings, this is due to Portfolio slider which has six element, initially gets loaded 2x. They get loaded below each other.
    The scroll top of Team anchor tag is set with this extended layout.

    There after the flexslider resets the Portfolio layout in one line but the top for Team anchor tag is already set. Hence going to the tag as a direct link does not take you to the intended place.

    Possible solution: where we have class=”slides” we need style=”overflow:hidden;height:468px;” This leads to the height set correctly and the team anchor position gets the top value which is where it stays.

    • 34

      hei D,
      i have the sample linking problem: setting the slides-class to overlay:hidden and giving them a specific height worked for me(thank you!), but only for some breakpoints . has anyone a more responsive approach for this issue? thank you a lot for your help
      .jakob

Comments are closed.