Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

Shuffle Components in Nightsable library

Browse 244 ready-made UI components available in Shuffle Editor.

Framework

UI Library

Components

Bootstrap Component #221

<section class="py-12 pt-lg-20 pb-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-3xl mx-auto">
      <div class="pb-10 mb-10 border-bottom border-dark border-opacity-50">
        <p class="fs-5 text-light text-opacity-75 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      </div>
      <div class="mb-8">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <div class="ps-6 mb-8 border-start border-2 border-primary">
          <p class="fs-5 text-light text-opacity-75 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p><span class="fs-8 text-light text-opacity-75">— John Doe, CEO &amp; Founder</span>
        </div>
      </div>
      <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid d-block mb-4" src="nightsable-assets/images/blog-content/header2.png" alt=""><span class="fs-8 text-secondary-light">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</span>
      <div class="mt-8 mb-12">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-5 text-light text-opacity-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <p class="fs-5 text-light text-opacity-75 mb-6">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
        <ul class="list-unstyled text-light text-opacity-75 fs-5 mb-6">
          <li>1. Lectus id duis vitae porttitor enim gravida morbi.</li>
          <li>2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
          <li>3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
        </ul>
        <p class="fs-5 text-light text-opacity-75">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. Vivamus id pharetra massa. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</p>
      </div>
      <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center"><a class="btn btn-outline-light fw-medium" href="#">Copy Link</a>
        <div class="d-flex gap-4"><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5995 4.43344H14.1661V1.78344C13.4076 1.70456 12.6454 1.66562 11.8828 1.66677C9.61615 1.66677 8.06615 3.05011 8.06615 5.58344V7.76677H5.50781V10.7334H8.06615V18.3334H11.1328V10.7334H13.6828L14.0661 7.76677H11.1328V5.87511C11.1328 5.00011 11.3661 4.43344 12.5995 4.43344Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.3346 4.83326C17.7083 5.10501 17.0458 5.28465 16.368 5.3666C17.0831 4.93936 17.619 4.26725 17.8763 3.47493C17.2043 3.87498 16.4686 4.15684 15.7013 4.30826C15.1884 3.75207 14.5054 3.38184 13.7595 3.25564C13.0135 3.12944 12.2468 3.2544 11.5795 3.61092C10.9122 3.96745 10.3821 4.53537 10.0723 5.22563C9.76259 5.91588 9.69071 6.68942 9.86797 7.42493C8.50916 7.3562 7.18 7.00239 5.96685 6.38648C4.75369 5.77057 3.68367 4.90634 2.8263 3.84993C2.52558 4.37507 2.36757 4.96978 2.36797 5.57493C2.3669 6.13692 2.50482 6.69044 2.76943 7.18623C3.03405 7.68202 3.41715 8.10469 3.88464 8.4166C3.34128 8.40181 2.80954 8.25601 2.33464 7.9916V8.03326C2.33871 8.82067 2.61463 9.58251 3.11573 10.1899C3.61683 10.7973 4.31235 11.213 5.08464 11.3666C4.78735 11.4571 4.4787 11.5048 4.16797 11.5083C3.95288 11.5058 3.73832 11.4862 3.5263 11.4499C3.74623 12.1273 4.17182 12.7192 4.74386 13.1434C5.31591 13.5676 6.00595 13.8029 6.71797 13.8166C5.51564 14.7627 4.03121 15.279 2.5013 15.2833C2.22275 15.2842 1.94442 15.2675 1.66797 15.2333C3.22999 16.2418 5.05031 16.7772 6.90964 16.7749C8.19271 16.7883 9.46558 16.5458 10.6539 16.0617C11.8422 15.5775 12.9222 14.8615 13.8306 13.9553C14.7391 13.0492 15.4579 11.9711 15.9451 10.784C16.4323 9.59695 16.678 8.3247 16.668 7.0416C16.668 6.89993 16.668 6.74993 16.668 6.59993C17.3219 6.11227 17.8859 5.51445 18.3346 4.83326Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4513 4.55008C14.2535 4.55008 14.0602 4.60873 13.8957 4.71861C13.7313 4.82849 13.6031 4.98467 13.5274 5.1674C13.4517 5.35012 13.4319 5.55119 13.4705 5.74517C13.5091 5.93915 13.6043 6.11734 13.7442 6.25719C13.884 6.39704 14.0622 6.49228 14.2562 6.53087C14.4502 6.56945 14.6513 6.54965 14.834 6.47396C15.0167 6.39827 15.1729 6.2701 15.2828 6.10565C15.3927 5.9412 15.4513 5.74786 15.4513 5.55008C15.4513 5.28486 15.3459 5.03051 15.1584 4.84297C14.9709 4.65544 14.7165 4.55008 14.4513 4.55008ZM18.2846 6.56675C18.2684 5.87533 18.1389 5.19125 17.9013 4.54175C17.6894 3.98603 17.3596 3.48281 16.9346 3.06675C16.522 2.6396 16.0176 2.3119 15.4596 2.10841C14.8118 1.86355 14.127 1.73109 13.4346 1.71675C12.5513 1.66675 12.268 1.66675 10.0013 1.66675C7.73464 1.66675 7.4513 1.66675 6.56797 1.71675C5.8756 1.73109 5.19075 1.86355 4.54297 2.10841C3.98603 2.31396 3.48208 2.64138 3.06797 3.06675C2.64082 3.4794 2.31312 3.98378 2.10964 4.54175C1.86477 5.18953 1.73231 5.87438 1.71797 6.56675C1.66797 7.45008 1.66797 7.73342 1.66797 10.0001C1.66797 12.2667 1.66797 12.5501 1.71797 13.4334C1.73231 14.1258 1.86477 14.8106 2.10964 15.4584C2.31312 16.0164 2.64082 16.5208 3.06797 16.9334C3.48208 17.3588 3.98603 17.6862 4.54297 17.8917C5.19075 18.1366 5.8756 18.2691 6.56797 18.2834C7.4513 18.3334 7.73464 18.3334 10.0013 18.3334C12.268 18.3334 12.5513 18.3334 13.4346 18.2834C14.127 18.2691 14.8118 18.1366 15.4596 17.8917C16.0176 17.6883 16.522 17.3606 16.9346 16.9334C17.3615 16.5189 17.6916 16.0152 17.9013 15.4584C18.1389 14.8089 18.2684 14.1248 18.2846 13.4334C18.2846 12.5501 18.3346 12.2667 18.3346 10.0001C18.3346 7.73342 18.3346 7.45008 18.2846 6.56675ZM16.7846 13.3334C16.7786 13.8624 16.6828 14.3865 16.5013 14.8834C16.3682 15.2461 16.1545 15.5738 15.8763 15.8417C15.606 16.1172 15.279 16.3304 14.918 16.4667C14.4211 16.6482 13.8969 16.744 13.368 16.7501C12.5346 16.7917 12.2263 16.8001 10.0346 16.8001C7.84297 16.8001 7.53464 16.8001 6.7013 16.7501C6.15204 16.7604 5.60513 16.6758 5.08464 16.5001C4.73945 16.3568 4.42743 16.1441 4.16797 15.8751C3.89138 15.6074 3.68034 15.2794 3.5513 14.9167C3.34785 14.4127 3.23501 13.8767 3.21797 13.3334C3.21797 12.5001 3.16797 12.1917 3.16797 10.0001C3.16797 7.80842 3.16797 7.50008 3.21797 6.66675C3.2217 6.12596 3.32043 5.59004 3.50964 5.08341C3.65634 4.73167 3.88152 4.41813 4.16797 4.16675C4.42115 3.88022 4.73404 3.65266 5.08464 3.50008C5.59259 3.31678 6.12797 3.22098 6.66797 3.21675C7.5013 3.21675 7.80964 3.16675 10.0013 3.16675C12.193 3.16675 12.5013 3.16675 13.3346 3.21675C13.8636 3.22282 14.3877 3.31862 14.8846 3.50008C15.2633 3.64062 15.6032 3.86912 15.8763 4.16675C16.1494 4.42273 16.3628 4.73569 16.5013 5.08341C16.6865 5.59086 16.7824 6.12656 16.7846 6.66675C16.8263 7.50008 16.8346 7.80842 16.8346 10.0001C16.8346 12.1917 16.8263 12.5001 16.7846 13.3334ZM10.0013 5.72508C9.15614 5.72673 8.33044 5.97885 7.62851 6.4496C6.92659 6.92034 6.37995 7.58858 6.05766 8.36988C5.73538 9.15117 5.65191 10.0105 5.8178 10.8392C5.98369 11.6679 6.3915 12.4289 6.9897 13.0259C7.5879 13.6229 8.34964 14.0293 9.17869 14.1935C10.0077 14.3578 10.8669 14.2727 11.6475 13.9489C12.4282 13.6251 13.0954 13.0771 13.5647 12.3743C14.0341 11.6714 14.2846 10.8452 14.2846 10.0001C14.2857 9.43767 14.1756 8.88059 13.9607 8.36088C13.7457 7.84117 13.4301 7.36909 13.032 6.97179C12.634 6.57449 12.1613 6.25981 11.6411 6.04586C11.121 5.8319 10.5637 5.72288 10.0013 5.72508ZM10.0013 12.7751C9.45246 12.7751 8.91594 12.6123 8.45959 12.3074C8.00325 12.0025 7.64757 11.5691 7.43754 11.062C7.2275 10.555 7.17255 9.997 7.27962 9.45871C7.3867 8.92041 7.65099 8.42595 8.03908 8.03786C8.42717 7.64977 8.92163 7.38548 9.45993 7.2784C9.99822 7.17133 10.5562 7.22628 11.0632 7.43632C11.5703 7.64635 12.0037 8.00203 12.3086 8.45837C12.6136 8.91472 12.7763 9.45124 12.7763 10.0001C12.7763 10.3645 12.7045 10.7253 12.5651 11.062C12.4256 11.3987 12.2212 11.7046 11.9635 11.9623C11.7058 12.22 11.3999 12.4244 11.0632 12.5638C10.7266 12.7033 10.3657 12.7751 10.0013 12.7751Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #222

<section class="position-fixed top-0 start-0 py-12 px-6 px-md-10 d-flex align-items-center justify-content-center bg-black bg-opacity-25 w-100 h-100 overflow-auto">
  <div class="position-relative mw-xl mw-lg-4xl w-100">
    <div class="position-relative p-10 bg-black rounded-5">
      <button class="btn p-0 position-absolute top-0 end-0 m-6"><img src="nightsable-assets/images/modals/close-icon.png"></button>
      <h3 class="mb-4 fs-4 fw-medium text-white">Select plan</h3>
      <p class="mb-8 text-white">Update your credit card details</p>
      <div class="row mb-10">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="p-8 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><span class="position-absolute top-0 end-0 m-8" style="filter: drop-shadow(0px 4px 14px rgba(204, 255, 0, 0.30));">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <rect width="20" height="20" rx="10" fill="#CCFF00"></rect>
                <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="url(#pattern0_159_5069)" stroke-opacity="0.07"></rect>
                <path d="M14.7676 7.22597C14.4582 6.92458 13.9558 6.92477 13.646 7.22597L8.59787 12.137L6.35419 9.95437C6.04438 9.65298 5.54217 9.65298 5.23236 9.95437C4.92255 10.2558 4.92255 10.7443 5.23236 11.0457L8.03684 13.7739C8.19165 13.9245 8.39464 14 8.59765 14C8.80067 14 9.00386 13.9247 9.15867 13.7739L14.7676 8.31727C15.0775 8.01609 15.0775 7.52734 14.7676 7.22597Z" fill="black"></path>
                <defs>
                  <pattern id="pattern0_159_5069" patternContentUnits="objectBoundingBox" width="1" height="1">
                    <use xlink:href="#image0_159_5069" transform="matrix(0.0647759 0 0 0.0416667 -0.285717 -0.109622)"></use>
                  </pattern>
                  <image id="image0_159_5069" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAFxJREFUSEvtkksKACAIBRX0/gdWsE2rQMJKCtK9n3EemplBYuH1BaoKRLTMeJ9g+fTe+AHBccm7A0dnHziomL4nORpjlyA6yAuDu0BEgJl3QwTvOYgiFcH0Y+kvaix8cbnzBW4NAAAAAElFTkSuQmCC"></image>
                </defs>
              </svg></span><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Team+</span>
              <div class="d-flex mb-4 align-items-end"><span class="fs-3 lh-sm fw-medium">$10</span><span class="ms-1 pb-2 text-secondary-light fs-10 fw-medium">/ month</span></div>
              <ul class="list-unstyled mb-0">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Core engagement survey</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Topic-based assessments</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Custom topic-based assessments</span>
                </li>
                <li class="d-flex align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Filterable heatmap &amp; analytics</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="p-8 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><span class="position-absolute top-0 end-0 m-8" style="filter: drop-shadow(0px 4px 14px rgba(204, 255, 0, 0.30));">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#595959"></rect>
                <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="url(#pattern0_159_5102)" stroke-opacity="0.07"></rect>
                <defs>
                  <pattern id="pattern0_159_5102" patternContentUnits="objectBoundingBox" width="1" height="1">
                    <use xlink:href="#image0_159_5102" transform="matrix(0.0647759 0 0 0.0416667 -0.285717 -0.109622)"></use>
                  </pattern>
                  <image id="image0_159_5102" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAFxJREFUSEvtkksKACAIBRX0/gdWsE2rQMJKCtK9n3EemplBYuH1BaoKRLTMeJ9g+fTe+AHBccm7A0dnHziomL4nORpjlyA6yAuDu0BEgJl3QwTvOYgiFcH0Y+kvaix8cbnzBW4NAAAAAElFTkSuQmCC"></image>
                </defs>
              </svg></span><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Team+</span>
              <div class="d-flex mb-4 align-items-end"><span class="fs-3 lh-sm fw-medium">$10</span><span class="ms-1 pb-2 text-secondary-light fs-10 fw-medium">/ month</span></div>
              <ul class="list-unstyled mb-0">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Core engagement survey</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Topic-based assessments</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Custom topic-based assessments</span>
                </li>
                <li class="d-flex align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Filterable heatmap &amp; analytics</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex flex-column flex-sm-row gap-4"><a class="btn btn-outline-light fw-medium" href="#" style="min-width: 168px;">Cancel</a><a class="btn btn-primary fw-medium" href="#" style="min-width: 168px;">Select plan</a></div>
    </div>
  </div>
</section>

Bootstrap Component #223

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-3xl mx-auto text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Why Nightsable Card?</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="mw-sm mw-lg-none mx-auto">
      <div class="row">
        <div class="col-lg-6 pb-12 mb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-dark border-opacity-50"></div>
          <div class="d-lg-none position-absolute bottom-0 end-0 w-100 border-bottom border-dark border-opacity-50"></div>
          <div class="mw-md">
            <h6 class="h1 text-primary mb-8">80%</h6>
            <p class="fs-6 mb-12 mb-lg-32">People believe the content they find and create on TikTok is more unique compared to other platforms they interact with.</p><a class="btn btn-primary fw-medium" href="#">See more</a>
          </div>
        </div>
        <div class="col-lg-6 position-relative">
          <div class="mw-xl ms-auto ps-lg-10">
            <h6 class="h4 text-primary mb-8">100+</h6>
            <p class="fs-6 mb-6">In 2020, Nightsable Card was the most downloaded app. It only continues to grow in popularity around the world when compared to other social apps.</p>
            <div class="d-inline-block px-24 mb-12 border-bottom border-dark border-opacity-50"></div>
            <h6 class="h4 text-primary mb-8">$1.5+</h6>
            <p class="fs-6 mb-6">Nightsable Card is one of the fastest growing social platforms and operates in 40+ countries, making the potential for growth even more exciting.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #224

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Our Team</h1>
    </div>
    <div class="mw-xs mw-md-2xl mx-auto mw-xl-none">
      <div class="row mb-n8">
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Jacob Jones</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle2.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Marvin McKinney</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle3.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Jenny Wilson</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle4.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Kristin Watson</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle2.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Robert Fox</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6 mb-8">
          <div class="py-6 px-14 border rounded-5">
            <div class="row align-items-center">
              <div class="col-12 col-md-auto mb-6 mb-md-0"><img class="img-fluid" src="nightsable-assets/images/team/avatar-circle6.png" alt=""></div>
              <div class="col-12 col-md-6 mb-6 mb-md-0"><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Kathryn Murphy</span></div>
              <div class="col-12 col-md-3 ms-md-auto"><a class="btn p-0 me-6" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2369)">
                      <path d="M20.7273 0H3.27273C1.46525 0 0 1.46525 0 3.27273V20.7273C0 22.5347 1.46525 24 3.27273 24H20.7273C22.5347 24 24 22.5347 24 20.7273V3.27273C24 1.46525 22.5347 0 20.7273 0Z" fill="#03A9F4"></path>
                      <path d="M8.6456 6.54545C8.6456 6.95001 8.52563 7.34547 8.30088 7.68185C8.07612 8.01822 7.75666 8.28039 7.3829 8.43521C7.00915 8.59002 6.59787 8.63053 6.20109 8.55161C5.80432 8.47268 5.43985 8.27787 5.15379 7.99181C4.86773 7.70575 4.67292 7.34128 4.59399 6.9445C4.51507 6.54772 4.55557 6.13645 4.71039 5.76269C4.8652 5.38894 5.12738 5.06948 5.46375 4.84472C5.80012 4.61996 6.19559 4.5 6.60014 4.5C7.14263 4.5 7.6629 4.7155 8.0465 5.0991C8.4301 5.4827 8.6456 6.00297 8.6456 6.54545Z" fill="white"></path>
                      <path d="M8.18081 9.95454V18.9914C8.18117 19.058 8.16835 19.1241 8.14309 19.1858C8.11782 19.2475 8.08062 19.3036 8.0336 19.3509C7.98659 19.3981 7.9307 19.4356 7.86914 19.4612C7.80758 19.4868 7.74157 19.5 7.6749 19.5H5.51899C5.45233 19.5002 5.38628 19.4872 5.32466 19.4617C5.26303 19.4363 5.20704 19.399 5.1599 19.3518C5.11276 19.3047 5.0754 19.2487 5.04997 19.1871C5.02454 19.1254 5.01154 19.0594 5.01172 18.9927V9.95454C5.01172 9.82 5.06517 9.69097 5.1603 9.59584C5.25543 9.50071 5.38446 9.44727 5.51899 9.44727H7.6749C7.8092 9.44763 7.93788 9.50123 8.03272 9.59632C8.12755 9.69142 8.18081 9.82024 8.18081 9.95454Z" fill="white"></path>
                      <path d="M19.4507 14.6587V19.0332C19.4509 19.0945 19.439 19.1553 19.4156 19.2119C19.3922 19.2686 19.3579 19.3201 19.3145 19.3634C19.2712 19.4068 19.2197 19.4411 19.1631 19.4645C19.1064 19.4878 19.0457 19.4998 18.9844 19.4996H16.6662C16.6049 19.4998 16.5442 19.4878 16.4875 19.4645C16.4308 19.4411 16.3794 19.4068 16.336 19.3634C16.2927 19.3201 16.2583 19.2686 16.235 19.2119C16.2116 19.1553 16.1997 19.0945 16.1998 19.0332V14.7937C16.1998 14.161 16.3853 12.0228 14.5457 12.0228C13.1207 12.0228 12.8303 13.486 12.773 14.1432V19.0332C12.773 19.1558 12.7248 19.2734 12.6388 19.3606C12.5528 19.4479 12.436 19.4978 12.3135 19.4996H10.0744C10.0132 19.4996 9.95262 19.4875 9.89611 19.4641C9.83961 19.4406 9.78829 19.4062 9.74509 19.3629C9.70189 19.3196 9.66767 19.2682 9.64438 19.2116C9.62109 19.155 9.6092 19.0944 9.60938 19.0332V9.9146C9.6092 9.85342 9.62109 9.79281 9.64438 9.73624C9.66767 9.67966 9.70189 9.62824 9.74509 9.58492C9.78829 9.54159 9.83961 9.50722 9.89611 9.48376C9.95262 9.46031 10.0132 9.44824 10.0744 9.44824H12.3135C12.4372 9.44824 12.5558 9.49737 12.6432 9.58483C12.7307 9.67229 12.7798 9.79091 12.7798 9.9146V10.7028C13.3089 9.90915 14.093 9.29688 15.7662 9.29688C19.4726 9.29688 19.4507 12.7578 19.4507 14.6587Z" fill="white"></path>
                    </g>
                  </svg></a><a class="btn p-0" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191_2367)">
                      <path d="M24 4.5585C23.1075 4.95 22.1565 5.2095 21.165 5.3355C22.185 4.7265 22.9635 3.7695 23.3295 2.616C22.3785 3.183 21.3285 3.5835 20.2095 3.807C19.3065 2.8455 18.0195 2.25 16.6155 2.25C13.8915 2.25 11.6985 4.461 11.6985 7.1715C11.6985 7.5615 11.7315 7.9365 11.8125 8.2935C7.722 8.094 4.1025 6.1335 1.671 3.147C1.2465 3.8835 0.9975 4.7265 0.9975 5.634C0.9975 7.338 1.875 8.8485 3.183 9.723C2.3925 9.708 1.617 9.4785 0.96 9.117C0.96 9.132 0.96 9.1515 0.96 9.171C0.96 11.562 2.6655 13.548 4.902 14.0055C4.5015 14.115 4.065 14.1675 3.612 14.1675C3.297 14.1675 2.979 14.1495 2.6805 14.0835C3.318 16.032 5.127 17.4645 7.278 17.511C5.604 18.8205 3.4785 19.6095 1.1775 19.6095C0.774 19.6095 0.387 19.5915 0 19.542C2.1795 20.9475 4.7625 21.75 7.548 21.75C16.602 21.75 21.552 14.25 21.552 7.749C21.552 7.5315 21.5445 7.3215 21.534 7.113C22.5105 6.42 23.331 5.5545 24 4.5585Z" fill="white"></path>
                    </g>
                  </svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center mt-14"><a class="btn btn-primary w-100 mw-xs fw-medium" href="#">See all team</a></div>
  </div>
</section>

Bootstrap Component #225

<section>
  <div class="bg-black">
    <div class="py-6 border-top border-secondary-dark">
      <div class="container">
        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '';">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a class="text-white opacity-75" href="#">HOMEPAGE</a></li><span class="mx-4">
              <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.6" d="M5.83341 4.23334L2.00841 0.408343C1.85228 0.253134 1.64107 0.166016 1.42091 0.166016C1.20076 0.166016 0.989548 0.253134 0.833413 0.408343C0.755306 0.485812 0.693311 0.577979 0.651003 0.679529C0.608696 0.781078 0.586914 0.89 0.586914 1.00001C0.586914 1.11002 0.608696 1.21894 0.651003 1.32049C0.693311 1.42204 0.755306 1.51421 0.833413 1.59168L4.66675 5.40834C4.74485 5.48581 4.80685 5.57798 4.84916 5.67953C4.89146 5.78108 4.91324 5.89 4.91324 6.00001C4.91324 6.11002 4.89146 6.21894 4.84916 6.32049C4.80685 6.42204 4.74485 6.51421 4.66675 6.59168L0.833413 10.4083C0.676493 10.5642 0.587897 10.7759 0.587116 10.9971C0.586335 11.2182 0.673432 11.4306 0.829247 11.5875C0.985061 11.7444 1.19683 11.833 1.41797 11.8338C1.6391 11.8346 1.85149 11.7475 2.00841 11.5917L5.83341 7.76668C6.30158 7.29792 6.56455 6.66251 6.56455 6.00001C6.56455 5.33751 6.30158 4.70209 5.83341 4.23334Z" fill="white"></path>
              </svg></span>
            <li class="breadcrumb-item active text-white opacity-75" aria-current="page">SERVICES</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #226

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Built for teams large and small</h1>
    </div>
    <div class="mw-sm mw-md-2xl mw-lg-4xl mx-auto">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/rbs-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/drift-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/seek-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/sendle-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/intel-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/deloitte-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/wise-white.png" alt=""></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 p-0">
          <div class="d-flex align-items-center justify-content-center px-10 border" style="height: 246px;"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/lenovo-white.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #227

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-lg mx-auto text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Protecting you and your money</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="py-14 px-8 px-sm-14 rounded-4 border border-dark border-opacity-50">
            <h4 class="mb-6">Safeguarded with leading banks</h4>
            <p class="mw-sm text-secondary-light mb-12 mb-sm-24 mb-lg-52">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p><a class="btn btn-link text-decoration-none text-white p-0" href="#"><span class="me-2 fs-7 fw-medium text-decoration-underline">Learn more</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 1.25L1 11.75" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.8781V1.25H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="py-14 px-8 px-sm-14 rounded-4 border border-dark border-opacity-50">
            <h4 class="mb-6">Safeguarded with leading banks</h4>
            <p class="mw-sm text-secondary-light mb-12 mb-sm-24 mb-lg-52">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p><a class="btn btn-link text-decoration-none text-white p-0" href="#"><span class="me-2 fs-7 fw-medium text-decoration-underline">Learn more</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 1.25L1 11.75" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.8781V1.25H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #228

<section class="bg-black position-relative overflow-hidden">
  <div class="position-absolute top-0 end-0 w-100 mw-2xl p-4 h-100"><img class="img-fluid d-block w-100 h-100" src="nightsable-assets/images/sign-in/stock.png" alt=""></div>
  <div class="container position-relative">
    <div class="pt-10 pb-20 pb-lg-28">
      <div class="mw-lg mx-auto mx-lg-0 mb-20 d-flex align-items-center justify-content-between"><a class="btn p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
        <p class="d-flex mb-0 align-items-center justify-content-center"><span class="text-secondary-light">Dont have an account?</span><a class="btn ms-1 p-0 text-decoration-underline" href="#"> Sign up</a></p>
      </div>
      <div class="mw-md mx-auto mx-lg-0 text-center">
        <h4 class="font-heading mb-4" style="letter-spacing: -0.1rem;">Log in to your account</h4><span class="d-block text-secondary-light mb-10">Good to have you back!</span>
        <form action="">
          <input class="form-control bg-transparent mb-4" type="text" placeholder="Full name">
          <input class="form-control bg-transparent mb-4" type="email" placeholder="Enter your email">
          <div class="position-relative">
            <input class="form-control bg-transparent mb-6" type="password" placeholder="Password">
            <button class="position-absolute top-50 end-0 me-8 translate-middle-y btn p-0">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="url(#pattern0_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="url(#pattern1_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="url(#pattern2_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <button class="btn btn-primary w-100 fw-medium" type="submit">Sign up</button>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign up with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign up with Apple</span></a>
        </form>
      </div>
    </div>
  </div>
  <div class="d-lg-none bg-dark bg-opacity-10 text-center px-5 pt-24 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"></div>
</section>

Bootstrap Component #229

<section class="py-12 py-lg-24 bg-black">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">FAQ</h1>
    </div>
    <div class="mw-4xl mx-auto"><a class="btn py-8 px-12 mb-5 w-100 text-start bg-black bg-gradient border-0 rounded-5" href="#">
        <div class="d-flex">
          <h6 class="fs-5 mb-0">What are the limits for money transfers from the United States?</h6><span class="ms-auto ps-4">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div></a><a class="btn py-8 px-12 mb-5 w-100 text-start bg-black bg-gradient border-0 rounded-5" href="#">
        <div class="d-flex">
          <h6 class="fs-5 mb-0">Is it safe to send money with Revolut?</h6><span class="ms-auto ps-4">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div></a><a class="btn py-8 px-12 mb-5 w-100 text-start bg-black bg-gradient border-0 rounded-5" href="#">
        <div class="d-flex">
          <h6 class="fs-5 mb-0">How can I make an international transfer from the United States?</h6><span class="ms-auto ps-4">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div></a><a class="btn py-8 px-12 mb-5 w-100 text-start bg-black bg-gradient border-0 rounded-5" href="#">
        <div class="d-flex">
          <h6 class="fs-5 mb-0">How long does it take to send money abroad from the United States?</h6><span class="ms-auto ps-4">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div></a><a class="btn py-8 px-12 mb-5 w-100 text-start bg-black bg-gradient border-0 rounded-5" href="#">
        <div class="d-flex">
          <h6 class="fs-5 mb-0">Where can I transfer money to from the United States?</h6><span class="ms-auto ps-4">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div></a></div>
  </div>
</section>

Bootstrap Component #230

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-xl mx-auto text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-8" style="letter-spacing: -0.1rem;">Download and get a Nightsable App</h2>
      <p class="text-secondary-light mb-8">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that</p><a class="btn btn-primary fw-medium" href="#">Get a free Nightsable App</a>
    </div>
  </div>
</section>

Bootstrap Component #231

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="row justify-content-between mb-n12">
      <div class="col-12 col-sm-6 col-md-4 col-lg-auto mb-12">
        <div>
          <h6 class="mb-6 fs-8 fw-medium text-secondary-light">Product</h6>
          <ul class="list-unstyled mb-0">
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Product</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Copy.ai Reviews</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Copy.ai vs Jasper.ai</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Copy.ai API</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Product</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Pricing</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Alternatives</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Templates</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Write in 29+ Languages</a></li>
            <li><a class="btn p-0 text-start fw-medium text-white" href="#">Use Free AI Tools</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-auto mb-12">
        <div>
          <h6 class="mb-6 fs-8 fw-medium text-secondary-light">Company</h6>
          <ul class="list-unstyled mb-0">
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Blog</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Press</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Careers</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Community</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Creator Program</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Twitter</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Linkedin</a></li>
            <li><a class="btn p-0 text-start fw-medium text-white" href="#">Affiliate Program</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-auto mb-12">
        <div>
          <h6 class="mb-6 fs-8 fw-medium text-secondary-light">Support</h6>
          <ul class="list-unstyled mb-0">
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Weekly Demos</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Contact Us</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Report a Bug</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Report an Outage</a></li>
            <li><a class="btn p-0 text-start fw-medium text-white" href="#">Request a New Feature</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-auto mb-12">
        <div>
          <h6 class="mb-6 fs-8 fw-medium text-secondary-light">Use Cases</h6>
          <ul class="list-unstyled mb-0">
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">For Teams</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">For Blog Writers</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">For Social Media Managers</a></li>
            <li><a class="btn p-0 text-start fw-medium text-white" href="#">For Emial Marketers</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-auto mb-12">
        <div>
          <h6 class="mb-6 fs-8 fw-medium text-secondary-light">Partners</h6>
          <ul class="list-unstyled mb-0">
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">About Partners</a></li>
            <li class="mb-2"><a class="btn p-0 text-start fw-medium text-white" href="#">Partner Desktop</a></li>
            <li><a class="btn p-0 text-start fw-medium text-white" href="#">Our Partners</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column flex-lg-row align-items-center gap-10 mt-24"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""><span class="text-secondary-light">© 2023 Nightsablestudio.co</span>
      <div class="d-flex flex-wrap ms-lg-auto gap-10 justify-content-center justify-content-lg-end"><a class="btn btn-link p-0 text-secondary-light" href="#">English (US)</a><a class="btn btn-link p-0 text-secondary-light" href="#">API</a><a class="btn btn-link p-0 text-secondary-light" href="#">Sitemap</a><a class="btn btn-link p-0 text-secondary-light" href="#">Privacy</a><a class="btn btn-link p-0 text-secondary-light" href="#">Terms</a></div>
    </div>
  </div>
</section>

Bootstrap Component #232

<section class="py-12 py-lg-24 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Blog</h1>
    </div>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row mb-16">
        <div class="col-lg-7 mb-12 mb-lg-0"><a class="btn p-0 w-100 mw-2xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper.png" alt=""><span class="d-block mb-4 fs-9 text-secondary-light">June 21. 2023</span>
            <div class="mw-md">
              <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
              <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Building our platform</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">On-Demand</span>
            </div></a></div>
        <div class="col-lg-5"><a class="btn d-flex flex-column flex-sm-row mb-6 align-items-start align-items-sm-center p-0 w-100 text-start border-0" href="#"><img class="img-fluid" src="nightsable-assets/images/blog/hand5.png" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="d-block mb-2 fs-9 text-secondary-light">June 21. 2023</span>
              <h6 class="fs-5 mb-0">It is a long established fact that a reader will be distracted by the readable</h6>
            </div></a><a class="btn d-flex flex-column flex-sm-row mb-6 align-items-start align-items-sm-center p-0 w-100 text-start border-0" href="#"><img class="img-fluid" src="nightsable-assets/images/blog/cash5.png" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="d-block mb-2 fs-9 text-secondary-light">June 21. 2023</span>
              <h6 class="fs-5 mb-0">It is a long established fact that a reader will be distracted by the readable</h6>
            </div></a><a class="btn d-flex flex-column flex-sm-row mb-6 align-items-start align-items-sm-center p-0 w-100 text-start border-0" href="#"><img class="img-fluid" src="nightsable-assets/images/blog/paper5.png" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="d-block mb-2 fs-9 text-secondary-light">June 21. 2023</span>
              <h6 class="fs-5 mb-0">It is a long established fact that a reader will be distracted by the readable</h6>
            </div></a><a class="btn d-flex flex-column flex-sm-row mb-6 align-items-start align-items-sm-center p-0 w-100 text-start border-0" href="#"><img class="img-fluid" src="nightsable-assets/images/blog/money5.png" alt="">
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="d-block mb-2 fs-9 text-secondary-light">June 21. 2023</span>
              <h6 class="fs-5 mb-0">It is a long established fact that a reader will be distracted by the readable</h6>
            </div></a></div>
      </div>
      <div class="text-center"><a class="btn btn-primary px-sm-10 fw-medium" href="#">See more articles</a></div>
    </div>
  </div>
</section>

Bootstrap Component #233

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Compare our plans</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row mb-14">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <button class="position-relative btn w-100 px-8 py-12 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(90.27% 103.98% at 73.03% 35.14%, rgba(232, 239, 254, 0.26) 0%, rgba(51, 56, 65, 0.13) 100%);">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Annual</span>
              <p class="mw-sm pe-16 pe-md-6 text-secondary-light fs-7 mb-6">During this phase the design is developed to meet the required technical standards to</p>
              <div class="d-flex mb-0 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-3 pb-2 text-secondary-light fw-medium">/ month</span></div>
            </div><span class="position-absolute top-50 end-0 me-3 me-md-4 translate-middle-y" style="filter: drop-shadow(0px 4px 14px rgba(204, 255, 0, 0.30));">
              <svg width="67" height="66" viewBox="0 0 67 66" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d_174_2382)">
                  <rect x="14.5" y="10" width="38" height="38" rx="19" fill="#CCFF00"></rect>
                  <path d="M40.0743 24.3228C39.6443 23.8923 38.9461 23.8925 38.5156 24.3228L31.5 31.3386L28.382 28.2205C27.9514 27.79 27.2535 27.79 26.8229 28.2205C26.3924 28.6511 26.3924 29.349 26.8229 29.7796L30.7204 33.677C30.9355 33.8922 31.2176 34 31.4997 34C31.7819 34 32.0643 33.8924 32.2794 33.677L40.0743 25.8818C40.5049 25.4516 40.5049 24.7533 40.0743 24.3228Z" fill="black"></path>
                </g>
              </svg></span>
          </button>
        </div>
        <div class="col-lg-6">
          <button class="position-relative btn w-100 px-8 py-12 text-start border border-secondary-dark border-opacity-25 bg-dark bg-opacity-10 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Monthly</span>
              <p class="mw-sm pe-16 pe-md-6 text-secondary-light fs-7 mb-6">During this phase the design is developed to meet the required technical standards to</p>
              <div class="d-flex mb-0 align-items-end"><span class="fs-2 lh-sm fw-medium">$12.99</span><span class="ms-3 pb-2 text-secondary-light fw-medium">/ month</span></div>
            </div><span class="position-absolute top-50 end-0 me-6 me-md-8 translate-middle-y border rounded-pill bg-black bg-opacity-10" style="width: 38px; height: 38px;"></span>
          </button>
        </div>
      </div>
      <div class="text-center"><a class="btn btn-primary mb-6 w-100 mw-xs fw-medium" href="#">Start now</a>
        <p class="mw-sm mx-auto fs-9 text-secondary-light">Annual During this phase the design is developed to meet the required technical standards to $9.99/ month</p>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #234

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-20 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-0" style="letter-spacing: -0.1rem;">Open positions</h2>
    </div>
    <div class="mw-md mx-auto mw-md-none">
      <div class="row mb-14">
        <div class="col-12 col-md-6 col-xl-4 mb-8"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Product Manager, Instagram Camera</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
        <div class="col-12 col-md-6 col-xl-4 mb-8"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Product Manager, Instagram Camera</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
        <div class="col-12 col-md-6 col-xl-4 mb-8"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Customer Success Manager</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
        <div class="col-12 col-md-6 col-xl-4 mb-md-8 mb-xl-0"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Product Manager, Instagram Camera</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
        <div class="col-12 col-md-6 col-xl-4 mb-8 mb-md-0"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Product Manager, Instagram Camera</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
        <div class="col-12 col-md-6 col-xl-4"><a class="d-block btn h-100 w-100 py-16 px-10 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" href="#"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/career/shadow.svg" alt="">
            <div class="mw-xs mx-auto position-relative"><span class="d-inline-block mb-4 px-4 py-3 fs-10 lh-sm text-primary fw-medium border border-primary rounded-pill">MARKETING</span>
              <h6 class="fs-4 mb-40">Customer Success Manager</h6>
              <div class="d-flex align-items-center justify-content-center"><span class="fs-9 text-secondary-light">Miami</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
            </div></a></div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary w-100 mw-xs fw-medium" href="#">See all positions</a></div>
  </div>
</section>

Bootstrap Component #235

<section class="bg-black position-relative overflow-hidden">
  <div class="position-absolute top-0 end-0 w-100 mw-2xl p-4 h-100"><img class="img-fluid d-block w-100 h-100" src="nightsable-assets/images/sign-in/stock.png" alt=""></div>
  <div class="container position-relative">
    <div class="pt-10 pb-20 pb-lg-28">
      <div class="mw-lg mx-auto mx-lg-0 mb-20 d-flex align-items-center justify-content-between"><a class="btn p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
        <p class="d-flex mb-0 align-items-center justify-content-center"><span class="text-secondary-light">Dont have an account?</span><a class="btn ms-1 p-0 text-decoration-underline" href="#"> Sign up</a></p>
      </div>
      <div class="mw-md mx-auto mx-lg-0 text-center">
        <h4 class="mb-4" style="letter-spacing: -0.1rem;">Log in to your account</h4><span class="d-block text-secondary-light mb-10">Good to have you back!</span>
        <form action="">
          <input class="form-control bg-transparent mb-4" type="email" placeholder="Enter your email">
          <div class="position-relative">
            <input class="form-control bg-transparent mb-6" type="password" placeholder="Password">
            <button class="position-absolute top-50 end-0 me-8 translate-middle-y btn p-0">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.1075 7.91602L7.89088 12.1327C7.33171 11.5735 7.01758 10.8151 7.01758 10.0244C7.01758 9.6328 7.0947 9.24508 7.24454 8.88334C7.39438 8.52159 7.61401 8.1929 7.89088 7.91602C8.16775 7.63915 8.49644 7.41953 8.85819 7.26969C9.21994 7.11985 9.60766 7.04272 9.99921 7.04272C10.79 7.04272 11.5484 7.35686 12.1075 7.91602Z" stroke="url(#pattern0_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.8499 4.83281C13.3915 3.73281 11.7249 3.13281 9.99987 3.13281C7.0582 3.13281 4.31654 4.86615 2.4082 7.86615C1.6582 9.04115 1.6582 11.0161 2.4082 12.1911C3.06654 13.2245 3.8332 14.1161 4.66654 14.8328M7.01654 16.2995C7.96654 16.6995 8.97487 16.9161 9.99987 16.9161C12.9415 16.9161 15.6832 15.1828 17.5915 12.1828C18.3415 11.0078 18.3415 9.03281 17.5915 7.85781C17.3165 7.42448 17.0165 7.01615 16.7082 6.63281" stroke="url(#pattern1_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="#595959" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.9243 10.6078C12.8115 11.1891 12.5274 11.7234 12.1087 12.1422C11.69 12.5609 11.1557 12.8449 10.5743 12.9578M7.89102 12.1328L1.66602 18.3578M18.3327 1.69116L12.1077 7.91616" stroke="url(#pattern2_185_1403)" stroke-opacity="0.07" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <button class="btn btn-primary mb-6 w-100 fw-medium" type="submit">Log in</button><a class="btn fs-9 ms-1 p-0 text-decoration-underline text-secondary-light" href="#">Forgot password?</a>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign in with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign in with Apple</span></a>
        </form>
      </div>
    </div>
  </div>
  <div class="d-lg-none bg-dark bg-opacity-10 text-center px-5 pt-24 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"></div>
</section>

Bootstrap Component #236

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-black">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
        </ul>
        <div class="ms-14"><a class="btn me-4 btn-outline-light" href="#">Login</a><a class="btn btn-primary" href="#">Start now for free</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary-dark bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-black overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="d-inline-block text-decoration-none" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a><a class="navbar-close text-primary" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="nav flex-column my-auto">
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Home</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">About us</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Wallet</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Blog</a></li>
      </ul><a class="btn mt-8 w-100 btn-outline-light" href="#">Get in touch</a>
    </nav>
  </div>
</section>

Bootstrap Component #237

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-4xl mx-auto text-center mb-14"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Billing infrastucture that keeps up with your business</h1>
    </div>
    <div class="d-flex flex-wrap justify-content-center gap-1 mb-20"><a class="btn btn-outline-light-light fw-medium border-0" href="#">Introduction</a><a class="btn btn-outline-primary fw-medium" href="#">Metering</a><a class="btn btn-outline-light-light fw-medium border-0" href="#">Aggregation</a><a class="btn btn-outline-light-light fw-medium border-0" href="#">Pricing &amp; Credits</a><a class="btn btn-outline-light-light fw-medium border-0" href="#">Integrations</a><a class="btn btn-outline-light-light fw-medium border-0" href="#">API &amp; Webhooks</a></div><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/features/dashboard2.png" alt="">
  </div>
</section>

Bootstrap Component #238

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-20 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-8" style="letter-spacing: -0.1rem;">Get in touch with us</h2>
      <p class="mw-lg mx-auto text-secondary-light mb-0">Let us help you become even greater at what you do. Fill out the following form and we will get back to you in the next 24 hours</p>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div class="pt-3 px-3 pb-8 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="img-fluid d-block w-100 rounded-4" src="nightsable-assets/images/contact/image.png" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="position-relative pt-8 px-5">
              <h6 class="mb-3 fs-5 fw-medium">San Francisco</h6><span class="text-secondary-light">50 Beale St.San Francisco, CA,</span><span class="d-block mb-6 text-secondary-light">United States94105</span><span class="d-block mb-3 fs-7 fw-medium text-decoration-underline">contact@sanfrancisco.co</span><span class="d-block mb-8 fs-7 fw-medium text-decoration-underline">(684) 555-0102</span><a class="btn btn-outline-primary w-100" href="#">
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_185_3167)">
                    <path d="M12.8411 0.15865C12.6868 0.00374161 12.4549 -0.0417586 12.2529 0.040025L0.336177 4.91504C0.113551 5.00658 -0.022416 5.23355 0.00305087 5.47296C0.0279592 5.71236 0.207802 5.9063 0.444519 5.94962L6.03401 6.96578L7.05073 12.5553C7.09351 12.792 7.28745 12.9718 7.52686 12.9973C7.54582 12.9989 7.56476 13 7.5832 13C7.80095 13 8.00082 12.8684 8.08479 12.6631L12.9598 0.74637C13.0421 0.544843 12.9955 0.313026 12.8411 0.15865Z" fill="#CCFF00"></path>
                  </g>
                </svg><span class="ms-2">Start GPS</span></a>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="pt-3 px-3 pb-8 bg-secondary-dark bg-opacity-25 border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="img-fluid d-block w-100 rounded-4" src="nightsable-assets/images/contact/image2.png" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="position-relative pt-8 px-5">
              <h6 class="mb-3 fs-5 fw-medium">Bangalore</h6><span class="text-secondary-light">5Ltd,2nd Floor, Bren Optimus,Dr. MH Marigowda,</span><span class="d-block mb-6 text-secondary-light">Ward No. 146,Bangalore, Karnataka - 560029</span><span class="d-block mb-3 fs-7 fw-medium text-decoration-underline">contact@sanfrancisco.co</span><span class="d-block mb-8 fs-7 fw-medium text-decoration-underline">(302) 555-0102</span><a class="btn btn-outline-primary w-100" href="#">
                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_185_3167)">
                    <path d="M12.8411 0.15865C12.6868 0.00374161 12.4549 -0.0417586 12.2529 0.040025L0.336177 4.91504C0.113551 5.00658 -0.022416 5.23355 0.00305087 5.47296C0.0279592 5.71236 0.207802 5.9063 0.444519 5.94962L6.03401 6.96578L7.05073 12.5553C7.09351 12.792 7.28745 12.9718 7.52686 12.9973C7.54582 12.9989 7.56476 13 7.5832 13C7.80095 13 8.00082 12.8684 8.08479 12.6631L12.9598 0.74637C13.0421 0.544843 12.9955 0.313026 12.8411 0.15865Z" fill="#CCFF00"></path>
                  </g>
                </svg><span class="ms-2">Start GPS</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #239

<div class="position-fixed start-0 bottom-0 w-100 pb-10 px-4">
  <div class="d-flex justify-content-center">
    <div class="toast p-6 w-100 mw-4xl show align-items-center text-bg-dark bg-black border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex justify-content-center position-relative">
        <div class="toast-body"><span class="d-block fs-8 mb-1 fw-medium">Your settings have been saved</span>
          <p class="pe-10 fs-9 text-secondary-light mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer too</p>
        </div>
        <button class="position-absolute top-0 end-0 btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
</div>

Bootstrap Component #240

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-24"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h3 text-white mb-0" style="letter-spacing: -0.2rem;">What people are saying</h1>
    </div>
    <div class="mw-md mw-md-3xl mx-auto mw-lg-none">
      <div class="row position-relative mb-20">
        <div class="col-lg-6 pb-16 pb-lg-0 mb-16 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-dark"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-dark"></div>
          <div class="mw-lg mx-auto mb-16 px-6 text-center"><img class="img-fluid d-block mx-auto mb-8" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
            <p class="fs-5 text-white mb-8" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</p><img class="img-fluid d-block mx-auto mb-5" src="nightsable-assets/images/testimonials/avatar-small.png" alt=""><span class="d-block fw-light">Wade Warren</span><span>Director of Media Operations, VICE Media</span>
          </div>
          <div class="mw-lg mx-auto px-6 text-center"><img class="img-fluid d-block mx-auto mb-8" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
            <p class="fs-5 text-white mb-8" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</p><img class="img-fluid d-block mx-auto mb-5" src="nightsable-assets/images/testimonials/avatar-small.png" alt=""><span class="d-block fw-light">Wade Warren</span><span>Director of Media Operations, VICE Media</span>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-lg mx-auto mb-16 px-6 text-center"><img class="img-fluid d-block mx-auto mb-8" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
            <p class="fs-5 text-white mb-8" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</p><img class="img-fluid d-block mx-auto mb-5" src="nightsable-assets/images/testimonials/avatar-small.png" alt=""><span class="d-block fw-light">Wade Warren</span><span>Director of Media Operations, VICE Media</span>
          </div>
          <div class="mw-lg mx-auto px-6 text-center"><img class="img-fluid d-block mx-auto mb-8" src="nightsable-assets/logos/brands/slack-full.svg" alt="">
            <p class="fs-5 text-white mb-8" style="font-family: 'Playfair Display', 'ui-sans-serif', 'system-ui', '-apple-system';">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</p><img class="img-fluid d-block mx-auto mb-5" src="nightsable-assets/images/testimonials/avatar-small.png" alt=""><span class="d-block fw-light">Wade Warren</span><span>Director of Media Operations, VICE Media</span>
          </div>
        </div>
      </div>
      <div class="text-center"><a class="btn btn-outline-light-light border-2" href="#">See more</a></div>
    </div>
  </div>
</section>

1
...
9
10
11
12
13

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

The selected plan includes lifetimeannualmonthly access to Shuffle Editor.

A lifetime license is best for those who prefer to avoid subscriptions.

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to live website in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

13,400+ UI components

Top AI models built in

1-click code export

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.