<!-- ============================================================== -->
<!-- First Widget -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row p-t-10 p-b-10">
<!-- Column -->
<div class="col p-r-0">
<h1 class="font-light">86</h1>
<h6 class="text-muted">New Clients</h6>
</div>
<!-- Column -->
<div class="col text-right align-self-center">
<div class="display-4">
<i class="mdi mdi-account-circle text-info"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row p-t-10 p-b-10">
<!-- Column -->
<div class="col p-r-0">
<h1 class="font-light">248</h1>
<h6 class="text-muted">All Projects</h6>
</div>
<!-- Column -->
<div class="col text-right align-self-center">
<div class="display-4">
<i class="mdi mdi-briefcase-check text-warning"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row p-t-10 p-b-10">
<!-- Column -->
<div class="col p-r-0">
<h1 class="font-light">352</h1>
<h6 class="text-muted">New Items</h6>
</div>
<!-- Column -->
<div class="col text-right align-self-center">
<div class="display-4">
<i class="mdi mdi-star-circle text-success"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row p-t-10 p-b-10">
<!-- Column -->
<div class="col p-r-0">
<h1 class="font-light">159</h1>
<h6 class="text-muted">Invoices</h6>
</div>
<!-- Column -->
<div class="col text-right align-self-center">
<div class="display-4">
<i class="mdi mdi-receipt text-danger"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- Second Widget card and image -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-4">
<div class="card">
<img class="card-img-top img-responsive" src="assets/images/big/img1.jpg" alt="Card image cap">
<div class="card-body">
<ul class="list-inline font-14">
<li class="p-l-0">20 May 2016</li>
<li>
<a href="javascript:void(0)" class="link">3 Comment</a>
</li>
</ul>
<h3 class="font-normal">Featured Hydroflora Pots Garden & Outdoors</h3>
<p class="m-b-0 m-t-10">Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
<button class="btn btn-success btn-rounded waves-effect waves-light m-t-20">Read more</button>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-4">
<div class="card">
<img class="card-img-top img-responsive" src="assets/images/big/img2.jpg" alt="Card image cap">
<div class="card-body">
<ul class="list-inline font-14">
<li class="p-l-0">20 May 2016</li>
<li>
<a href="javascript:void(0)" class="link">3 Comment</a>
</li>
</ul>
<h3 class="font-normal">Featured Hydroflora Pots Garden & Outdoors</h3>
<p class="m-b-0 m-t-10">Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
<button class="btn btn-success btn-rounded waves-effect waves-light m-t-20">Read more</button>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-4">
<div class="card">
<img class="card-img-top img-responsive" src="assets/images/big/img4.jpg" alt="Card image cap">
<div class="card-body">
<ul class="list-inline font-14">
<li class="p-l-0">20 May 2016</li>
<li>
<a href="javascript:void(0)" class="link">3 Comment</a>
</li>
</ul>
<h3 class="font-normal">Featured Hydroflora Pots Garden & Outdoors</h3>
<p class="m-b-0 m-t-10">Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
<button class="btn btn-success btn-rounded waves-effect waves-light m-t-20">Read more</button>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- Third Widget card and Progress bar -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3>86%</h3>
<h6 class="card-subtitle">Total Product</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="success" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3>40%</h3>
<h6 class="card-subtitle">Pending Product</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="info" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3>56%</h3>
<h6 class="card-subtitle">Product A</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="danger" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h3>26%</h3>
<h6 class="card-subtitle">Product B</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="inverse" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- fourth Widget Slider -->
<!-- ============================================================== -->
<div class="row">
<!-- col -->
<div class="col-lg-3 col-md-6">
<div class="card bg-info">
<div class="card-body">
<ngb-carousel class="no-control-indicator">
<ng-template ngbSlide>
<div class="">
<i class="fa fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get
<span class="font-bold">50% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get
<span class="font-bold">60% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-twitter fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white font-light">Now Get
<span class="font-bold">70% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
<!-- col -->
<div class="col-lg-3 col-md-6">
<div class="card bg-primary">
<div class="card-body">
<ngb-carousel class="no-control-indicator">
<ng-template ngbSlide>
<div class="">
<i class="fa fa-facebook fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">50% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-facebook fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">60% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-facebook fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">70% Off</span>
<br> on buy</h3>
<div class="text-white m-t-20">
<i>- john doe</i>
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
<!-- col -->
<div class="col-lg-3 col-md-6">
<div class="card bg-inverse">
<div class="card-body">
<ngb-carousel class="no-control-indicator">
<ng-template ngbSlide>
<div class="">
<i class="fa fa-map-marker fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">50% Off</span>
<br> on buy</h3>
<div>
<button class="btn btn-secondary b-0 waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-map-marker fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">60% Off</span>
<br> on buy</h3>
<div>
<button class="btn btn-secondary b-0 waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-map-marker fa-2x text-white"></i>
<p class="text-white">25th Jan</p>
<h3 class="text-white">Now Get
<span class="font-bold">70% Off</span>
<br> on buy</h3>
<div>
<button class="btn btn-secondary b-0 waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
<!-- col -->
<div class="col-lg-3 col-md-6">
<div class="card bg-white">
<div class="card-body">
<ngb-carousel class="no-control-indicator">
<ng-template ngbSlide>
<div class="">
<i class="fa fa-map-marker fa-2x"></i>
<p>25th Jan</p>
<h3>Now Get
<span class="font-bold">50% Off</span>
<br>on buy</h3>
<div>
<button class="btn btn-info justify-content-start waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class=" active">
<i class="fa fa-map-marker fa-2x"></i>
<p>25th Jan</p>
<h3>Now Get
<span class="font-bold">60% Off</span>
<br> on buy</h3>
<div>
<button class="btn btn-success d-inline waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="">
<i class="fa fa-map-marker fa-2x"></i>
<p>25th Jan</p>
<h3>Now Get
<span class="font-bold">70% Off</span>
<br> on buy</h3>
<div>
<button class="btn btn-primary waves-effect waves-light m-t-15">Default</button>
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
<!-- col -->
</div>
<!-- ============================================================== -->
<!-- fifth Widget Slider -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-success">
<i class="ti-wallet"></i>
</div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-info">
<i class="ti-user"></i>
</div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">2690</h3>
<h5 class="text-muted m-b-0">Users</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-danger">
<i class="ti-calendar"></i>
</div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">20 march</h3>
<h5 class="text-muted m-b-0">My birthday</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<div class="d-flex flex-row">
<div class="round align-self-center round-success">
<i class="ti-settings"></i>
</div>
<div class="m-l-10 align-self-center">
<h3 class="m-b-0">6540</h3>
<h5 class="text-muted m-b-0">pending</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- Sixth Widget -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="d-flex flex-row">
<div class="p-10 bg-info">
<h3 class="text-white box m-b-0">
<i class="ti-wallet"></i>
</h3>
</div>
<div class="align-self-center m-l-20">
<h3 class="m-b-0 text-info">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="d-flex flex-row">
<div class="p-10 bg-success">
<h3 class="text-white box m-b-0">
<i class="ti-wallet"></i>
</h3>
</div>
<div class="align-self-center m-l-20">
<h3 class="m-b-0 text-success">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="d-flex flex-row">
<div class="p-10 bg-inverse">
<h3 class="text-white box m-b-0">
<i class="ti-wallet"></i>
</h3>
</div>
<div class="align-self-center m-l-20">
<h3 class="m-b-0">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="d-flex flex-row">
<div class="p-10 bg-primary">
<h3 class="text-white box m-b-0">
<i class="ti-wallet"></i>
</h3>
</div>
<div class="align-self-center m-l-20">
<h3 class="m-b-0 text-primary">$18090</h3>
<h5 class="text-muted m-b-0">Income</h5>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- Seven Widget Social -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="row">
<div class="col-12">
<div class="social-widget">
<div class="soc-header box-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="soc-content">
<div class="col-6 b-r">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Followers</h5>
</div>
<div class="col-6">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Posts</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="row">
<div class="col-12">
<div class="social-widget">
<div class="soc-header box-twitter">
<i class="fa fa-twitter"></i>
</div>
<div class="soc-content">
<div class="col-6 b-r">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Followers</h5>
</div>
<div class="col-6">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Tweets</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="row">
<div class="col-12">
<div class="social-widget">
<div class="soc-header box-google">
<i class="fa fa-google-plus"></i>
</div>
<div class="soc-content">
<div class="col-6 b-r">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Circles</h5>
</div>
<div class="col-6">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Posts</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="row">
<div class="col-12">
<div class="social-widget">
<div class="soc-header box-linkedin">
<i class="fa fa-linkedin"></i>
</div>
<div class="soc-content">
<div class="col-6 b-r">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Contacts</h5>
</div>
<div class="col-6">
<h3 class="font-medium">456</h3>
<h5 class="text-muted">Posts</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
<!-- ============================================================== -->
<!-- Eight Widget -->
<!-- ============================================================== -->
<div class="card-group m-b-30">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h2 class="m-b-0">
<i class="mdi mdi-briefcase-check text-info"></i>
</h2>
<h3 class="">2456</h3>
<h6 class="card-subtitle">New Projects</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="info" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h2 class="m-b-0">
<i class="mdi mdi-alert-circle text-success"></i>
</h2>
<h3 class="">546</h3>
<h6 class="card-subtitle">Pending Project</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="success" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h2 class="m-b-0">
<i class="mdi mdi-wallet text-purple"></i>
</h2>
<h3 class="">$24561</h3>
<h6 class="card-subtitle">Total Cost</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="primary" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<h2 class="m-b-0">
<i class="mdi mdi-buffer text-warning"></i>
</h2>
<h3 class="">$30010</h3>
<h6 class="card-subtitle">Total Earnings</h6>
</div>
<div class="col-12">
<ngb-progressbar [showValue]="false" type="warning" [value]="50"></ngb-progressbar>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- Nine Widget -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-inverse card-info">
<div class="box bg-info text-center">
<h1 class="font-light text-white">2,064</h1>
<h6 class="text-white">Sessions</h6>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-primary card-inverse">
<div class="box text-center">
<h1 class="font-light text-white">1,738</h1>
<h6 class="text-white">Users</h6>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-inverse card-success">
<div class="box text-center">
<h1 class="font-light text-white">5963</h1>
<h6 class="text-white">Page Views</h6>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-inverse card-dark">
<div class="box text-center">
<h1 class="font-light text-white">2.9s</h1>
<h6 class="text-white">Pages/Session</h6>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-inverse card-megna">
<div class="box text-center">
<h1 class="font-light text-white">1.5s</h1>
<h6 class="text-white">Avg. Session</h6>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-6 col-lg-4 col-xlg-2">
<div class="card card-inverse card-warning">
<div class="box text-center">
<h1 class="font-light text-white">10%</h1>
<h6 class="text-white">Bounce Rate</h6>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- Ten Widget -->
<!-- ============================================================== -->
<div class="row">
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Daily Sales</h4>
<div class="text-right">
<span class="text-muted">Todays Income</span>
<h1 class="font-light">
<sup>
<i class="ti-arrow-up text-success"></i>
</sup> $120</h1>
</div>
<span class="text-success">20%</span>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 20%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Weekly Sales</h4>
<div class="text-right">
<span class="text-muted">Todays Income</span>
<h1 class="font-light">
<sup>
<i class="ti-arrow-up text-info"></i>
</sup> $5,000</h1>
</div>
<span class="text-info">30%</span>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 30%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Monthly Sales</h4>
<div class="text-right">
<span class="text-muted">Todays Income</span>
<h1 class="font-light">
<sup>
<i class="ti-arrow-down text-danger"></i>
</sup> $8,000</h1>
</div>
<span class="text-danger">60%</span>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 60%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-lg-3 col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Yearly Sales</h4>
<div class="text-right">
<span class="text-muted">Todays Income</span>
<h1 class="font-light">
<sup>
<i class="ti-arrow-up text-inverse"></i>
</sup> $12,000</h1>
</div>
<span class="text-inverse">80%</span>
<div class="progress">
<div class="progress-bar bg-inverse" role="progressbar" style="width: 80%; height: 6px;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- Column -->
</div>
