Cards

 <div class="col-12 col-md-8">
    <!-- Card -->
    <div class="card border-light mb-4 animate-up-5">
        <a href="#" class="position-relative">
            <img src="../../assets/img/image-office.jpg" class="card-img-top rounded-xl p-2" alt="themesberg office">
        </a>
        <div class="card-body">
            <a href="#">
                <h4 class="h5">Team Workspace</h4>
            </a>
            <div class="d-flex my-4">
                <i class="star fas fa-star text-warning"></i>
                <i class="star fas fa-star text-warning"></i>
                <i class="star fas fa-star text-warning"></i>
                <i class="star fas fa-star text-warning"></i>
                <i class="star fas fa-star text-warning"></i>
                <span class="badge badge-pill badge-primary ml-2">5.0</span>
            </div>
            <ul class="list-group mb-3">
                <li class="list-group-item small p-0"><span class="fas fa-map-marker-alt mr-2"></span>California, USA</li>
                <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Penny Market Street (15 mins walk)</li>
                <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Museum Street (20 mins walk)</li>
            </ul>
        </div>
        <div class="card-footer bg-soft border-top">
            <div class="d-flex justify-content-between">
                <div class="col pl-0">
                    <span class="text-muted font-small d-block mb-2">Monthly</span>
                    <span class="h5 text-dark font-weight-bold">300$</span>
                </div>
                <div class="col">
                    <span class="text-muted font-small d-block mb-2">People</span>
                    <span class="h5 text-dark font-weight-bold">24</span>
                </div>
                <div class="col pr-0">
                    <span class="text-muted font-small d-block mb-2">Sq.Ft</span>
                    <span class="h5 text-dark font-weight-bold">2000</span>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Card -->
</div>

 <div class="col-12 col-sm-10 col-md-6 col-lg-12">
    <div class="card border-light mb-4 animate-up-5">
        <div class="row no-gutters align-items-center">
            <div class="col-12 col-lg-6 col-xl-5">
                <a href="#">
                    <img src="../../assets/img/private-office.jpg" alt="private office" class="card-img p-2 rounded-xl">
                </a>
            </div>
            <div class="col-12 col-lg-6 col-xl-7">
                <div class="card-body">
                    <a href="#">
                        <h4 class="h5">Collaborative Workspace</h4>
                    </a>
                    <div class="d-flex my-4">
                        <span class="star fas fa-star text-warning"></span>
                        <span class="star fas fa-star text-warning"></span>
                        <span class="star fas fa-star text-warning"></span>
                        <span class="star fas fa-star text-warning"></span>
                        <span class="star fas fa-star text-warning"></span>
                        <span class="badge badge-pill badge-primary ml-2">5.0</span>
                    </div>
                    <ul class="list-group mb-3">
                        <li class="list-group-item small p-0"><span class="fas fa-map-marker-alt mr-2"></span>New York, Manhattan, USA</li>
                        <li class="list-group-item small p-0"><span class="fas fa-bullseye mr-2"></span>Old Street (2 mins walk)</li>
                    </ul>
                    <div class="d-flex justify-content-between">
                        <div class="col pl-0">
                            <span class="text-muted font-small d-block mb-2">Monthly</span>
                            <span class="h5 text-dark font-weight-bold">500$</span>
                        </div>
                        <div class="col">
                            <span class="text-muted font-small d-block mb-2">People</span>
                            <span class="h5 text-dark font-weight-bold">12</span>
                        </div>
                        <div class="col pr-0">
                            <span class="text-muted font-small d-block mb-2">Sq.Ft</span>
                            <span class="h5 text-dark font-weight-bold">1200</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-12 col-lg-6">
<!-- Card -->
<a href="#" class="card img-card fh-400 border-0 outer-bg" data-background-inner="../../assets/img/newyork.jpg">
    <div class="inner-bg overlay-dark"></div>
    <div class="card-img-overlay d-flex align-items-center">
        <div class="card-body text-white p-3">
            <h5 class="text-uppercase text-center">United States</h5>
        </div>
    </div>
</a>
<!-- End of Card -->
</div>

<div class="col-12 col-md-7">
    <div class="card bg-white border-light p-3 rounded">
        <a href="#">
            <img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded" alt="our desk">
        </a>
        <div class="card-body p-0 pt-4">
            <a href="#" class="h4">Google launches Cloud AI Platform Pipelines</a>
            <div class="d-flex align-items-center my-4">
                <img class="avatar avatar-sm rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Neil avatar">
                <h3 class="h6 small ml-2 mb-0">Neil Sims Curran</h3>
            </div>
            <p class="mb-0">Richard Thomas was born in 1990, and at only 29 years old, his trajectory is good. When he ...</p>
        </div>
    </div>
</div>

<div class="col-12 col-md-7 mt-6">
    <div class="card border-light text-center">
        <div class="profile-thumbnail mx-auto mt-n6">
            <img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-circle border-0" alt="Jose Avatar">
        </div>
        <div class="card-body">
            <h2 class="h4 card-title mb-2">Jose Leos</h2>
            <span class="card-subtitle text-gray font-weight-normal">Co-Founder</span>
            <ul class="list-unstyled d-flex justify-content-center mt-3 mb-0">
                <li>
                    <a href="#" target="_blank" aria-label="facebook social link" class="icon-facebook mr-3">
                        <span class="fab fa-facebook-f"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="twitter social link" class="icon-twitter mr-3">
                        <span class="fab fa-twitter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="slack social link" class="icon-slack mr-3">
                        <span class="fab fa-slack-hash"></span>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" aria-label="dribbble social link" class="icon-dribbble mr-3">
                        <span class="fab fa-dribbble"></span>
                    </a>
                </li>
            </ul>
            <p class="card-text my-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class="col-12 col-md-7">
    <!-- Pricing Card -->
    <div class="pricing-card">
        <div class="card border-light p-1 p-lg-2 p-xl-4">
            <!-- Header -->
            <header class="card-header border-bottom bg-white text-center">
                <h2 class="h3 font-weight-normal text-gray mb-4">Free</h2>
                <span class="d-block">
                    <span class="display-1 text-primary font-weight-bold">
                        <span class="align-top font-medium">$</span>0
                </span>
                <span class="font-small">/ month</span>
                </span>
            </header>
            <!-- End Header -->
            <!-- Content -->
            <div class="card-body">
                <h3 class="h6 font-weight-normal text-dark mb-4">Get listed in the directory:</h3>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Unlimited photos</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Unlimited videos</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Receive messages</p>
                </div>
                <div class="d-flex">
                    <div class="icon-md icon-secondary lh-180 mr-3">
                        <span class="fas fa-check-circle"></span>
                    </div>
                    <p>Display your contact info</p>
                </div>
                <button type="button" class="btn btn-outline-primary btn-block mt-4"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button>
            </div>
            <!-- End Content -->
        </div>
    </div>
    <!-- End of Pricing Card -->
</div>

<div class="col-12 col-md-6 col-lg-6">
    <!-- Card -->
    <a href="#" class="card text-center shadow-soft border-light animate-up-3">
        <div class="card-body p-5">
            <div class="icon icon-shape icon-shape-secondary rounded-circle mb-4">
                <span class="fas fa-clipboard-list"></span>
            </div>
            <h6 class="text-gray mb-0">Requirements</h6>
        </div>
    </a>
</div>

<div class="col-lg-12 mb-3">
    <a href="#" class="card border-light animate-up-3 shadow-soft p-0 p-lg-4">
        <div class="card-body">
            <h4>Account Settings, Language &amp; Dark Mode</h4>
            <p class="lead text-gray mb-4">How to edit account settings such as email addresss, user name, language and switch to dark mode</p>
            <div class="d-flex align-items-center">
                <div class="avatar-lg">
                    <img class="rounded-circle" src="../../assets/img/team/profile-picture-1.jpg" alt="avatar">
                </div>
                <div class="small text-gray ml-3">
                    <div><span>Updated 2 days ago</span></div>
                    <div>Written by&nbsp;<strong>Richard Thomas</strong></div>
                </div>
            </div>
        </div>
    </a>
</div>

<div class="col-12 col-sm-7 mb-4">
    <div class="card border-light">
        <div class="card-body d-block d-md-flex align-items-center">
        <div class="icon icon-shape icon-md icon-shape-primary rounded-circle mr-3 mb-4 mb-md-0"><span class="fas fa-wallet"></span></div>
        <div>
            <span class="d-block h6 font-weight-normal">
                Global Budget
            </span>
            <h5 class="h3 font-weight-bold mb-1">$25,370.00</h5>
            <div class="small mt-2">
                <span class="fas fa-angle-up text-success"></span>
                <span class="text-success font-weight-bold">18.2%</span> higher vs previous month
            </div>
        </div>
        </div>
    </div>
</div>

<div class="col-12 col-md-7">
    <div class="card border-light">
        <div class="card-body d-flex flex-row align-items-center flex-0 border-bottom">
            <div class="d-block">
                <div class="h6 font-weight-normal text-gray mb-2">New customers</div>
                <h2 class="h3">452</h2>
                <div class="small mt-2">
                    <span class="fas fa-angle-up text-success"></span>
                    <span class="text-success font-weight-bold">18.2%</span>
                </div>
            </div>
            <div class="d-block ml-auto">
                <div class="d-flex align-items-center text-right mb-2">
                    <span class="shape-xs rounded-circle bg-dark mr-2"></span>
                    <span class="font-weight-normal small">Last month</span>
                </div>
                <div class="d-flex align-items-center text-right">
                    <span class="shape-xs rounded-circle bg-tertiary mr-2"></span>
                    <span class="font-weight-normal small">This month</span>
                </div>
            </div>
        </div>
        <div class="card-body p-2">
            <div class="ct-chart-5 ct-golden-section ct-series-e"></div>
        </div>
    </div>
</div>

<div class="card border-light mb-4">
    <div class="row no-gutters align-items-center">
        <div class="col-12 col-lg-6 col-xl-4">
            <a href="single-space.html">
            <img src="../../assets/img/meeting-office.jpg" alt="private office" class="card-img p-2 rounded-xl">
            </a>
        </div>
        <div class="col-12 col-lg-6 col-xl-8">
            <div class="card-body py-lg-0">
            <div class="d-flex no-gutters align-items-center mb-3">
                <div class="col text-left">
                    <ul class="list-group mb-0">
                        <li class="list-group-item small p-0"><span class="fas fa-medal text-tertiary mr-2"></span>Promoted until: 12 June</li>
                    </ul>
                    <div class="modal fade bd-example-modal-lg" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                            <div class="modal-content bg-white px-0">
                                <div class="modal-header">
                                    <h2 class="h5 mb-3">Collaborative Workspace</h2>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="d-flex align-items-center">
                                        <div class="col">
                                            <h2 class="h4">Views</h2>
                                        </div>
                                        <div class="col-3">
                                            <div class="form-group">
                                                <select class="custom-select" id="exampleFormControlSelect2">
                                                    <option>15 days</option>
                                                    <option>30 days</option>
                                                    <option>60 days</option>
                                                    <option>90 days</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ct-chart-statistics ct-golden-section ct-series-a"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm btn-secondary">Go to Dashboard</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col text-right">
                    <div class="btn-group">
                        <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="icon icon-sm">
                                <span class="fas fa-ellipsis-h icon-secondary"></span>
                            </span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#"><span class="fas fa-edit mr-2"></span>
                                Edit Item</a>
                            <a class="dropdown-item text-danger" href="#"><span class="fa fa-trash mr-2"
                                    aria-hidden="true"></span>
                                Disable</a>
                            <a class="dropdown-item" data-toggle="modal" data-target="#modal-notification"><span class="fas fa-chart-line mr-2"></span>Statistics</a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#">
                <h2 class="h5">Collaborative Workspace</h2>
            </a>
            <div class="col d-flex pl-0">
                <span class="text-success font-small mr-3"><span class="fas fa-check-circle mr-2"></span>Active</span>
                <span class="text-muted font-small mr-3"><span class="fas fa-eye mr-2"></span>680</span>
                <span class="text-muted font-small mr-3"><span class="far fa-heart mr-2"></span>10</span>
                <a class="font-small text-dark" href="#"><span class="fas fa-envelope mr-2"></span>8</a>
            </div>
            </div>
        </div>
    </div>
</div>

<div class="card border-light mb-3 py-3">
    <div class="card-body d-flex align-items-center flex-wrap flex-lg-nowrap py-0">
        <div class="col-auto col-lg-1 d-flex align-items-center px-0">
            <div class="form-check inbox-check mr-2">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label" for="defaultCheck1"></label>
            </div>
            <div class="rating-star d-none d-sm-inline-block">
                <input type="checkbox" id="InboxStar1" name="star">
                <label class="rating-star-label" for="InboxStar1">
                    <span class="sr-only">Star</span>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-8 pl-0 ml-2">
            <a href="#" class="h6 text-sm">Neil Sims</a>
        </div>
        <div class="col col-lg-1 text-right px-0 order-lg-4">
            <span class="text-muted text-sm">Dec 25</span>
        </div>
        <div class="col-12 col-lg-7 d-flex align-items-center px-0">
            <div class="col col-lg-11 px-0">
                <div class="d-flex flex-wrap flex-lg-nowrap align-items-center">
                    <a href="#" class="col-12 col-lg pl-0 font-weight-normal text-dark d-none d-sm-block mt-2 mt-lg-0">
                        I want to rent today, is the house still valid ...
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card bg-white border-light p-4 mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="font-small">
            <a href="#">
                <img class="avatar-sm img-fluid rounded-circle mr-2"
                    src="../../assets/img/team/profile-picture-1.jpg" alt="avatar">
                <span class="font-weight-bold">Neil Sims</span>
        </a>
        <span class="ml-2">March 26, 19:25</span>
        </span>
        <div class="d-none d-sm-block">
            <button class="btn btn-link text-dark" aria-label="phone" data-toggle="tooltip" data-placement="top" title="Sent from the phone " data-original-title="Sent from the phone">
                <span class="fas fa-mobile-alt"></span>
            </button>
        </div>
    </div>
    <p class="m-0">
        Hi Chris! Thanks a lot for this very useful template. Saved me a lot of time and searches on the internet.
    </p>
</div>