<!-- ============================================================== --> <!-- 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>