Bootstrap about page snipp example v01
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>
.shape.rellax {
z-index: 1;
}
.shape.rellax {
position: absolute;
}
.h-20 {
height: 10rem!important;
}
.w-20 {
width: 10rem!important;
}
.position-relative .shape.rellax+figure {
position: relative;
z-index: 2;
}
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;
}
</style>
</head>
<body>
<section class="bg-light">
<div class="container py-5 py-md-5">
<div class="row gx-lg-5 gy-5 align-items-center py-5">
<div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
<div class="shape alert-primary rounded-circle rellax w-20 h-20" style="top: -2rem; right: -1.9rem;"></div>
<figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/about7333.jpg" alt=""></figure>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-4 mb-4">Who Are We?</h2>
<p class="lead mb-3">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
<p class="mb-5">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="row gx-xl-5 gy-5">
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="https://cdn-icons-png.flaticon.com/512/3176/3176324.png" class="icon-svg-sm me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Our Mission</h4>
<p class="mb-0">Dapibus eu leo quam ornare curabitur blandit tempus.</p>
</div>
</div>
</div>
<!--/column -->
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="https://cdn-icons-png.flaticon.com/512/3176/3176294.png" class="icon-svg-sm me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Our Values</h4>
<p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</body>
</html>
jsfiddle example
