Freebie: “Cardio” One Page Website Template

A clean and modern one page website template built with Bootstrap. The responsive HTML template has a gym related theme but can be easily fitted to any kind of content.

From our monthly sponsor:, a new way to manage your work! Meet the new visual project management tool.

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

Cardio is a clean and modern looking, responsive one page website template built with Bootstrap. It has a gym related theme but it can be easily adjusted to fit well with any kind of topic. The template comes with a smooth page navigation and some subtle transition effects. The design is very clean and spacious with a fresh color theme and solid typography.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 10+
  • SafariSupported
  • OperaSupported


About the website template

The responsive template is built with the help of the following resources:


Have a look at the whole template design:


Check out the live demo of the template: Cardio Live Preview


Download the template for free:

You can download the ZIP file here:

Use it freely but please don’t republish, redistribute or sell “as-is”.

We hope you enjoy this freebie and find it useful!

Check out the Behance project page where you will also find a link to download the PSD file!

If you’d like to contribute and publish your freebie on Codrops just drop us a line.


We're brothers in arms. Our names are Filip and Luka. We like to work on impossible projects, and fight unreal deadlines. "Stop existing and start living!"

View all contributions by


Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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 54

Comments are closed.
  1. 1

    Great template thanks very much.
    I may be just being thick here but how to I edit the .less files?
    When I inspect the website it says they are in a less folder in the css folder but nothing is there?
    Just need to make a few changes to the nav bar.
    Thanks very much

    • 3

      You have two options. First, you may want to convert LESS into usual CSS. There are several online tools to do so. For example, you can use this one: The second option is to learn LESS syntax. If you are planning to work a lot with website designs then you may consider learning CSS compilers such as LESS. Anyway good luck!

    • 4

      the problem I have is: locating the less files! I cant seam to find it in the CSS folder.

  2. 9

    i wanted only to congratulate you cause i like this wonderful template. thanks enough.

Comments are closed.