@coreui/ajax/Angular4_CLI_Full_Project/src/app/widgets/widgets.component.html

Open Source Bootstrap Admin Template

<div class="animated fadeIn">
  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-primary">
        <div class="card-body pb-0">
          <div class="btn-group float-right" dropdown>
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <h4 class="mb-0">9.823</h4>
          <p>Members online</p>
        </div>
        <div class="chart-wrapper px-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="lineChart1Data"
          [labels]="lineChart1Labels"
          [options]="lineChart1Options"
          [colors]="lineChart1Colours"
          [legend]="lineChart1Legend"
          [chartType]="lineChart1Type"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-info">
        <div class="card-body pb-0">
          <button type="button" class="btn btn-transparent p-0 float-right">
            <i class="icon-location-pin"></i>
          </button>
          <h4 class="mb-0">9.823</h4>
          <p>Members online</p>
        </div>
        <div class="chart-wrapper px-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="lineChart2Data"
          [labels]="lineChart2Labels"
          [options]="lineChart2Options"
          [colors]="lineChart2Colours"
          [legend]="lineChart2Legend"
          [chartType]="lineChart2Type"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-warning">
        <div class="card-body pb-0">
          <div class="btn-group float-right">
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <h4 class="mb-0">9.823</h4>
          <p>Members online</p>
        </div>
        <div class="chart-wrapper" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="lineChart3Data"
          [labels]="lineChart3Labels"
          [options]="lineChart3Options"
          [colors]="lineChart3Colours"
          [legend]="lineChart3Legend"
          [chartType]="lineChart3Type"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-danger">
        <div class="card-body pb-0">
          <div class="btn-group float-right" dropdown>
            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
              <i class="icon-settings"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
          <h4 class="mb-0">9.823</h4>
          <p>Members online</p>
        </div>
        <div class="chart-wrapper px-3" style="height:70px;">
          <canvas baseChart class="chart"
          [datasets]="barChart1Data"
          [labels]="barChart1Labels"
          [options]="barChart1Options"
          [colors]="barChart1Colours"
          [legend]="barChart1Legend"
          [chartType]="barChart1Type"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-header bg-primary">
          <div class="font-weight-bold">
            <span>SALE</span>
            <span class="float-right">$1.890,65</span>
          </div>
          <div>
            <span>
              <small>Today 6:43 AM</small>
            </span>
            <span class="float-right">
              <small>+432,50 (15,78%)</small>
            </span>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart4Data"
            [labels]="lineChart4Labels"
            [options]="lineChart4Options"
            [colors]="lineChart4Colours"
            [legend]="lineChart4Legend"
            [chartType]="lineChart4Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="barChart2Data"
            [labels]="barChart2Labels"
            [options]="barChart2Options"
            [colors]="barChart2Colours"
            [legend]="barChart2Legend"
            [chartType]="barChart2Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-header bg-danger">
          <div class="font-weight-bold">
            <span>SALE</span>
            <span class="float-right">$1.890,65</span>
          </div>
          <div>
            <span>
              <small>Today 6:43 AM</small>
            </span>
            <span class="float-right">
              <small>+432,50 (15,78%)</small>
            </span>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart4Data"
            [labels]="lineChart4Labels"
            [options]="lineChart4Options"
            [colors]="lineChart4Colours"
            [legend]="lineChart4Legend"
            [chartType]="lineChart4Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="barChart2Data"
            [labels]="barChart2Labels"
            [options]="barChart2Options"
            [colors]="barChart2Colours"
            [legend]="barChart2Legend"
            [chartType]="barChart2Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-header bg-success">
          <div class="font-weight-bold">
            <span>SALE</span>
            <span class="float-right">$1.890,65</span>
          </div>
          <div>
            <span>
              <small>Today 6:43 AM</small>
            </span>
            <span class="float-right">
              <small>+432,50 (15,78%)</small>
            </span>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart4Data"
            [labels]="lineChart4Labels"
            [options]="lineChart4Options"
            [colors]="lineChart4Colours"
            [legend]="lineChart4Legend"
            [chartType]="lineChart4Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="barChart2Data"
            [labels]="barChart2Labels"
            [options]="barChart2Options"
            [colors]="barChart2Colours"
            [legend]="barChart2Legend"
            [chartType]="barChart2Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-header bg-warning">
          <div class="font-weight-bold">
            <span>SALE</span>
            <span class="float-right">$1.890,65</span>
          </div>
          <div>
            <span>
              <small>Today 6:43 AM</small>
            </span>
            <span class="float-right">
              <small>+432,50 (15,78%)</small>
            </span>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart4Data"
            [labels]="lineChart4Labels"
            [options]="lineChart4Options"
            [colors]="lineChart4Colours"
            [legend]="lineChart4Legend"
            [chartType]="lineChart4Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
          <div class="chart-wrapper" style="height:38px;">
            <canvas baseChart class="chart"
            [datasets]="barChart2Data"
            [labels]="barChart2Labels"
            [options]="barChart2Options"
            [colors]="barChart2Colours"
            [legend]="barChart2Legend"
            [chartType]="barChart2Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="h4 m-0">89.9%</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-xs my-3">
            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="h4 m-0">12.124</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-xs my-3">
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="h4 m-0">$98.111,00</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-xs my-3">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card">
        <div class="card-body">
          <div class="h4 m-0">2 TB</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-xs my-3">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->

  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-primary">
        <div class="card-body">
          <div class="h4 m-0">89.9%</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-white progress-xs my-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-warning">
        <div class="card-body">
          <div class="h4 m-0">12.124</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-white progress-xs my-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-danger">
        <div class="card-body">
          <div class="h4 m-0">$98.111,00</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-white progress-xs my-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-lg-3">
      <div class="card text-white bg-info">
        <div class="card-body">
          <div class="h4 m-0">2 TB</div>
          <div>Lorem ipsum...</div>
          <div class="progress progress-white progress-xs my-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->

  <div class="row">
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="barChart3Data"
            [labels]="barChart3Labels"
            [options]="barChart3Options"
            [colors]="barChart3Primary"
            [legend]="barChart3Legend"
            [chartType]="barChart3Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="barChart3Data"
            [labels]="barChart3Labels"
            [options]="barChart3Options"
            [colors]="barChart3Danger"
            [legend]="barChart3Legend"
            [chartType]="barChart3Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="barChart3Data"
            [labels]="barChart3Labels"
            [options]="barChart3Options"
            [colors]="barChart3Success"
            [legend]="barChart3Legend"
            [chartType]="barChart3Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart5Data"
            [labels]="lineChart5Labels"
            [options]="lineChart5Options"
            [colors]="lineChart5Info"
            [legend]="lineChart5Legend"
            [chartType]="lineChart5Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart5Data"
            [labels]="lineChart5Labels"
            [options]="lineChart5Options"
            [colors]="lineChart5Success"
            [legend]="lineChart5Legend"
            [chartType]="lineChart5Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-md-2 col-sm-4">
      <div class="card">
        <div class="card-body text-center">
          <div class="text-muted small text-uppercase font-weight-bold">Title</div>
          <div class="h2 py-3">1,123</div>
          <div class="chart-wrapper " style="height:40px;width:80px;">
            <canvas baseChart class="chart"
            [datasets]="lineChart5Data"
            [labels]="lineChart5Labels"
            [options]="lineChart5Options"
            [colors]="lineChart5Warning"
            [legend]="lineChart5Legend"
            [chartType]="lineChart5Type"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
          </div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
  <div class="row">
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
        <div class="card-footer px-3 py-2">
          <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
        <div class="card-footer px-3 py-2">
          <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
        <div class="card-footer px-3 py-2">
          <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-3 clearfix">
          <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
          <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
        <div class="card-footer px-3 py-2">
          <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
  <div class="row">
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
          <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
          <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
          <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
          <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
          <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
          <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
          <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-6 col-lg-3">
      <div class="card">
        <div class="card-body p-0 clearfix">
          <i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
          <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
          <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <div class="social-box facebook">
        <i class="fa fa-facebook"></i>
        <ul>
          <li>
            <strong>89k</strong>
            <span>friends</span>
          </li>
          <li>
            <strong>459</strong>
            <span>feeds</span>
          </li>
        </ul>
      </div>
      <!--/social-box-->
    </div><!--/.col-->
    <div class="col-md-3 col-sm-6">
      <div class="social-box twitter">
        <i class="fa fa-twitter"></i>
        <ul>
          <li>
            <strong>973k</strong>
            <span>followers</span>
          </li>
          <li>
            <strong>1.792</strong>
            <span>tweets</span>
          </li>
        </ul>
      </div>
      <!--/social-box-->
    </div><!--/.col-->
    <div class="col-md-3 col-sm-6">
      <div class="social-box linkedin">
        <i class="fa fa-linkedin"></i>
        <ul>
          <li>
            <strong>500+</strong>
            <span>contacts</span>
          </li>
          <li>
            <strong>292</strong>
            <span>feeds</span>
          </li>
        </ul>
      </div>
      <!--/social-box-->
    </div><!--/.col-->
    <div class="col-md-3 col-sm-6">
      <div class="social-box google-plus">
        <i class="fa fa-google-plus"></i>
        <ul>
          <li>
            <strong>894</strong>
            <span>followers</span>
          </li>
          <li>
            <strong>92</strong>
            <span>circles</span>
          </li>
        </ul>
      </div>
      <!--/social-box-->
    </div><!--/.col-->
  </div><!--/.row-->

  <div class="card-group">
    <div class="card">
      <div class="card-body">
        <div class="h1 text-muted text-right mb-4">
          <i class="icon-people"></i>
        </div>
        <div class="h4 mb-0">87.500</div>
        <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
        <div class="progress progress-xs mt-3 mb-0">
          <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div class="h1 text-muted text-right mb-4">
          <i class="icon-user-follow"></i>
        </div>
        <div class="h4 mb-0">385</div>
        <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
        <div class="progress progress-xs mt-3 mb-0">
          <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div class="h1 text-muted text-right mb-4">
          <i class="icon-basket-loaded"></i>
        </div>
        <div class="h4 mb-0">1238</div>
        <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
        <div class="progress progress-xs mt-3 mb-0">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div class="h1 text-muted text-right mb-4">
          <i class="icon-pie-chart"></i>
        </div>
        <div class="h4 mb-0">28%</div>
        <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
        <div class="progress progress-xs mt-3 mb-0">
          <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <div class="h1 text-muted text-right mb-4">
          <i class="icon-speedometer"></i>
        </div>
        <div class="h4 mb-0">5:34:11</div>
        <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
        <div class="progress progress-xs mt-3 mb-0">
          <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-people"></i>
          </div>
          <div class="h4 mb-0">87.500</div>
          <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-user-follow"></i>
          </div>
          <div class="h4 mb-0">385</div>
          <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-basket-loaded"></i>
          </div>
          <div class="h4 mb-0">1238</div>
          <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-pie-chart"></i>
          </div>
          <div class="h4 mb-0">28%</div>
          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-speedometer"></i>
          </div>
          <div class="h4 mb-0">5:34:11</div>
          <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-speech"></i>
          </div>
          <div class="h4 mb-0">972</div>
          <small class="text-muted text-uppercase font-weight-bold">Comments</small>
          <div class="progress progress-xs mt-3 mb-0">
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->

  <div class="row">
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-info">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-people"></i>
          </div>
          <div class="h4 mb-0">87.500</div>
          <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-success">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-user-follow"></i>
          </div>
          <div class="h4 mb-0">385</div>
          <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-warning">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-basket-loaded"></i>
          </div>
          <div class="h4 mb-0">1238</div>
          <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-primary">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-pie-chart"></i>
          </div>
          <div class="h4 mb-0">28%</div>
          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-danger">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-speedometer"></i>
          </div>
          <div class="h4 mb-0">5:34:11</div>
          <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
    <div class="col-sm-6 col-md-2">
      <div class="card text-white bg-info">
        <div class="card-body">
          <div class="h1 text-muted text-right mb-4">
            <i class="icon-speech"></i>
          </div>
          <div class="h4 mb-0">972</div>
          <small class="text-muted text-uppercase font-weight-bold">Comments</small>
          <div class="progress progress-white progress-xs mt-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div><!--/.col-->
  </div><!--/.row-->
</div>