<!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>