Cards

<div class="card">
    <img class="card-img-top" src="../../assets/img/theme/light/placeholder.png" alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card shadow-none">
    <div class="p-3 d-flex">
        <div>
            <div class="icon icon-shape rounded-circle bg-success text-white mr-4">
                <i data-feather="check"></i>
            </div>
        </div>
        <div>
            <span class="h6">300+ components</span>
            <p class="text-sm text-muted mb-0">
                Built to be customized.
            </p>
        </div>
    </div>
</div>

<div class="card hover-translate-y-n10 hover-shadow-lg">
    <div class="card-body">
        <div class="pb-4">
            <img alt="Image placeholder" src="../../assets/img/svg/icons/Code.svg" class="svg-inject" style="height: 50px; width: 50px;">

        </div>
        <div class="pt-2 pb-3">
            <h5>Modular</h5>
            <p class="text-muted mb-0">
                All components are built to be used in any combination.
            </p>
        </div>
    </div>
</div>

<div class="card hover-translate-y-n10 hover-shadow-lg">
    <div class="card-body">
        <div class="pb-4">
            <div class="icon bg-dark text-white rounded-circle icon-shape shadow">
                <i data-feather="droplet"></i>
            </div>
        </div>
        <div class="pt-2 pb-3">
            <h5>Modular</h5>
            <p class="text-muted mb-0">
                All components are built to be used in any combination.
            </p>
        </div>
    </div>
</div>

<div class="card mb-5 hover-translate-y-n10">
    <div class="d-flex p-5">
        <div>
            <span class="badge badge-warning badge-pill">New</span>
        </div>
        <div class="pl-4">
            <h5>Listen to the nature</h5>
            <p>
                Design made simple with a clean and smart HTML markup.
            </p>
        </div>
    </div>
    <div>
        <img src="../../assets/img/svg/illustrations/illustration-5.svg" class="img-fluid img-center" style="height: 200px;" />
    </div>
</div>

<div class="card mb-0" style="max-width: 28rem;">
    <div class="p-5">
        <div>
    <div class="mb-5 text-center">
        <h6 class="h3 mb-1">Login</h6><p class="text-muted mb-0">Sign in to your account to continue.</p></div>
    <span class="clearfix"></span><form>
    <div class="form-group">
        <label class="form-control-label">Email address</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="user"></i></span>
            </div>
            <input type="email" class="form-control" id="input-email" placeholder="name@example.com">
        </div>
    </div>
    <div class="form-group mb-0">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <label class="form-control-label">Password</label>
            </div>
            <div class="mb-2">
                <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
            </div>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="key"></i></span>
            </div>
            <input type="password" class="form-control" id="input-password" placeholder="Password">
        </div>
    </div>
    
    <div class="mt-4">
        <button type="button" class="btn btn-block btn-primary">Sign in</button></div>
</form>

    <div class="py-3 text-center">
        <span class="text-xs text-uppercase">or</span>
    </div>
    <!-- Alternative login -->
    <div class="row">
        <div class="col-sm-6">
            <a href="#" class="btn btn-block btn-neutral btn-icon mb-3 mb-sm-0">
                <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/github.svg" alt="Image placeholder"></span>
                <span class="btn-inner--text">Github</span>
            </a>
        </div>
        <div class="col-sm-6">
            <a href="#" class="btn btn-block btn-neutral btn-icon">
                <span class="btn-inner--icon"><img src="../../assets/img/icons/brands/google.svg" alt="Image placeholder"></span>
                <span class="btn-inner--text">Google</span>
            </a>
        </div>
    </div>
    
    <!-- Links -->
    <div class="mt-4 text-center"><small>Not registered?</small>
        <a href="card.html" class="small font-weight-bold">Create account</a></div>
</div>

    </div>
</div>

<div class="card shadow-lg border-0" style="max-width: 100%;">
    <div class="card-body px-5 py-5 text-center text-md-left">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="mb-2">Do you gave any questions about Quick.</h5>
                <p class="mb-0">
                    Our support team is available for you anytime.
                </p>
            </div>
            <div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
                <a href="#" class="btn btn-warning btn-icon rounded-pill">
                    <span class="btn-inner--icon">
                        <i data-feather="phone"></i>
                    </span>
                    <span class="btn-inner--text">Contact us</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="card bg-section-dark border-0 rounded-lg" style="max-width: 100%;">
    <div class="card-body px-5">
        <div class="row">
            <div class="col-md-6">
                <div class="d-flex align-items-center align-items-center mb-3">
                    <div>
                        <div class="icon icon-sm icon-shape bg-warning text-white rounded-circle mr-3">
                            <i data-feather="airplay"></i>
                        </div>
                    </div>
                    <span class="h6 text-white mb-0">Quick</span>
                </div>
                <h5 class="text-white pt-4">Infinite solutions with only one template.</h5>
                <p class="text-white opacity-8">
                    With an intuitive markup, powerful and lightning fast build tools, Quick has everything you need to turn your ideas into incredible products.
                </p>
            </div>
            <div class="col-12 col-md-6 mt-4 mt-md-0 pr-4 pb-3 d-flex align-items-end justify-content-md-end">
                <a href="#" class="btn btn-white btn-icon">
                    <span class="btn-inner--text">Learn more</span>
                    <span class="btn-inner--icon">
                        <i data-feather="arrow-right" class="text-warning"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-lg rounded-lg floating-sm">
    <div class="card-body">
        <h5 class="font-weight-bold text-center mb-0">500k</h5>
        <p class="text-center mb-0">
            Happy customers
        </p>
    </div>
</div>

<div class="card shadow-lg rounded-lg border-0" style="width: 10rem;">
    <div class="p-4 text-center text-sm-left">
        <h5 class="mb-0">
            <span class="counter" data-from="0" data-to="10" data-speed="3000" data-refresh-interval="200"></span>
            <span class="counter-extra">k</span>
        </h5>
        <p class="text-muted mb-0">
            Customers
        </p>
    </div>
</div>

<div class="row" style="width: 30rem;">
    <div class="col-6">
        <div class="card bg-warning shadow-lg rounded-lg border-0">
            <div class="px-4 py-5 text-center">
                <div class="h3 text-white">
                    <span class="counter" data-from="0" data-to="10" data-speed="500" data-refresh-interval="10"></span>
                    <span class="counter-extra">%</span>
                </div>
                <h6 class="text-white">Customers</h6>
            </div>
        </div>
        <div class="card shadow-lg rounded-lg border-0">
            <div class="px-4 py-5 text-center">
                <div class="h3">
                    <span class="counter" data-from="0" data-to="50" data-speed="1000" data-refresh-interval="10"></span>
                    <span class="counter-extra">k</span>
                </div>
                <h6 class="text-warning">Download</h6>
            </div>
        </div>
    </div>
    <div class="col-6 pt-lg-6">
        <div class="card shadow-lg rounded-lg border-0">
            <div class="px-4 py-5 text-center">
                <div class="h3">
                    <span class="counter" data-from="0" data-to="98" data-speed="500" data-refresh-interval="10"></span>
                    <span class="counter-extra">%</span>
                </div>
                <h6 class="text-primary">Happy clients</h6>
            </div>
        </div>
        <div class="card bg-primary shadow-lg rounded-lg border-0">
            <div class="px-4 py-5 text-center">
                <div class="h3 text-white">
                    <span class="counter" data-from="0" data-to="5" data-speed="500" data-refresh-interval="10"></span>
                    <span class="counter-extra">m</span>
                </div>
                <h6 class="text-white">Page views</h6>
            </div>
        </div>
    </div>
</div>

<div class="card hover-shadow-lg hover-translate-y-n3">
    <div class="card-body py-5 text-center h-100">
        <div class="img-fluid mb-4 w-50 mx-auto">
            <img src="../../assets/img/clients/svg/airbnb.svg" />
        </div>
        <!-- Rating -->
        <span class="static-rating d-block">
            <i data-feather="star" class="star voted"></i>
            <i data-feather="star" class="star voted"></i>
            <i data-feather="star" class="star voted"></i>
            <i data-feather="star" class="star voted"></i>
            <i data-feather="star" class="star"></i>
        </span>
        <!-- Info -->
        <h5 class="h6 mt-4 mb-1">4.95 out of 5 stars</h5>
        <p class="text-muted text-sm mb-0">
            from 23 reviews
        </p>
    </div>
</div>

<div class="card card-overlay card-hover-overlay hover-shadow-lg hover-translate-y-n10">
    <figure class="figure">
        <img alt="Image placeholder" src="../../assets/img/theme/light/img-v-3.jpg" class="img-fluid">
    </figure>
    <div class="card-img-overlay d-flex flex-column align-items-center p-0">
        <div class="overlay-text w-75 mt-auto p-4">
            <p class="lead">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            <a href="#!" class="link link-underline-white font-weight-bold">Marketing</a>
        </div>
        <div class="overlay-actions w-100 card-footer mt-auto d-flex justify-content-between align-items-center">
            <div>
                <a href="#!" class="h6 mb-0">Living dangerously</a>
            </div>
            <div>
                <div class="actions">
                    <a href="#!" class="action-item mr-3"><i data-feather="paperclip"></i></a>
                    <a href="#!" class="action-item mr-3"><i data-feather="eye"></i></a>
                    <a href="#!" class="action-item"><i data-feather="heart"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-pricing text-center px-3 shadow hover-scale-110">
    <div class="card-header py-5 border-0 delimiter-bottom">
        <div class="h1 text-center mb-0">$<span class="price font-weight-bolder">49</span></div>
        <span class="h6 text-muted">Standard License</span>
    </div>
    <div class="card-body">
        <ul class="list-unstyled text-sm mb-4">
            <li>1 end product</li>
            <li>Use for personal or a client</li>
            <li>Use in a free end product</li>
            <li>6 months technical support</li>
        </ul>
        <a href="#" class="btn btn-sm btn-warning hover-translate-y-n3 hover-shadow-lg mb-3">Purchase now</a>
    </div>
</div>

<div class="card card-pricing bg-primary text-center px-3 shadow hover-scale-110">
    <div class="card-header py-5 border-0 delimiter-bottom">
        <div class="h1 text-white text-center mb-0">$<span class="price font-weight-bolder">590</span></div>
        <span class="h6 text-white">Extended License</span>
    </div>
    <div class="card-body">
        <ul class="list-unstyled text-white text-sm opacity-8 mb-4">
            <li>1 end product</li>
            <li>Use for personal or a client</li>
            <li>Use in a free end product</li>
            <li>Use in an end product that is <strong class="text-success text-underline--dashed">sold</strong></li>
            <li>6 months technical support</li>
        </ul>
        <a href="#" class="btn btn-sm btn-white hover-translate-y-n3 hover-shadow-lg mb-3">Purchase now</a>
    </div>
</div>

<div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden">
    <div class="position-relative overflow-hidden">
        <a href="#" class="d-block">
            <img alt="Image placeholder" src="../../assets/img/theme/light/blog-2-800x600.jpg" class="card-img-top">
        </a>
    </div>
    <div class="card-body py-4">
        <small class="d-block text-sm mb-2">25 April, 2020</small>
        <a href="#" class="h5 stretched-link lh-150">How to find the right design for your specific product</a>
        <p class="mt-3 mb-0 lh-170">No matter what he does, every person on earth plays a central role in the history.</p>
    </div>
    <div class="card-footer border-0 delimiter-top">
        <div class="row align-items-center">
            <div class="col-auto">
                <span class="avatar avatar-sm bg-primary rounded-circle">JD</span>
                <span class="text-sm mb-0 avatar-content">David Wally</span>
            </div>
            <div class="col text-right text-right">
                <div class="actions">
                    <a href="#" class="action-item"><i data-feather="heart" class="mr-1"></i> 50</a>
                    <a href="#" class="action-item"><i data-feather="eye" class=" mr-1"></i> 250</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-6 mb-xl-0 shadow-lg bg-cover bg-size--cover" style="background-image: url(../../assets/img/theme/light/img-v-3.jpg);">
    <!-- Mask -->
    <span class="mask bg-dark opacity-5"></span>

    <!-- Card body -->
    <div class="card-body pt-10 mt-auto position-relative">

        <!-- Title -->
        <a href="#" class="d-block h5 mb-3 text-white stretched-link">Learn how to use Boostrap like a Pro</a>

        <!-- Text -->
        <p class="mb-0 text-white">
            Some quick example text tod make up the bulk of the card's content.
        </p>
    </div>

    <!-- Meta -->
    <div class="card-body position-relative delimiter-top">
        <div class="d-flex align-items-center">
            <div>
                <a href="#" class="avatar avatar-sm rounded-circle d-inline-block">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg">
                </a>
            </div>
            <div class="pl-3">
                <a href="#" class="h6 stretched-link text-white text-sm">Betty Mavis</a>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <!-- Card header -->
    <div class="card-header pb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <span class="h6"></span>
        </div>
        <div class="text-right">
            <div class="actions mr-n2">
                <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <!-- Card body -->
    <div class="card-body pt-0">

        <!-- App logo + status -->
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <div class="icon icon-sm">
                    <img alt="Image placeholder" src="../../assets/img/svg/social/dribbble.svg" class="svg-inject" style="width: 50px; height: 50px;">

                </div>
            </div>
            <div class="text-right">
                
                <div class="d-flex align-items-center">
                    <div>
                        <span class="badge badge-xs badge-circle rounded-circle badge-success"><i data-feather="check"></i></span>
                    </div>
                    <div class="pl-2">
                        <small class="h6 text-xs text-success">Installed</small>
                    </div>
                </div>
                
            </div>
        </div>

        <!-- App title -->
        <div class="mt-3">
            <h6 class="mb-0">Dribbble</h6>
            <p class="mb-0 text-sm text-muted">
                Your subtitle comes here
            </p>
        </div>
    </div>
</div>

<div class="card mb-3">
    <!-- Card header -->
    <div class="card-header pb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <span class="h6"></span>
        </div>
        <div class="text-right">
            <div class="actions mr-n2">
                <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <!-- Card body -->
    <div class="card-body pt-0">

        <!-- App logo + status -->
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <div class="icon icon-sm">
                    <img alt="Image placeholder" src="../../assets/img/svg/social/github.svg" class="svg-inject" style="width: 50px; height: 50px;">

                </div>
            </div>
            <div class="text-right">
                
                <button type="button" class="btn btn-xs btn-neutral btn-icon">
                    <span class="btn-inner--icon"><i data-feather="plus"></i></span>
                    <span class="btn-inner--text ml-1">Install</span>
                </button>
                
            </div>
        </div>

        <!-- App title -->
        <div class="mt-3">
            <h6 class="mb-0">Github</h6>
            <p class="mb-0 text-sm text-muted">
                Your subtitle comes here
            </p>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body text-center">
        <div class="mb-3">
            <div class="icon icon-shape icon-md bg-primary shadow-primary text-white">
                
<i class="fas fa-wallet"></i>


            </div>
        </div>

        <!-- Title -->
        <h5 class="h3 font-weight-bolder mb-1">$25,370.00</h5>

        <!-- Subtitle -->
        <span class="d-block text-sm text-muted font-weight-bold">
            Global Budget
            
            <i data-feather="chevron-up" class="text-success"></i>
            
        </span>
    </div>
</div>

<div class="card card-fluid">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <span class="h6">Performance</span>
            </div>
            <div class="col-auto ml-auto text-right">
                <span class="h6 text-sm text-muted">3,567.00</span>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="">
            <div class="progress-circle progress-lg mx-auto" id="progress-performance-1" data-progress="72" data-trailwidth="4" data-text="72%" data-textclass="h3" data-shape="circle" data-color="primary"></div>
        </div>

        <hr class="my-4" />

        <!-- Trend -->
        <div class="d-flex align-items-center mb-2">
            <div>
                <span class="icon icon-shape icon-sm bg-soft-success text-success">
<i class="fas fa-caret-up"></i>

</span>
            </div>
            <div class="pl-2">
                <span class="text-success text-sm font-weight-bold">+23%</span>
            </div>
        </div>

        <!-- Text -->
        <p class="mb-0 text-sm text-muted">
            You have a 23% growth in comparison with last month.
        </p>
    </div>
</div>

<div class="card">
    <div class="card-body"><div class="icon">

            <!-- SVG image -->
            <img alt="Image placeholder" src="../../assets/img/svg/icons/Checkout.svg" class="svg-inject" style="width: 50px; height: 50px;">


        </div>

        <!-- Title -->
        <a href="#" class="d-block h5 mt-3">Checkout</a>

        <!-- Text -->
        <p class="text-sm text-muted">
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>

        <!-- Progress -->
        <div class="d-flex align-items-center">
            <div class="w-80">
                <div class="progress progress-sm shadow-none">
                    <div class="progress-bar bg-" role="progressbar" style="width: %" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <div class="col px-0 text-right">
                <a href="#" class="h6 text-sm text-">%</a>
            </div>
        </div>

        
        <!-- Info -->
        <div class="row align-items-center mt-4">
            <div class="col-6">
                <a href="#" class="btn btn-sm btn-primary"> Tasks</a>
            </div>
            <div class="col-6 text-right">
                <span class="h6 font-weight-bolder text-warning">$</span>
            </div>
        </div>
        
    </div>
</div>

<div class="card">
    <div class="card-header">
        <span class="h6">Connections</span>
    </div>
    <div class="card-body py-3">
        <!-- Avatars -->
        <div class="row mx-n1">
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-4.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-5.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-6.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-7.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar rounded-circle hover-scale-105">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-8.jpg" class="">

</a>
            </div>
            <div class="col-auto text-center my-1 px-1">
                <a href="#" class="avatar bg-primary text-white rounded-circle border border-lg border-soft-primary hover-scale-105">30</a>
            </div>
        </div>
    </div>
</div>

<div class="card mb-0 card-fluid">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <span class="h6">Reminder</span>
            </div>
            <div class="text-right">
                <span class="h6 font-weight-light text-muted">23 May, 2019</span>
            </div>
        </div>
    </div>
    <div class="card-body py-3">
        <div class="d-flex align-items-center">
            <div class="">
                <div class="icon icon-shape bg-warning">
                    <i class="fas fa-calendar-day text-white"></i>
                </div>
            </div>
            <div class="pl-3">
                <h6 class="text-warning mb-0">Chat with Dave</h6>
            </div>
            <div class="ml-auto text-right">
                <a href="#" class="text-warning text-sm text-underline--dashed">See all events</a>
            </div>
        </div>
    </div>
</div>

<div class="card mb-0 h-100 bg-primary">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <span class="h6 text-white">Overall performance</span>
            </div>
            <div class="text-right">
                <div class="actions actions-dark">
                    <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                    <div class="dropdown action-item" data-toggle="dropdown">
                        <a href="#" class="action-item"><i data-feather="more-vertical"></i></a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="#" class="dropdown-item">Refresh</a>
                            <a href="#" class="dropdown-item">Manage Widgets</a>
                            <a href="#" class="dropdown-item">Settings</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body px-5">
        <div class="row align-items-center">
            <div class="col-sm-6">
                <div class="progress-circle progress-lg" id="progress-performance-1" data-progress="72" data-trailwidth="4" data-text="72%" data-textclass="h3" data-color="warning"></div>
            </div>
            <div class="col-sm-6">
                <div class="d-flex align-items-center mb-2">
                    <div>
                        <div class="badge badge-circle rounded badge-secondary">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                    <div class="pl-2">
                        <span class="text-white text-sm opacity-8">Done</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-2">
                    <div>
                        <div class="badge badge-circle rounded badge-warning">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                    <div class="pl-2">
                        <span class="text-white text-sm opacity-8">In progress</span>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-2">
                    <div>
                        <div class="badge badge-circle rounded badge-danger">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                    <div class="pl-2">
                        <span class="text-white text-sm opacity-8">Pending</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center mt-4">
            <div class="">
                <span class="badge badge-sm badge-pill badge-danger mr-1"><i data-feather="arrow-down"></i> 25%</span>
                <span class="text-nowrap text-white text-sm opacity-8">Since last month</span>
            </div>
            <div class="ml-auto text-right">
                <a href="#" class="text-white text-sm text-underline--dashed">Learn more</a>
            </div>
        </div>
    </div>
</div>

<div class="card">

    <!-- Card header -->
    <div class="card-header pb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <span class="h6">To do</span>
        </div>
        <div class="text-right">
            <div class="actions mr-n2">
                <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <div class="card-body pt-0 position-relative scrollable-y" style="max-height: 325px;">

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Work on website redesign</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">65%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>


        <hr class="my-3" />

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Create landing sections</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">35%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>


        <hr class="my-3" />

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Responsive navigation</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">85%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>


        <hr class="my-3" />

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Vectorial icons</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">25%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>

    </div>
</div>

<div class="card">

    <!-- Card header -->
    <div class="card-header pb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <span class="h6">Done</span>
        </div>
        <div class="text-right">
            <div class="actions mr-n2">
                <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <div class="card-body pt-0 position-relative scrollable-y" style="max-height: 325px;">

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Work on website redesign</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    
    <!-- Images -->
    <div class="">
        <div class="d-flex mx-n1 mb-3 scrollable-x">
            <div class="col-5 px-1">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x800.jpg" class="img-fluid rounded">

            </div>
            <div class="col-5 px-1">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x800.jpg" class="img-fluid rounded">

            </div>
            <div class="col-5 px-1">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x800.jpg" class="img-fluid rounded">

            </div>
        </div>
    </div>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">100%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>


        <hr class="my-3" />

        <!-- Task -->
        <div class="kanban-task">
    <!-- Title -->
    <h6 class="mb-2">Create landing sections</h6>

    <!-- Text -->
    <p class="text-sm text-muted mb-3">
        I need 5 examples of the logo
    </p>

    

    <!-- Surtitle -->
    <span class="surtitle d-block ls-1 mb-n2">Progress</span>

    <!-- Progress -->
    <div class="d-flex align-items-center">
        <div class="w-80">
            <div class="progress progress-sm shadow-none">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col px-0 text-right">
            <a href="#" class="h6 text-sm text-primary">35%</a>
        </div>
    </div>

    <!-- Avatars -->
    <div class="mt-1">
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="">

</a>
        <a href="#" class="avatar avatar-xs rounded-lg">
    <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="">

</a>
        <a href="#modal-connections" data-toggle="modal" class="avatar avatar-xs bg-warning text-white rounded-lg hover-scale-105">3</a>
    </div>
</div>

    </div>
</div>

<div class="card card-fluid">
    <div class="card-header pb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <span class="h6">Recent files</span>
        </div>
        <div class="text-right">
            <div class="actions mr-n2">
                <a href="#" class="action-item"><i data-feather="refresh-ccw"></i></a>
                <div class="dropdown action-item" data-toggle="dropdown">
                    <a href="#" class="action-item"><i data-feather="more-horizontal"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item">Refresh</a>
                        <a href="#" class="dropdown-item">Manage Widgets</a>
                        <a href="#" class="dropdown-item">Settings</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="card-body">
        

        <!-- File -->
        <div class="row align-items-center mb-3 shadow-none">
    <div class="col-auto">
        <div class="icon icon-shape bg-soft-warning text-warning">
            <i class="fas fa-image"></i>
        </div>
    </div>
    <div class="col pl-0">
        <span class="d-block h6 text-sm mb-0">design-principles.pdf</span>
        <p class="mb-0 text-xs">189 KB</p>
    </div>
    <div class="col-auto actions">
        <div class="dropdown" data-toggle="dropdown">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="more-horizontal"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div>
</div>


        
        <hr class="my-3" />
        

        

        <!-- File -->
        <div class="row align-items-center mb-3 shadow-none">
    <div class="col-auto">
        <div class="icon icon-shape bg-soft-primary text-primary">
            <i class="fas fa-image"></i>
        </div>
    </div>
    <div class="col pl-0">
        <span class="d-block h6 text-sm mb-0">website-wireframe.psd</span>
        <p class="mb-0 text-xs">45.9 MB</p>
    </div>
    <div class="col-auto actions">
        <div class="dropdown" data-toggle="dropdown">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="more-horizontal"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div>
</div>


        
        <hr class="my-3" />
        

        

        <!-- File -->
        <div class="row align-items-center mb-3 shadow-none">
    <div class="col-auto">
        <div class="icon icon-shape bg-soft-success text-success">
            <i class="fas fa-file-alt"></i>
        </div>
    </div>
    <div class="col pl-0">
        <span class="d-block h6 text-sm mb-0">product-guidelines.doc</span>
        <p class="mb-0 text-xs">87 KB</p>
    </div>
    <div class="col-auto actions">
        <div class="dropdown" data-toggle="dropdown">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="more-horizontal"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div>
</div>


        
        <hr class="my-3" />
        

        

        <!-- File -->
        <div class="row align-items-center mb-3 shadow-none">
    <div class="col-auto">
        <div class="icon icon-shape bg-soft-danger text-danger">
            <i class="fas fa-video"></i>
        </div>
    </div>
    <div class="col pl-0">
        <span class="d-block h6 text-sm mb-0">banner-video.avi</span>
        <p class="mb-0 text-xs">23 MB</p>
    </div>
    <div class="col-auto actions">
        <div class="dropdown" data-toggle="dropdown">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="more-horizontal"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item">Refresh</a>
                <a href="#" class="dropdown-item">Manage Widgets</a>
                <a href="#" class="dropdown-item">Settings</a>
            </div>
        </div>
    </div>
</div>


        

        
    </div>
</div>