Bootstrap about page snipp example v02
Whole html/css code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>About snipp</title>
<style>
figure {
margin: 0;
padding: 0;
}
.rounded img {
border-radius: 0.4rem;
}
figure img {
width: 100%;
max-width: 100%;
height: auto!important;
}
.icon-svg-sm {
width: 2.8rem;
height: 2.8rem;
}
.btn.btn-circle {
padding: 0;
border-radius: 100%!important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<section class="bg-light">
<div class="container py-5">
<div class="row align-items-center py-5">
<div class="col-lg-6 position-relative">
<div class="btn btn-circle btn-primary disabled position-absolute flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">
<h3 class="text-white mb-1 display-4 fw-bold">20+</h3>
<p class="mb-0 fw-bold">Year Experience</p>
</div>
<div class="row gx-3 gy-5 align-items-center">
<div class="col-md-6">
<div class="row gx-md-3 gy-3">
<div class="col-md-10 offset-md-2">
<figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/img11.png" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-12">
<figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/img12.png" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/img13.png" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-5 offset-lg-1">
<img src="https://cdn-icons-png.flaticon.com/512/3790/3790202.png" class="icon-svg-sm mb-4 mt-5 mt-lg-0" alt="" />
<h3 class="display-6 mb-4">We are a creative company that focuses on establishing long-term relationships with customers.</h3>
<p class="mb-5">Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.</p>
<div class="row gy-5">
<div class="col-md-4">
<h3 class="text-primary h1">4518</h3>
<p class="text-muted fw-bold">Completed Projects</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="text-primary h1">2472</h3>
<p class="text-muted fw-bold">Satisfied Customers</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="text-primary h1">3166</h3>
<p class="text-muted fw-bold">Expert Employees</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</body>
</html>
jsfiddle example
