ابزارک توضیحات عنوان صفحه در اینجا می رود...

<div class="card border-0 text-white overflow-hidden" style="max-height: 250px">
  <!-- card-img -->
  <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img" />
  
  <!-- card-img-overlay -->
  <div class="card-img-overlay d-flex flex-column bg-dark-transparent-7 rounded">
    <!-- top content -->
    <div class="flex-fill">
      <div class="d-flex align-items-center">
        <h6>Youtube</h6>
        <div class="dropdown ml-auto">
          <a href="#" class="text-white" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
          <div class="dropdown-menu dropdown-menu-right">
            ...
          </div>
        </div>
      </div>
    </div>
    
    <!-- bottom-content -->
    <div>
      <a href="#" class="text-white text-decoration-none d-flex align-items-center">
        <div class="bg-gradient-red-pink width-40 height-40 rounded-lg d-flex align-items-center justify-content-center">
          <i class="fa fa-play"></i>
        </div>
        <div class="ml-3">
          <div class="font-weight-600">فیلم های جدید - پشت تورهای جنگلی</div>
          <div class="fs-13px">
            <i class="far fa-eye"></i> 892 بازدید
            <i class="far fa-clock ml-3"></i> 39دقیقه قبل </div>
        </div>
      </a>
    </div>
  </div>
</div>

<div class="list-group">
  <!-- with icon -->
  <div class="list-group-item d-flex align-items-center">
    <div class="width-40 height-40 d-flex align-items-center justify-content-center bg-gradient-orange text-white rounded ml-n1">
      <i class="fa fa-book fa-lg"></i>
    </div>
    <div class="flex-fill pl-3 pr-3">
      <div class="font-weight-600">iBooks App</div>
      <div class="fs-13px">32 دانلود جدید</div>
    </div>
    <div class="dropdown">
      <a href="#" data-toggle="dropdown" class="text-muted"><i class="fa fa-ellipsis-h"></i></a>
      <div class="dropdown-menu dropdown-menu-right">
        ...
      </div>
    </div>
  </div>
  
  <!-- with image -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
    <div class="width-40 height-40 d-flex align-items-center justify-content-center ml-n1">
      <img src="assets/img/user/user.jpg" class="mw-100 mh-100 rounded-circle" />
    </div>
    <div class="flex-fill pl-3">
      <div class="font-weight-600">
        Isaiah Hughes <span class="fa fa-circle text-success fs-9px ml-2"></span>
      </div>
    </div>
  </a>
  
  <!-- link with icon -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="flex-fill">
      <div class="font-weight-600">Link with arrow</div>
    </div>
    <div>
      <i class="fa fa-chevron-right"></i>
    </div>
  </a>
</div>

<a href="#" class="card bg-gradient-cyan-blue border-0 text-decoration-none">
  <div class="card-body d-flex align-items-center text-white">
    <div class="flex-fill">
      <div class="mb-1">تعداد بازدیدکنندگان + بازدیدها از صفحه</div>
      <h2>22,930</h2>
      <div>امروط, 11:25قبل ظهر</div>
    </div>
    <div class="opacity-5">
      <i class="fa fa-shopping-bag fa-4x"></i>
    </div>
  </div>
</a>

<div class="card border-0 overflow-hidden">
  <div class="card-body bg-gradient-orange-red rounded-top text-white text-center">
    <div class="fs-16px font-weight-600">Weekly Web Analytics</div>
    <div class="fs-13px mb-3">هفته ها در اردیبهشت</div>
    <canvas id="barChart" height="120"></canvas>
  </div>
  <div class="list-group">
    <div class="list-group-item border-top-0 rounded-top-0 d-flex align-items-center p-3">
      <div class="width-40 height-40 rounded bg-gradient-orange-red text-white d-flex align-items-center justify-content-center">
        <i class="fa fa-user fa-lg"></i>
      </div>
      <div class="flex-fill pl-3 pr-3">
        <div class="font-weight-600">Total Visitors</div>
        <div class="fs-13px">11 اردیبهشت - 17 اردیبهشت</div>
      </div>
      <div>
        <h2 class="mb-0">1.3m</h2>
      </div>
    </div>
  </div>
</div>

<div class="widget-user-list">
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-1.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-2.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-3.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-4.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-5.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-6.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-7.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link bg-gray-200 text-gray-500 fs-12px font-weight-600">+26</a></div>
</div>

<div class="card">
  <div class="card-header font-weight-600 bg-white border-0">نقشه گوگل</div>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7915.525673176609!2d46.32542404246615!3d38.06389198146334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDAzJzUzLjgiTiA0NsKwMTknMzkuNCJF!5e0!3m2!1sen!2s!4v1545664085241" style="border:0; width: 100%; height: 10rem;" allowfullscreen></iframe>
  <div class="list-group list-group-flush">
    <div class="list-group-item d-flex">
      <div class="width-30 height-40 d-flex align-items-center justify-content-center">
        <i class="fa fa-car fa-2x text-gray-300"></i>
      </div>
      <div class="flex-fill pl-3 pr-3">
        <div class="font-weight-600">via Road I-88E</div>
        <div class="fs-13px">Fastest route, the usual traffic</div>
      </div>
      <div class="text-nowrap">
        <div class="text-success font-weight-600">3h 54min</div>
        <div class="fs-13px">393km</div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header bg-white font-weight-600 d-flex align-items-center">Discussion group <a href="#" class="ml-auto text-muted text-decoration-none" data-toggle="card-expand"><i class="fa fa-expand"></i></a></div>
  <div class="card-body bg-gray-100" data-scrollbar="true" data-height="200px">
    <div class="widget-chat">
      <div class="widget-chat-date">Today 14:21</div>
      <div class="widget-chat-item">
        <div class="widget-chat-media"><img src="assets/img/user/user-2.jpg" alt="" /></div>
        <div class="widget-chat-content">
          <div class="widget-chat-name">جعفر عباسی</div>
          <div class="widget-chat-message">
            زیاد نیست ، ظاهر جدیدی پیدا کرده است ، تصاویر تماس با ما در پیام های گروهی ، برخی دیگر از موارد کوچک ظاهر می شوند.
          </div>
          <div class="widget-chat-message last">
            iOS 6 قدیمی پوسته پوسته چگونه با شما رفتار می کند؟
          </div>
        </div>
      </div>
      <div class="widget-chat-item reply">
        <div class="widget-chat-content">
          <div class="widget-chat-message last">
            Sucks
          </div>
          <div class="widget-chat-status"><b>Read</b> 16:30</div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer bg-white">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="جستجو برای...">
      <span class="input-group-append">
        <button class="btn btn-default" type="button"><i class="fa fa-paper-plane text-muted"></i></button>
      </span>
    </div>
  </div>
</div>

<!-- top card -->
<div class="card border-0 overflow-hidden rounded-bottom-0" style="height: 165px">
  <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img rounded-0" alt="" />
  <div class="card-img-overlay text-white text-center bg-dark-transparent-5">
    <div class="mb-2">
      <img src="assets/img/user/user-5.jpg" width="80px" class="rounded-circle" alt="" />
    </div>
    <div>
      <div class="font-weight-600">موریس پترسون</div>
      <div class="fs-13px">هرگز تسلیم نشوید</div>
    </div>
  </div>
</div>

<!-- bottom card -->
<div class="card border-top-0 rounded-top-0">
  <div class="card-body p-3">
    <div class="row text-center">
      <div class="col-4">
        <div class="font-weight-600">415</div>
        <div class="fs-13px">posts</div>
      </div>
      <div class="col-4">
        <div class="font-weight-600">140k</div>
        <div class="fs-13px">followers</div>
      </div>
      <div class="col-4">
        <div class="font-weight-600">697</div>
        <div class="fs-13px">following</div>
      </div>
    </div>
  </div>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
    <div class="width-50 height-50 d-flex align-items-center justify-content-center ml-n1">
      <img src="assets/img/product/product-1.jpg" class="mw-100 mh-100 rounded" />
    </div>
    <div class="flex-fill pl-3 pr-3">
      <div class="font-weight-600">آیفون 1 پرو مکس</div>
      <div class="fs-12px text-muted">Apple</div>
      <div class="d-flex align-items-center fs-11px">
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-gray-300 mr-1"></i>
        (128)
      </div>
    </div>
    <div>
      <span class="label bg-transparent border border-primary text-primary fs-12px fw-500 rounded-sm">
        $999.00
      </span>
    </div>
  </a>
</div>

<div class="card">
  <div class="card-header font-weight-600">امروز 9 اردیبهشت</div>
  <div class="widget-reminder">
    <div class="widget-reminder-item">
      <div class="widget-reminder-time">20:00<br>23:00</div>
      <div class="widget-reminder-divider bg-primary"></div>
      <div class="widget-reminder-content">
        <div class="font-weight-600">Dinner with Richard</div>
        <div class="fs-13px">رستوران با جعفر</div>
        <div class="d-flex align-items-center fs-13px mt-2">
          <div class="flex-fill d-flex align-items-center">
            <img src="assets/img/user/user-3.jpg" width="16px" class="rounded-circle mr-2" alt="" /> ریچارد جفرسون
          </div>
          <a href="#" class="ml-auto">Contact</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-dark">
      <div class="flex-fill pr-3">
        <div class="font-weight-600">Library (20)</div>
        <div class="fs-13px">3,192 Image Found</div>
      </div>
      <div>
        <i class="fa fa-chevron-right fa-lg text-muted"></i>
      </div>
    </a>
  </div>
  <div class="card-body">
    <div class="widget-img-list">
      <div class="widget-img-list-item"><a href="#"><span class="img" style="background-image: url(assets/img/gallery/gallery-1.jpg)" alt=""></span></a></div>
      ...
    </div>
  </div>
</div>