Bootstrap 5 Components

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-md mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 mb-6 mb-md-0">
          <div class="d-flex flex-column py-6 px-6 px-lg-10 h-100 align-items-center justify-content-center text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h1 text-primary">101K+</h4>
            <p class="text-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="py-6 px-6 px-lg-10 mb-6 text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h3 text-primary">2M+</h4>
            <p class="text-dark fw-semibold mb-0">Happy users and keep growing</p>
          </div>
          <div class="py-6 px-6 px-lg-10 text-center bg-primary-light rounded-3">
            <h4 class="mb-1 h2 text-primary">94K</h4>
            <p class="text-dark fw-semibold mb-0">Supported file extensions</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-16 py-lg-24">
  <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" 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 mb-3 px-0 py-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 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>

<section class="py-12 py-md-16 py-lg-24 position-relative overflow-hidden">
  <div class="position-absolute top-0 start-0 w-100">
    <div class="mw-6xl mx-auto d-flex align-items-start justify-content-between">
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_216_33149)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_216_33149" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" 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_216_33148)" stroke="#F0F0F0"></path>
          <defs><linearGradient id="paint0_linear_216_33148" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#F8F8F8"><stop offset="1" stop-color="#F8F8F8" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-xl mx-auto">
      <div class="text-center mb-12">
        <h3 class="mb-6">Contact us</h3>
        <p class="text-light-dark mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
      </div>
      <div class="p-8 bg-white border border-light rounded-3">

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

<section class="py-12 pb-md-24 pt-lg-24 pb-lg-40 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">“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-light" style="width: 10px; height: 10px;"></button>
              <button class="btn me-3 p-0 bg-white 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-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-primary-light rounded-3" style="height: 512px; transform: rotate(10deg);"></div>
        <div class="position-absolute top-0 end-0 w-100 bg-info rounded-3" style="height: 512px; transform: rotate(5deg);"></div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-3 col-lg-2 mb-16 mb-md-0">
        <div>
          <div class="mt-md-20">
            <h6 class="mb-3">TABLE OF CONTENTS</h6>
            <ul class="list-unstyled mb-0">
              <li class="mb-1"><a class="btn d-block ps-6 pe-2 py-2 btn-outline-secondary-dark text-start border-0 lh-base" href="#">The Essence of Design Development</a></li>
              <li class="mb-1"><a class="btn d-block ps-6 pe-2 py-2 btn-outline-dark-light text-start border-0 lh-base" href="#">The Collaborative Symphony</a></li>
              <li class="mb-1"><a class="btn d-block ps-6 pe-2 py-2 btn-outline-dark-light text-start border-0 lh-base" href="#">From Pixels to Interactions</a></li>
              <li><a class="btn d-block ps-6 pe-2 py-2 btn-outline-dark-light text-start border-0 lh-base" href="#">Conclusion</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-9 col-lg-10">
        <div class="mw-4xl mx-auto">
          <a class="d-inline-flex mb-12 align-items-center text-light-dark fw-bold" href="#">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ms-2">Back to Blog</span>
          </a>

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

<section class="py-12 py-md-16 py-lg-24 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-light-dark mb-4">Simple one plan pricing that fits for everyone for the price of a cup of coffee.</p>
              <p class="text-light-dark 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>

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

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <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-light rounded-3"></div>

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

<section class="py-12 py-md-16 py-lg-24">
  <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-light-dark 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-light fw-semibold shadow" href="#">All Articles</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-outline-light text-dark fw-semibold shadow" href="#">Getting Started</a><a class="btn btn-sm mb-3 me-2 py-3 px-4 btn-outline-light text-dark fw-semibold shadow" href="#">Learning Resources</a><a class="btn btn-sm mb-3 py-3 px-4 btn-outline-light text-dark 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 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">
  <div class="container">
    <div class="mw-6xl mx-auto d-flex justify-content-center border-top border-bottom border-light">
      <div class="py-14 px-8 px-md-14 px-lg-32 text-center bg-light-light rounded-3">
        <span class="fs-5 fw-bold mb-6">Total monthly learners</span>
        <span class="d-block h1 mb-4">160,320</span>
        <span class="fw-semibold">and we’re just getting started.</span>
      </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>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>

<section class="py-12 py-md-16 py-lg-24 position-relative">
  <div class="container">
    <div class="py-12 px-6 px-md-14 border-top border-bottom border-light">
      <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">
  <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 border border-light rounded-3">
              <div class="position-absolute start-0 top-0 mt-8 border-2 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-secondary border-secondary-dark" 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="py-12 pt-lg-24">
  <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>

<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 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-light 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 border border-light">
            <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-white rounded-top border border-light">
            <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="">