Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #741

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-5xl">
      <div class="row align-items-end justify-content-between mb-24">
        <div class="col-lg-auto me-auto mb-12 mb-lg-0">
          <span class="badge mb-6 text-primary text-uppercase">Features</span>
          <h3 class="font-heading mb-6">Summarize your learning</h3>
          <p class="mw-2xl fs-5 text-light-dark mb-0">Summarize your learning effortlessly with in-platform note. Condense key takeaways and insights from any topic you've explored.</p>
        </div>
        <div class="col-lg-auto text-lg-end">
          <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-outline-light text-dark" href="#">Learn more</a></div>
        </div>
      </div>
      <img class="img-fluid w-100" src="solstice-assets/images/features/platform-primary2.png" alt="">
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #742

Bootstrap

Solstice

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="mb-8">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control mb-8" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Sign Up</button>
          <a class="btn w-100 d-flex flex-wrap btn-outline-light text-dark" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #743

Bootstrap

Solstice

<section class="py-20 pb-lg-24 pt-lg-40 bg-primary overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h1 class="font-heading d-none d-lg-inline-block text-info opacity-50 mb-24" style="font-size: 240px;">404</h1>
      <h1 class="font-heading d-none d-sm-inline-block d-lg-none text-info opacity-50 mb-12" style="font-size: 192px;">404</h1>
      <h1 class="font-heading d-inline-block d-sm-none text-info opacity-50 mb-6" style="font-size: 72px;">404</h1>
      <p class="display-3 fw-bold text-white mb-4">Sorry, that page could not be found.</p>
      <p class="text-primary-light mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
      <div><a class="btn btn-sm me-6 btn-link text-white p-0 fw-semibold" href="#">Back to Home</a><a class="btn btn-sm btn-link text-white p-0 fw-semibold" href="#">Support</a></div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #744

Bootstrap

Solstice

<section class="py-12 pb-md-24 pt-lg-24 pb-lg-40 bg-primary overflow-hidden">
  <div class="container">
    <div class="position-relative mw-lg mw-lg-5xl px-5 mx-auto">
      <div class="pt-14 px-8 px-md-14 pb-64 pb-lg-14 border border-info rounded-3">
        <div class="mw-lg">
          <h4 class="mb-16 fw-semibold text-white">“I just wanted to say that Solstice alone is a real lifesaver, but the platform is really next level!”</h4>
          <div class="d-flex flex-wrap align-items-start justify-content-between">
            <div>
              <span class="d-block fw-bold text-white">Hanna Stanton</span>
              <span class="d-block small text-white">Student</span>
            </div>
            <div>
              <button class="btn border-0 me-3 p-0 bg-info" style="width: 10px; height: 10px;"></button>
              <button class="btn me-3 p-0 bg-primary border-white" style="width: 14px; height: 14px;">
                <div class="bg-white rounded-pill" style="width: 10px; height: 10px;"></div>
              </button>
              <button class="btn border-0 p-0 bg-info" style="width: 10px; height: 10px;"></button>
            </div>
          </div>
        </div>
      </div>
      <div class="d-lg-none position-relative mt-n40 mt-lg-0" style="height: 512px;">
        <div class="position-absolute top-0 end-0 w-100 bg-info rounded-3" style="height: 512px; transform: rotate(10deg);"></div>
        <div class="position-absolute top-0 end-0 w-100 bg-primary-light rounded-3" style="height: 512px; transform: rotate(5deg);"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #745

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-8 mb-lg-0">
        <div>
          <h3 class="font-heading text-white mb-6">FAQ</h3>
          <div class="mw-sm mt-12">
            <p class="text-primary-light mb-0">Still have more questions?</p>
            <p class="text-primary-light mb-6">Talk to our customer happiness team</p>
            <div class="d-inline-block bg-white rounded-pill">
              <a class="btn btn-sm btn-outline-light text-dark" href="#">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.3333 1.66675H6.66663C3.33329 1.66675 1.66663 3.33341 1.66663 6.66675V17.5001C1.66663 17.9584 2.04163 18.3334 2.49996 18.3334H13.3333C16.6666 18.3334 18.3333 16.6667 18.3333 13.3334V6.66675C18.3333 3.33341 16.6666 1.66675 13.3333 1.66675ZM11.6666 12.7084H5.83329C5.49163 12.7084 5.20829 12.4251 5.20829 12.0834C5.20829 11.7417 5.49163 11.4584 5.83329 11.4584H11.6666C12.0083 11.4584 12.2916 11.7417 12.2916 12.0834C12.2916 12.4251 12.0083 12.7084 11.6666 12.7084ZM14.1666 8.54175H5.83329C5.49163 8.54175 5.20829 8.25842 5.20829 7.91675C5.20829 7.57508 5.49163 7.29175 5.83329 7.29175H14.1666C14.5083 7.29175 14.7916 7.57508 14.7916 7.91675C14.7916 8.25842 14.5083 8.54175 14.1666 8.54175Z" fill="#A3A3A3"></path>
                </svg>
                <span class="ms-2">Talk to us</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="mw-3xl mx-auto">
          <button class="btn btn-link border-0 border-bottom border-info mb-3 px-0 py-6 d-flex w-100 justify-content-between align-items-center text-start rounded-0">
            <span class="h5 text-white mb-0 me-6">What is Solstice? What is it for?</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #746

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-5">
          <p class="fs-6 fw-semibold text-primary-light">As seen in</p>
        </div>
        <div class="col-12 col-md-7">
          <div class="row">
            <div class="col-6 col-lg-3 mb-6 mb-sm-0">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
            </div>
            <div class="col-6 col-lg-3 mb-6 mb-sm-0">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
            </div>
            <div class="col-6 col-lg-3 mb-6 mb-lg-0">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
            </div>
            <div class="col-6 col-lg-3">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-light4.png" alt="">
            </div>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #747

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-20 text-center">
        <h3 class="font-heading text-white mb-4">How it works</h3>
        <p class="text-primary-light mb-0">What steps do I need to take to join?</p>
      </div>
      <div class="mw-xl mw-lg-5xl mx-auto pt-12 bg-secondary rounded-3 overflow-hidden">
        <div class="row">
          <div class="col-12 col-lg-6 mb-lg-0">
            <div class="px-6 px-lg-8 pb-16 mw-lg mx-auto">
              <div class="p-6 border-bottom border-secondary-dark">
                <div class="d-flex">
                  <span class="d-inline-block mt-n1">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 9.18C11.22 9.03 11.15 8.84 11.15 8.65C11.15 8.46 11.22 8.27 11.37 8.12C11.66 7.83 12.14 7.83 12.43 8.12L15.78 11.47C16.07 11.76 16.07 12.24 15.78 12.53L12.43 15.88C12.14 16.17 11.66 16.17 11.37 15.88C11.08 15.59 11.08 15.11 11.37 14.82L13.44 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z" fill="#FFC96D"></path>
                      <path d="M2.75 11.25C2.34 11.25 2 11.59 2 12C2 12.41 2.34 12.75 2.75 12.75H9V11.25H2.75Z" fill="#FFC96D"></path>
                    </svg>
                  </span>
                  <div class="ms-3">
                    <h6 class="mb-3 text-white">Create Account</h6>
                    <p class="text-secondary-light mb-0">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
                  </div>
                </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #748

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary position-relative overflow-hidden">
  <div class="position-absolute top-0 start-0 w-100">
    <div class="mw-6xl mx-auto d-flex align-items-start justify-content-between">
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_254_11540)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_254_11540" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_254_11539)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_254_11539" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-xl mx-auto">
      <div class="text-center mb-12">
        <h3 class="mb-6 text-white">Contact us</h3>
        <p class="text-primary-light mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
      </div>
      <div class="p-8 bg-white border border-light rounded-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #749

Bootstrap

Solstice

<section class="py-64 py-lg-32 position-relative bg-primary">
  <div class="position-absolute top-0 start-0 w-100">
    <div class="mw-6xl mx-auto d-flex align-items-start justify-content-between">
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_191_12192)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_191_12192" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_191_12191)" stroke="#FF8A0A"></path>
          <defs><linearGradient id="paint0_linear_191_12191" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8A0A"><stop offset="1" stop-color="#FF8A0A" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-2xl mx-auto text-center">
      <h3 class="font-heading text-white mb-4">
        <span>Join a</span>
        <span class="text-primary-light">vibrant</span>
        <span class="d-block">community of learners.</span>
      </h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #750

Bootstrap

Solstice

<section class="overflow-hidden">
  <div class="row">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Login</h4>
        <p class="mb-8">
          <span class="text-light-dark">New to Solstice?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Create new account</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <div class="mt-3 mb-8 text-end"><a class="d-inline-block small fw-semibold p-0" href="#">Forgot Password?</a></div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Login</button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #751

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <h3 class="font-heading text-center text-white mb-10">Careers at Solstice</h3>
      <div class="mb-24 p-6 bg-white rounded-2 border border-primary">
        <p class="mb-0">
          <span>Check out our</span>
          <a class="d-inline-flex align-items-center fw-bold" href="#">
            <span class="me-1">Open Roles</span>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="currentColor" stroke="currentColor"></path>
            </svg>
          </a>
          <span>at the bottom of the page</span>
        </p>
      </div>
      <div class="mb-24">
        <h4 class="mb-4 text-white">What we’re building</h4>
        <p class="text-primary-light mb-8">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
        <p class="text-primary-light mb-0">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
      </div>
      <div class="mb-24">
        <h4 class="mb-4 text-white">Benefits</h4>
        <p class="text-primary-light mb-16">We help our employees thrive</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #752

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 position-relative">
  <div class="position-absolute top-0 start-0 w-100 bg-primary-light">
    <div class="d-flex justify-content-center overflow-hidden py-12 pb-20 py-sm-24 pt-md-20 pb-md-32">
      <div class="flex-shrink-0 mt-n24 mt-md-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-md-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-md-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="flex-shrink-0 mt-n24 mt-md-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-md-3 col-lg-2">
        <div>
          <a class="d-inline-flex mb-8 mb-md-32 mb-lg-80 align-items-center text-dark fw-bold" href="#">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ms-2">Back to Blog</span>
          </a>
          <div class="d-none d-md-block pt-12 pt-md-64 pt-lg-44">
            <h6 class="mb-3">TABLE OF CONTENTS</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-1"><a class="btn d-block ps-6 pe-2 py-2 btn-outline-secondary-dark text-start border-0 lh-base" href="#">The Essence of Design Development</a></li>
              <li class="mb-1"><a class="btn d-block ps-6 pe-2 py-2 btn-outline-dark-light text-start border-0 lh-base" href="#">The Collaborative Symphony</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #753

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-info">
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="mw-3xl mx-auto mb-16 text-center">
        <h3 class="font-heading mb-6">Latest articles and releases</h3>
        <p class="text-muted mb-20">Discover the latest news, tips and user stories insights from Solstice.</p>
        <div class="mb-n3"><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-secondary border border-secondary-dark fw-semibold" href="#">All Articles</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-light bg-white fw-semibold" href="#">Getting Started</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-light bg-white fw-semibold" href="#">Learning Resources</a><a class="btn btn-sm mb-3 py-3 px-4 btn-light bg-white fw-semibold" href="#">Stories</a></div>
      </div>
      <div class="row mb-n8">
        <div class="col-12 col-sm-6 col-lg-4 mb-8">
          <a class="card bg-transparent h-100 border-0" href="#">
            <div class="position-relative rounded-2 overflow-hidden">
              <div class="position-absolute top-0 start-0">
                <svg width="159" height="156" viewBox="0 0 159 156" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M-30 81.9324V155.361C-30 155.714 -29.7141 156 -29.3615 156H21.62C21.9724 156 22.2585 155.714 22.2585 155.361V96.299C22.2585 57.5087 60.5087 19.2585 99.299 19.2585H158.361C158.714 19.2585 159 18.9724 159 18.62V-32.3615C159 -32.7139 158.714 -33 158.361 -33H84.9324C21.4572 -33 -30 18.4572 -30 81.9324Z" fill="#FFF2D6"></path>
                </svg>
              </div>
              <div class="position-absolute bottom-0 end-0">
                <svg width="150" height="158" viewBox="0 0 150 158" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FFF2D6"></path>
                </svg>
              </div>
              <img class="card-img-top rounded-0" src="solstice-assets/images/blog/picture1.png" style="height: 240px;" alt="...">
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #754

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary overflow-hidden">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row mb-16 mb-md-24">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md">
            <h3 class="font-heading text-white mb-4">One plan that fits</h3>
            <div class="mw-sm">
              <p class="text-primary-light mb-4">Simple one plan pricing that fits for everyone for the price of a cup of coffee.</p>
              <p class="text-primary-light mb-8">We offer a transparent monthly payment that covers everything our learning platform has to offer, with no hidden costs or transaction fees.</p>
            </div>
            <span class="d-block mb-4 fs-5 text-white fw-bold">What you’ll get</span>
            <ul class="list-unstyled mb-0 text-primary-light">
              <li class="mb-4">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="white"></path>
                </svg>
                <span class="ms-4">Create unlimited room</span>
              </li>
              <li class="mb-4">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="white"></path>
                </svg>
                <span class="ms-4">Host events and virtual study club</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #755

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="row mb-16 align-items-end">
      <div class="col-md-6 mb-8 mb-md-0">
        <div class="mw-sm mw-lg-lg">
          <h3 class="font-heading text-white mb-4">Join our events</h3>
          <p class="text-secondary-light mb-0">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
        </div>
      </div>
      <div class="col-md-6 text-md-end">
        <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-outline-light text-dark w-100" href="#">Sign up now</a></div>
      </div>
    </div>
    <div class="position-relative overflow-scroll p-4 mb-12">
      <div style="min-width: max-content;">
        <div class="position-relative p-6 rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
          <div class="position-absolute top-0 start-0 w-100 h-100 pb-6">
            <div class="h-100 w-100 bg-secondary rounded-3"></div>
          </div>
          <div class="position-relative bg-white p-6 rounded-3 h-100 overflow-hidden">
            <div class="position-absolute bottom-0 start-0 w-100 py-14" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 53.65%, #FFF 100%);"></div>
            <div class="d-flex mb-4 flex-wrap align-items-center justify-content-between">
              <div>
                <select class="form-select ps-1 py-1 pe-9 border-0 fw-bold" name="" id="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #756

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 overflow-hidden bg-primary">
  <div class="container">
    <div class="mw-lg mw-md-2xl mx-auto mw-lg-none">
      <div class="position-relative mb-20 mb-md-32">
        <div class="mb-64 mb-lg-32">
          <h1 class="font-heading mw-4xl mb-6 text-white fs-semiboldyuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuftrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr">On a mission to make learning fun</h1>
          <p class="mw-lg text-primary-light fs-5">Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
        </div>
        <div class="position-relative mb-20 mb-lg-32 mx-8">
          <div class="position-absolute top-0 end-0 mt-n52 me-8 me-xl-24" style="z-index: 1;">
            <div class="mw-xs ps-8 pe-6 py-8 bg-white rounded-3 border border-2 border-primary">
              <p class="fs-5 fw-semibold mb-12">“They shipping a platform that took learning to the next level. I can invite my friend to study in specific topic together in just two-click.”</p>
              <div class="d-flex align-items-center">
                <div class="d-inline-flex rounded-pill bg-warning overflow-hidden">
                  <img class="img-fluid d-block" src="solstice-assets/images/about/avatar-picture.png" alt="">
                </div>
                <div class="ms-4">
                  <span class="d-block fw-semibold">Rob Schapiro</span>
                  <span class="small text-light-dark">Student</span>
                </div>
              </div>
            </div>
          </div>
          <div class="position-absolute top-0 mt-n12 ms-6 start-0 w-100 h-100 bg-secondary rounded-3"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #757

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="text-center mb-24">
      <h3 class="font-heading mb-4">Discover features</h3>
      <p class="text-primary-light mb-0">Innovative features tailored to enhance your learning experience.</p>
    </div>
    <div class="row mb-n12">
      <div class="col-12 col-sm-6 col-lg-3 mb-12">
        <div class="mw-xs ps-4">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" rx="24" fill="#530031"></rect>
            <path d="M20.25 14V34H19.81C16.17 34 14 31.83 14 28.19V19.81C14 16.17 16.17 14 19.81 14H20.25Z" fill="white"></path>
            <path d="M33.5 19.81V22.75H22.25V14.5H28.19C29.9106 14.5 31.2238 15.0109 32.1064 15.8936C32.9891 16.7762 33.5 18.0894 33.5 19.81Z" fill="white" stroke="white"></path>
            <path d="M34 24.75V28.19C34 31.83 31.83 34 28.19 34H21.75V24.75H34Z" fill="white"></path>
          </svg>
          <div class="position-relative my-4">
            <div class="position-absolute top-0 start-0 py-3 ms-n4 border-2 border-start border-primary-light"></div>
            <h5 class="mb-1 text-white">Study room.</h5>
            <h5 class="mb-0 text-white">Personal or group.</h5>
          </div>
          <p class="text-primary-light">Optimize study environment with a personalized room, enhance focus and accommodate group study sessions.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-12">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #758

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary position-relative">
  <div class="container">
    <div class="py-12 px-6 px-md-14 border-top border-bottom border-info">
      <div class="row align-items-end">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md mw-lg-none mx-auto">
            <span class="badge mb-4 d-inline-flex align-items-center bg-primary-light text-primary border border-info">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1">Newsletter</span>
            </span>
            <h3 class="font-heading text-white mb-0">Join 14K people embrace fun learning</h3>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="mw-md mx-auto me-lg-0">
            <form action="">
              <div class="row mb-n3">
                <div class="col-md-auto flex-grow-1 mb-3">
                  <input class="form-control border-info" type="email" placeholder="Email address">
                </div>
                <div class="col-md-auto flex-shrink-0 mb-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #759

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading text-white mb-4">Get in touch</h3>
            <p class="text-secondary-light mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="my-10">
              <svg width="49" height="3" viewBox="0 0 49 3" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect><circle cx="17.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="24.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="31.5" cy="1.5" r="1.5" fill="#FFA632"></circle><rect x="37" y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect></svg>
            </div>
            <div class="position-relative mw-xs p-8 bg-secondary rounded-3">
              <div class="position-absolute start-0 top-0 mt-8 border-3 border-start border-white py-3"></div>
              <p class="display-5 fw-bold text-white mb-6">Technical Help desk</p>
              <a class="btn btn-sm d-inline-flex flex-wrap align-items-center btn-light bg-white border-light" href="#">
                <span class="me-2">Visit FAQ Center</span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 10H15.4167M15.4167 10L10.4167 5M15.4167 10L10.4167 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-7">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #760

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary">
  <div class="container">
    <div class="mw-6xl mx-auto d-flex justify-content-center border-top border-bottom border-secondary border-opacity-25">
      <div class="py-14 px-8 px-md-14 px-lg-32 text-center bg-secondary rounded-3">
        <span class="fs-5 fw-bold text-white mb-6">Total monthly learners</span>
        <span class="d-block text-primary-light h1 mb-4">160,320</span>
        <span class="fw-semibold text-white">and we’re just getting started.</span>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #741

Get the code for 13,400+ components

Bootstrap Component #742

Get the code for 13,400+ components

Bootstrap Component #743

Get the code for 13,400+ components

Bootstrap Component #744

Get the code for 13,400+ components

Bootstrap Component #745

Get the code for 13,400+ components

Bootstrap Component #746

Get the code for 13,400+ components

Bootstrap Component #747

Get the code for 13,400+ components

Bootstrap Component #748

Get the code for 13,400+ components

Bootstrap Component #749

Get the code for 13,400+ components

Bootstrap Component #750

Get the code for 13,400+ components

Bootstrap Component #751

Get the code for 13,400+ components

Bootstrap Component #752

Get the code for 13,400+ components

Bootstrap Component #753

Get the code for 13,400+ components

Bootstrap Component #754

Get the code for 13,400+ components

Bootstrap Component #755

Get the code for 13,400+ components

Bootstrap Component #756

Get the code for 13,400+ components

Bootstrap Component #757

Get the code for 13,400+ components

Bootstrap Component #758

Get the code for 13,400+ components

Bootstrap Component #759

Get the code for 13,400+ components

Bootstrap Component #760

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support