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 Gradia library

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

Framework

UI Library

Components

Bootstrap Component #181

<section class="pt-24 pb-32 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-20">
      <h2 class="fs-10 fw-semibold text-center mb-4" >Got questions?</h2>
      <p class="fs-17 text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
    </div>
    <div class="mw-md-6xl mx-auto">
      <div class="row g-20 mb-10">
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Is it really unlimited downloads?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Is it really unlimited downloads?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="row g-20 mb-10">
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Do you offer discounts on annual plans?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Do you offer discounts on annual plans?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="row g-20 mb-24">
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >What kind of file do you offer with the packages?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >What kind of file do you offer with the packages?</h3>
          <p class="mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="d-flex justify-content-center"><a class="d-inline-block mx-auto nav-link px-0 fs-18" href="#">
          <p class="fw-medium mb-1" >Didn&rsquo;t find the answer? Contact us here</p>
          <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a></div>
    </div>
  </div>
</section>

Bootstrap Component #182

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-24">
      <h2 class="fs-10 text-secondary mb-5" >Team Members</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="mw-6xl mx-auto">
      <div class="container">
        <div class="row g-12">
          <div class="col-12 col-sm-6 col-lg-4">
            <div class="text-center bg-white p-16 mb-12 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md.png" alt=""/>
              <h3 class="fs-17 mb-1" >Darlene Robertson</h3>
              <p class="text-muted mb-0" >Co-Founder, CEO </p>
            </div>
            <div class="text-center bg-white p-16 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md4.png" alt=""/>
              <h3 class="fs-17 mb-1" >Esther Howard</h3>
              <p class="text-muted mb-0" >Software Developer</p>
            </div>
          </div>
          <div class="mt-lg-28 col-12 col-sm-6 col-lg-4">
            <div class="text-center bg-white p-16 mb-12 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md2.png" alt=""/>
              <h3 class="fs-17 mb-1" >Albert Flores</h3>
              <p class="text-muted mb-0" >Co-Founder, CTO</p>
            </div>
            <div class="text-center bg-white p-16 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md5.png" alt=""/>
              <h3 class="fs-17 mb-1" >Darrell Steward</h3>
              <p class="text-muted mb-0" >Software Developer</p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-lg-4">
            <div class="text-center bg-white p-16 mb-12 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md3.png" alt=""/>
              <h3 class="fs-17 mb-1" >Leslie Alexander</h3>
              <p class="text-muted mb-0" >Chief Marketing Officer</p>
            </div>
            <div class="text-center bg-white p-16 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md6.png" alt=""/>
              <h3 class="fs-17 mb-1" >Annette Black</h3>
              <p class="text-muted mb-0" >CMO</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #183

<section class="py-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row g-10">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >43%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>
            <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >79%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>
            <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >16%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>
            <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 px-0">
        <div class="h-100 p-7 rounded-3">
          <h2 class="fs-13 mb-4" >Looking for growth?</h2>
          <p class="text-muted mb-7" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum, amet, neque vestibulum elit mi vitae lacus.</p>
          <div class="d-inline-block rounded-1" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
            <button class="btn btn-light fs-18 px-7 py-4 fw-bold" type="button" >Book A Free Call</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #184

<section class="py-28 bg-white overflow-hidden">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <div class="row g-7">
            <div class="col-auto">
              <div class="d-flex align-items-center justify-content-center rounded-pill" style="background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%); width: 52px; height: 52px;">
                <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.25 20.5833V10.9095C3.25 10.1851 3.61205 9.50861 4.21482 9.10676L11.7982 4.05121C12.5259 3.56602 13.4741 3.56602 14.2019 4.05121L21.7852 9.10676C22.3879 9.50861 22.75 10.1851 22.75 10.9095V20.5833M3.25 20.5833C3.25 21.7799 4.22005 22.75 5.41667 22.75H20.5833C21.78 22.75 22.75 21.7799 22.75 20.5833M3.25 20.5833L10.5625 15.7083M22.75 20.5833L15.4375 15.7083M3.25 10.8333L10.5625 15.7083M22.75 10.8333L15.4375 15.7083M15.4375 15.7083L14.2019 16.5321C13.4741 17.0173 12.5259 17.0173 11.7982 16.5321L10.5625 15.7083" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
            <div class="col">
              <h2 class="fs-13 fw-semibold mb-4" >Join our newsletter</h2>
              <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-xl ms-auto">
          <div class="row g-0 bg-white border overflow-hidden rounded-1 mb-5">
            <div class="col">
              <input class="w-100 px-5 py-4 d-block border-0" type="text" placeholder="Your email address"/>
            </div>
            <div class="col-auto">
              <div class="h-100" style="padding: 2px;">
                <button class="btn btn-secondary h-100 px-7 text-uppercase border-0" type="button" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%); letter-spacing: 1px;">Subscribe now</button>
              </div>
            </div>
          </div>
          <p class="fs-19 text-dark mb-0" >We never share your information to any third party</p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #185

<section class="position-relative pt-28 pb-32 pb-md-0 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);"><img class="position-absolute start-0 top-0 h-100" src="gradia-assets/elements/contact/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-md-lg">
      <h2 class="fs-10 fw-semibold text-secondary mb-7" >We&rsquo;ve got your back!</h2>
      <p class="fs-16 text-muted mw-md-md mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p>
    </div>
    <div class="mw-md-7xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-md-6 align-self-end"><img class="img-fluid" src="gradia-assets/images/contact/woman.png" alt=""/></div>
        <div class="col-12 col-md-6">
          <div class="mw-md-lg bg-white p-8 mb-8 rounded-3">
            <h3 class="fs-16 mb-3" >Get Started from Tutorials</h3>
            <p class="fs-17 text-muted mw-md-xs" >Contact us anytime, from anywhere. Get in touch.</p><a class="nav-link d-inline-block px-0 fs-18" href="#">
              <p class="fw-medium mb-1" >Check All Our Tutorials</p>
              <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a>
          </div>
          <div class="mw-md-lg bg-white p-8 rounded-3">
            <h3 class="fs-16 mb-3" >24/7 Customer Support</h3>
            <p class="fs-17 text-muted mw-md-xs" >Contact us anytime, from anywhere. Get in touch.</p><a class="nav-link d-inline-block px-0 fs-18" href="#">
              <p class="fw-medium mb-1" >Visit Our Help Center</p>
              <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #186

<section class="py-24 bg-white overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6 border-end">
        <p class="fs-17 text-secondary mb-12" >Join 2400+ other companies who shifted to Shuffle</p>
        <div class="row gx-16 gy-7">
          <div class="col-12 col-md-6 col-lg-auto"><img class="img-fluid" src="gradia-assets/logos/brands/brand-small4.png" alt=""/></div>
          <div class="col-12 col-md-6 col-lg-auto"><img class="img-fluid" src="gradia-assets/logos/brands/brand-small3.png" alt=""/></div>
          <div class="col-12 col-md-6 col-lg-auto"><img class="img-fluid" src="gradia-assets/logos/brands/brand-small1.png" alt=""/></div>
          <div class="col-12 col-md-6 col-lg-auto"><img class="img-fluid" src="gradia-assets/logos/brands/brand-small5.png" alt=""/></div>
          <div class="col-12 col-md-6 col-lg-auto"><img class="img-fluid" src="gradia-assets/logos/brands/brand-small2.png" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-xs mx-auto"><img class="img-fluid mb-5" src="gradia-assets/logos/brands/capterra-logo.png" alt=""/>
          <h3 class="fs-17 fw-semibold mb-3" >Trusted by 1M+ customers</h3>
          <div class="row align-items-center g-1">
            <div class="col-auto">
              <div class="row g-1">
                <div class="col-auto"><img class="img-fluid" src="gradia-assets/elements/logos/star2.svg" alt=""/></div>
                <div class="col-auto"><img class="img-fluid" src="gradia-assets/elements/logos/star2.svg" alt=""/></div>
                <div class="col-auto"><img class="img-fluid" src="gradia-assets/elements/logos/star2.svg" alt=""/></div>
                <div class="col-auto"><img class="img-fluid" src="gradia-assets/elements/logos/star2.svg" alt=""/></div>
                <div class="col-auto"><img class="img-fluid" src="gradia-assets/elements/logos/star2.svg" alt=""/></div>
              </div>
            </div>
            <div class="col-auto">
              <h3 class="fs-18 fw-medium mb-0"><span >4.2/5 </span><span class="text-dark" >(45k Reviews)</span></h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #187

<section class="py-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-md mb-16">
      <h2 class="fs-10 mb-6" >Open positions</h2>
      <p class="fs-17 text-muted mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
    </div><a class="d-block" href="#">
      <div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
        <div class="row align-items-center py-8 g-4">
          <div class="col-12 col-md-4">
            <h3 class="fs-16 mb-0" >Full-Stack Developer</h3>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <p class="fs-17 mb-0" >Remote Only</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <div class="d-md-inline-block">
                <button class="btn btn-secondary fs-18 fw-medium px-4 py-3 w-100 h-100 rounded-3" type="button" >View Full Details</button>
              </div>
            </div>
          </div>
        </div>
      </div></a><a class="d-block" href="#">
      <div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
        <div class="row align-items-center py-8 g-4">
          <div class="col-12 col-md-4">
            <h3 class="fs-16 mb-0" >Junior Graphic Designer</h3>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <p class="fs-17 mb-0" >Remote Only</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <div class="d-md-inline-block">
                <button class="btn btn-secondary fs-18 fw-medium px-4 py-3 w-100 h-100 rounded-3" type="button" >View Full Details</button>
              </div>
            </div>
          </div>
        </div>
      </div></a><a class="d-block" href="#">
      <div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
        <div class="row align-items-center py-8 g-4">
          <div class="col-12 col-md-4">
            <h3 class="fs-16 mb-0" >Lead Software Engineer - Data</h3>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <p class="fs-17 mb-0" >Remote Only</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <div class="d-md-inline-block">
                <button class="btn btn-secondary fs-18 fw-medium px-4 py-3 w-100 h-100 rounded-3" type="button" >View Full Details</button>
              </div>
            </div>
          </div>
        </div>
      </div></a><a class="d-block" href="#">
      <div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
        <div class="row align-items-center py-8 g-4">
          <div class="col-12 col-md-4">
            <h3 class="fs-16 mb-0" >Senior Digital Designer</h3>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <p class="fs-17 mb-0" >Remote Only</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <div class="d-md-inline-block">
                <button class="btn btn-secondary fs-18 fw-medium px-4 py-3 w-100 h-100 rounded-3" type="button" >View Full Details</button>
              </div>
            </div>
          </div>
        </div>
      </div></a><a class="d-block" href="#">
      <div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
        <div class="row align-items-center py-8 g-4">
          <div class="col-12 col-md-4">
            <h3 class="fs-16 mb-0" >SEM Specialist</h3>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <p class="fs-17 mb-0" >Remote Only</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="d-flex justify-content-md-end">
              <div class="d-md-inline-block">
                <button class="btn btn-secondary fs-18 fw-medium px-4 py-3 w-100 h-100 rounded-3" type="button" >View Full Details</button>
              </div>
            </div>
          </div>
        </div>
        <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
      </div></a>
  </div>
</section>

Bootstrap Component #188

<section class="pt-28 overflow-hidden" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);">
  <div class="container">
    <div class="container">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-xl">
            <h2 class="fs-7 text-white mb-6" >Book free meetings with our experts.</h2>
            <p class="fs-16 text-white mb-9" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            <button class="btn btn-light fs-17 py-4 px-8 fw-bold mb-7" type="button" >Buy for $49.99 </button>
            <div class="d-flex align-items-center text-white">
              <p class="mb-0 me-3" >Compatible</p>
              <svg width="13" height="16" viewbox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.6651 11.409C12.3187 12.176 12.1534 12.5183 11.7074 13.196C11.0861 14.1423 10.2094 15.321 9.12305 15.331C8.15805 15.34 7.91005 14.703 6.60005 14.7106C5.29005 14.7183 5.01705 15.3423 4.05205 15.3333C2.96572 15.3236 2.13572 14.2593 1.51372 13.3123C-0.224946 10.6656 -0.406613 7.55997 0.665721 5.90897C1.42772 4.73497 2.63039 4.04897 3.76072 4.04897C4.91172 4.04897 5.63539 4.67997 6.58739 4.67997C7.51072 4.67997 8.07305 4.04797 9.40405 4.04797C10.4101 4.04797 11.4761 4.59564 12.2357 5.54197C9.74672 6.90564 10.1514 10.4586 12.6651 11.409Z" fill="white"></path>
                <path d="M8.53461 2.392C9.01828 1.77133 9.38494 0.895667 9.25161 0C8.46161 0.054 7.53828 0.556667 6.99894 1.21167C6.50928 1.806 6.10495 2.68767 6.26228 3.54467C7.12395 3.57167 8.01628 3.05667 8.53461 2.392Z" fill="white"></path>
              </svg>
              <svg class="mx-3" width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.99919 0.666748H0.33252V7.33341H6.99919V0.666748Z" fill="white"></path>
                <path d="M14.3324 0.666748H7.66577V7.33341H14.3324V0.666748Z" fill="white"></path>
                <path d="M6.99919 8.00012H0.33252V14.6668H6.99919V8.00012Z" fill="white"></path>
                <path d="M14.3324 8.00012H7.66577V14.6668H14.3324V8.00012Z" fill="white"></path>
              </svg>
              <svg width="12" height="14" viewbox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.33321 10.5002C2.33321 10.821 2.5957 11.0835 2.91651 11.0835H3.49982V13.125C3.49982 13.6092 3.89063 14 4.37477 14C4.85891 14 5.24973 13.6092 5.24973 13.125V11.0835H6.41633V13.125C6.41633 13.6092 6.80715 14 7.29129 14C7.77543 14 8.16624 13.6092 8.16624 13.125V11.0835H8.74954C9.07036 11.0835 9.33285 10.821 9.33285 10.5002V4.66715H2.33321V10.5002ZM0.874954 4.66715C0.390813 4.66715 0 5.05797 0 5.54211V9.62523C0 10.1094 0.390813 10.5002 0.874954 10.5002C1.3591 10.5002 1.74991 10.1094 1.74991 9.62523V5.54211C1.74991 5.05797 1.3591 4.66715 0.874954 4.66715ZM10.7911 4.66715C10.307 4.66715 9.91615 5.05797 9.91615 5.54211V9.62523C9.91615 10.1094 10.307 10.5002 10.7911 10.5002C11.2752 10.5002 11.6661 10.1094 11.6661 9.62523V5.54211C11.6661 5.05797 11.2752 4.66715 10.7911 4.66715ZM7.89209 1.26066L8.6533 0.499453C8.76704 0.385709 8.76704 0.201969 8.6533 0.0882246C8.53955 -0.0255195 8.35581 -0.0255195 8.24207 0.0882246L7.37878 0.948596C6.91214 0.718192 6.39008 0.584032 5.83303 0.584032C5.27306 0.584032 4.74809 0.718192 4.27853 0.951513L3.41232 0.0853081C3.29858 -0.028436 3.11484 -0.028436 3.00109 0.0853081C2.88735 0.199052 2.88735 0.382793 3.00109 0.496537L3.76522 1.26066C2.89902 1.89938 2.33321 2.92599 2.33321 4.08385H9.33285C9.33285 2.92308 8.76413 1.89646 7.89209 1.26066ZM4.66642 2.91724H4.08312V2.33394H4.66642V2.91724ZM7.58294 2.91724H6.99964V2.33394H7.58294V2.91724Z" fill="white"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 d-flex justify-content-center">
          <div><img class="img-fluid" src="gradia-assets/images/cta/mobile.png" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #189

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-xl mx-auto text-center mb-20">
      <h2 class="fs-10 text-secondary mb-5" >Start with the right plan</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
      <div class="mx-auto d-flex align-items-center justify-content-between border rounded-pill" style="padding: 2px; max-width: 270px;"><a class="py-3 px-8 fs-20 fw-semibold text-white text-uppercase rounded-pill" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);" href="#">Monthly</a><a class="py-3 px-8 fs-20 fw-semibold text-secondary text-uppercase bg-white rounded-pill" style="letter-spacing: 1px;" href="#" >Yearly</a></div>
    </div>
    <div class="container" style="overflow-x: auto; width: 100%">
      <div class="row g-6" style="width: 1524px">
        <div class="col">
          <div class="row">
            <div class="col-12" style="height: 110px;"></div>
            <div class="d-flex align-items-center col-12 py-3 pt-6 border-bottom border-top" style="height: 69px;">
              <p class="fs-17 mb-0" >Cloud Storage</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Maximum Interval Time</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Number of Websites</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Custom Domain</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Queries</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Email Accounts</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >Email Notification</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <p class="fs-17 mb-0" >SMS Notification</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col-12 pb-7" style="height: 110px;">
              <h2 class="fs-16 mb-2" >Free</h2>
              <h3 class="fs-14 mb-2" >$0</h3>
              <p class="fs-19 text-muted mb-0" >Best for freelancers</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 pt-6 border-bottom border-top" style="height: 69px;">
              <h3 class="fs-17 fw-semibold mb-0" >5 GB</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >15 mins</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >1</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >2</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >50</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >5</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 18L18 6M6 6L18 18" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 pt-6">
              <button class="btn btn-outline-light-dark fs-18 text-black fw-bold px-10 py-3" type="button" >Choose</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col-12 pb-7" style="height: 110px;">
              <h2 class="fs-16 mb-2" >Starter</h2>
              <h3 class="fs-14 mb-2" >$9/mo</h3>
              <p class="fs-19 text-muted mb-0" >Best for small agecny</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 pt-6 border-bottom border-top" style="height: 69px;">
              <h3 class="fs-17 fw-semibold mb-0" >100 GB</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >5 mins</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >10</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >20</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >150</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 pt-6">
              <button class="btn btn-outline-light fs-18 text-white fw-bold px-10 py-3" type="button" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);">Choose</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col-12 pb-7" style="height: 110px;">
              <h2 class="fs-16 mb-2" >Professional</h2>
              <h3 class="fs-14 mb-2" >$49/mo</h3>
              <p class="fs-19 text-muted mb-0" >Best for big agency</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 pt-6 border-bottom border-top" style="height: 69px;">
              <h3 class="fs-17 fw-semibold mb-0" >500 GB</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >No Intervarl</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >100</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >500</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 pt-6">
              <button class="btn btn-outline-light-dark fs-18 text-black fw-bold px-10 py-3" type="button" >Choose</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col-12 pb-7" style="height: 110px;">
              <h2 class="fs-16 mb-2" >Exclusive</h2>
              <h3 class="fs-14 mb-2" >$99/mo</h3>
              <p class="fs-19 text-muted mb-0" >Best for enterprises</p>
            </div>
            <div class="d-flex align-items-center col-12 py-3 pt-6 border-bottom border-top" style="height: 69px;">
              <h3 class="fs-17 fw-semibold mb-0" >2 TB</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >No Intervarl</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <h3 class="fs-17 fw-semibold mb-0" >Unlimited</h3>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 py-3 border-bottom" style="height: 54px;">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
            </div>
            <div class="d-flex align-items-center col-12 pt-6">
              <button class="btn btn-outline-light-dark fs-18 text-black fw-bold px-10 py-3" type="button" >Choose</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #190

<section class="py-32 bg-light-light overflow-hidden">
  <div class="container">
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row align-items-center g-16">
          <div class="col-12 col-md-7"><img class="mb-12" src="gradia-assets/elements/testimonials/quote.svg" alt=""/>
            <h2 class="fs-11 fw-semibold mb-8 lh-sm" >You made it so simple. Our new site is so much faster and easier to work with than my old site. I just choose the page, make the change.</h2>
            <p class="fs-16 text-muted mb-0" >Daniel Jonas, Project Manager at Kramer.io</p>
          </div>
          <div class="col-12 col-md-5 d-flex justify-content-center">
            <div class="d-inline-block p-1 rounded-pill" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"><img class="img-fluid rounded-pill" src="gradia-assets/images/testimonials/man.jpg" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #191

<section class="py-36 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-xl">
          <div class="d-inline-block px-4 py-3 mb-7 rounded-3" style="background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
            <h3 class="fs-20 fw-semibold text-uppercase text-white mb-0" style="letter-spacing: 1px;" >Rated #1 on G2</h3>
          </div>
          <h1 class="fs-11 fw-semibold text-secondary mb-5 lh-sm" >Learn marketing from the industry experts</h1>
          <p class="fs-16 text-secondary mb-9 mw-md-md" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <div class="d-inline-block rounded-1" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
            <button class="btn btn-light fs-18 px-9 py-5 fw-bold" type="button" >Join the Event</button>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="text-center"><img class="mb-4" src="gradia-assets/images/cta/avatar.png" alt=""/>
                <h3 class="fs-16 text-secondary mb-1" >Albert Flores</h3>
                <p class="fs-20 text-muted mb-0" >Digital Marketer @ Grower.io</p>
              </div>
            </div>
            <div class="col mt-24">
              <div class="text-center"><img class="mb-4" src="gradia-assets/images/cta/avatar2.png" alt=""/>
                <h3 class="fs-16 text-secondary mb-1" >Bessie Cooper</h3>
                <p class="fs-20 text-muted mb-0" >Product Manager @ Innovate</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #192

<section class="pt-24 pb-16 bg-white overflow-hidden">
  <div class="container">
    <div class="text-center"><a class="d-inline-block mb-16" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a>
      <ul class="nav justify-content-center border-bottom pb-8">
        <li class="nav-item"><a class="nav-link px-5" href="#">
            <h3 class="fs-18 fw-medium text-secondary mb-0" >Features</h3></a></li>
        <li class="nav-item"><a class="nav-link px-5" href="#">
            <h3 class="fs-18 fw-medium text-secondary mb-0" >Pricing</h3></a></li>
        <li class="nav-item"><a class="nav-link px-5" href="#">
            <h3 class="fs-18 fw-medium text-secondary mb-0" >Affiliate Program</h3></a></li>
        <li class="nav-item"><a class="nav-link px-5" href="#">
            <h3 class="fs-18 fw-medium text-secondary mb-0" >Press Kit</h3></a></li>
      </ul>
      <p class="fs-19 text-muted pt-8 mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
    </div>
  </div>
</section>

Bootstrap Component #193

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-secondary py-5 py-lg-3 px-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-secondary overflow-auto"  >
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a><a class="navbar-close text-white" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-16">
        <ul class="nav flex-column">
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div>
        <button class="btn btn-secondary px-4 py-3 w-100 mb-5 rounded-1" type="button">
          <h4 class="fs-17 fw-medium text-white mb-0" >Login</h4>
        </button>
        <div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 w-100 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
    </nav>
  </div>
</section>

Bootstrap Component #194

<section class="position-relative pt-28 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-2xl mx-auto text-center mb-20">
      <h4 class="fs-20 fw-semibold text-uppercase text-muted mb-5" >The features that made us special</h4>
      <h2 class="fs-10 mb-0 lh-sm" >Track every single moment of your customers</h2>
    </div>
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row g-14">
          <div class="col-12 col-md-4">
            <div class="h-100" style="padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
              <div class="h-100 p-8 bg-white" style="border-radius: 8px;"><img class="position-relative mb-12" style="left:-8px;" src="gradia-assets/images/features/chart.png" alt=""/>
                <h3 class="fs-16 mb-5" >Get live reports</h3>
                <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="h-100" style="padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
              <div class="h-100 p-8 bg-white" style="border-radius: 8px;"><img class="position-relative mb-12" src="gradia-assets/images/features/messages.png" alt=""/>
                <h3 class="fs-16 mb-5" >Chat with customers</h3>
                <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="h-100" style="padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
              <div class="h-100 p-8 bg-white" style="border-radius: 8px;"><img class="position-relative mb-12" style="left:-16px;" src="gradia-assets/images/features/warning.png" alt=""/>
                <h3 class="fs-16 mb-5" >Quality speed</h3>
                <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #195

<section class="position-relative py-36 bg-black overflow-hidden"><img class="position-absolute start-0 bottom-0" src="gradia-assets/elements/contact/radial2.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-sm">
          <h2 class="fs-10 fw-semibold text-white mb-7" >Get in touch</h2>
          <p class="fs-17 text-secondary-light mb-28" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          <div class="mb-10">
            <h3 class="fs-16 fw-medium text-white mb-4" >United States</h3>
            <p class="text-secondary-light mb-0" >support.usa@gradia.co</p>
            <p class="text-secondary-light mb-0" >+1 (495) 389 3995</p>
          </div>
          <div>
            <h3 class="fs-16 fw-medium text-white mb-4" >Canada</h3>
            <p class="text-secondary-light mb-0" >support.usa@gradia.co</p>
            <p class="text-secondary-light mb-0" >+1 (495) 389 3995</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-md ms-auto">
          <div class="p-8 bg-secondary rounded-3">
            <form class="mw-md-xl mx-auto">
              <div class="form-group mb-5">
                <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="contactsInput5-1" style="border-radius: 3px;" type="email" placeholder="Your full name"/>
              </div>
              <div class="form-group mb-5">
                <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="contactsInput5-2" style="border-radius: 3px;" type="email" placeholder="Your email address"/>
              </div>
              <div class="form-group mb-5">
                <textarea class="form-control text-dark bg-transparent" id="contactsInput5-3" rows="3" placeholder="Write message" style="height: 155px;"></textarea>
              </div>
              <button class="btn btn-light-light fs-20 w-100 px-11 py-5 text-uppercase mb-6 border-0" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">Send message</button>
              <p class="fs-19 text-center text-dark"><span >By clicking the send button, you agree with our </span><a class="text-dark text-decoration" href="#" style="text-decoration: underline;" >Terms &amp; Conditions</a></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #196

<section class="py-36 bg-white overflow-hidden">
  <div class="container">
    <div style="border-radius: 15px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
      <div class="row align-items-center">
        <div class="col-12 col-md-8">
          <div class="p-16 px-xxl-24 py-xxl-20">
            <h2 class="fs-7 mb-6" >Let&rsquo;s make things easier</h2>
            <p class="fs-17 mw-md-lg text-muted mb-9" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
            <div class="d-md-inline-block">
              <button class="btn btn-secondary fs-18 px-6 py-4 w-100 h-100" type="button" >Download Mobile Now</button>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="d-flex justify-content-center justify-content-md-end"><img class="img-fluid" style="object-fit: cover;" src="gradia-assets/images/applications/phone-screen.png" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #197

<section class="pt-24 pb-28 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-lg mx-auto mb-20">
      <h2 class="fs-11 text-center mb-5" >Grow fast, with us</h2>
      <p class="text-center text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="row g-16">
      <div class="col-12 col-md-6 border-end">
        <div class="mw-xs mx-auto text-center">
          <h2 class="d-inline-block fs-2 mb-11" style="letter-spacing: 2px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">98%</h2>
          <h3 class="fs-17 fw-semibold mb-3" >Average Satisfaction Rate</h3>
          <p class="text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-xs mx-auto text-center">
          <h2 class="fs-2 mb-11" style="letter-spacing: 2px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">117%</h2>
          <h3 class="fs-17 fw-semibold mb-3" >Average ROI on Ads</h3>
          <p class="text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #198

<section class="position-relative pt-16 pb-56 bg-white overflow-hidden"><img class="position-absolute start-50 bottom-0 translate-middle-x" src="gradia-assets/elements/http-codes/radial3.svg" alt=""/>
  <div class="container">
    <div class="text-center mb-36"><a class="d-inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a></div>
    <div class="d-flex flex-column align-items-center"><img class="img-fluid mb-11" src="gradia-assets/elements/http-codes/sad.svg" alt=""/>
      <h2 class="fs-7 mw-md-xl mx-auto text-center mb-12" >Oh no! The page does not exist.</h2>
      <button class="btn btn-light-light px-5 py-5 text-uppercase rounded" type="button" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%); border-radius: 3px;">
        <div class="d-flex align-items-center">
          <svg class="me-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg><span class="fs-20 mb-0" >Go back to Homepage</span>
        </div>
      </button>
    </div>
  </div>
</section>

Bootstrap Component #199

<section class="position-relative pt-24 pb-36 bg-black overflow-hidden"><img class="position-absolute end-0 top-0" src="gradia-assets/elements/teams/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-lg mb-20">
      <h2 class="fs-10 text-white mb-5" >Team Members</h2>
      <p class="text-secondary-light" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="container">
      <div class="row g-6">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="p-10 h-100 bg-white">
            <div class="d-flex justify-content-center mb-7"><img class="img-fluid" src="gradia-assets/images/teams/avatar-oval-md.png" alt=""/></div>
            <div class="text-center pb-8 border-bottom">
              <h3 class="fs-16" >Eleanor Pena</h3>
              <p class="fs-19 text-dark mb-0" >Team Leader</p>
            </div>
            <h3 class="mb-0 pt-8"><a class="nav-link fs-20 fw-semibold text-center text-uppercase" href="#" >Contact us</a></h3>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="p-10 h-100 bg-white">
            <div class="d-flex justify-content-center mb-7"><img class="img-fluid" src="gradia-assets/images/teams/avatar-oval-md2.png" alt=""/></div>
            <div class="text-center pb-8 border-bottom">
              <h3 class="fs-16" >Cameron Williamson</h3>
              <p class="fs-19 text-dark mb-0" >Software Developer</p>
            </div>
            <h3 class="mb-0 pt-8"><a class="nav-link fs-20 fw-semibold text-center text-uppercase" href="#" >Contact us</a></h3>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="p-10 h-100 bg-white">
            <div class="d-flex justify-content-center mb-7"><img class="img-fluid" src="gradia-assets/images/teams/avatar-oval-md3.png" alt=""/></div>
            <div class="text-center pb-8 border-bottom">
              <h3 class="fs-16" >Kathryn Murphy</h3>
              <p class="fs-19 text-dark mb-0" >Scrum Master</p>
            </div>
            <h3 class="mb-0 pt-8"><a class="nav-link fs-20 fw-semibold text-center text-uppercase" href="#" >Contact us</a></h3>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="p-10 h-100 bg-white">
            <div class="d-flex justify-content-center mb-7"><img class="img-fluid" src="gradia-assets/images/teams/avatar-oval-md4.png" alt=""/></div>
            <div class="text-center pb-8 border-bottom">
              <h3 class="fs-16" >Bessie Cooper</h3>
              <p class="fs-19 text-dark mb-0" >UI/UX Designer</p>
            </div>
            <h3 class="mb-0 pt-8"><a class="nav-link fs-20 fw-semibold text-center text-uppercase" href="#" >Contact us</a></h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #200

<section class="position-relative py-20 bg-secondary overflow-hidden"><img class="position-absolute w-100 h-100 top-50 start-50 translate-middle" src="gradia-assets/elements/cta/radial2.png" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row justify-content-sm-between align-items-md-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-xl">
          <h2 class="fs-10 text-white mb-0 lh-sm" >Get maximum results from all projects.</h2>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="container">
          <div class="row justify-content-md-end g-5">
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded.png" alt=""/></a></div>
            <div class="col-auto"><img src="gradia-assets/logos/brands/play-store-rounded.png" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
...
7
8
9
10
11

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.