Card 1
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card">
<img class="card-img-top" src="../../assets/img/bg28.jpg">
<div class="card-body">
<h4>Now UI Design System</h4>
<p>
One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That"s pretty impressive.
</p>
<a href="javascript:;" class="text-primary text-decoration-underline-hover">More about us</a>
</div>
</div>
</div>
</div>
</div>
</section>Card 2
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-blog card-plain">
<div class="position-relative">
<a class="d-block">
<img src="../../assets/img/house.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
</a>
</div>
<div class="card-body px-1 pt-3">
<p class="text-gradient text-dark mb-2 text-sm">Maui, Hawaii</p>
<a href="javascript:;">
<h5>
Scuba diving
</h5>
</a>
<p>
Siri'latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward.
</p>
<button type="button" class="btn btn-outline-primary btn-sm">Book Now</button>
</div>
</div>
</div>
</div>
</div>
</section>Card 3
<section class="py-8">
<div class="container">
<div class="row justify-space-between py-2">
<div class="card card-plain card-blog mt-5">
<div class="row">
<div class="col-md-4">
<div class="card-image position-relative border-radius-lg">
<img class="img border-radius-lg" src="../../assets/img/card-blog10.jpg">
</div>
</div>
<div class="col-md-7 my-auto ms-md-3 mt-md-auto mt-4">
<h3>
<a href="javascript:;" class="text-dark font-weight-normal">Rover raised $65 million for pet sitting</a>
</h3>
<p>
Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover, which raised $65 million to expand its pet sitting and dog-walking businesses.. <a href="javascript:;" class="text-dark text-decoration-underline-hover"> Read More </a>
</p>
<div class="author">
<img src="../../assets/img/emily.jpg" alt="..." class="avatar avatar-sm shadow rounded-circle me-2">
<p class="my-auto">Katie Roof</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card 4
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card">
<div class="card-header p-0 position-relative z-index-1">
<a href="javascript:;" class="d-block">
<img src="../../assets/img/bg28.jpg" class="img-fluid border-radius-md border-bottom-end-radius-0 border-bottom-start-radius-0 shadow" alt="anastasia">
</a>
</div>
<div class="card-body">
<span class="text-primary text-uppercase text-xs font-weight-bold">Reply detection</span>
<a href="javascript:;" class="card-title mt-3 h5 d-block text-dark text-decoration-underline-hover">
Shared Coworking
</a>
<p class="card-description mb-4">
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.
</p>
<div class="author align-items-center">
<img src="../../assets/img/emily.jpg" alt="..." class="avatar rounded-circle shadow">
<div class="name ps-2">
<span>Emily Glove</span>
<div class="stats">
<small>Posted on 28 February</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card 5
<section class="py-7">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<!-- Start Card Blog Fullbackground - text centered -->
<a href="javascript:;">
<div class="card card-background mb-4">
<div class="full-background" style="background-image: url(../../assets/img/bg26.jpg)"></div>
<div class="card-body pt-12">
<h4 class="text-white text-decoration-underline-hover">Home Office</h4>
<p>Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.</p>
</div>
</div>
</a>
<!-- End Card Blog Fullbackground - text centered -->
</div>
</div>
</div>
</section>Card 6
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card card-profile">
<a href="javascript:;">
<img class="w-100 border-radius-md border-radius-bottom-end-0 border-radius-bottom-start-0" src="../../assets/img/emily.jpg">
</a>
<div class="card-body justify-content-center text-center">
<h4 class="mb-0">Hattie McKenzie</h4>
<p>Montreal, QC</p>
<div class="row justify-content-center text-center">
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">323</h5>
<small>Projects</small>
</div>
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">500+</h5>
<small>Hours</small>
</div>
<div class="col-lg-4 col-4">
<h5 class="text-info mb-0">24/7</h5>
<small>Support</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Card 7
<section class="py-4">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<a href="javascript:;">
<div class="card card-background card-background-mask-dark mt-lg-0 mt-5">
<div class="full-background" style="background-image: url('../../assets/img/project17.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-xl mb-7 h-50">
<i class="ni ni-palette text-white opacity-10"></i>
</div>
<h2 class="text-white max-width-300 mb-3">Check the experience!</h2>
<p class="lead text-sm">Support requests</p>
<button type="button" class="btn btn-outline-white bg-transparent mt-3">Get Started</button>
</div>
</div>
</a>
</div>
</div>
</div>
</section>Card 8
<section class="py-6">
<div class="container">
<div class="row justify-space-between py-2">
<div class="col-6 mx-auto">
<div class="card shadow-none bg-gradient-dark h-100 overflow-hidden">
<div class="card-header bg-transparent text-sm-start text-center pt-4 pb-3 px-4">
<h5 class="mb-1 text-white">Premium</h5>
<p class="mb-3 text-sm text-white">Free access for 200 members</p>
<h3 class="font-weight-bold mt-3 text-white">
$499 <small class="text-sm text-secondary font-weight-bold">/ year</small>
</h3>
<a href="javascript:;" class="btn shadow-none btn-white w-100 rounded-pill mt-4 mb-2">Buy now</a>
</div>
<hr class="horizontal light my-0">
<div class="card-body">
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Complete documentation</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">Working materials in Sketch</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">20GB cloud storage</span>
</div>
</div>
<div class="d-flex pb-3">
<div>
<i class="fas fa-check text-success text-sm"></i>
</div>
<div class="ps-3">
<span class="text-sm text-white">100 team members</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>