Habitro - Nutrition Health and Diet HTML Template

Style 1

Nutrition
Programs

Coaching
Certificates

Workout
Sessions

Copy

copy


<div class="p-1-9 p-md-5 bg-secondary border-radius-10">
    <div class="row text-center position-relative z-index-1">
        <div class="col-sm-6 col-lg-4 mb-1-6 mb-sm-1-9 mb-lg-0">
            <div class="d-flex justify-content-center align-items-center">
                <div class="flex-shrink-0 display-14 display-sm-12 display-lg-10 text-white title-font fw-bold w-75px w-lg-auto">
                    <div class="odometer d-inline-block" data-count="3">0</div>k
                </div>
                <div class="flex-grow-1 ms-3 ms-xl-4 text-start">
                    <h4 class="h6 text-white mb-0 text-uppercase lh-base">Nutrition <br>Programs</h4>
                </div>
                <img src="img/icons/icon-33.png" class="position-absolute opacity3 left-70 bottom-95 left-lg-65 bottom-lg-n50 d-none d-sm-block" alt="...">
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-1-6 mb-sm-1-9 mb-lg-0">
            <div class="d-flex justify-content-center align-items-center">
                <div class="flex-shrink-0 display-14 display-sm-12 display-lg-10 text-white title-font fw-bold w-75px w-lg-auto">
                    <div class="odometer d-inline-block" data-count="78">0</div>+
                </div>
                <div class="flex-grow-1 ms-3 ms-xl-4 text-start">
                    <h4 class="h6 text-white mb-0 text-uppercase lh-base">Coaching <br>Certificates</h4>
                </div>
                <img src="img/icons/icon-32.png" class="position-absolute opacity3 left-n5 top-95 left-lg-20 top-lg-n60 d-none d-sm-block" alt="...">
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="d-flex justify-content-center align-items-center">
                <div class="flex-shrink-0 display-14 display-sm-12 display-lg-10 text-white title-font fw-bold w-75px w-lg-auto">
                    <div class="odometer d-inline-block" data-count="8">0</div>+
                </div>
                <div class="flex-grow-1 ms-3 ms-xl-4 text-start">
                    <h4 class="h6 text-white mb-0 text-uppercase lh-base">Workout <br>Sessions</h4>
                </div>
                <img src="img/icons/icon-01.png" class="position-absolute opacity3 left-70 top-95 left-lg-95 top-lg-n60 d-none d-sm-block" alt="...">
            </div>
        </div>
    </div>
</div>

Style 2

Happy Customers

Nutrition Programs

Coaching Certificates

Workout Sessions

Copy

copy


<div class="p-1-9 p-md-5 bg-secondary border-radius-10">
    <div class="row text-center mt-n1-9 position-relative z-index-1">
        <div class="col-sm-6 col-lg-3 mt-1-9">
            <div class="h1 text-white title-font">
                <div class="odometer d-inline-block" data-count="25">0</div>k
            </div>
            <p class="text-white mb-0">Happy Customers</p>
        </div>
        <div class="col-sm-6 col-lg-3 mt-1-9">
            <div class="h1 text-white title-font">
                <div class="odometer d-inline-block" data-count="3">0</div>k
            </div>
            <p class="text-white mb-0">Nutrition Programs</p>
        </div>
        <div class="col-sm-6 col-lg-3 mt-1-9">
            <div class="h1 text-white title-font">
                <div class="odometer d-inline-block" data-count="78">0</div>+
            </div>
            <p class="text-white mb-0">Coaching Certificates</p>
        </div>
        <div class="col-sm-6 col-lg-3 mt-1-9">
            <div class="h1 text-white title-font">
                <div class="odometer d-inline-block" data-count="8">0</div>+
            </div>
            <p class="text-white mb-0">Workout Sessions</p>
        </div>
    </div>
</div>