<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Material Design for Bootstrap</title> <!-- MDB icon --> <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" /> <!-- Google Fonts Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <!-- MDB --> <link rel="stylesheet" href="../../css/mdb.min.css" /> <!-- PRISM --> <link rel="stylesheet" href="../../dev/css/new-prism.css" /> <!-- Custom styles --> <style></style> </head> <body> <div class="container my-5 px-5 pt-5 pb-4 shadow-3"> <!--Section: Counter 1--> <section> <h3 class="mb-5 text-center">Counter</h3> <h4 class="mb-3">Attributes</h4> <ul class="mb-4 list-unstyled"> <li>data-from : to change starting point</li> <li>data-to : to change ending point</li> <li>data-time : to change how long transition takes</li> </ul> <div class="count-up h1 text-center mb-4" data-from="10" data-to="20000" data-time="1000"> 0 </div> <h4 class="mb-3"> How long did you develop it? <span class="count1" data-from="0" data-to="5" data-time="2000">0</span> hours </h4> <div> Was it worth it? <span class="style" ><span class="count2" data-from="0" data-to="100" data-time="1000">0</span> %</span > </div> <div> This many ppl trusted I can deliver it in one day <span class="count3 style" data-from="30" data-to="-30" data-time="5000"></span> </div> <div> It works with huge numbers too <span class="count4 style" data-from="-10000" data-to="10000" data-time="3000"></span> </div> <h3 class="my-4 block text-center">↓ Check this out ↓</h3> <div class="mb-4"> You can animate it! <span class="ps-5 style last wow animated bounceIn delay-3s" ><span class="count5" data-from="0" data-to="100" data-time="2000">0</span> %</span > </div> </section> <!--Section: Counter 1--> </div> <br /> <div class="container my-5 px-5 pt-5 pb-4 shadow-3"> <!--Section: Counter 2--> <section> <h3 class="mb-5 text-center">Counter</h3> <div class="row"> <div class="col-lg-4 mb-4"> <div class="row"> <div class="col-6 pe-0"> <h4 class="display-4 text-end mb-0 count-up" data-from="0" data-to="42" data-time="2000" > 42 </h4> </div> <div class="col-6"> <p class="text-uppercase mb-1">Projects</p> <p class="mb-0"><i class="fas fa-briefcase fa-2x"></i></p> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="row"> <div class="col-6 pe-0"> <h4 class="display-4 text-end mb-0 count1" data-from="0" data-to="3500" data-time="2000" > 3,500 </h4> </div> <div class="col-6"> <p class="text-uppercase mb-1">Customers</p> <p class="mb-0"><i class="fas fa-user fa-2x"></i></p> </div> </div> </div> <div class="col-lg-4 mb-4"> <div class="row"> <div class="col-6 pe-0"> <h4 class="display-4 text-end mb-0 count2" data-from="0" data-to="100" data-time="2000" > 0% </h4> </div> <div class="col-6"> <p class="text-uppercase mb-1">Satisfaction</p> <p class="mb-0"><i class="fas fa-smile fa-2x"></i></p> </div> </div> </div> </div> </section> <!--Section: Counter 2--> </div> <br /> <div class="container my-5 px-5 pt-5 pb-4 shadow-3"> <!--Section: Counter 3--> <section> <h3 class="mb-5 text-center">Counter</h3> <div class="row d-flex justify-content-center"> <div class="col-md-6 col-lg-3 mb-4 text-center"> <h4 class="h1 mb-3"> <i class="fas fa-file-alt text-primary"></i> <span class="d-inline-block count-up" data-from="0" data-to="100" data-time="2000" >100</span > </h4> <p class="fw-normal text-muted">Unique Page</p> </div> <div class="col-md-6 col-lg-3 mb-4 text-center"> <h4 class="h1 mb-3"> <i class="fas fa-layer-group text-primary"></i> <span class="d-inline-block count1" data-from="0" data-to="250" data-time="2000" >250</span > </h4> <p class="fw-normal text-muted">Block Variety</p> </div> <div class="col-md-6 col-lg-3 mb-4 text-center"> <h4 class="h1 mb-3"> <i class="fas fa-pencil-ruler text-primary"></i> <span class="d-inline-block count2" data-from="0" data-to="330" data-time="2000" >330</span > </h4> <p class="fw-normal text-muted">Reusable Component</p> </div> <div class="col-md-6 col-lg-3 mb-4 text-center"> <h4 class="h1 mb-3"> <i class="fab fa-react text-primary"></i> <span class="d-inline-block count3" data-from="0" data-to="430" data-time="2000" >430</span > </h4> <p class="fw-normal text-muted">Crafted Element</p> </div> </div> </section> <!--Section: Counter 3--> </div> <br /> <!-- PRISM --> <script type="text/javascript" src="../../dev/js/new-prism.js"></script> <!-- MDB SNIPPET --> <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script> <!-- MDB --> <script type="text/javascript" src="../../js/mdb.min.js"></script> <!-- Custom scripts --> <script type="text/javascript"></script> </body> </html>