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

UI Components by Shuffle

Browse 13489 beautiful UI components — complete with full source code, visual editing, AI assistance, and more.

Framework

UI Library

Components

Bootstrap Component #6801

<section class="position-fixed bottom-0 start-0 bg-white bg-opacity-50 h-100 w-100 overflow-auto" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-end h-100">
    <div class="container py-10">
      <div class="p-10 w-100 mw-sm bg-white border rounded shadow">
        <div class="row align-items-center g-6">
          <div class="col-12">
            <div class="mw-md-xs">
              <h3 class="font-heading fw-semibold fs-9 mb-4">Cookie Policy</h3>
              <p class="mb-4 text-secondary fw-medium">We use third-party cookies in order to personalise your experience</p>
              <a class="d-flex flex-wrap align-items-center text-success link-success" href="#">
                <span class="me-2 fw-medium">Read our cookie policy</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="col-12">
            <div class="row g-4">
              <div class="col-12"><a class="btn btn-lg btn-success fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Allow</a></div>
              <div class="col-12">
                <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light fs-11 py-3 px-4 w-100 text-light-dark shadow" href="#">Decline</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6802

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mb-10 mw-md-xl">
            <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
            <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Get our Free Mobile App</h2>
            <p class="mb-6 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="row g-4">
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/app-store.svg" alt="">
                </a>
              </div>
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/google-play.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="position-relative d-flex justify-content-center">
            <img class="position-absolute start-0 top-0 ms-20 mt-n6" style="width: 30%;" src="flex-assets/elements/circle-2xl-orange.svg" alt="">
            <img class="position-absolute end-0 bottom-0 me-20 mb-12" style="width: 21%;" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
            <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/applications/mockup2.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6803

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center mw-md-4xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Numbers</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">We believe in the power of data</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Projects completed</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">APR</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Hours Saved Annually</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6804

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-10 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Rich text</span>
          <h2 class="font-heading mb-6 fs-6 text-white" style="letter-spacing: -1px;">Flex is a simple, beautiful tool that helps you work sanely</h2>
          <p class="mb-0 fs-9 fw-semibold text-secondary-light">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4 g-md-6">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow-sm" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-success-light shadow-sm" href="#">Learn More</a></div>
          </div>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary-light">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-6 fs-10 fw-medium text-secondary-light">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <p class="mb-0 fs-10 fw-medium text-secondary-light">Flex is the only saas business platform that lets you run your business on one platform. Flex is the only saas business platform that lets you run your business on one platform.</p>
        </div>
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary-light">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <ul class="list-unstyled">
            <li class="fs-10 fw-medium text-secondary-light">1.Enterprise software for startups</li>
            <li class="fs-10 fw-medium text-secondary-light">2.Time is money. Stop jumping from tool to tool with all the hassle of integrations.</li>
            <li class="fs-10 fw-medium text-secondary-light">3.Now you can manage your entire business on one platform.</li>
          </ul>
          <p class="mb-0 fs-10 fw-medium text-secondary-light">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6805

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
      <p class="mb-6 fs-9 fw-medium text-secondary">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex shadow"><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-success bg-white border rounded-start" href="#">Billed Monthly</a><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-secondary bg-light-light border rounded-end" href="#">Billed Annually</a></div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-6">
        <div class="bg-light-light rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Basic plan</h3>
                  <p class="mb-0 fw-medium text-secondary-light">For bigger teams</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>99</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="bg-light-light rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Lifetime</h3>
                  <p class="mb-0 fw-medium text-secondary-light">Unlimited possibilities</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>189</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6806

<section class="position-relative py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center mw-md-4xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Numbers</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">We believe in the power of data</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Projects completed</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">APR</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Hours Saved Annually</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="text-center">
          <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
          <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6807

<section class="position-relative py-32 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <img class="position-absolute top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 end-0 me-n36 mb-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute top-0 end-0 me-6 mt-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative container" style="z-index:1;">
    <img class="img-fluid mb-16 w-100" src="flex-assets/images/http-codes/error-code2.png" alt="">
    <div class="text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Page not found</h2>
      <p class="mb-12 fs-9 text-secondary">Something went wrong, so this page is broken.</p>
      <div class="row justify-content-center g-4 g-md-6">
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Go back to Homepage</a></div>
        <div class="col-12 col-md-auto">
          <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">Try Again</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6808

<section class="position-relative py-16 bg-light-light overflow-hidden">
  <div class="position-absolute bottom-0 start-0 bg-success w-100" style="height: 209px;"></div>
  <div class="container">
    <div class="position-relative py-16 px-16 px-md-24 bg-secondary-dark overflow-hidden rounded" style="background-image: url('flex-assets/elements/pattern-dark.png')">
      <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(28, 35, 45, 0) 0%, rgba(28, 35, 45, 0.9) 100%);"></div>
      <div class="position-relative row align-items-center g-16" style="z-index:10;">
        <div class="col-12 col-md-6">
          <div class="mw-md-md">
            <h2 class="mb-4 fs-6 font-heading text-white" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary-light">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4 g-md-6">
            <div class="col-12 col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto">
              <div class="bg-white rounded"><a class="btn btn-outline-light w-100 px-7 py-4 fs-10 fw-medium text-dark border rounded shadow" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6809

<section class="bg-white overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 pb-32 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png');">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="mb-16 mw-4xl mx-auto text-center">
          <span class="mb-4 badge bg-success-dark text-uppercase shadow">Get Started</span>
          <h2 class="mb-4 fs-6 font-heading" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
          <p class="mb-6 fs-9 fw-medium text-secondary">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
          <div class="row justify-content-center">
            <div class="col col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-auto">
            <div class="position-relative">
              <img class="position-absolute top-0 start-0 mt-n14 ms-n14" style="z-index: 20;" src="flex-assets/elements/circle-orange.svg" alt="">
              <img class="position-absolute bottom-0 end-0 me-n12 mb-n10" src="flex-assets/elements/dots-blue.svg" alt="">
              <img class="position-relative img-fluid" style="z-index: 10;" src="flex-assets/images/cta/work2.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6810

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Projects completed</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">APR</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Hours Saved Annually</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6811

<section class="position-relative pt-20 pb-32 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="container">
    <div class="position-relative" style="z-index: 10;">
      <div class="mb-16 mw-4xl mx-auto text-center">
        <span class="mb-4 badge bg-success-dark text-uppercase shadow">Get Started</span>
        <h2 class="mb-4 fs-6 font-heading" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
        <p class="mb-6 fs-9 fw-medium text-secondary">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <div class="row justify-content-center">
          <div class="col col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-auto">
          <div class="position-relative">
            <img class="position-absolute top-0 start-0 mt-n14 ms-n14" style="z-index: 20;" src="flex-assets/elements/circle-orange.svg" alt="">
            <img class="position-absolute bottom-0 end-0 me-n12 mb-n10" src="flex-assets/elements/dots-blue.svg" alt="">
            <img class="position-relative img-fluid" style="z-index: 10;" src="flex-assets/images/cta/work2.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6812

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6">
          <div class="position-relative d-flex justify-content-center">
            <div class="overflow-hidden rounded-1" style="max-width: 456px; height: 456px;">
              <video class="h-100" poster="flex-assets/images/testimonials/avatar3.png" muted="">
                <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
              </video>
              <a class="position-absolute top-50 start-50 translate-middle text-success link-success" href="#">
                <svg width="64" height="64" viewbox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="32" cy="32" r="32" fill="currentColor"></circle>
                  <path d="M40.5 31.13L26.5 23.05C26.348 22.9622 26.1755 22.916 26 22.916C25.8245 22.916 25.652 22.9622 25.5 23.05C25.3474 23.1381 25.2208 23.265 25.133 23.4177C25.0452 23.5705 24.9993 23.7438 25 23.92V40.08C24.9993 40.2562 25.0452 40.4295 25.133 40.5823C25.2208 40.735 25.3474 40.8619 25.5 40.95C25.652 41.0378 25.8245 41.084 26 41.084C26.1755 41.084 26.348 41.0378 26.5 40.95L40.5 32.87C40.6539 32.7828 40.7819 32.6563 40.871 32.5035C40.96 32.3506 41.007 32.1769 41.007 32C41.007 31.8231 40.96 31.6494 40.871 31.4965C40.7819 31.3437 40.6539 31.2172 40.5 31.13ZM27 38.35V25.65L38 32L27 38.35Z" fill="white"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex flex-column justify-content-between h-100">
            <div class="mb-6 d-block">
              <span class="badge mb-0 bg-success-dark text-success text-uppercase shadow">Quotes</span>
            </div>
            <div class="mw-md-xl">
              <div class="position-relative mb-8 mw-md-5xl mx-auto">
                <h2 class="position-relative mb-0 font-heading fs-6 fw-semibold text-white" style="z-index: 1; letter-spacing: -1px;">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
                <img class="position-absolute top-0 start-0 mt-n6 ms-n7" src="flex-assets/elements/quote-top-dark.svg" alt="">
                <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-dark.svg" alt="">
              </div>
              <h3 class="mb-2 fs-8 fw-semibold text-white">Darren Dunlap</h3>
              <p class="mb-8 fs-10 text-secondary-light fw-medium">CEO &amp; Founder at Flex.co</p>
              <div class="d-inline-flex"><a class="bg-dark-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="mx-3 bg-success rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="bg-dark-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6813

<section class="bg-white overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-28 bg-light-light">
    <div class="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="row align-items-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h2 class="mb-4 fs-6 font-heading" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
              <p class="mb-0 fs-9 fw-medium text-secondary">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
              <div class="col-12 col-md-auto">
                <div class="bg-white rounded"><a class="btn btn-outline-light w-100 px-7 py-4 fs-10 fw-medium text-dark border rounded shadow" href="#">Learn More</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6814

<section class="position-fixed bottom-0 start-0 bg-white bg-opacity-50 h-100 w-100 overflow-auto" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-end h-100">
    <div class="container py-10">
      <div class="p-10 w-100 mw-sm bg-light-dark border rounded shadow">
        <div class="row align-items-center g-6">
          <div class="col-12">
            <div class="mw-md-xs">
              <h3 class="font-heading fw-semibold fs-9 text-white mb-4">Cookie Policy</h3>
              <p class="mb-4 text-secondary-light fw-medium">We use third-party cookies in order to personalise your experience</p>
              <a class="d-flex flex-wrap align-items-center text-success link-success" href="#">
                <span class="me-2 fw-medium">Read our cookie policy</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="col-12">
            <div class="row g-4">
              <div class="col-12"><a class="btn btn-lg btn-success fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Allow</a></div>
              <div class="col-12"><a class="btn btn-lg btn-dark-light fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Decline</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6815

<section class="position-relative py-28 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="container">
    <div class="position-relative" style="z-index: 10;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-md">
            <h2 class="mb-4 fs-6 font-heading" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4">
            <div class="col-12 col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto">
              <div class="bg-white rounded"><a class="btn btn-outline-light w-100 px-7 py-4 fs-10 fw-medium text-dark border rounded shadow" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6816

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-10 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Rich text</span>
          <h2 class="font-heading mb-6 fs-6" style="letter-spacing: -1px;">Flex is a simple, beautiful tool that helps you work sanely</h2>
          <p class="mb-0 fs-9 fw-semibold text-secondary">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end g-4 g-md-6">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow-sm" href="#">Get Started</a></div>
            <div class="col-12 col-md-auto">
              <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-secondary border-0 shadow-sm" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <p class="mb-6 fs-10 fw-medium text-secondary">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <p class="mb-0 fs-10 fw-medium text-secondary">Flex is the only saas business platform that lets you run your business on one platform. Flex is the only saas business platform that lets you run your business on one platform.</p>
        </div>
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
          <ul class="list-unstyled">
            <li class="fs-10 fw-medium text-secondary">1.Enterprise software for startups</li>
            <li class="fs-10 fw-medium text-secondary">2.Time is money. Stop jumping from tool to tool with all the hassle of integrations.</li>
            <li class="fs-10 fw-medium text-secondary">3.Now you can manage your entire business on one platform.</li>
          </ul>
          <p class="mb-0 fs-10 fw-medium text-secondary">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6817

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Quotes</span>
      <div class="position-relative mb-16 mw-md-5xl mx-auto">
        <h2 class="position-relative mb-0 font-heading fs-5 fw-semibold" style="z-index: 1; letter-spacing: -1px;">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
        <img class="position-absolute top-0 start-0 mt-n6 ms-n7" src="flex-assets/elements/quote-top-green.svg" alt="">
        <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-green.svg" alt="">
      </div>
      <img class="mb-6" src="flex-assets/images/testimonials/avatar.png" alt="">
      <h3 class="mb-2 fs-8 fw-semibold text-light-dark">Darren Dunlap</h3>
      <p class="mb-8 fs-10 text-secondary fw-medium">CEO &amp; Founder at Flex.co</p>
      <div class="d-inline-flex"><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="mx-3 bg-success rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a></div>
    </div>
  </div>
</section>

Bootstrap Component #6818

<section class="position-relative pt-32 pb-24 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="p-8 pt-14 pb-16 bg-white mw-xl mx-auto rounded-3 shadow-sm">
      <div class="mb-7 text-center mw-md mx-auto">
        <div class="position-absolute top-0 start-50 translate-middle-x mt-n8 d-flex align-items-center justify-content-center mx-auto bg-success rounded-3" style="width: 64px; height: 64px;">
          <img class="img-fluid" style="height: 40px;" src="flex-assets/images/sign-in/logo.svg" alt="">
        </div>
        <h2 class="font-heading mb-4 fs-7">Sign in to your account</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">Start your demo version</p>
      </div>
      <form class="mw-sm mx-auto">
        <div class="mb-4 row g-6">
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signInInput10-1">Email</label>
              <input class="form-control text-secondary-dark shadow" id="signInInput10-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Email">
            </div>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signInInput10-2">Password</label>
              <input class="form-control text-secondary-dark shadow" id="signInInput10-2" type="password" aria-describedby="passwordHelp" value="**********************" placeholder="Password">
            </div>
          </div>
        </div>
        <div class="mb-6 row align-items-center justify-content-between g-2">
          <div class="col-auto">
            <div class="form-check">
              <input class="form-check-input shadow" id="flexCheckDefault" type="checkbox" value="">
              <label class="form-check-label fs-13 fw-medium text-light-dark" for="flexCheckDefault">Remember me</label>
            </div>
          </div>
          <div class="col-auto"><a class="fs-13 fw-medium text-success link-success" href="#">Forgot your password?</a></div>
        </div>
        <div class="mb-6 row">
          <div class="col-12">
            <button class="btn btn-lg btn-success fs-11 py-3 w-100 text-success-light shadow" type="submit">Sign In</button>
          </div>
        </div>
        <p class="mb-0 fs-13 fw-medium text-light-dark text-center">
          <span>Don&rsquo;t have an account?</span>
          <a class="text-success link-success" href="#">Sign up</a>
        </p>
      </form>
    </div>
  </div>
</section>

Bootstrap Component #6819

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6">
          <div class="position-relative d-flex justify-content-center">
            <div class="overflow-hidden rounded-1" style="max-width: 456px; height: 456px;">
              <video class="h-100" poster="flex-assets/images/testimonials/avatar3.png" muted="">
                <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
              </video>
              <a class="position-absolute top-50 start-50 translate-middle text-success link-success" href="#">
                <svg width="64" height="64" viewbox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="32" cy="32" r="32" fill="currentColor"></circle>
                  <path d="M40.5 31.13L26.5 23.05C26.348 22.9622 26.1755 22.916 26 22.916C25.8245 22.916 25.652 22.9622 25.5 23.05C25.3474 23.1381 25.2208 23.265 25.133 23.4177C25.0452 23.5705 24.9993 23.7438 25 23.92V40.08C24.9993 40.2562 25.0452 40.4295 25.133 40.5823C25.2208 40.735 25.3474 40.8619 25.5 40.95C25.652 41.0378 25.8245 41.084 26 41.084C26.1755 41.084 26.348 41.0378 26.5 40.95L40.5 32.87C40.6539 32.7828 40.7819 32.6563 40.871 32.5035C40.96 32.3506 41.007 32.1769 41.007 32C41.007 31.8231 40.96 31.6494 40.871 31.4965C40.7819 31.3437 40.6539 31.2172 40.5 31.13ZM27 38.35V25.65L38 32L27 38.35Z" fill="white"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex flex-column justify-content-between h-100">
            <div class="mb-6 d-block">
              <span class="badge mb-0 bg-success-dark text-success text-uppercase shadow">Quotes</span>
            </div>
            <div class="mw-md-xl">
              <div class="position-relative mb-8 mw-md-5xl mx-auto">
                <h2 class="position-relative mb-0 font-heading fs-6 fw-semibold" style="z-index: 1; letter-spacing: -1px;">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
                <img class="position-absolute top-0 start-0 mt-n6 ms-n7" src="flex-assets/elements/quote-top-green.svg" alt="">
                <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-green.svg" alt="">
              </div>
              <h3 class="mb-2 fs-8 fw-semibold text-light-dark">Darren Dunlap</h3>
              <p class="mb-8 fs-10 text-secondary fw-medium">CEO &amp; Founder at Flex.co</p>
              <div class="d-inline-flex"><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="mx-3 bg-success rounded-pill" href="#" style="width: 12px; height: 12px;"></a><a class="bg-light rounded-pill" href="#" style="width: 12px; height: 12px;"></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6820

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="#2A3342"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container pb-12" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="mw-md-xs">
            <div class="d-flex mb-4">
              <a href="#">
                <img class="img-fluid" src="flex-assets/logos/flex-light-green.svg" alt="">
              </a>
            </div>
            <p class="fs-10 fw-medium text-secondary-light">Launch your own Software As A Service Application with Flex Solutions.</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <div class="mw-md-xs">
            <h3 class="font-heading mb-5 fs-10 text-white">Product</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Features</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Solutions</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Pricing</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Tutorials</a></li>
              <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Updates</a></li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <div class="mw-md-xs">
            <h3 class="font-heading mb-5 fs-10 text-white">Remaining</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Blog</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Newsletter</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Help Centre</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Careers</a></li>
              <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary-light" href="#">Support</a></li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="mw-md-sm">
            <h3 class="font-heading mb-5 fs-10 text-white">Newsletter</h3>
            <div class="row g-4 justify-content-center">
              <div class="col">
                <div class="form-group">
                  <input class="form-control text-secondary-dark p-3 shadow" id="footerInput14-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Enter email">
                </div>
              </div>
              <div class="col-12 col-lg-auto">
                <button class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" type="submit">Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-relative border-bottom border-light-dark" style="z-index: 1;"></div>
    <div class="position-relative container" style="z-index: 1;">
      <p class="mb-0 pt-10 pb-16 fs-12 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
    </div>
  </div>
</section>

1
...
338
339
340
341
342
343
344
...
675

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.