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 July 14, 2014

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

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

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

Download the template for free:

You can download the ZIP file here:

Download Halcyon Days ZIP file (1.39 MB)

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.

Find this project on Github

Tagged with: bootstrap freebie template

Peter Finlan

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

http://peterfinlan.com/

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 ¹⁵⁹

Comments are closed.

Thibault Lebouteiller December 18, 2014 at 16:12

Hey, I’m French

Great template 🙂

But I can not use light box 2 for the portfolio . it’s possible to have an update of this template because I am not an expert on code… :/

Thks 🙂
- Jake Lacey January 6, 2015 at 23:22
  
  Hi I think its a good template to,
  
  I didn’t develop this template however, if nobody has come along to help, I can. I’ve used lightbox quite alot.
  
  send me a reply with the issue and I will happly help
  
  Cheers
- Peter Finlan February 11, 2015 at 23:18
  
  Hi Thibault, what problems are you experiencing when trying to implement lightbox2? Have you tried using FancyBox? There are many other free lightboxes you can use with this template. Feel free to email me if you are stuck. Cheers.
- Thibault October 19, 2015 at 17:13
  
  Hey Jake, Peter,
  
  I would like to use the lightbox pluging , but I can not. it does not work..
  
  Thks
  
  Thib’s
Vikas December 27, 2014 at 13:24

Great template 🙂
Ben January 25, 2015 at 20:06

Is there a way to integrate this into wordpress.com? I’ve tried using barebones temps to pull the assets into it but havent quite navigating down my noob web-dev techniques.
- Peter Finlan February 2, 2016 at 21:53
  
  Hi Ben
  
  The template could easily be converted to a WordPress theme by a WP Developer. There are plenty out there, just have to find a good one 🙂 Feel free to have the theme converted if it’s what you’d like to do.
  
  Cheers.
Ben Harthun January 25, 2015 at 22:01

Hey Peter! Beautiful simple layout and concept. So much so I have been trying to implement this into my wordpress(.com) yet have been having trouble figuring things out (using barebone WP.com temps to pull your content into). Have you done anything like this? Have you already created a WP-ready theme for Halcyon? -Ben the webdev noob
- Peter Finlan February 11, 2015 at 23:22
  
  Hi Ben, no unfortunately this template has not been converted to WP.
Tobias February 22, 2015 at 15:37

Hello Peter Finlan,
check this out, based on your awesome template: http://mehrLikes.com
Many thanks for your work and sharing!
Best regards
- Omar February 23, 2015 at 21:14
  
  I love your icons on the section “team”, can you tell me where you got those? thanks 🙂
- Tobias February 24, 2015 at 23:31
  
  Do you mean the customer icons?
  http://mehrlikes.com/#kunden
  
  I got the avatars with free licence from here:
  http://www.freepik.com/free-vector/avatars-sets_763307.htm
  http://www.freepik.com/free-vector/avatars-pack_763306.htm
  
  And made the icon in Photoshop myself like they were in the template.
- Peter Finlan June 20, 2015 at 11:16
  
  Hi Tobias – Great work, well done 🙂
Omar February 23, 2015 at 15:49

Hi, I love this template, but I dont like the menu because it’s too complicated for the audience that I would like to reach. Can anyone help me implement a simple menu?
David February 27, 2015 at 11:58

Hello,

Great site, thanks. But is anyone else having issues embedding Vimeo videos to the site? It just comes up as a link on mine.
- Werner March 3, 2015 at 23:10
  
  Hi David,
  
  I have similar problems embedding Vimeo videos. Only in the combination Mac/Safari in the full screen modus it seems that the left and right third of the screen were cut off.
  Is this problem well known and any idea to solve the problem?
- Peter Finlan June 20, 2015 at 11:17
  
  Hi David and Werner – feel free to email me directly, including screen shots and code snippets of your issues and I will take a look in more details.
Werner Lütz March 3, 2015 at 12:57

Thank you very much for this wonderful template. There is only one thing:
when I minimize the screen, a horizontral bar appears. Is there a possibility to avoid this?
Darshan Gajara March 8, 2015 at 18:09

Thanks a million for sharing this awesome template for free Peter. Developers like you are the ones who have kept open source idea running.
And Tobias, thanks a ton for sharing the links to get the free avatars.
- Peter Finlan June 20, 2015 at 11:18
  
  No problem Darshan – I’m glad you are enjoying the freebies 🙂
sofia March 9, 2015 at 23:34

amazing template! thank you very much! 🙂
Storyteller March 12, 2015 at 12:53

Hi Peter,

Can I convert this to WP and distribute for free (with your credit of course)
- Peter Finlan February 2, 2016 at 21:55
  
  Sure 🙂
shiva March 24, 2015 at 09:41

Thanks its nice template and giving out for free, template is clean and easy to use with soft navigation. Can we use this template in commercial project also ?
- Peter Finlan June 20, 2015 at 11:19
  
  Yes you can use the template for commercial purposes
Rob March 26, 2015 at 13:58

The social buttons at the bottom of the page are only visible on an iPad/iPhone. They are not visible on desktop. Is there a way to make them visible on desktop too. Thanks.
- Peter Finlan August 11, 2015 at 23:32
  
  They are visible on Desktop also. If you can’t see them, feel free to email me a screenshot along with your display size/resolution and browser size.
tarik March 31, 2015 at 23:12

thank you !
green is the new blue
David M April 6, 2015 at 17:45

Small question: I tried converting your signup form to a contact form by adding a textarea field. However, text in it isn’t wrapping and stays single-line. I’ve searched far and wide in your code, but cannot seem to find why the content doesn’t wrap as normal. How can I force textarea content to wrap, or have the input text content wrap?

Thanks for the great theme though, I’ve been looking for a new personal landing page for a long time and this covers everything perfectly.
- Peter Finlan August 11, 2015 at 23:34
  
  Hey David
  
  Do you mean the ‘Subscribe’ form? This seems to be wrapping as per expected. It’s possible that in converting this field you’ve accidently removed the styling. If you’re still having issues feel free to email me with snippets of your code and I’ll try to help 🙂
Lubin Louis May 3, 2015 at 17:22

Thank you very much for this splendid piece of work. I have used this for my personal portfolio website and its alive and kicking. Great work Peter!
- Peter Finlan August 11, 2015 at 23:34
  
  That’s great to hear! Thanks Lubin
Gabriel June 16, 2015 at 22:56

Hi men, i try to change the color of some objects and that action change all the background of the texts and all i get its a ugly template
Gabriel Calixtro August 23, 2015 at 22:25

I love your icons on the section “team”
- Peter Finlan February 2, 2016 at 21:55
  
  Thanks Gabriel, glad you’re enjoying it 🙂
Drs September 22, 2015 at 16:17

thank you so much 🙂 for sharing it for free
i have no words to say for your work just awesome <3
- Peter Finlan February 2, 2016 at 21:55
  
  No problem!
David October 17, 2015 at 18:40

nice template, but the scroll jitters in chrome are a killer
- Peter Finlan February 2, 2016 at 21:56
  
  Hey David
  
  You’re right! I’ll be looking at a few ways to improve the smooth scrolling in my upcoming free template, coming very soon 🙂

Cookie	Duration	Description
__utma	2 years	This cookie is set by Google Analytics and is used to distinguish users and sessions. The cookie is created when the JavaScript library executes and there are no existing __utma cookies. The cookie is updated every time data is sent to Google Analytics.
__utmb	30 minutes	The cookie is set by Google Analytics. The cookie is used to determine new sessions/visits. The cookie is created when the JavaScript library executes and there are no existing __utma cookies. The cookie is updated every time data is sent to Google Analytics.
__utmc	session	The cookie is set by Google Analytics and is deleted when the user closes the browser. The cookie is not used by ga.js. The cookie is used to enable interoperability with urchin.js which is an older version of Google analytics and used in conjunction with the __utmb cookie to determine new sessions/visits.
__utmt	10 minutes	The cookie is set by Google Analytics and is used to throttle request rate.
__utmz	6 months	This cookie is set by Google analytics and is used to store the traffic source or campaign through which the visitor reached your site.

Cookie	Duration	Description
IDE	1 year 24 days	Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
test_cookie	15 minutes	This cookie is set by doubleclick.net. The purpose of the cookie is to determine if the user's browser supports cookies.

Cookie	Duration	Description
_mcid	1 year	No description
ak_bmsc	2 hours	No description
cookielawinfo-checkbox-functional	1 year	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-others	1 year	No description

About the template

Preview

Download the template for free:

Peter Finlan

10+ Examples of Responsive Websites That Got It Right

Freebie: Emojious Icons (AI, SVG, PNG)

Freebie: “Libre” Web App Template

Subscribe to Codrops

CSS Reference

Feedback 159

Feedback ¹⁵⁹