Bootstrap How It Works Components

<section class="py-24 pt-md-40 pb-md-40 pb-xl-64">
  <div class="container">
    <div class="mw-xl mx-auto text-center mb-32">
      <span class="h6 text-primary">How it works</span>
      <h2 class="h3 mt-6 mb-12">Build and launch without problems</h2>
      <p class="text-secondary mb-0">The brown fox jumps over the lazy dog.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 col-xl-7 mb-40 mb-lg-0 position-relative">
        <div class="position-relative mw-md mx-auto" style="z-index: 1;">
          <img class="img-fluid w-100 h-100" src="https://images.pexels.com/photos/7148031/pexels-photo-7148031.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="">
          <div class="position-absolute bottom-0 start-0 w-100 d-flex justify-content-center">
            <a class="text-decoration-none d-flex w-100 pt-10 pb-14 pe-6 mx-12 align-items-center border-top border-white" href="#">
              <div class="d-flex ps-2 pt-2 justify-content-center align-items-center bg-white" style="width: 80px; height: 80px; border-radius: 10px;">
                <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.791667 6.33333C0.354667 6.33333 0 5.97867 0 5.54167V3.95833C0 1.7765 1.7765 0 3.95833 0H5.54167C5.97867 0 6.33333 0.354667 6.33333 0.791667C6.33333 1.22867 5.97867 1.58333 5.54167 1.58333H3.95833C2.64892 1.58333 1.58333 2.64892 1.58333 3.95833V5.54167C1.58333 5.97867 1.22867 6.33333 0.791667 6.33333Z" fill="#1F40FF"></path>
                  <path d="M30.8747 6.33333C30.4377 6.33333 30.083 5.97867 30.083 5.54167V3.95833C30.083 2.64892 29.0174 1.58333 27.708 1.58333H26.1247C25.6877 1.58333 25.333 1.22867 25.333 0.791667C25.333 0.354667 25.6877 0 26.1247 0H27.708C29.8898 0 31.6664 1.7765 31.6664 3.95833V5.54167C31.6664 5.97867 31.3117 6.33333 30.8747 6.33333Z" fill="#1F40FF"></path>
                  <path d="M19.7914 1.58333H11.8747C11.4377 1.58333 11.083 1.22867 11.083 0.791667C11.083 0.354667 11.4377 0 11.8747 0H19.7914C20.2284 0 20.583 0.354667 20.583 0.791667C20.583 1.22867 20.2284 1.58333 19.7914 1.58333Z" fill="#1F40FF"></path>
                  <path d="M16.6247 31.6667H11.8747C11.4377 31.6667 11.083 31.312 11.083 30.875C11.083 30.438 11.4377 30.0834 11.8747 30.0834H16.6247C17.0617 30.0834 17.4163 30.438 17.4163 30.875C17.4163 31.312 17.0617 31.6667 16.6247 31.6667Z" fill="#1F40FF"></path>
                  <path d="M5.54167 31.6667H3.95833C1.7765 31.6667 0 29.8902 0 27.7084V26.125C0 25.688 0.354667 25.3334 0.791667 25.3334C1.22867 25.3334 1.58333 25.688 1.58333 26.125V27.7084C1.58333 29.0178 2.64892 30.0834 3.95833 30.0834H5.54167C5.97867 30.0834 6.33333 30.438 6.33333 30.875C6.33333 31.312 5.97867 31.6667 5.54167 31.6667Z" fill="#1F40FF"></path>
                  <path d="M0.791667 20.5833C0.354667 20.5833 0 20.2286 0 19.7916V11.8749C0 11.4379 0.354667 11.0833 0.791667 11.0833C1.22867 11.0833 1.58333 11.4379 1.58333 11.8749V19.7916C1.58333 20.2286 1.22867 20.5833 0.791667 20.5833Z" fill="#1F40FF"></path>
                  <path d="M30.8747 17.4166C30.4377 17.4166 30.083 17.0619 30.083 16.6249V11.8749C30.083 11.4379 30.4377 11.0833 30.8747 11.0833C31.3117 11.0833 31.6663 11.4379 31.6663 11.8749V16.6249C31.6663 17.0619 31.3117 17.4166 30.8747 17.4166Z" fill="#1F40FF"></path>
                  <path d="M22.0118 38C21.4418 38 20.9795 37.5377 20.9795 36.9677V15.2823C20.9795 14.7123 21.4418 14.25 22.0118 14.25C22.2873 14.25 22.547 14.3577 22.7417 14.5524L37.6773 29.488C37.8721 29.6812 37.9829 29.9472 37.9829 30.2211C37.9829 30.7911 37.5206 31.2534 36.9506 31.2534H28.9563L22.7544 37.6849C22.5533 37.8908 22.2921 38 22.0118 38ZM22.5628 16.6123V35.6044L28.0507 29.9139C28.1995 29.7587 28.4053 29.6717 28.6207 29.6717H35.6206L22.5628 16.6123ZM36.5658 30.6153H36.5817H36.5658Z" fill="#1F40FF"></path>
                </svg>
              </div>
              <div class="ms-12">
                <span class="h6 text-primary">Zospace</span>
                <h4 class="text-white mt-1 mb-0">How it works</h4>
              </div>
            </a>
          </div>
        </div>
        <img class="position-absolute bottom-0 start-0 mb-n32 mb-sm-n52 ms-xl-20 w-100" src="zospace-assets/images/blue-eclipse.png" alt="">
      </div>
      <div class="col-12 col-lg-6 col-xl-5 position-relative">
        <div class="mw-xs mw-md-md mx-auto">
          <ul class="list-unstyled mb-10">
            <li class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light">
              <span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;">1</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6">Register account</h3>
                <p class="text-secondary mb-0">It&rsquo;s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
              </div>
            </li>
            <li class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light">
              <span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;">2</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6">Customize tools</h3>
                <p class="text-secondary mb-0">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
              </div>
            </li>
            <li class="d-sm-flex pb-12 border-bottom border-primary-light">
              <span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;">3</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6">Work with your team</h3>
                <p class="text-secondary mb-0">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
              </div>
            </li>
          </ul>
          <div class="text-end">
            <a class="btn p-0 btn-link fw-bold text-decoration-none" href="#">
              <span class="me-5">Learn more</span>
              <span class="d-inline-block">
                <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>