Stesp by steps services in bootstrap
<div id="services" class="section"> <div class="container"> <div class="title"> <h3 class="entry-title"> SERVICES </h3> </div> <div class="section-wrapper block content-1170 center-relative"> <div class="content-wrapper row"> <div class="col-sm-4"> <div class="service-steps"> <p class="service-num">1</p> <div class="service-txt"> <h4>Step One</h4> <p> Curabitur cursus mattis ligula a maximus pellentesque in purus malesuada pharetra eros. </p> <br> <div class="button-holder text-left"> <a href="#" class="button-dot"> <span>MORE</span> </a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="service-steps"> <p class="service-num">2</p> <div class="service-txt"> <h4>Step Two</h4> <p> Est sem integer suscipit enim quis dictum feugiat etiam pellentesque curabitur donec porttitor. </p> <br> <div class="button-holder text-left"> <a href="#" class="button-dot"> <span>MORE</span> </a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="service-steps"> <p class="service-num">3</p> <div class="service-txt"> <h4>Step Three</h4> <p> Donec vel est sem integer suscipit enim quis lorem posuere vestibulum metus tempor vitae. </p> <br> <div class="button-holder text-left"> <a href="#" class="button-dot"> <span>MORE</span> </a> </div> </div> </div> </div> <div class="clear"></div> </div> </div> </div> </div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap" rel="stylesheet"> body { font-family: 'Oswald', sans-serif; font-weight:300;} .section { position: relative; } .title { position: absolute; top: 0; left: 0; background-color: #2196f3; width: 285px; display: inline-block; z-index: 98; height: 130px; } .title:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 130px 60px 0 0; border-color: #2196f3 transparent transparent transparent; position: absolute; top: 0; right: 0; transform: translateX(100%); } .section h3.entry-title { font-size: 16px; line-height: 149%; font-weight: 400; word-break: break-word; text-align: center; color: #fff; letter-spacing: 2px; margin-top: 32px; } .page .page-content { background-color: #fff; padding: 75px; } .section-wrapper { position: relative; padding: 200px 0 115px 0; } #services { background-image: url(images/on_black_left.png); background-color: #000000; background-position: left bottom; background-repeat: no-repeat; background-size: auto; } .service-steps { margin: 25px 0; } .service-steps:after { content: ""; display: block; clear: both; } .service-txt h4 { font-size: 46px; color: #fff; text-transform:uppercase; font-weight: 700; margin-top: 10px; line-height: 110%; } .service-num { font-size: 264px; font-weight: 700; color: #000000; text-shadow: -1px 0 #b3b3b3, 0 1px #b3b3b3, 1px 0 #b3b3b3, 0 -1px #b3b3b3; line-height: 100%; height: 165px; overflow: hidden; margin-bottom: -10px; -webkit-transform: translateZ(0); } a.button { display: inline-block; color: #fff; background-color: #2196f3; text-align: left; padding: 10px 40px; cursor: pointer; vertical-align: middle; text-decoration: none; transition: all .2s linear; margin-bottom: 17px; border: 2px solid #2196f3; border-radius: 50px; font-size: 14px; letter-spacing: 2px; box-sizing: border-box; } a.button:hover { background-color: transparent; color: #2196f3; } a.button-dot { color: #fff !important; font-size: 16px; position: relative; } a.button-dot:hover { color: #fff; } a.button-dot span { transition: .3s; display: inline-block; margin-left: 50px; letter-spacing: 2px; } a.button-dot:hover span { transform: translateX(-8px); } a.button-dot:before { content: ""; width: 30px; height: 30px; border: 2px solid #fff; background: transparent; border-radius: 90%; top: -7px; position: absolute; transition: .3s; } a.button-dot:hover:before { width: calc(100% + 30px); height: 51px; border-radius: 50px; top: -18px; } .service-txt p { color:#ccc; }