<section class="position-relative py-20 overflow-hidden">
<img class="d-none d-lg-block position-absolute bottom-0 start-0 mb-64" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
<div class="container">
<div class="row align-items-center">
<div class="position-relative col-12 col-lg-6">
<img class="img-fluid mx-auto d-block" style="width: 544px;" src="zeus-assets/images/z-picture.png" alt="">
</div>
<div class="col-12 col-lg-6 mb-6 mb-lg-0">
<div class="max-w-xl">
<h2 class="mb-10 mb-lg-24">Lorem ipsum dolor sit amet consectetur</h2>
<div class="position-relative row pt-5">
<div class="position-relative col-12 col-lg-6 mb-12 mt-n8">
<img class="d-none d-lg-block position-absolute top-0 start-0 ms-32 mt-n10" src="zeus-assets/icons/line-little-top.svg" alt="">
<span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-info text-white" style="width: 48px; height: 48px;">1</span>
<h3 class="mb-4 h4">Dolor sit amet</h3>
<p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="position-relative col-12 col-lg-6 mb-12">
<span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-danger text-white" style="width: 48px; height: 48px;">2</span>
<h3 class="mb-4 h4">Dolor sit amet</h3>
<p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="position-relative col-12 col-lg-6 mb-12 mt-n8">
<img class="d-none d-lg-block position-absolute top-0 start-0 ms-32 mt-n16" src="zeus-assets/icons/line-little.svg" alt="">
<span class="d-flex align-items-center justify-content-center mb-5 mb-lg-8 rounded-circle bg-warning text-white" style="width: 48px; height: 48px;">3</span>
<h3 class="mb-4 h4">Dolor sit amet</h3>
<p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
<div class="position-relative col-12 col-lg-6 mb-12" style="margin-bottom: -32px;">
<span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-success text-white" style="width: 48px; height: 48px;">4</span>
<h3 class="mb-4 h4">Dolor sit amet</h3>
<p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
Zeus
How it works Components by Shuffle
Choose from 8 variations of Bootstrap How it works components. Presented here are variants available in Zeus library.
Get access to all Bootstrap How it works components, code and our visual editor. Try the demo for free!
