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 #641

Bootstrap

Solstice

<section class="py-20 pb-lg-24 pt-lg-40 bg-primary-light 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-light mb-24" style="font-size: 240px;">404</h1>
      <h1 class="font-heading d-none d-sm-inline-block d-lg-none text-info-light mb-12" style="font-size: 192px;">404</h1>
      <h1 class="font-heading d-inline-block d-sm-none text-info-light mb-6" style="font-size: 72px;">404</h1>
      <p class="display-3 fw-bold mb-4">Sorry, that page could not be found.</p>
      <p class="text-light-dark 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 p-0 fw-semibold" href="#">Back to Home</a><a class="btn btn-sm btn-link 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 #642

Bootstrap

Solstice

<div class="position-fixed bottom-0 start-0 bg-primary-light" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24 position-relative">
      <div class="position-absolute top-0 h-100 start-0 w-100 d-flex justify-content-between">
        <svg width="500" height="296" viewBox="0 0 500 296" 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_231_5645)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_231_5645" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
        <svg width="500" height="296" viewBox="0 0 500 296" 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_231_5644)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_231_5644" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="position-relative py-12 py-md-6 px-12 px-sm-20 px-md-12 px-lg-6 w-100 bg-white border border-2 border-primary rounded-3 rounded-pill">
        <div class="row align-items-center">
          <div class="col-12 col-md-7 col-lg-6 mb-10 mb-md-0">
            <div class="mw-xl">
              <p class="mb-0">We use technologies such as cookies, to process information about you and your devices to operate, analyze, and improve this site.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 col-lg-6 text-end">
            <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-sm py-4 btn-outline-light fs-6 text-dark" href="#">Good to know</a></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 #643

Bootstrap

Solstice

<section class="py-12 pb-md-24 pt-lg-24 pb-lg-40 bg-primary-light 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">“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">Hanna Stanton</span>
              <span class="d-block small text-light-dark">Student</span>
            </div>
            <div>
              <button class="btn border-0 me-3 p-0 bg-light" style="width: 10px; height: 10px;"></button>
              <button class="btn me-3 p-0 bg-primary-light border-primary" style="width: 14px; height: 14px;">
                <div class="bg-primary rounded-pill" style="width: 10px; height: 10px;"></div>
              </button>
              <button class="btn border-0 p-0 bg-light" 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 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 #644

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light 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-secondary">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-secondary1.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-secondary2.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-secondary3.png" alt="">
            </div>
            <div class="col-6 col-lg-3">
              <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary4.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 #645

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 #646

Bootstrap

Solstice

<section class="py-64 py-lg-32 position-relative bg-primary-light">
  <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_12162)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_191_12162" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" 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_12161)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_191_12161" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" 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 mb-4">
        <span>Join a</span>
        <span class="text-primary">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 #647

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="mw-lg mw-lg-5xl mx-auto">
      <div class="row mb-16 mb-md-24">
        <div class="col-lg-6 order-last order-lg-first">
          <div class="p-10 bg-primary rounded-3">
            <h2 class="text-white mb-6">$4/month</h2>
            <p class="text-primary-light mb-10">Join over 350 hundreds users who have signed up for Solstice.</p>
            <div class="d-flex mb-10 align-items-center justify-content-between p-4 bg-info bg-opacity-25 rounded-3">
              <span class="fs-6 fw-medium text-white">Cancel anytime.</span>
              <div class="d-inline-block bg-white rounded-pill">
                <a class="btn py-4 px-6 btn-outline-light text-dark" href="#">
                  <span class="me-2">Sign up today</span>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.00008 10H15.4167M15.4167 10L10.4167 5M15.4167 10L10.4167 15" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
            </div>
            <div>
              <span class="d-block mb-4 fs-5 fw-bold text-white">What you’ll get</span>
              <ul class="list-unstyled mb-0">
                <li class="mb-4">
                  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">

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 #648

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-8 mb-lg-0">
        <div>
          <h3 class="font-heading mb-6">FAQ</h3>
          <div class="mw-sm mt-12">
            <p class="text-dark mb-0">Still have more questions?</p>
            <p class="text-dark mb-6">Talk to our customer happiness team</p>
            <a class="btn btn-sm btn-secondary border-secondary-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.66669H6.66666C3.33332 1.66669 1.66666 3.33335 1.66666 6.66669V17.5C1.66666 17.9584 2.04166 18.3334 2.49999 18.3334H13.3333C16.6667 18.3334 18.3333 16.6667 18.3333 13.3334V6.66669C18.3333 3.33335 16.6667 1.66669 13.3333 1.66669ZM11.6667 12.7084H5.83332C5.49166 12.7084 5.20832 12.425 5.20832 12.0834C5.20832 11.7417 5.49166 11.4584 5.83332 11.4584H11.6667C12.0083 11.4584 12.2917 11.7417 12.2917 12.0834C12.2917 12.425 12.0083 12.7084 11.6667 12.7084ZM14.1667 8.54169H5.83332C5.49166 8.54169 5.20832 8.25835 5.20832 7.91669C5.20832 7.57502 5.49166 7.29169 5.83332 7.29169H14.1667C14.5083 7.29169 14.7917 7.57502 14.7917 7.91669C14.7917 8.25835 14.5083 8.54169 14.1667 8.54169Z" fill="currentColor"></path>
              </svg>
              <span class="ms-2">Talk to us</span>
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="mw-3xl mx-auto">
          <button class="btn btn-link border-0 border-bottom border-warning mb-3 px-0 py-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-0">
            <span class="h5 mb-0 me-6">What is Solstice? What is it for?</span>
            <svg class="flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

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 #649

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <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 mb-4">How it works</h3>
        <p class="text-light-dark 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-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="#FF7100"></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="#FF7100"></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 #650

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 #651

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-6xl mx-auto d-flex justify-content-center border-top border-bottom border-info">
      <div class="py-14 px-8 px-md-14 px-lg-32 text-center bg-white rounded-3">
        <span class="fs-5 fw-bold mb-6">Total monthly learners</span>
        <span class="d-block h1 text-primary mb-4">160,320</span>
        <span class="fw-semibold">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

Bootstrap Component #652

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light 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 mb-4">One plan that fits</h3>
            <div class="mw-sm">
              <p class="text-dark-light mb-4">Simple one plan pricing that fits for everyone for the price of a cup of coffee.</p>
              <p class="text-dark-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 fw-bold">What you’ll get</span>
            <ul class="list-unstyled mb-0">
              <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="#FF7100"></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="#FF7100"></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 #653

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <h3 class="font-heading text-center mb-10">Careers at Solstice</h3>
      <div class="mb-24 p-6 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">What we’re building</h4>
        <p class="text-light-dark 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-light-dark 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">Benefits</h4>
        <p class="text-light-dark 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 #654

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">
    <div class="d-flex justify-content-center overflow-hidden pt-12 pt-lg-24 pb-44 pb-md-64 pb-lg-80">
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="mw-3xl mx-auto text-center mb-12">
        <a class="d-inline-flex mb-12 align-items-center text-white 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>
          <span class="badge mb-4 me-3 text-white fw-medium border border-white rounded-1">Product</span>
          <span class="badge mb-4 text-white fw-medium border border-white rounded-1">Development</span>
        </div>
        <h3 class="font-heading text-white">The Art and Science of Design Development: Crafting Digital Experiences</h3>
      </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 #655

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 overflow-hidden bg-primary-light">
  <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">On a mission to make learning fun</h1>
          <p class="mw-lg text-light-dark 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-primary 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 #656

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="text-center mb-24">
      <h3 class="font-heading mb-4">Discover features</h3>
      <p class="text-light-dark 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="#FF7100"></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"></div>
            <h5 class="mb-1">Study room.</h5>
            <h5 class="mb-0">Personal or group.</h5>
          </div>
          <p class="text-light-dark">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 #657

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <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 mb-4">Join our events</h3>
          <p class="text-light-dark 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"><a class="btn btn-primary border-primary-dark" href="#">Sign up now</a></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 border border-light 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="">
                  <option value="1">August 2023</option>
                  <option value="2">July 2023</option>

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 #658

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <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 text-white">Latest articles and releases</h3>
        <p class="text-secondary-light 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-light bg-white border border-white fw-semibold shadow" href="#">All Articles</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-outline-secondary-dark text-light fw-semibold shadow" href="#">Getting Started</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-outline-secondary-dark text-light fw-semibold shadow" href="#">Learning Resources</a><a class="btn btn-sm mb-3 py-3 px-4 btn-outline-secondary-dark text-light fw-semibold shadow" 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 #659

Bootstrap

Solstice

<section class="py-12 pt-lg-24 bg-primary-light">
  <div class="container">
    <div class="row mb-16 mb-md-20 mb-lg-32">
      <div class="col-lg-3 mb-16 mb-lg-0">
        <a class="d-inline-block" href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
      </div>
      <div class="col-lg-9">
        <div class="row">
          <div class="col-6 col-md-3 mb-12">
            <h6 class="mb-6 fw-medium">Platform</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">How it works</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Pricing</a></li>
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">Features</a></li>
              <li><a class="btn btn-link text-light-dark p-0" href="#">Events</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-12">
            <h6 class="mb-6 fw-medium">Company</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-light-dark p-0" href="#">About</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 #660

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 position-relative bg-primary-light">
  <div class="container position-relative">
    <div class="mw-5xl mx-auto py-20 px-8 bg-secondary rounded-3">
      <div class="mw-lg mw-xl-2xl mx-auto text-center">
        <div class="mb-6">
          <svg width="68" height="34" viewBox="0 0 68 34" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 34C1.99977 29.7976 2.8273 25.6364 4.43533 21.7539C6.04336 17.8713 8.40039 14.3436 11.3718 11.3721C14.3433 8.40056 17.8709 6.04346 21.7533 4.43539C25.6358 2.82732 29.7969 1.99977 33.9991 2C51.6726 2 66 16.3261 66 34" stroke="#FFF2D6" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M9.22583 34.0001C9.22583 27.4085 11.836 21.0869 16.482 16.4259C21.1281 11.765 27.4295 9.14648 34 9.14648C40.5705 9.14648 46.872 11.765 51.518 16.4259C56.1641 21.0869 58.7742 27.4085 58.7742 34.0001" stroke="#FF7100" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M16.134 34C16.134 29.2617 18.0163 24.7174 21.3669 21.3669C24.7174 18.0163 29.2617 16.134 34 16.134C38.7384 16.134 43.2827 18.0163 46.6332 21.3669C49.9837 24.7174 51.866 29.2617 51.866 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
          </svg>
        </div>
        <h3 class="font-heading mb-6 text-white">Discover Fun and Exciting Knowledge</h3>
        <p class="text-secondary-light mb-10">Embark on an exciting learning adventure together - Join now!</p>
        <a class="btn btn-primary border-primary-dark" href="#">Sign Up Now</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

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 #641

Get the code for 13,400+ components

Bootstrap Component #642

Get the code for 13,400+ components

Bootstrap Component #643

Get the code for 13,400+ components

Bootstrap Component #644

Get the code for 13,400+ components

Bootstrap Component #645

Get the code for 13,400+ components

Bootstrap Component #646

Get the code for 13,400+ components

Bootstrap Component #647

Get the code for 13,400+ components

Bootstrap Component #648

Get the code for 13,400+ components

Bootstrap Component #649

Get the code for 13,400+ components

Bootstrap Component #650

Get the code for 13,400+ components

Bootstrap Component #651

Get the code for 13,400+ components

Bootstrap Component #652

Get the code for 13,400+ components

Bootstrap Component #653

Get the code for 13,400+ components

Bootstrap Component #654

Get the code for 13,400+ components

Bootstrap Component #655

Get the code for 13,400+ components

Bootstrap Component #656

Get the code for 13,400+ components

Bootstrap Component #657

Get the code for 13,400+ components

Bootstrap Component #658

Get the code for 13,400+ components

Bootstrap Component #659

Get the code for 13,400+ components

Bootstrap Component #660

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