creative heros #01

Centered aligned image with background logos

1

Color options

Customize your colors.

<section class="overflow-hidden">
  <div class="relative px-8 py-12 mx-auto max-w-screen">
    <img
      class="inset-0 lg:absolute lg:z-10 sm:m-auto lg:max-w-xl"
      src="/pose/4.png"
      alt=""
    />
    <svg
      class="hidden sm:block"
      viewBox="0 0 75 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_1307_4217)">
        <rect width="75" height="15" fill="white"></rect>
        <path
          d="M7.467 14.304C3.306 14.304 0.684 11.606 0.684 7.331C0.684 3.075 3.306 0.396 7.467 0.396C11.647 0.396 14.269 3.075 14.269 7.331C14.269 11.606 11.647 14.304 7.467 14.304ZM3.914 7.331C3.914 9.915 5.282 11.568 7.467 11.568C9.671 11.568 11.039 9.915 11.039 7.331C11.039 4.747 9.671 3.132 7.467 3.132C5.282 3.132 3.914 4.747 3.914 7.331ZM14.2202 14L18.3622 7.35L14.2582 0.699999H17.9442L19.5972 3.816C20.0722 4.538 20.1292 5.412 20.1102 6.115H21.0602C21.0412 5.412 21.0982 4.538 21.5732 3.816L23.2262 0.699999H26.9122L22.8082 7.35L26.9502 14H23.2072L21.5352 10.808C21.0412 10.029 21.0412 9.231 21.0602 8.547H20.1102C20.1292 9.231 20.1292 10.029 19.6352 10.808L17.9632 14H14.2202ZM28.1997 14V0.699999H33.9757C37.1297 0.699999 38.7257 1.859 38.7257 4.12C38.7257 5.906 37.8137 6.628 35.3057 6.685V7.445C38.0987 7.445 39.2007 8.262 39.2007 10.39C39.2007 12.746 37.7187 14 34.5267 14H28.1997ZM31.2207 11.644H34.0707C35.5147 11.644 36.0467 11.169 36.0467 10.01C36.0467 8.851 35.5147 8.376 34.0707 8.376H31.2207V11.644ZM31.2207 6.058H33.8807C35.0967 6.058 35.6287 5.621 35.6287 4.538C35.6287 3.474 35.0967 3.018 33.8617 3.018H31.2207V6.058ZM47.4171 14.304C43.2561 14.304 40.6341 11.606 40.6341 7.331C40.6341 3.075 43.2561 0.396 47.4171 0.396C51.5971 0.396 54.2191 3.075 54.2191 7.331C54.2191 11.606 51.5971 14.304 47.4171 14.304ZM43.8641 7.331C43.8641 9.915 45.2321 11.568 47.4171 11.568C49.6211 11.568 50.9891 9.915 50.9891 7.331C50.9891 4.747 49.6211 3.132 47.4171 3.132C45.2321 3.132 43.8641 4.747 43.8641 7.331ZM57.786 14L54.252 0.699999H57.482L59.116 7.369C59.458 8.756 59.553 10.485 59.515 11.625H60.465C60.408 10.485 60.408 8.756 60.807 7.369L62.688 0.699999H65.975L67.875 7.369C68.274 8.756 68.274 10.485 68.217 11.625H69.167C69.11 10.485 69.224 8.756 69.566 7.369L71.181 0.699999H74.411L70.877 14H66.697L64.322 4.253L61.947 14H57.786Z"
          fill="black"
        ></path>
      </g>
      <defs>
        <clipPath id="clip0_1307_4217">
          <rect width="75" height="15" fill="white"></rect>
        </clipPath>
      </defs>
    </svg>
    <svg
      class="hidden sm:block"
      viewBox="0 0 75 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_1307_4217)">
        <rect width="75" height="15" fill="white"></rect>
        <path
          d="M7.467 14.304C3.306 14.304 0.684 11.606 0.684 7.331C0.684 3.075 3.306 0.396 7.467 0.396C11.647 0.396 14.269 3.075 14.269 7.331C14.269 11.606 11.647 14.304 7.467 14.304ZM3.914 7.331C3.914 9.915 5.282 11.568 7.467 11.568C9.671 11.568 11.039 9.915 11.039 7.331C11.039 4.747 9.671 3.132 7.467 3.132C5.282 3.132 3.914 4.747 3.914 7.331ZM14.2202 14L18.3622 7.35L14.2582 0.699999H17.9442L19.5972 3.816C20.0722 4.538 20.1292 5.412 20.1102 6.115H21.0602C21.0412 5.412 21.0982 4.538 21.5732 3.816L23.2262 0.699999H26.9122L22.8082 7.35L26.9502 14H23.2072L21.5352 10.808C21.0412 10.029 21.0412 9.231 21.0602 8.547H20.1102C20.1292 9.231 20.1292 10.029 19.6352 10.808L17.9632 14H14.2202ZM28.1997 14V0.699999H33.9757C37.1297 0.699999 38.7257 1.859 38.7257 4.12C38.7257 5.906 37.8137 6.628 35.3057 6.685V7.445C38.0987 7.445 39.2007 8.262 39.2007 10.39C39.2007 12.746 37.7187 14 34.5267 14H28.1997ZM31.2207 11.644H34.0707C35.5147 11.644 36.0467 11.169 36.0467 10.01C36.0467 8.851 35.5147 8.376 34.0707 8.376H31.2207V11.644ZM31.2207 6.058H33.8807C35.0967 6.058 35.6287 5.621 35.6287 4.538C35.6287 3.474 35.0967 3.018 33.8617 3.018H31.2207V6.058ZM47.4171 14.304C43.2561 14.304 40.6341 11.606 40.6341 7.331C40.6341 3.075 43.2561 0.396 47.4171 0.396C51.5971 0.396 54.2191 3.075 54.2191 7.331C54.2191 11.606 51.5971 14.304 47.4171 14.304ZM43.8641 7.331C43.8641 9.915 45.2321 11.568 47.4171 11.568C49.6211 11.568 50.9891 9.915 50.9891 7.331C50.9891 4.747 49.6211 3.132 47.4171 3.132C45.2321 3.132 43.8641 4.747 43.8641 7.331ZM57.786 14L54.252 0.699999H57.482L59.116 7.369C59.458 8.756 59.553 10.485 59.515 11.625H60.465C60.408 10.485 60.408 8.756 60.807 7.369L62.688 0.699999H65.975L67.875 7.369C68.274 8.756 68.274 10.485 68.217 11.625H69.167C69.11 10.485 69.224 8.756 69.566 7.369L71.181 0.699999H74.411L70.877 14H66.697L64.322 4.253L61.947 14H57.786Z"
          fill="black"
        ></path>
      </g>
      <defs>
        <clipPath id="clip0_1307_4217">
          <rect width="75" height="15" fill="white"></rect>
        </clipPath>
      </defs>
    </svg>
    <svg
      class="mt-8 sm:mt-0"
      viewBox="0 0 75 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_1307_4217)">
        <rect width="75" height="15" fill="white"></rect>
        <path
          d="M7.467 14.304C3.306 14.304 0.684 11.606 0.684 7.331C0.684 3.075 3.306 0.396 7.467 0.396C11.647 0.396 14.269 3.075 14.269 7.331C14.269 11.606 11.647 14.304 7.467 14.304ZM3.914 7.331C3.914 9.915 5.282 11.568 7.467 11.568C9.671 11.568 11.039 9.915 11.039 7.331C11.039 4.747 9.671 3.132 7.467 3.132C5.282 3.132 3.914 4.747 3.914 7.331ZM14.2202 14L18.3622 7.35L14.2582 0.699999H17.9442L19.5972 3.816C20.0722 4.538 20.1292 5.412 20.1102 6.115H21.0602C21.0412 5.412 21.0982 4.538 21.5732 3.816L23.2262 0.699999H26.9122L22.8082 7.35L26.9502 14H23.2072L21.5352 10.808C21.0412 10.029 21.0412 9.231 21.0602 8.547H20.1102C20.1292 9.231 20.1292 10.029 19.6352 10.808L17.9632 14H14.2202ZM28.1997 14V0.699999H33.9757C37.1297 0.699999 38.7257 1.859 38.7257 4.12C38.7257 5.906 37.8137 6.628 35.3057 6.685V7.445C38.0987 7.445 39.2007 8.262 39.2007 10.39C39.2007 12.746 37.7187 14 34.5267 14H28.1997ZM31.2207 11.644H34.0707C35.5147 11.644 36.0467 11.169 36.0467 10.01C36.0467 8.851 35.5147 8.376 34.0707 8.376H31.2207V11.644ZM31.2207 6.058H33.8807C35.0967 6.058 35.6287 5.621 35.6287 4.538C35.6287 3.474 35.0967 3.018 33.8617 3.018H31.2207V6.058ZM47.4171 14.304C43.2561 14.304 40.6341 11.606 40.6341 7.331C40.6341 3.075 43.2561 0.396 47.4171 0.396C51.5971 0.396 54.2191 3.075 54.2191 7.331C54.2191 11.606 51.5971 14.304 47.4171 14.304ZM43.8641 7.331C43.8641 9.915 45.2321 11.568 47.4171 11.568C49.6211 11.568 50.9891 9.915 50.9891 7.331C50.9891 4.747 49.6211 3.132 47.4171 3.132C45.2321 3.132 43.8641 4.747 43.8641 7.331ZM57.786 14L54.252 0.699999H57.482L59.116 7.369C59.458 8.756 59.553 10.485 59.515 11.625H60.465C60.408 10.485 60.408 8.756 60.807 7.369L62.688 0.699999H65.975L67.875 7.369C68.274 8.756 68.274 10.485 68.217 11.625H69.167C69.11 10.485 69.224 8.756 69.566 7.369L71.181 0.699999H74.411L70.877 14H66.697L64.322 4.253L61.947 14H57.786Z"
          fill="black"
        ></path>
      </g>
      <defs>
        <clipPath id="clip0_1307_4217">
          <rect width="75" height="15" fill="white"></rect>
        </clipPath>
      </defs>
    </svg>
  </div>
</section>