UI Components – Solstice Library

<section class="py-12 py-md-16 py-lg-24 bg-warning-light">
  <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>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light 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-light-dark">As seen in</p>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-white rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black1.png" alt="">
        </div>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-white rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black2.png" alt="">
        </div>
        <div class="py-2 px-4 mb-5 mb-md-0 me-md-4 bg-white rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black3.png" alt="">
        </div>
        <div class="py-2 px-4 bg-white rounded-2">
          <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-black4.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

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

<section class="py-12 pt-lg-24 bg-dark">
  <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-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 text-white">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>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light">
  <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">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-primary-light rounded-3">
              <h5>Step 1</h5>
              <p class="text-light-dark 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-white rounded-3">
              <div class="position-absolute top-50 start-0 translate-middle ps-1 py-10 bg-primary"></div>
              <h5 class="text-dark">Step 2</h5>
              <p class="text-light-dark 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-primary-light rounded-3">
              <h5>Step 3</h5>

<div class="position-fixed bottom-0 start-0" 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 w-100 bg-primary-light border border-2 border-info rounded-3 rounded-pill">
        <div class="row align-items-center">
          <div class="col-12 col-md-6 mb-10 mb-md-0">
            <div class="mw-md">
              <h6 class="mb-1">Privacy Settings</h6>
              <p class="mb-0 text-light-dark">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-sm py-4 btn-outline-light fs-6 text-dark w-100" href="#">Deny</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-sm py-4 btn-primary fs-6 w-100" href="#">Accept All</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-12 py-md-16 py-lg-24 position-relative bg-warning-light">
  <div class="container position-relative">
    <div class="mw-5xl mx-auto py-20 px-8 bg-white 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="#530031" 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">Discover Fun and Exciting Knowledge</h3>
        <p class="text-light-dark 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>

<section class="py-20 pb-lg-24 pt-lg-40 bg-dark 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-light border-opacity-25 rounded-3">
          <h1 class="font-heading d-none d-xl-inline-block text-light opacity-50 mb-0" style="font-size: 240px;">404</h1>
          <h1 class="font-heading d-none d-sm-inline-block d-xl-none text-light opacity-50 mb-0" style="font-size: 192px;">404</h1>
          <h1 class="font-heading d-inline-block d-sm-none text-light opacity-50 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-light-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-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>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-16 py-lg-24 bg-warning-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>
          <p class="display-5 fw-bold mb-2">Still have more questions?</p>
          <p class="display-5 fw-bold 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>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto d-flex justify-content-center border-top border-bottom border-info border-opacity-25">
      <div class="py-14 px-8 px-md-14 px-lg-32 text-center bg-warning-light 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>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light overflow-hidden">
  <div class="container">
    <div class="mw-2xl mx-auto mb-20 text-center">
      <h3 class="font-heading mb-6">Testimonials</h3>
      <p class="text-light-dark 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-secondary rounded-top">
            <h5 class="display-3 fw-semibold text-white mb-8">“Make learning fun”</h5>
            <p class="mb-16 text-secondary-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="">

<section class="py-12 py-md-16 py-lg-24 position-relative bg-warning-light">
  <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 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">

<section class="py-12 py-md-16 py-lg-24 bg-warning-light">
  <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 mb-4">Get in touch</h3>
            <p class="text-light-dark 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-primary-light 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">

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

<section class="py-12 py-md-16 py-lg-24 bg-warning-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-muted">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-info-dark 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-muted 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-muted">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 bg-primary-light fw-medium text-primary border border-warning rounded-1">Productivity</span>
              </div>
            </div>
          </div>

<section class="py-12 py-md-16 py-lg-24 position-relative">
  <div class="position-absolute top-0 start-0 w-100 bg-secondary">
    <div class="d-flex justify-content-center overflow-hidden py-4 py-sm-12 py-xl-36">
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 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(111, 11, 69, 0.00) 0%, rgba(111, 11, 69, 0.50) 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(111, 11, 69, 0.00) 0%, rgba(111, 11, 69, 0.50) 100%);"></div>
      <div class="flex-shrink-0 mt-n40 mt-sm-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="text-center mb-5">
        <a class="d-inline-flex 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>
      <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="text-center mb-12">
          <div class="mb-4">
            <span class="me-3 small text-light-dark">17 Jul 2023</span>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light">
  <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 mb-4">Engage in our weekly online events</h3>
      <p class="text-light-dark 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>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light">
  <div class="mb-8 mb-md-16 pb-10 border-bottom border-warning">
    <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 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>

<section class="py-12 py-md-16 py-lg-24 overflow-hidden bg-warning-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="mw-lg-5xl mx-auto">
          <h1 class="font-heading mw-4xl mb-24">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-warning-light border border-warning 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"></div>
              <div class="text-center py-4 py-lg-0">
                <span class="d-block mb-2 text-light-dark">Founded</span>
                <span class="h2 fw-semibold">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"></div>
              <div class="text-center py-4 py-lg-0">
                <span class="d-block mb-2 text-light-dark">Total funding</span>
                <span class="h2 fw-semibold">$9.6M</span>
              </div>
            </div>

<section class="py-12 py-md-16 py-lg-24 bg-warning-light 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 mb-6">One plan for the price of a cup of coffee</h3>
        <p class="fs-5 text-light-dark 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-secondary rounded-3">
          <div class="bg-primary rounded-top">
            <div class="py-12 px-6 px-md-10 border-bottom border-secondary">
              <div class="d-flex mb-n4 flex-wrap align-items-center justify-content-between">
                <h2 class="text-white mb-4">$4/month</h2>
                <div class="d-inline-block mb-4 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="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="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
              <p class="mt-6 mb-0 text-primary-light">Join over 350 hundreds users who have signed up for Solstice.</p>