Freebie: “Boxify” One Page Website Template

A modern free HTML5/CSS3 website template with a polished look and smooth animations, carefully crafted with the latest web technologies.

By Peter Finlan in Freebies on
Demo Code

Today we are very happy to share a beautiful and modern one page website template with you.

Boxify is a stylish HTML5/CSS3 template that was carefully crafted and enhanced with some smooth effects. It’s fitting for any type of portfolio or start-up website, but it’s very flexible and can be used for many other projects.

About the website template

The responsive template is made with the freshest web technologies and it’s build with

Preview

Have a look at the whole template design:

Boxify_Preview

Check out the live demo of the template: Boxify 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.

Building a Scrollable and Draggable Timeline with GSAP

Shape Slideshow with Clip-path

Tiny Grid Layout Animation

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 107

Comments are closed.

  1. WOW super nice Template, love it 🙂
    Question, is it possible to make the “Menu” Scroll down with the content?
    Sorry for my Beginner Question but i use to spent and lose a lot of time because of sometime simple things wich are done with CSS
    Thx, and i like the Template even if the Menu stay where it is 😉

    • Hi,
      if you are talking about the menu “button”, you can set it in “position: fixed”.
      I didn’t looked the css in detail but it seems you will have to deal with z-index and stuffs like that, and also maybe with “color change”: white icon on white background doesn’t really works. ; )

    • Hi Amel thanks for the question. Yes it is possible although you will need to rework the code somewhat to allow for the fixed positioning to work as intended. Like Alexis has said below, we can achieve this by adding a CSS positioning style of “fixed” (position: fixed;) to our navigation element. This won’t work 100% correctly “out of the box” because the HTML isn’t structured to accommodate this as is. Please email me if you are still wanting to create this effect and I’d be happy to help you.

  5. hey This is Awesome Template Can i convert This To Blogger Template And Share it Free ?

  7. Very nice and clean template. Great works.
    But I have problem with auto scrolling, it’s a little bit lag with my Chrome (latest, OS X Maverick)

  9. Nice and clean template but the scrolling lags in Chrome + firefox what about this . Smooth scrolling can give it a better effect . Anyway it was Good!. 🙂

  11. Love the design and layout, I’m probably going to gut it though and create it under foundation instead as that’s my preferred framework.

  14. very nice work, thanks a lot .
    I don’t know a lot of thing concerning coding but I’m trying to make a “vertical slider website” with this template and some code that I have found.
    Most of it works but some of the SVG animations and the showcase background don’t.
    I’m trying to correct the problem for 2 days now but I think its coming from the javascript and I don’t know a thing abnout this language .
    Could someone take a look at my code, please 🙂 ? I can upload a zip with the files .

  24. This is a really slick looking template. I appreciate your offering this for ‘free’; however, I am struggling with the menu in the mobile setting. It works perfectly well with only 4 links, but I have many more: links and sub-links both. I have modified the padding of the boxes and may even modify the fa-2x if need be, but I haven’t unlocked the no-scroll feature keeping my user from being able to access the links lower in the list… AND if they decide “you know what, I don’t see any link here I want to click, so I’ll just keep reading from where I left off…” when they exit the nav, it takes them all the way back up to the top… :/ I’m trying to find a work around for this too…
    If you should have any recommendations… I’m all ears.

    • Hey Daniel, thanks for your feedback. If you are still having trouble please feel free to get in touch with me directly and I will attempt to help fix your issues. Please visit my website for my contact details. Thanks.

  25. Amazing template! Absolutely love it.

    I’m trying to include a video background without messing up the css. Has anyone else managed to do this successfully? I’d appreciate any tips anyone might have!!

    Thanks so much

  27. Awesome! how can i get the same green/blue filter effect on images? is there an original PSD file?

    • Hey Giacomo, I am planning on releasing the PSD very soon. Stay tuned! In the mean time if you are desperate for the filter, please shoot me an email and I will help you out. Cheers.

  32. Amazing freebie! I’ve two questions:

    1. Is there a particular reason why you use so many images, while you can achieve the same with CSS gradient backgrounds and e.g. fontawesome for the icons?

    2. What’s the name of the font you used for the Boxify logo?

    Thanks!

    • Hi Marc

      Thanks for your feedback. When you say ‘use so many images’ – I’m not sure exactly I know where you’re going with that? There is only one image per section that has a textured background applied on top, the gradients are apart of these images and is applied at design level (Photoshop), they are not applied separately. The reason another container with a CSS gradient was not added to the code was because this would be too hard for the beginner to change and apart to their own design.

      The font used for the Boxify logo is a free font called “Pacifico”.

      Cheers.

  34. Hello, How can I edit this MENU text example: ABOUT IT, DOWNLOAD etc.? Thank you.

  36. Hi! Thanks for this amazing theme! Is there a way to auto play the iphone slider and the one next to the ‘HTML5 Image’?

    • Yes you can, check out the custom options you can implement in to Flicky here. What you’re after is ‘autoPlay: true’.

  38. How can I add a gallery of images that uses arrows for the fancybox sections instead of one image?

  39. Nice collection I will use these templates when i am going to build sites for customers
    Thanks for giving us an wonderful collection

  40. This is awesome, I used in my company website.
    Now i need to add a disclaimer on first loading: Is there a way to add a top up / lightbox?
    I saw many references to forms, is there any examples using the existing css of a form to integrate in this amazing template?
    Thank you very much Peter to share this supercool template.

  42. Peter, thanks so much for the great template.

    I’ve replaced the background of the first section “hero” with a video, and since doing so I have encountered the <a href=”http://stackoverflow.com/questions/17068361/chrome-positionfixed-inside-positionabsolute-breaking-with-iframe-video” title=”Chrome position:fixed inside position:absolute breaking with iframe / video” rel=”nofollow”> bug.

    The suggested fix of adding
    -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);

    to the position: fixed elements isn’t working for me. Any ideas?

    • Hey Jeff

      Send me through an email directly and I’ll try to help (if you still need it). If not, be sure to share your fix 🙂

  43. I hope someone will be kind enough to help me. I downloaded this nice clean template and now what? I want to make it the front page for my tired old website. I tried uploading the two files with FTP to my host, but unsuccessfully.

  46. Hello Peter Finlan!
    My name is Julio Cavalcante, I am Brazilian, professional IT, web design and more love. I’m not a master like you, am a curious naverdade. I think their projects are wonderful.
    I downloaded one of its free themes: Boxify.
    I understand a little: css, java and others (not like you, of course).
    Using this theme if (Boxify), I stood in the question: “showcase-slider”.
    I can not make the slider which is inside the “IPHONE” automatically pass the 03 photos (or slider), that is, roll alone. Could you explain me how do I change this?
    Already, thank you.
    Júlio

  47. The scrolling kills my Core i5 CPU (15% -> 65%). How would one disable the smooth scroll?

    • Hey Dan

      You can disable the smooth scrolling by removing or commenting out the Smooth Scrolling script in the scripts-min.js file.

      Hope this helps

  48. Hi great theme! I have a problem though. Whenever I try adding multiple slider, it doesn’t work. It just piles up vertically. I tried copy & paste of the row with the HTML5 Logo after the watch the video. If you can help me thank you very much. 🙂