Cách tạo: Block counter

Hiểu cách sử dụng CSS để tạo "block counter".

Block counter

Block counter thông qua việc hiển thị các con số thú vị để thông báo cho mọi người về cách mà kinh doanh của họ đang diễn ra:

11+

Đối tác

55+

Dự án

100+

Khách hàng hạnh phúc

100+

Hội họp

Thử ngay

Cách tạo block counter

Bước 1 - Thêm HTML:

<div class="row">
  <div class="column">
    <div class="card">
      <p><i class="fa fa-user"></i></p>
      <h5>11+</h5>
      <p>Đối tác</p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <p><i class="fa fa-check"></i></p>
      <h5>55+</h5>
      <p>Dự án</p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <p><i class="fa fa-smile-o"></i></p>
      <h5>100+</h5>
      <p>Khách hàng hạnh phúc</p>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <p><i class="fa fa-coffee"></i></p>
      <h5>100+</h5>
      <p>Hội họp</p>
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

* {
  box-sizing: border-box;
}
/* Đặt định dạng cho bốn cột cùng lúc */
.column {
  float: left;
  width: 25%;
  padding: 0 5px;
}
.row {margin: 0 -5px;}
/* Xóa trôi sau cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Đặt định dạng cho cột响应 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}
/* Đặt định dạng cho thẻ điểm số */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #444;
  color: white;
}
.fa {font-size:50px;}

Thử ngay