@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
95 lines • 5.24 kB
HTML
<!--End of Title section-->
<div class="section section-md">
<div class="container">
<div class="row mb-5">
<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card shadow">
<img src="@@path/assets/img/blog/image-1.jpg" class="card-img-top rounded-top"
alt="Themesberg office">
<div class="card-body">
<span class="h6 icon-tertiary small"><span class="fas fa-medal me-2"></span>Awards</span>
<h3 class="h5 card-title mt-3">We partnered up with Google</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-7 mb-lg-0">
<div class="card border-0 overflow-hidden">
<div class="position-relative">
<img src="@@path/assets/img/team/profile-picture-1.jpg" class="card-img-top"
alt="Neil Portrait">
</div>
<div
class="card-body position-relative mt-n6 mx-2 bg-white border border-gray-300 text-center rounded">
<h3 class="h5 card-title">Neil D. Sims</h3>
<span class="text-gray"><span class="fas fa-map-marker-alt me-2"></span>New York,
USA</span>
<p class="mt-3">Neil drives the technical strategy of the platform and brand.</p>
<div class="btn-group">
<button class="btn btn-secondary btn-icon">
<span class="me-1"><span class="far fa-user"></span></span>
Follow
</button>
<button class="btn btn-primary" aria-label="mesage button" title="message button">
<span aria-hidden="true" class="far fa-envelope"></span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card shadow text-center">
<!-- Header -->
<div class="card-header bg-white p-3">
<h3 class="text-primary mb-4">Basic</h3>
<span class="d-block">
<span class="display-1 text-dark fw-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</div>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<ul class="list-unstyled mb-4">
<li class="list-item pb-3"><strong>1</strong> free domain</li>
<li class="list-item pb-3">Storage space: <strong>5GB</strong></li>
<li class="list-item pb-3"><strong>100k</strong> monthly visitors</li>
<li class="list-item pb-3">One-click staging site</li>
<li class="list-item pb-3">Search engine wizard </li>
<li class="list-item pb-3">Community support</li>
</ul>
<div class="d-grid"><a href="#" class="btn btn-primary animate-up-1">Purchase now</a></div>
</div>
<!-- End Content -->
</div>
</div>
<div class="col-12 mt-5">
<div class="card shadow mb-6">
<div class="card-body px-5 py-5 text-center text-md-left">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="mb-3">Get in touch</h2>
<p class="mb-0">
If you need any help with our products or services, choose one of the following ways
to contact us.
</p>
</div>
<div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right">
<a href="#" class="btn btn-primary">
<span class="me-1">
<span class="fas fa-headphones"></span>
</span>
Contact Us
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>