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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <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-info rounded-3">
              <div class="position-absolute start-0 top-0 mt-8 border-3 border-start border-primary py-3"></div>
              <p class="display-5 fw-bold mb-6">Technical Help desk</p>
              <a class="btn btn-sm d-inline-flex flex-wrap align-items-center btn-light bg-white border-warning" 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 #562

Bootstrap

Solstice

<section class="py-20 pb-lg-24 pt-lg-40 bg-secondary overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-md-7 col-xl-8 mb-8 mb-md-0">
        <div class="d-flex align-items-center justify-content-center p-8 h-100 border border-info rounded-3">
          <h1 class="font-heading d-none d-xl-inline-block text-info-light mb-0" style="font-size: 240px;">404</h1>
          <h1 class="font-heading d-none d-sm-inline-block d-xl-none text-info-light mb-0" style="font-size: 192px;">404</h1>
          <h1 class="font-heading d-inline-block d-sm-none text-info-light mb-0" style="font-size: 72px;">404</h1>
        </div>
      </div>
      <div class="col-md-5 col-xl-4">
        <div class="py-20 ps-10 pe-14 bg-secondary-dark bg-opacity-25 rounded-3">
          <div class="mw-xs mx-auto">
            <p class="display-3 fw-bold text-white mb-4">Sorry, that page could not be found.</p>
            <p class="text-secondary-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-primary-light p-0 fw-semibold" href="#">Back to Home</a><a class="btn btn-sm btn-link text-primary-light p-0 fw-semibold" href="#">Support</a></div>
          </div>
        </div>
      </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 #563

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container">
    <div class="mw-2xl mx-auto mb-20 text-center">
      <h3 class="font-heading text-white mb-6">Testimonials</h3>
      <p class="text-secondary-light mb-0">See what they have to say about us</p>
    </div>
    <div class="mw-lg mw-md-4xl mx-auto mw-xl-none pt-16 px-6 px-md-10 bg-primary rounded-3">
      <div class="row align-items-end">
        <div class="col-md-6 col-xl-4 order-last order-xl-first">
          <div class="mw-sm mx-auto pt-14 px-6 px-lg-12 pb-2 bg-white rounded-top">
            <div class="overflow-hidden">
              <h5 class="display-3 fw-bold mb-8">“Highly recommended”</h5>
              <span>
                <svg width="288" height="84" viewBox="0 0 288 84" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="168" height="12" rx="2" fill="#F0F0F0"></rect><rect y="24" width="288" height="12" rx="2" fill="#F0F0F0"></rect><rect y="48" width="288" height="12" rx="2" fill="#F0F0F0"></rect><rect y="72" width="200" height="12" rx="2" fill="#F0F0F0"></rect></svg>
              </span>
            </div>
          </div>
        </div>
        <div class="col-md-12 col-xl-4">
          <div class="mw-sm mx-auto pt-14 pb-6 px-6 px-lg-12 bg-primary-light rounded-top">
            <h5 class="display-3 fw-bold mb-8">“Make learning fun”</h5>
            <p class="mb-16 text-dark-light">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">
              <img class="img-fluid pt-1 bg-light rounded-pill" src="solstice-assets/images/testimonials/woman-avatar2.png" alt="">

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

Bootstrap

Solstice

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

Bootstrap Component #565

Bootstrap

Solstice

<section class="pt-12 pt-lg-0 overflow-hidden">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div class="mw-md py-lg-24 px-5 mx-auto">
        <h4 class="font-heading mb-4">Login</h4>
        <p class="text-light-dark mb-8">Select your preferred login method</p>
        <a class="btn w-100 d-flex mb-4 flex-wrap btn-outline-light text-dark" href="#">
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></path>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="ms-2 fw-bold">Login with Google</span>
        </a>
        <button class="btn d-flex flex-wrap py-3 mb-8 lh-lg w-100 btn-primary border-primary-dark">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="ms-2">Continue with email</span>
        </button>
        <p class="mb-0">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>

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

Bootstrap

Solstice

<section class="pt-12 pt-lg-0 overflow-hidden">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div class="mw-md py-lg-24 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="text-light-dark mb-8">Select your preferred sign up method</p>
        <a class="btn w-100 d-flex mb-4 flex-wrap btn-outline-light text-dark" href="#">
          <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></path>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="ms-2 fw-bold">Sign up with Google</span>
        </a>
        <button class="btn d-flex flex-wrap py-3 mb-8 lh-lg w-100 btn-primary border-primary-dark">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="ms-2">Continue with email</span>
        </button>
        <p class="mb-0">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>

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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-24 text-center">
        <span class="d-inline-block mb-6 text-uppercase small text-primary fw-bold">HOW IT WORKS</span>
        <h3 class="font-heading text-white">What steps do I need to take to join?</h3>
      </div>
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 col-xl-7 mb-10 mb-lg-0">
          <img class="img-fluid d-block mx-auto" src="solstice-assets/images/how-it-works/picture-full-primary.png" alt="">
        </div>
        <div class="col-12 col-lg-6 col-xl-5">
          <div class="mw-md mx-auto">
            <div class="position-relative px-8 py-6 mb-3 bg-secondary-dark bg-opacity-25 rounded-2">
              <h5 class="text-white">Step 1</h5>
              <p class="text-secondary-light mb-0">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
            </div>
            <div class="position-relative px-8 py-6 mb-3 bg-primary rounded-2">
              <div class="position-absolute top-50 start-0 translate-middle ps-1 py-10 bg-white"></div>
              <h5 class="text-white">Step 2</h5>
              <p class="text-primary-light mb-0">Join ongoing rooms for focus and connection or create your study space.</p>
            </div>
            <div class="position-relative px-8 py-6 bg-secondary-dark bg-opacity-25 rounded-2">
              <h5 class="text-white">Step 3</h5>

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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto">
      <div class="d-flex flex-column flex-md-row align-items-center">
        <p class="flex-shrink-0 mb-5 mb-md-0 me-md-6 mb-0 fs-6 fw-semibold text-secondary-light">As seen in</p>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
        </div>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
        </div>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
        </div>
        <div class="py-2 px-4 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">
        </div>
      </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 #569

Bootstrap

Solstice

<section class="py-12 pt-lg-24 bg-secondary">
  <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-light.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 text-white">Platform</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-secondary-light p-0" href="#">Features</a></li>
              <li class="mb-6"><a class="btn btn-link text-secondary-light p-0" href="#">How it works</a></li>
              <li class="mb-6"><a class="btn btn-link text-secondary-light p-0" href="#">Pricing</a></li>
              <li class="mb-6"><a class="btn btn-link text-secondary-light p-0" href="#">Features</a></li>
              <li><a class="btn btn-link text-secondary-light p-0" href="#">Events</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-12">
            <h6 class="mb-6 fw-medium text-white">Company</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-6"><a class="btn btn-link text-secondary-light 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 #570

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <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>
          <p class="display-5 fw-bold text-white mb-2">Still have more questions?</p>
          <p class="display-5 fw-bold text-white mb-0">
            <span>Visit our</span>
            <a class="fw-bold p-0" href="#">help center</a>
            <span>to get in touch.</span>
          </p>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="mw-3xl mx-auto">
          <div class="mb-3 bg-white rounded-3">
            <button class="btn btn-link p-6 d-flex w-100 justify-content-between align-items-center text-start text-black rounded-3">
              <span class="h5 mb-0 me-6">What is Solstice? What is it for?</span>
              <svg 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>
              </svg>
            </button>
          </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 #571

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 py-12 pb-20 py-sm-24 pt-md-24 pb-md-40">
      <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, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 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, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 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, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 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, 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="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>
        <h2 class="font-heading text-white">The Art and Science of Design Development: Crafting Digital Experiences</h2>
      </div>
      <img class="img-fluid d-block mb-12 w-100 rounded-3" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="mw-4xl mx-auto">
        <div class="mb-12">
          <div class="d-flex mb-n6 flex-wrap py-5 border-top border-bottom align-items-center justify-content-between">

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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-2xl mx-auto text-center mb-16">
      <span class="badge mb-4 bg-primary-light text-primary border border-info">Events</span>
      <h3 class="mw-md mw-lg-lg mx-auto font-heading text-white mb-4">Engage in our weekly online events</h3>
      <p class="text-secondary-light mb-0">Join upcoming &amp; past events. Experience collaborative learning firsthand.</p>
    </div>
    <div class="overflow-scroll pb-2 mb-12">
      <div style="min-width: max-content;">
        <div class="position-relative p-6 bg-white border border-light rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
          <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>
                <option value="3">June 2023</option>
              </select>
            </div>
            <div class="d-flex flex-wrap align-items-center">
              <span class="d-inline-block py-3 px-4 me-2 small fw-semibold lh-1 border border-light rounded-pill shadow">Today</span>
              <button class="btn btn-outline-light p-0 me-2 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.125 16.25L6.875 10L13.125 3.75" 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 #573

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="mb-8 mb-md-16 pb-10 border-bottom border-secondary-dark">
    <div class="container">
      <div class="d-flex justify-content-center mx-auto">
        <svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="124" height="124" rx="32" fill="#FF7100"></rect>
          <path d="M104 55V37.5C104 35.567 102.433 34 100.5 34L90.0002 34C88.0672 34 86.5002 35.567 86.5002 37.5V51.5C86.5002 63.098 77.0982 72.5 65.5002 72.5L51.5002 72.5C49.5672 72.5 48.0002 74.067 48.0002 76V86.5C48.0002 88.433 49.5672 90 51.5002 90L69.0002 90C88.3301 90 104 74.33 104 55Z" fill="white"></path>
          <path d="M20 69L20 86.5C20 88.433 21.567 90 23.5 90H34C35.933 90 37.5 88.433 37.5 86.5V72.5C37.5 60.902 46.902 51.5 58.5 51.5H72.5C74.433 51.5 76 49.933 76 48V37.5C76 35.567 74.433 34 72.5 34L55 34C35.67 34 20 49.67 20 69Z" fill="white"></path>
        </svg>
      </div>
    </div>
  </div>
  <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 rounded-2 border border-primary">
        <p class="mb-0 text-secondary-light">
          <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>

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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mw-2xl mx-auto mb-24 text-center">
        <span class="badge mb-4 d-inline-flex align-items-center bg-primary-light text-primary border border-info">Pricing</span>
        <h3 class="mw-lg mx-auto font-heading text-white mb-6">One plan for the price of a cup of coffee</h3>
        <p class="fs-5 text-secondary-light mb-0">We offer a transparent monthly payment that covers everything our learning platform has to offer, with no hidden costs or transaction fees.</p>
      </div>
      <div class="mw-4xl mx-auto">
        <div class="pt-10 px-6 px-md-10 mb-6 bg-primary rounded-3">
          <div class="bg-primary-light rounded-top">
            <div class="py-12 px-6 px-md-10 border-bottom border-primary">
              <div class="d-flex mb-n4 flex-wrap align-items-center justify-content-between">
                <h2 class="mb-4">$4/month</h2>
                <a class="btn py-4 px-6 mb-4 btn-primary border-primary-dark" href="#">
                  <span class="me-2">Sign up today</span>
                  <svg width="18" height="18" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.99984 10H15.4165M15.4165 10L10.4165 5M15.4165 10L10.4165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </div>
              <p class="mt-6 mb-0 text-secondary">Join over 350 hundreds users who have signed up for Solstice.</p>
            </div>
            <div class="pt-12 pb-16 pb-lg-32 px-6 px-md-10">

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

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container position-relative">
    <div class="row mb-20 align-items-center">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <h1 class="font-heading">The Blog</h1>
      </div>
      <div class="col-12 col-lg-6">
        <p class="mw-md ms-lg-auto mb-0 text-light-dark">Discover the latest news, tips and user stories insights. Thoughts, stories and ideas from the Solstice team</p>
      </div>
    </div>
    <div>
      <a class="d-block mb-20 p-4 border border-warning rounded-3" href="#">
        <div class="row align-items-center">
          <div class="col-12 col-lg-5">
            <div class="mw-md mx-auto py-12 px-2 px-md-8">
              <h4 class="mb-4">How to Learn Anything Faster and Master It</h4>
              <p class="text-light-dark mb-10">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies here are some tips on ...</p>
              <div>
                <span class="me-3 small text-light-dark">20 Jul 2023</span>
                <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#B8B8B8"></circle></svg>
                <span class="badge ms-3 small fw-medium text-white bg-primary border border-primary rounded-1">Productivity</span>
              </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 #576

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 overflow-hidden bg-secondary">
  <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="mw-lg-5xl mx-auto">
          <h1 class="font-heading mw-4xl mb-24 text-white">On a mission to make learning fun</h1>
          <img class="img-fluid d-block w-100 rounded-3" src="solstice-assets/images/about/picture-large1.png" alt="">
        </div>
        <div class="mt-n8 py-16 bg-secondary border border-secondary-dark rounded-3 position-relative">
          <div class="row">
            <div class="col-12 col-md-6 col-lg-3 mb-4 mb-md-0 position-relative">
              <div class="d-none d-md-block position-absolute top-0 h-100 end-0 border-end border-secondary-dark"></div>
              <div class="text-center py-4 py-lg-0">
                <span class="d-block mb-2 text-secondary-light">Founded</span>
                <span class="h2 fw-semibold text-white">2023</span>
              </div>
            </div>
            <div class="col-12 col-md-6 col-lg-3 mb-4 mb-md-0 position-relative">
              <div class="d-none d-lg-block position-absolute top-0 h-100 end-0 border-end border-secondary-dark"></div>
              <div class="text-center py-4 py-lg-0">
                <span class="d-block mb-2 text-secondary-light">Total funding</span>
                <span class="h2 fw-semibold text-white">$9.6M</span>
              </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 #577

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="text-center mb-24">
        <h3 class="font-heading text-white mb-4">Discover features</h3>
        <p class="text-secondary-light mb-0">Innovative features tailored to enhance your learning experience.</p>
      </div>
      <div class="row">
        <div class="col-12 col-sm-6 mb-12 mb-lg-24">
          <div class="ps-4">
            <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="16" fill="#FF7100"></rect>
              <path d="M22.9998 14.6667V41.3334H22.4132C17.5598 41.3334 14.6665 38.44 14.6665 33.5867V22.4134C14.6665 17.56 17.5598 14.6667 22.4132 14.6667H22.9998Z" fill="white"></path>
              <path d="M40.8333 22.4134V26.5H25.5V15.1667H33.5867C35.9139 15.1667 37.7113 15.8584 38.9264 17.0736C40.1416 18.2887 40.8333 20.0861 40.8333 22.4134Z" fill="white" stroke="white"></path>
              <path d="M41.3333 29V33.5867C41.3333 38.44 38.44 41.3333 33.5867 41.3333H25V29H41.3333Z" 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="display-3 fw-bold text-white">Study room. Personal or group.</h5>
            </div>
            <p class="text-secondary-light">Optimize your study environment with a personalized room, tailored it to enhance focus and accommodate group study sessions.</p>
          </div>
        </div>
        <div class="col-12 col-sm-6 mb-12 mb-lg-24">

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

Bootstrap

Solstice

<section class="py-12 pt-lg-24 bg-secondary overflow-hidden">
  <div class="container">
    <div class="text-center">
      <h3 class="font-heading text-white mb-10">Oops. Page not found.</h3>
      <div class="d-inline-block bg-white rounded-pill"><a class="btn py-4 px-6 btn-outline-light text-dark" href="#">Back to Home</a></div>
      <div class="mw-5xl mt-20 mx-auto">
        <img class="img-fluid d-block w-100" src="solstice-assets/images/http-codes/404-secondary.svg" alt="">
      </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 #579

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container">
    <div class="mw-md mw-md-5xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-24 text-center">
        <h3 class="font-heading text-white mb-4">How it works</h3>
        <p class="text-secondary-light mb-0">What steps do I need to take to join?</p>
      </div>
      <div class="row mb-12 mx-0">
        <div class="col-12 col-md-4 px-0 mb-6 mb-md-0 border-bottom border-secondary-dark">
          <button class="btn d-flex w-100 align-items-center justify-content-center border-0 rounded-0 px-0 pt-0 pb-6 text-secondary-dark">
            <div>
              <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="40" height="40" rx="10" fill="#9C306F"></rect>
                <path d="M24.8 10H22.2C19 10 17 12 17 15.2V19.25H21.44L19.37 17.18C19.22 17.03 19.15 16.84 19.15 16.65C19.15 16.46 19.22 16.27 19.37 16.12C19.66 15.83 20.14 15.83 20.43 16.12L23.78 19.47C24.07 19.76 24.07 20.24 23.78 20.53L20.43 23.88C20.14 24.17 19.66 24.17 19.37 23.88C19.08 23.59 19.08 23.11 19.37 22.82L21.44 20.75H17V24.8C17 28 19 30 22.2 30H24.79C27.99 30 29.99 28 29.99 24.8V15.2C30 12 28 10 24.8 10Z" fill="white"></path>
                <path d="M10.75 19.25C10.34 19.25 10 19.59 10 20C10 20.41 10.34 20.75 10.75 20.75H17V19.25H10.75Z" fill="white"></path>
              </svg>
              <span class="ms-3 fs-5 fw-semibold">Step I</span>
            </div>
          </button>
        </div>
        <div class="col-12 col-md-4 px-0 mb-6 mb-md-0 border-bottom border-secondary-dark">
          <button class="btn d-flex w-100 align-items-center justify-content-center border-0 rounded-0 px-0 pt-0 pb-6 text-white border-bottom border-4 border-primary">
            <div>
              <svg width="40" height="40" viewBox="0 0 40 40" 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 #580

Bootstrap

Solstice

<div class="position-fixed bottom-0 start-0 bg-secondary" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24">
      <div class="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 mb-10 mb-md-0">
            <div class="d-sm-flex align-items-center">
              <span class="d-block mb-4 mb-sm-0">
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5002 13.6667C15.1946 13.6667 15.7852 13.4233 16.2718 12.9367C16.7585 12.45 17.0013 11.86 17.0002 11.1667C17.0002 10.4722 16.7568 9.88166 16.2702 9.39499C15.7835 8.90833 15.1935 8.66555 14.5002 8.66666C13.8057 8.66666 13.2152 8.91 12.7285 9.39666C12.2418 9.88333 11.9991 10.4733 12.0002 11.1667C12.0002 11.8611 12.2435 12.4517 12.7302 12.9383C13.2168 13.425 13.8068 13.6678 14.5002 13.6667ZM11.1668 22C11.8613 22 12.4518 21.7567 12.9385 21.27C13.4252 20.7833 13.6679 20.1933 13.6668 19.5C13.6668 18.8056 13.4235 18.215 12.9368 17.7283C12.4502 17.2417 11.8602 16.9989 11.1668 17C10.4724 17 9.88183 17.2433 9.39516 17.73C8.9085 18.2167 8.66572 18.8067 8.66683 19.5C8.66683 20.1944 8.91016 20.785 9.39683 21.2717C9.8835 21.7583 10.4735 22.0011 11.1668 22ZM22.0002 23.6667C22.4724 23.6667 22.8685 23.5067 23.1885 23.1867C23.5085 22.8667 23.6679 22.4711 23.6668 22C23.6668 21.5278 23.5068 21.1317 23.1868 20.8117C22.8668 20.4917 22.4713 20.3322 22.0002 20.3333C21.5279 20.3333 21.1318 20.4933 20.8118 20.8133C20.4918 21.1333 20.3324 21.5289 20.3335 22C20.3335 22.4722 20.4935 22.8683 20.8135 23.1883C21.1335 23.5083 21.5291 23.6678 22.0002 23.6667ZM17.0002 33.6667C14.6946 33.6667 12.5279 33.2289 10.5002 32.3533C8.47239 31.4778 6.7085 30.2906 5.2085 28.7917C3.7085 27.2917 2.52127 25.5278 1.64683 23.5C0.772385 21.4722 0.334607 19.3056 0.333496 17C0.333496 14.6667 0.833496 12.3889 1.8335 10.1667C2.8335 7.94444 4.22961 6.02777 6.02183 4.41666C7.81183 2.80555 9.93572 1.62499 12.3935 0.874994C14.8513 0.124994 17.5391 0.0555499 20.4568 0.666661C20.2068 1.91666 20.2902 3.09055 20.7068 4.18833C21.1235 5.28611 21.7485 6.20944 22.5818 6.95833C23.4152 7.70833 24.4013 8.22222 25.5402 8.5C26.6791 8.77777 27.8735 8.70833 29.1235 8.29166C28.2624 10.2083 28.4152 11.8472 29.5818 13.2083C30.7485 14.5694 32.0824 15.2778 33.5835 15.3333C33.8335 17.8056 33.5696 20.1528 32.7918 22.375C32.0141 24.5972 30.8679 26.5417 29.3535 28.2083C27.8402 29.875 26.0207 31.2017 23.8952 32.1883C21.7696 33.175 19.4713 33.6678 17.0002 33.6667Z" fill="#FF7100"></path>
                </svg>
              </span>
              <p class="ms-6 mb-0">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 text-end"><a class="btn btn-sm py-4 btn-primary fs-6" href="#">Accept Cookies</a></div>
        </div>
      </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

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

Get the code for 13,400+ components

Bootstrap Component #562

Get the code for 13,400+ components

Bootstrap Component #563

Get the code for 13,400+ components

Bootstrap Component #564

Get the code for 13,400+ components

Bootstrap Component #565

Get the code for 13,400+ components

Bootstrap Component #566

Get the code for 13,400+ components

Bootstrap Component #567

Get the code for 13,400+ components

Bootstrap Component #568

Get the code for 13,400+ components

Bootstrap Component #569

Get the code for 13,400+ components

Bootstrap Component #570

Get the code for 13,400+ components

Bootstrap Component #571

Get the code for 13,400+ components

Bootstrap Component #572

Get the code for 13,400+ components

Bootstrap Component #573

Get the code for 13,400+ components

Bootstrap Component #574

Get the code for 13,400+ components

Bootstrap Component #575

Get the code for 13,400+ components

Bootstrap Component #576

Get the code for 13,400+ components

Bootstrap Component #577

Get the code for 13,400+ components

Bootstrap Component #578

Get the code for 13,400+ components

Bootstrap Component #579

Get the code for 13,400+ components

Bootstrap Component #580

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