Hopiu/djLint
1
0
Fork 0
mirror of https://github.com/Hopiu/djLint.git synced 2026-05-25 13:03:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
djLint/tests/jinja_adminlte/widgets.html
Christopher Pickering 9120f70147
updated formatter and docs
2021-07-29 13:41:34 -05:00

2913 lines
303 KiB
HTML
Raw Blame History

{% extends "layouts/base.html" %}
{% block title %}Widgets {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %}{% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
{% endblock stylesheets %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Widgets</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Widgets
</li>
</ol>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<h5 class="mb-2">Info Box</h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info">
<i class="far fa-envelope"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-success">
<i class="far fa-flag"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">410</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-warning">
<i class="far fa-copy"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Uploads</span>
<span class="info-box-number">13,648</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-danger">
<i class="far fa-star"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">93,139</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">
Info Box With Custom Shadows
<small>
<i>
Using Bootstrap's Shadow Utility
</i>
</small>
</h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box shadow-none">
<span class="info-box-icon bg-info">
<i class="far fa-envelope"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Custom Shadows - None
</span>
<span class="info-box-number"></span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box shadow-sm">
<span class="info-box-icon bg-success">
<i class="far fa-flag"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Custom Shadows - Small
</span>
<span class="info-box-number"></span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box shadow">
<span class="info-box-icon bg-warning">
<i class="far fa-copy"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Custom Shadows - Regular
</span>
<span class="info-box-number"></span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box shadow-lg">
<span class="info-box-icon bg-danger">
<i class="far fa-star"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Custom Shadows - Large
</span>
<span class="info-box-number"></span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mt-4 mb-2">
Info Box With
<code>
bg-*
</code>
</h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-info">
<span class="info-box-icon">
<i class="far fa-bookmark"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Bookmarks
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-success">
<span class="info-box-icon">
<i class="far fa-thumbs-up"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Likes
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-warning">
<span class="info-box-icon">
<i class="far fa-calendar-alt"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Events
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-danger">
<span class="info-box-icon">
<i class="fas fa-comments"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Comments
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mt-4 mb-2">
Info Box With
<code>
bg-gradient-*
</code>
</h5>
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-gradient-info">
<span class="info-box-icon">
<i class="far fa-bookmark"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Bookmarks
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-gradient-success">
<span class="info-box-icon">
<i class="far fa-thumbs-up"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Likes
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-gradient-warning">
<span class="info-box-icon">
<i class="far fa-calendar-alt"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Events
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
<div class="col-md-3 col-sm-6 col-12">
<div class="info-box bg-gradient-danger">
<span class="info-box-icon">
<i class="fas fa-comments"></i>
</span>
<div class="info-box-content">
<span class="info-box-text">
Comments
</span>
<span class="info-box-number">
41,410
</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<!-- Small Box (Stat card) -->
<h5 class="mb-2 mt-4">
Small Box
</h5>
<div class="row">
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>
New Orders
</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-success">
<div class="inner">
<h3>
53
<sup style="font-size: 20px">
%
</sup>
</h3>
<p>
Bounce Rate
</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-warning">
<div class="inner">
<h3>44</h3>
<p>
User Registrations
</p>
</div>
<div class="icon">
<i class="fas fa-user-plus"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-danger">
<div class="inner">
<h3>65</h3>
<p>
Unique Visitors
</p>
</div>
<div class="icon">
<i class="fas fa-chart-pie"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- Small Box (Stat card) -->
<div class="row">
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-info">
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fas fa-3x fa-sync-alt"></i>
</div>
<!-- end loading -->
<div class="inner">
<h3>150</h3>
<p>
New Orders
</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-success">
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay dark">
<i class="fas fa-3x fa-sync-alt"></i>
</div>
<!-- end loading -->
<div class="inner">
<h3>
53
<sup style="font-size: 20px">
%
</sup>
</h3>
<p>
Bounce Rate
</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">
More info
<i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h4 class="mb-2 mt-4">
Cards
</h4>
<h5 class="mb-2">
Abilities
</h5>
<div class="row">
<div class="col-md-3">
<div class="card card-primary collapsed-card">
<div class="card-header">
<h3 class="card-title">
Expandable
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">
Collapsable
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">
Removable
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">
Maximizable
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="maximize">
<i class="fas fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">
Card Refresh
</h3>
<div class="card-tools">
<button type="button"
class="btn btn-tool"
data-card-widget="card-refresh"
data-source="widgets.html"
data-source-selector="#card-refresh-content">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<div class="d-none" id="card-refresh-content">
The body of the card after card refresh
</div>
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">
All together
</h3>
<div class="card-tools">
<button type="button"
class="btn btn-tool"
data-card-widget="card-refresh"
data-source="widgets.html"
data-source-selector="#card-refresh-content"
data-load-on-init="false">
<i class="fas fa-sync-alt"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="maximize">
<i class="fas fa-expand"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">
Loading state
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fas fa-2x fa-sync-alt"></i>
</div>
<!-- end loading -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">
Loading state (dark)
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt"></i>
</div>
<!-- end loading -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">
Custom Shadows Variations
<small>
<i>
Using Bootstrap's Shadow Utility
</i>
</small>
</h5>
<div class="row">
<div class="col-md-3">
<div class="card card-primary shadow-none">
<div class="card-header">
<h3 class="card-title">
Shadow - None
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-success shadow-sm">
<div class="card-header">
<h3 class="card-title">
Shadow - Small
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-warning shadow">
<div class="card-header">
<h3 class="card-title">
Shadow - Regular
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-danger shadow-lg">
<div class="card-header">
<h3 class="card-title">
Shadow - Large
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="maximize">
<i class="fas fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">
Colors Variations
</h5>
<div class="row">
<div class="col-md-3">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">
Primary
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">
Success
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">
Warning
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">
Danger
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">
Primary Outline
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-success">
<div class="card-header">
<h3 class="card-title">
Success Outline
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-warning">
<div class="card-header">
<h3 class="card-title">
Warning Outline
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-danger">
<div class="card-header">
<h3 class="card-title">
Danger Outline
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3">
<div class="card bg-primary">
<div class="card-header">
<h3 class="card-title">
Primary
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-success">
<div class="card-header">
<h3 class="card-title">
Success
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-warning">
<div class="card-header">
<h3 class="card-title">
Warning
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-danger">
<div class="card-header">
<h3 class="card-title">
Danger
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3">
<div class="card bg-gradient-primary">
<div class="card-header">
<h3 class="card-title">
Primary Gradient
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-gradient-success">
<div class="card-header">
<h3 class="card-title">
Success Gradient
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-gradient-warning">
<div class="card-header">
<h3 class="card-title">
Warning Gradient
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card bg-gradient-danger">
<div class="card-header">
<h3 class="card-title">
Danger Gradient
</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<!-- Direct Chat -->
<h4 class="mt-4 mb-2">
Direct Chat
</h4>
<div class="row">
<div class="col-md-3">
<!-- DIRECT CHAT PRIMARY -->
<div class="card card-prirary cardutline direct-chat direct-chat-primary">
<div class="card-header">
<h3 class="card-title">
Direct Chat
</h3>
<div class="card-tools">
<span title="3 New Messages" class="badge bg-primary">
3
</span>
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-primary">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT SUCCESS -->
<div class="card card-sucress cardutline direct-chat direct-chat-success">
<div class="card-header">
<h3 class="card-title">
Direct Chat
</h3>
<div class="card-tools">
<span title="3 New Messages" class="badge bg-success">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit" class="btn btn-success">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT WARNING -->
<div class="card card-warning direct-chat direct-chat-warning">
<div class="card-header">
<h3 class="card-title">
Direct Chat
</h3>
<div class="card-tools">
<span title="3 New Messages" class="badge bg-danger">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-warning">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT DANGER -->
<div class="card card-danger direct-chat direct-chat-danger">
<div class="card-header">
<h3 class="card-title">
Direct Chat
</h3>
<div class="card-tools">
<span title="3 New Messages" class="badge">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#" method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-danger">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">
Custom Shadows Variations
<small>
<i>
Using Bootstrap's Shadow Utility
</i>
</small>
</h5>
<div class="row">
<div class="col-md-3">
<!-- DIRECT CHAT PRIMARY -->
<div class="card card-prirary cardutline direct-chat direct-chat-primary shadow-none">
<div class="card-header">
<h3 class="card-title">
Shadow - None
</h3>
<div class="card-tools">
<span title="3 New Messages"
class="badge bg-primary">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#"
method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-primary">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT SUCCESS -->
<div class="card card-sucress cardutline direct-chat direct-chat-success shadow-sm">
<div class="card-header">
<h3 class="card-title">
Shadow - Small
</h3>
<div class="card-tools">
<span title="3 New Messages"
class="badge bg-success">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#"
method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-success">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT WARNING -->
<div class="card card-warning direct-chat direct-chat-warning shadow">
<div class="card-header">
<h3 class="card-title">
Shadow - Regular
</h3>
<div class="card-tools">
<span title="3 New Messages"
class="badge bg-danger">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#"
method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-warning">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
<div class="col-md-3">
<!-- DIRECT CHAT DANGER -->
<div class="card card-danger direct-chat direct-chat-danger shadow-lg">
<div class="card-header">
<h3 class="card-title">
Shadow - Large
</h3>
<div class="card-tools">
<span title="3 New Messages"
class="badge">
3
</span>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-left">
Alexander Pierce
</span>
<span class="direct-chat-timestamp float-right">
23 Jan 2:00 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user1-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-infos clearfix">
<span class="direct-chat-name float-right">
Sarah Bullock
</span>
<span class="direct-chat-timestamp float-left">
23 Jan 2:05 pm
</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img"
src="/static/assets/img/user3-128x128.jpg"
alt="Message User Image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date float-right">
2/28/2015
</small>
</span>
<span class="contacts-list-msg">
How have you been? I was...
</span>
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form action="#"
method="post">
<div class="input-group">
<input type="text"
name="message"
placeholder="Type Message ..."
class="form-control">
<span class="input-group-append">
<button type="submit"
class="btn btn-danger">
Send
</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<!--/.direct-chat -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<h3 class="mt-4 mb-4">
Social Widgets
</h3>
<div class="row">
<div class="col-md-4">
<!-- Widget: user widget style 2 -->
<div class="card card-widget widget-user-2">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-warning">
<div class="widget-user-image">
<img class="img-circle elevation-2"
src="/static/assets/img/user7-128x128.jpg"
alt="User Avatar">
</div>
<!-- /.widget-user-image -->
<h3 class="widget-user-username">
Nadia Carmichael
</h3>
<h5 class="widget-user-desc">
Lead Developer
</h5>
</div>
<div class="card-footer p-0">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#"
class="nav-link">
Projects
<span class="float-right badge bg-primary">
31
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Tasks
<span class="float-right badge bg-info">
5
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Completed Projects
<span class="float-right badge bg-success">
12
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Followers
<span class="float-right badge bg-danger">
842
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
<div class="col-md-4">
<!-- Widget: user widget style 1 -->
<div class="card card-widget widget-user">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-info">
<h3 class="widget-user-username">
Alexander Pierce
</h3>
<h5 class="widget-user-desc">
Founder & CEO
</h5>
</div>
<div class="widget-user-image">
<img class="img-circle elevation-2"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
3,200
</h5>
<span class="description-text">
SALES
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
13,000
</h5>
<span class="description-text">
FOLLOWERS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">
35
</h5>
<span class="description-text">
PRODUCTS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
<div class="col-md-4">
<!-- Widget: user widget style 1 -->
<div class="card card-widget widget-user">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header text-white"
style="background: url('/static/assets/img/photo1.png') center center;">
<h3 class="widget-user-username text-right">
Elizabeth Pierce
</h3>
<h5 class="widget-user-desc text-right">
Web Designer
</h5>
</div>
<div class="widget-user-image">
<img class="img-circle"
src="/static/assets/img/user3-128x128.jpg"
alt="User Avatar">
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
3,200
</h5>
<span class="description-text">
SALES
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
13,000
</h5>
<span class="description-text">
FOLLOWERS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">
35
</h5>
<span class="description-text">
PRODUCTS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-6">
<!-- Box Comment -->
<div class="card card-widget">
<div class="card-header">
<div class="user-block">
<img class="img-circle"
src="/static/assets/img/user1-128x128.jpg"
alt="User Image">
<span class="username">
<a href="#">
Jonathan Burke Jr.
</a>
</span>
<span class="description">
Shared publicly - 7:30 PM Today
</span>
</div>
<!-- /.user-block -->
<div class="card-tools">
<button type="button"
class="btn btn-tool"
title="Mark as read">
<i class="far fa-circle"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
<img class="img-fluid pad"
src="/static/assets/img/photo2.png"
alt="Photo">
<p>
I took this photo this morning. What do you guys think?
</p>
<button type="button"
class="btn btn-default btn-sm">
<i class="fas fa-share"></i>
Share
</button>
<button type="button"
class="btn btn-default btn-sm">
<i class="far fa-thumbs-up"></i>
Like
</button>
<span class="float-right text-muted">
127 likes - 3 comments
</span>
</div>
<!-- /.card-body -->
<div class="card-footer card-comments">
<div class="card-comment">
<!-- User image -->
<img class="img-circle img-sm"
src="/static/assets/img/user3-128x128.jpg"
alt="User Image">
<div class="comment-text">
<span class="username">
Maria Gonzales
<span class="text-muted float-right">
8:03 PM Today
</span>
</span>
<!-- /.username -->
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text -->
</div>
<!-- /.card-comment -->
<div class="card-comment">
<!-- User image -->
<img class="img-circle img-sm"
src="/static/assets/img/user4-128x128.jpg"
alt="User Image">
<div class="comment-text">
<span class="username">
Luna Stark
<span class="text-muted float-right">
8:03 PM Today
</span>
</span>
<!-- /.username -->
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text -->
</div>
<!-- /.card-comment -->
</div>
<!-- /.card-footer -->
<div class="card-footer">
<form action="#"
method="post">
<img class="img-fluid img-circle img-sm"
src="/static/assets/img/user4-128x128.jpg"
alt="Alt Text">
<!-- .img-push is used to add margin to elements next to floating images -->
<div class="img-push">
<input type="text"
class="form-control form-control-sm"
placeholder="Press enter to post comment">
</div>
</form>
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-6">
<!-- Box Comment -->
<div class="card card-widget">
<div class="card-header">
<div class="user-block">
<img class="img-circle"
src="/static/assets/img/user1-128x128.jpg"
alt="User Image">
<span class="username">
<a href="#">
Jonathan Burke Jr.
</a>
</span>
<span class="description">
Shared publicly - 7:30 PM Today
</span>
</div>
<!-- /.user-block -->
<div class="card-tools">
<button type="button"
class="btn btn-tool"
title="Mark as read">
<i class="far fa-circle"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button"
class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- post text -->
<p>
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at
</p>
<p>
the coast of the Semantics, a large language ocean.
A small river named Duden flows by their place and supplies
it with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into
your mouth.
</p>
<!-- Attachment -->
<div class="attachment-block clearfix">
<img class="attachment-img"
src="/static/assets/img/photo1.png"
alt="Attachment Image">
<div class="attachment-pushed">
<h4 class="attachment-heading">
<a href="https://www.lipsum.com/">
Lorem ipsum text generator
</a>
</h4>
<div class="attachment-text">
Description about the attachment can be placed here.
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
<a href="#">
more
</a>
</div>
<!-- /.attachment-text -->
</div>
<!-- /.attachment-pushed -->
</div>
<!-- /.attachment-block -->
<!-- Social sharing buttons -->
<button type="button"
class="btn btn-default btn-sm">
<i class="fas fa-share"></i>
Share
</button>
<button type="button"
class="btn btn-default btn-sm">
<i class="far fa-thumbs-up"></i>
Like
</button>
<span class="float-right text-muted">
45 likes - 2 comments
</span>
</div>
<!-- /.card-body -->
<div class="card-footer card-comments">
<div class="card-comment">
<!-- User image -->
<img class="img-circle img-sm"
src="/static/assets/img/user3-128x128.jpg"
alt="User Image">
<div class="comment-text">
<span class="username">
Maria Gonzales
<span class="text-muted float-right">
8:03 PM Today
</span>
</span>
<!-- /.username -->
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text -->
</div>
<!-- /.card-comment -->
<div class="card-comment">
<!-- User image -->
<img class="img-circle img-sm"
src="/static/assets/img/user5-128x128.jpg"
alt="User Image">
<div class="comment-text">
<span class="username">
Nora Havisham
<span class="text-muted float-right">
8:03 PM Today
</span>
</span>
<!-- /.username -->
The point of using Lorem Ipsum is that it hrs a morer-less
normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English.
</div>
<!-- /.comment-text -->
</div>
<!-- /.card-comment -->
</div>
<!-- /.card-footer -->
<div class="card-footer">
<form action="#"
method="post">
<img class="img-fluid img-circle img-sm"
src="/static/assets/img/user4-128x128.jpg"
alt="Alt Text">
<!-- .img-push is used to add margin to elements next to floating images -->
<div class="img-push">
<input type="text"
class="form-control form-control-sm"
placeholder="Press enter to post comment">
</div>
</form>
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- =========================================================== -->
<h5 class="mb-2">
Custom Shadows Variations
<small>
<i>
Using Bootstrap's Shadow Utility
</i>
</small>
</h5>
<div class="row">
<div class="col-md-4">
<!-- Widget: user widget style 2 -->
<div class="card card-widget widget-user-2 shadow-sm">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-warning">
<div class="widget-user-image">
<img class="img-circle elevation-2"
src="/static/assets/img/user7-128x128.jpg"
alt="User Avatar">
</div>
<!-- /.widget-user-image -->
<h3 class="widget-user-username">
Nadia Carmichael
</h3>
<h5 class="widget-user-desc">
Lead Developer
</h5>
</div>
<div class="card-footer p-0">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#"
class="nav-link">
Projects
<span class="float-right badge bg-primary">
31
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Tasks
<span class="float-right badge bg-info">
5
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Completed Projects
<span class="float-right badge bg-success">
12
</span>
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link">
Followers
<span class="float-right badge bg-danger">
842
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
<div class="col-md-4">
<!-- Widget: user widget style 1 -->
<div class="card card-widget widget-user shadow">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-info">
<h3 class="widget-user-username">
Alexander Pierce
</h3>
<h5 class="widget-user-desc">
Founder & CEO
</h5>
</div>
<div class="widget-user-image">
<img class="img-circle elevation-2"
src="/static/assets/img/user1-128x128.jpg"
alt="User Avatar">
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
3,200
</h5>
<span class="description-text">
SALES
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
13,000
</h5>
<span class="description-text">
FOLLOWERS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">
35
</h5>
<span class="description-text">
PRODUCTS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
<div class="col-md-4">
<!-- Widget: user widget style 1 -->
<div class="card card-widget widget-user shadow-lg">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header text-white"
style="background: url('/static/assets/img/photo1.png') center center;">
<h3 class="widget-user-username text-right">
Elizabeth Pierce
</h3>
<h5 class="widget-user-desc text-right">
Web Designer
</h5>
</div>
<div class="widget-user-image">
<img class="img-circle"
src="/static/assets/img/user3-128x128.jpg"
alt="User Avatar">
</div>
<div class="card-footer">
<div class="row">
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
3,200
</h5>
<span class="description-text">
SALES
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4 border-right">
<div class="description-block">
<h5 class="description-header">
13,000
</h5>
<span class="description-text">
FOLLOWERS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-4">
<div class="description-block">
<h5 class="description-header">
35
</h5>
<span class="description-text">
PRODUCTS
</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
<!-- /.widget-user -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
<a id="back-to-top"
href="#"
class="btn btn-primary back-to-top"
role="button"
aria-label="Scroll to top">
<i class="fas fa-chevron-up"></i>
</a>
</div>
<!-- /.content-wrapper -->
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
{% endblock javascripts %}
Reference in a new issue View git blame Copy permalink