Fat2Fit - Gym Blog Html Template

let's start

Welcome To Fat2Fit Theme

Created By Ui-Ux Designer - Contact Me

Fat2Fit is an Gym Blog HTML template for health sports club, personal gym trainer, gym and fitness websites. It is a highly suitable template for fitness companies as well as gyms or sports clubs. It has the purpose oriented design, responsive layout and special features like about us, portfolio, blog plans and other pages. All files are super organized and highly documented, so working with these files is a breeze.

Installing Theme

1.After unzip Theme Files, you will found HTML Folder all this files you will upload.
2.You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.
3.Start your FTP client (I personally use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
4.Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.
5.Once the files are done uploading, rename the file you want to be your home page as 'index.html'.


  • bootstrap.min.css
  • animate.min.css
  • bootstrap-dropdownhover.min.css
  • owl.carousel.css


  • jquery
  • bootstrap.min.js
  • bootstrap-dropdownhover.js
  • owl.carousel.min.js
  • wow.min.js


  • font-awesome.min.css


To customize header you will just change the text and href of links and your logo it's supper easy.

                  <!-- Brand and toggle get grouped for better mobile display -->
                  <a class="navbar-brand" href="index.html">
                    <img src="images/logo-3.png" alt="Fat 2 Fit Logo">
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="lifestyle.html">Lifestyle</a></li>
                      <li><a href="portfolio.html">Portfolio</a></li>
                      <li><a href="contact-us.html">Contact</a></li>
                      <li class="search-link">
                        <a href="#"><i class="fa fa-search"></i></a>

Slider Section

To customize the slider put your images (recommended size 477px * 499px) in 'images' folder.
Then open index.html file using any text editor. We recommend Brackets
Now look for the following code and replace highlighted text with your image name + your image extension like this (name.png or name.jpg)

                  <div class="post">
                    <a href="#"><img src="http://via.placeholder.com/477x499" alt="#"></a>
                    <div class="post-info">
                      <div class="post-info-content">
                        <h5><a href="#" title="Nature">Nature</a></h5>
                        <a href="#" class="post-title" title="White Sand of The Desert Discovery">White Sand of The Desert Discovery</a>
                        <a href="#" class="read-more">read more</a>
                    <div class="post-footer">
                      <span class="post-by">by <a href="#">inDesign</a></span>
                      <span class="post-date"><a href="#">MARCH 17, 2018</a></span>
                    <div class="post-overlay"></div>


To customize the portfolio put your images (recommended size 360px * 420px) in 'images' folder.
Change your project name, link and category.

                  <div class="portfolio-box">
                    <div class="portfolio-img">
                      <img src="http://via.placeholder.com/360x420" alt="#">
                      <div class="overlay">
                        <a href="single-portfolio.html">
                          <i class="fa fa-unlink"></i>
                    <div class="portfolio-footer">
                      <div class="__portfolio-footer-left">
                        <a href="single-portfolio.html">Leg press</a>
                      <div class="__portfolio-footer-right">Abstract</div>


To customize the slider put your images (recommended size 409px * 272px) in 'images' folder.
Change your blog post description, date, title, categories, tags and read more button.

                  <div class="blog-post">
                    <div class="blog-post-img-date">
                      <img src="http://via.placeholder.com/409x272" alt="#">
                      <div class="blog-post-date">25 <span>Nov</span></div>
                      <div class="blog-type"><i class="fa fa-camera"></i></div>
                    <div class="blog-post-info">
                      <h5>Interview with ceo of big data business</h5>
                      <ul class="info">
                        <li><i class="fa fa-user"></i><a href="" title="Posts by admin" rel="author">admin</a></li>
                        <li><i class="fa fa-comments"></i><a href="" class="comment-url">One Comment</a></li>
                      <div class="post-content">
                          No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely pleasure...
                      <ul class="categories">
                        <li><i class="fa fa-tags"></i><a href="" rel="category tag">Uncategorized</a></li>
                      <ul class="tags">
                        <li><span class="tags-title">Tags:</span><span class="no-tags">Video, Audio, Website</span></li>
                      <div class="read-more">
                        <a href="standard-post.html">Read more <i class="fa fa-angle-right"></i></a>

Loading Screen

to Turn Off Loading Screen Open HTML files using any text editor. Now look for the
following code and remove them.

                  <div class="loading-mask">
                    <div class='pre-loader'>

Save the file and refresh your browser.

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file,
please feel free to Contact Me. Thanks so much!