<div class="container my-5 py-5">

​

​

    <!--Section: Block Content-->

    <section>

​

      <!--Grid row-->

      <div class="row">

​

        <!--Grid column-->

        <div class="col-lg-4 col-md-12 mb-4">

​

          <div class="media blue lighten-2 text-white z-depth-1 rounded">

            <i class="far fa-money-bill-alt fa-3x blue z-depth-1 p-4 rounded-left text-white"></i>

            <div class="media-body">

              <p class="text-uppercase mt-2 mb-1 ml-3"><small>sales</small></p>

              <p class="font-weight-bold mb-1 ml-3">23 000$</p>

              <div class="progress md-progress mb-0 rounded-0">

                <div class="progress-bar blue darken-2" role="progressbar" style="width: 45%" aria-valuenow="45"

                  aria-valuemin="0" aria-valuemax="100"></div>

              </div>

              <p class="ml-3 mb-0"><small>45% increase</small></p>

            </div>

          </div>

​

​

        </div>

        <!--Grid column-->

​

        <!--Grid column-->

        <div class="col-lg-4 col-md-6 mb-4">

​

          <div class="media deep-purple lighten-2 text-white z-depth-1 rounded">

            <i class="fas fa-chart-bar fa-3x deep-purple z-depth-1 p-4 rounded-left text-white"></i>

            <div class="media-body">

              <p class="text-uppercase mt-2 mb-1 ml-3"><small>Traffic</small></p>

              <p class="font-weight-bold mb-1 ml-3">323 540</p>

              <div class="progress md-progress mb-0 rounded-0">

                <div class="progress-bar deep-purple darken-3" role="progressbar" style="width: 76%" aria-valuenow="76"

                  aria-valuemin="0" aria-valuemax="100"></div>

              </div>

              <p class="ml-3 mb-0"><small>76% increase</small></p>

            </div>

          </div>

​

​

        </div>

        <!--Grid column-->

​

        <!--Grid column-->

        <div class="col-lg-4 col-md-6 mb-4">

​

          <div class="media pink lighten-2 text-white z-depth-1 rounded">

            <i class="fas fa-download fa-3x pink z-depth-1 p-4 rounded-left text-white"></i>

            <div class="media-body">

              <p class="text-uppercase mt-2 mb-1 ml-3"><small>downloads</small></p>

              <p class="font-weight-bold mb-1 ml-3">13 540</p>

              <div class="progress md-progress mb-0 rounded-0">

                <div class="progress-bar pink darken-4" role="progressbar" style="width: 24%" aria-valuenow="24"

                  aria-valuemin="0" aria-valuemax="100"></div>

              </div>

              <p class="ml-3 mb-0"><small>24% increase</small></p>

            </div>

          </div>

​

​

        </div>

        <!--Grid column-->

​

      </div>

      <!--Grid row-->

​

    </section>

    <!--Section: Blocks Content-->

​

​

  </div>