UI Components by Shuffle

<section class="py-24 pt-md-40 pb-md-40 pb-xl-64">
  <div class="container">
    <div class="mw-xl mx-auto text-center mb-32"><span class="h6 text-primary" >How it works</span>
      <h2 class="h3 mt-6 mb-12" >Build and launch without problems</h2>
      <p class="text-secondary mb-0" >The brown fox jumps over the lazy dog.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 col-xl-7 mb-40 mb-lg-0 position-relative">
        <div class="position-relative mw-md mx-auto" style="z-index: 1;"><img class="img-fluid w-100 h-100" src="https://images.pexels.com/photos/7148031/pexels-photo-7148031.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
          <div class="position-absolute bottom-0 start-0 w-100 d-flex justify-content-center"><a class="text-decoration-none d-flex w-100 pt-10 pb-14 pe-6 mx-12 align-items-center border-top border-white" href="#">
              <div class="d-flex ps-2 pt-2 justify-content-center align-items-center bg-white" style="width: 80px; height: 80px; border-radius: 10px;">
                <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.791667 6.33333C0.354667 6.33333 0 5.97867 0 5.54167V3.95833C0 1.7765 1.7765 0 3.95833 0H5.54167C5.97867 0 6.33333 0.354667 6.33333 0.791667C6.33333 1.22867 5.97867 1.58333 5.54167 1.58333H3.95833C2.64892 1.58333 1.58333 2.64892 1.58333 3.95833V5.54167C1.58333 5.97867 1.22867 6.33333 0.791667 6.33333Z" fill="#1F40FF"></path>
                  <path d="M30.8747 6.33333C30.4377 6.33333 30.083 5.97867 30.083 5.54167V3.95833C30.083 2.64892 29.0174 1.58333 27.708 1.58333H26.1247C25.6877 1.58333 25.333 1.22867 25.333 0.791667C25.333 0.354667 25.6877 0 26.1247 0H27.708C29.8898 0 31.6664 1.7765 31.6664 3.95833V5.54167C31.6664 5.97867 31.3117 6.33333 30.8747 6.33333Z" fill="#1F40FF"></path>
                  <path d="M19.7914 1.58333H11.8747C11.4377 1.58333 11.083 1.22867 11.083 0.791667C11.083 0.354667 11.4377 0 11.8747 0H19.7914C20.2284 0 20.583 0.354667 20.583 0.791667C20.583 1.22867 20.2284 1.58333 19.7914 1.58333Z" fill="#1F40FF"></path>
                  <path d="M16.6247 31.6667H11.8747C11.4377 31.6667 11.083 31.312 11.083 30.875C11.083 30.438 11.4377 30.0834 11.8747 30.0834H16.6247C17.0617 30.0834 17.4163 30.438 17.4163 30.875C17.4163 31.312 17.0617 31.6667 16.6247 31.6667Z" fill="#1F40FF"></path>
                  <path d="M5.54167 31.6667H3.95833C1.7765 31.6667 0 29.8902 0 27.7084V26.125C0 25.688 0.354667 25.3334 0.791667 25.3334C1.22867 25.3334 1.58333 25.688 1.58333 26.125V27.7084C1.58333 29.0178 2.64892 30.0834 3.95833 30.0834H5.54167C5.97867 30.0834 6.33333 30.438 6.33333 30.875C6.33333 31.312 5.97867 31.6667 5.54167 31.6667Z" fill="#1F40FF"></path>
                  <path d="M0.791667 20.5833C0.354667 20.5833 0 20.2286 0 19.7916V11.8749C0 11.4379 0.354667 11.0833 0.791667 11.0833C1.22867 11.0833 1.58333 11.4379 1.58333 11.8749V19.7916C1.58333 20.2286 1.22867 20.5833 0.791667 20.5833Z" fill="#1F40FF"></path>
                  <path d="M30.8747 17.4166C30.4377 17.4166 30.083 17.0619 30.083 16.6249V11.8749C30.083 11.4379 30.4377 11.0833 30.8747 11.0833C31.3117 11.0833 31.6663 11.4379 31.6663 11.8749V16.6249C31.6663 17.0619 31.3117 17.4166 30.8747 17.4166Z" fill="#1F40FF"></path>
                  <path d="M22.0118 38C21.4418 38 20.9795 37.5377 20.9795 36.9677V15.2823C20.9795 14.7123 21.4418 14.25 22.0118 14.25C22.2873 14.25 22.547 14.3577 22.7417 14.5524L37.6773 29.488C37.8721 29.6812 37.9829 29.9472 37.9829 30.2211C37.9829 30.7911 37.5206 31.2534 36.9506 31.2534H28.9563L22.7544 37.6849C22.5533 37.8908 22.2921 38 22.0118 38ZM22.5628 16.6123V35.6044L28.0507 29.9139C28.1995 29.7587 28.4053 29.6717 28.6207 29.6717H35.6206L22.5628 16.6123ZM36.5658 30.6153H36.5817H36.5658Z" fill="#1F40FF"></path>
                </svg>
              </div>
              <div class="ms-12"><span class="h6 text-primary" >Zospace</span>
                <h4 class="text-white mt-1 mb-0" >How it works</h4>
              </div></a></div>
        </div><img class="position-absolute bottom-0 start-0 mb-n32 mb-sm-n52 ms-xl-20 w-100" src="zospace-assets/images/blue-eclipse.png" alt=""/>
      </div>
      <div class="col-12 col-lg-6 col-xl-5 position-relative">
        <div class="mw-xs mw-md-md mx-auto">
          <ul class="list-unstyled mb-10">
            <li class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light"><span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;" >1</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6" >Register account</h3>
                <p class="text-secondary mb-0" >It&rsquo;s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
              </div>
            </li>
            <li class="d-sm-flex pb-12 mb-8 border-bottom border-primary-light"><span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;" >2</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6" >Customize tools</h3>
                <p class="text-secondary mb-0" >The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
              </div>
            </li>
            <li class="d-sm-flex pb-12 border-bottom border-primary-light"><span class="flex-shrink-0 mt-sm-2 d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style="width: 60px; height: 60px;" >3</span>
              <div class="mt-8 mb-sm-0 ms-sm-8">
                <h3 class="h6 mb-6" >Work with your team</h3>
                <p class="text-secondary mb-0" >The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
              </div>
            </li>
          </ul>
          <div class="text-end"><a class="btn p-0 btn-link fw-bold text-decoration-none" href="#"><span class="me-5" >Learn more</span><span class="d-inline-block">
                <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="currentColor"></path>
                </svg></span></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark pt-24 pt-md-48 pb-52 overflow-hidden"><img class="position-absolute top-0 start-100 translate-middle img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 mb-n64 img-fluid" src="zospace-assets/lines/full-circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 col-7 col-sm-5 col-md-auto img-fluid" src="zospace-assets/images/five-stars.svg" alt=""/><img class="position-absolute top-100 start-0 translate-middle img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
  <div class="container">
    <div class="mw-3xl mx-auto text-center position-relative"><span class="h6 text-primary" >What&apos;s new at Shuffle</span>
      <h2 class="h3 text-white mt-10 mb-10" >The quick brown fox jumps over the lazy dog.</h2>
      <div class="mw-md mx-auto mb-24">
        <p class="text-secondary-light"><span >A short message that will </span><span class="text-white" >bring your customers </span><span >into the world of your imagination.</span></p>
      </div>
      <div class="d-flex flex-column flex-sm-row justify-content-center"><a class="btn mb-5 mb-sm-0 me-sm-5 btn-primary" href="#" >Join us now</a><a class="btn btn-outline-light" href="#" >Active demo</a></div>
    </div>
  </div>
</section>

<section class="bg-primary-light py-24 py-md-40">
  <div class="container">
    <div class="text-center mb-20"><span class="h6 text-primary" >Hey! Have any questions?</span>
      <h2 class="text-dark mt-12" >FAQ&apos;s</h2>
    </div>
    <div class="mw-4xl mx-auto">
      <div class="accordion" id="">
        <div class="accordion-item py-1 px-4 ps-md-10 pe-md-12 mb-4 border-0 bg-white rounded">
          <h2 class="accordion-header" id="">
            <button class="accordion-button bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="" aria-expanded="true" aria-controls="">
              <div class="d-flex align-items-center">
                <div class="me-4 me-md-8"><span class="d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style=" width: 48px; height: 48px" >1</span></div>
                <div class="pe-2">
                  <div class="d-flex align-items-center">
                    <h3 class="h5 mb-0" >How should I develop my workflow over time?</h3>
                  </div>
                </div>
              </div>
            </button>
          </h2>
          <div class="accordion-collapse collapse show" aria-labelledby="" data-bs-parent="" id="">
            <div class="accordion-body pb-8">
              <div class="ms-md-6 ms-xl-20 ps-6 ps-md-12 py-2 border-start">
                <p >The point of using Lorem Ipsum is that it has a more-or-less normal:</p>
                <div><span class="me-6 d-inline-block rounded-circle bg-primary" style="width: 6px; height: 6px;"></span><span >Distribution of letters</span></div>
                <div><span class="me-6 d-inline-block rounded-circle bg-primary" style="width: 6px; height: 6px;"></span><span >Content here</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion-item py-1 px-4 ps-md-10 pe-md-12 mb-4 border-0 bg-white rounded">
          <h2 class="accordion-header" id="">
            <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="" aria-expanded="true" aria-controls="">
              <div class="d-flex align-items-center">
                <div class="me-4 me-md-8"><span class="d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style=" width: 48px; height: 48px" >2</span></div>
                <div class="pe-2">
                  <div class="d-flex align-items-center">
                    <h3 class="h5 mb-0" >Can I pay by card?</h3>
                  </div>
                </div>
              </div>
            </button>
          </h2>
          <div class="accordion-collapse collapse" aria-labelledby="" data-bs-parent="" id="">
            <div class="accordion-body"></div>
          </div>
        </div>
        <div class="accordion-item py-1 px-4 ps-md-10 pe-md-12 mb-4 border-0 bg-white rounded">
          <h2 class="accordion-header" id="">
            <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="" aria-expanded="true" aria-controls="">
              <div class="d-flex align-items-center">
                <div class="me-4 me-md-8"><span class="d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style=" width: 48px; height: 48px" >3</span></div>
                <div class="pe-2">
                  <div class="d-flex align-items-center">
                    <h3 class="h5 mb-0" >How often should the app be updated?</h3>
                  </div>
                </div>
              </div>
            </button>
          </h2>
          <div class="accordion-collapse collapse" aria-labelledby="" data-bs-parent="" id="">
            <div class="accordion-body pb-8"></div>
          </div>
        </div>
        <div class="accordion-item py-1 px-4 ps-md-10 pe-md-12 mb-4 border-0 bg-white rounded">
          <h2 class="accordion-header" id="">
            <button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="" aria-expanded="true" aria-controls="">
              <div class="d-flex align-items-center">
                <div class="me-4 me-md-8"><span class="d-flex justify-content-center align-items-center bg-primary-light rounded-circle h6" style=" width: 48px; height: 48px" >4</span></div>
                <div class="pe-2">
                  <div class="d-flex align-items-center">
                    <h3 class="h5 mb-0" >Are Zoospace apps free?</h3>
                  </div>
                </div>
              </div>
            </button>
          </h2>
          <div class="accordion-collapse collapse" aria-labelledby="" data-bs-parent="" id="">
            <div class="accordion-body pb-8"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark position-relative pt-64 pb-44"><img class="position-absolute bottom-0 start-0 img-fluid mw-xs pe-40 pe-xxl-32" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/><img class="position-absolute top-0 end-0 mt-20 mt-lg-44 img-fluid col-10 col-sm-6 col-xxl-5" src="zospace-assets/images/women-window-photo.png" alt=""/>
  <div class="container">
    <div class="mw-lg ms-xxl-32 pt-32 pb-24 pb-xxl-0 pt-lg-0">
      <h2 class="text-center text-white mb-16" >We&apos;re Zospace - Founded in London</h2>
      <div class="mw-sm mx-auto">
        <div class="d-flex align-items-center pb-14 mb-8 border-bottom"><img class="img-fluid" src="zospace-assets/images/light-bulb-purple.svg" alt=""/>
          <div class="ms-8 ms-md-14">
            <p class="text-secondary-light mb-0"><span >A short message that will </span><span class="text-white" >bring your customers </span><span >into the world of your imagination.</span></p>
          </div>
        </div>
        <div class="d-flex w-100 justify-content-end"><a class="btn p-0 text-secondary-light d-flex align-items-center" href="#"><span class="me-5" >Learn our story</span><span>
              <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.7387 1.47293L18.7387 10.93L17.5565 10.93L17.5565 2.89739L0.835337 19.6245L0.00193592 18.7911L16.7231 2.064L9.28164 2.064L9.28164 0.881867L18.1476 0.881866C18.4741 0.881866 18.7387 1.14648 18.7387 1.47293Z" fill="white"></path>
              </svg></span></a></div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <div class="container">
    <div class="row mx-lg-n10 mx-xl-n20">
      <div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-lg-0">
        <div class="mw-xs mx-auto px-10 px-lg-0">
          <div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px"><img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart.svg" alt=""/>
            <p class="text-white mb-0"><span class="h4 text-white fw-bold" >8</span><span >%</span></p>
          </div>
          <div class="pt-14 border-top border-secondary">
            <h3 class="h6 text-white mb-8" >New tools</h3>
            <p class="text-secondary-light mb-0" >The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-lg-0">
        <div class="mw-xs mx-auto px-10 px-lg-0">
          <div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px"><img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-purple.svg" alt=""/>
            <p class="text-white mb-0"><span class="h4 text-white fw-bold" >45</span><span >%</span></p>
          </div>
          <div class="pt-14 border-top border-secondary">
            <h3 class="h6 text-white mb-8" >Workshop</h3>
            <p class="text-secondary-light mb-0" >It&rsquo;s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-md-0">
        <div class="mw-xs mx-auto px-10 px-lg-0">
          <div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px"><img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-green.svg" alt=""/>
            <p class="text-white mb-0"><span class="h4 text-white fw-bold" >5</span><span >/6</span></p>
          </div>
          <div class="pt-14 border-top border-secondary">
            <h3 class="h6 text-white mb-8" >Meetings</h3>
            <p class="text-secondary-light mb-0" >The time, this accumsan augue, posuere posuere elit lorem.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20">
        <div class="mw-xs mx-auto px-10 px-lg-0">
          <div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px"><img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-pink.svg" alt=""/>
            <p class="text-white mb-0"><span class="h4 text-white fw-bold" >79</span><span >%</span></p>
          </div>
          <div class="pt-14 border-top border-secondary">
            <h3 class="h6 text-white mb-8" >Webinars</h3>
            <p class="text-secondary-light mb-0" >Again and again vehicula libero at nibh volutpat lacinia non sed you see.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-secondary-dark"  >
    <div class="container-fluid position-relative"><a class="navbar-brand h4 mb-0 text-decoration-none" href="#"><img src="zospace-assets/logos/zospace-logo.svg" alt="" style="height: 30px;" width="auto"/></a>
      <div class="d-lg-none">
        <button class="btn p-0 btn-sm navbar-burger">
          <svg width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="39" height="2" rx="1" transform="matrix(-1 0 0 1 39 0)" fill="#C4C4C4"></rect>
            <rect width="20" height="2" rx="1" transform="matrix(-1 0 0 1 20 11)" fill="#C4C4C4"></rect>
          </svg>
        </button>
      </div>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Product</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Story</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Features</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block"><a class="btn btn-outline-light" href="#" >Sign Up</a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column py-8 px-8 bg-white overflow-auto"  >
      <div class="d-flex align-items-center mb-32"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img src="zospace-assets/logos/zospace-dark-logo.svg" alt="" style="height: 28px;" width="auto"/></a>
        <button class="navbar-close btn-close" type="button" aria-label="Close"></button>
      </div>
      <div>
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8 bg-primary-light rounded" href="#" >Product</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#" >Story</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#" >Features</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#" >Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="py-6"><a class="w-100 mb-2 btn btn-outline-light text-dark" href="#" >Sign In</a><a class="w-100 btn btn-primary" href="#" >Sign Up</a></div>
        <p class="mb-4 small text-center text-muted"><span >&copy; 2022. All rights reserved.</span></p>
      </div>
    </nav>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <div class="container">
    <div class="text-center mb-16"><span class="h6 text-primary" >What&apos;s new at Shuffle</span>
      <h2 class="text-white mt-10" >Latest blog</h2>
    </div>
    <div class="row mb-24">
      <div class="col-12 col-md-4 px-lg-6 mb-14 mb-md-0">
        <div class="mw-md mx-auto position-relative" style="z-index: 2;"><img class="position-absolute top-0 end-100 mt-36 img-fluid" src="zospace-assets/lines/left-line.svg" alt=""/><a class="d-block text-decoration-none" href="#">
            <div class="position-relative"><img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
              <div class="position-absolute start-0 bottom-0 m-5">
                <div class="pt-2 bg-primary rounded-top"></div>
                <div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom"><span class="d-block h5 fw-bold mb-0" >30</span><span class="small fw-bold text-secondary" >FEB</span></div>
              </div>
            </div>
            <div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
              <div class="pt-5 border-top">
                <h5 class="text-white" >Is remote work working? A one year check-in</h5>
              </div>
            </div></a></div>
      </div>
      <div class="col-12 col-md-4 px-lg-6 mt-md-24 mb-14 mb-md-0">
        <div class="mw-md mx-auto position-relative" style="z-index: 1;"><img class="position-absolute top-0 end-100 img-fluid" src="zospace-assets/lines/right-line.svg" alt=""/><a class="d-block text-decoration-none" href="#">
            <div class="position-relative" style="z-index: 1;"><img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/5325768/pexels-photo-5325768.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
              <div class="position-absolute start-0 bottom-0 m-5">
                <div class="pt-2 bg-primary rounded-top"></div>
                <div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom"><span class="d-block h5 fw-bold mb-0" >29</span><span class="small fw-bold text-secondary" >FEB</span></div>
              </div>
            </div>
            <div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
              <div class="pt-5 border-top">
                <h5 class="text-white" >10 ways to keep your remote teams engaged</h5>
              </div>
            </div></a></div>
      </div>
      <div class="col-12 col-md-4 px-lg-6">
        <div class="mw-md mx-auto position-relative"><img class="position-absolute top-0 end-100 mt-36 img-fluid" src="zospace-assets/lines/left-line.svg" alt=""/><a class="d-block text-decoration-none" href="#">
            <div class="position-relative" style="z-index: 1;"><img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover;" src="https://images.pexels.com/photos/5325708/pexels-photo-5325708.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
              <div class="position-absolute start-0 bottom-0 m-5">
                <div class="pt-2 bg-primary rounded-top"></div>
                <div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom"><span class="d-block h5 fw-bold mb-0" >29</span><span class="small fw-bold text-secondary" >FEB</span></div>
              </div>
            </div>
            <div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
              <div class="pt-5 border-top">
                <h5 class="text-white" >How to make a concept map (+Examples)</h5>
              </div>
            </div></a><img class="position-absolute top-0 start-100 mt-36 img-fluid" src="zospace-assets/lines/right-line.svg" alt=""/></div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#" >See all</a></div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden"><img class="position-absolute top-0 end-0 me-n80 mt-n80 img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 img-fluid" src="zospace-assets/lines/half-double-circle.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-24"><span class="h6 text-primary" >Testimonials</span>
      <h2 class="h3 text-white mt-10" >What people say</h2>
    </div>
    <div class="row mb-24 position-relative">
      <div class="col-12 col-xl-6 mb-20 mb-xl-0">
        <div class="row justify-content-center mw-lg mw-xl-none mx-auto">
          <div class="col-12 col-sm-4 col-xl-auto mb-16 mb-sm-0"><img class="d-block mx-auto img-fluid rounded-pill" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 170px;"/></div>
          <div class="col-12 col-sm-8 col-xl-7 d-flex justify-content-center">
            <div class="mw-xs d-inline-block position-relative py-12 px-10 px-sm-16 rounded bg-secondary">
              <div class="d-none d-sm-block position-absolute top-0 start-0 mt-12 translate-middle-x bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
              <div class="d-sm-none position-absolute top-0 start-50 translate-middle bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div><img class="position-absolute top-0 start-100 ms-n3 ms-sm-n0 mt-12 translate-middle-x img-fluid" src="zospace-assets/images/quote-circle.svg" alt=""/>
              <p class="text-secondary-light mb-8" >The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
              <div class="d-flex mb-5"><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-empty.svg" alt=""/></div>
              <h5 class="text-white" >L&eacute;a Herrera</h5><span class="text-white" >Google</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-6">
        <div class="row justify-content-center mw-lg mw-xl-none mx-auto">
          <div class="col-12 col-sm-4 col-xl-auto mb-16 mb-sm-0"><img class="d-block mx-auto img-fluid rounded-pill" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 170px;"/></div>
          <div class="col-12 col-sm-8 col-xl-7 d-flex justify-content-center">
            <div class="mw-xs d-inline-block position-relative py-12 px-10 px-sm-16 rounded bg-secondary">
              <div class="d-none d-sm-block position-absolute top-0 start-0 mt-12 translate-middle-x bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
              <div class="d-sm-none position-absolute top-0 start-50 translate-middle bg-secondary" style="width: 40px; height: 40px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div><img class="position-absolute top-0 start-100 mt-12 translate-middle-x img-fluid" src="zospace-assets/images/quote-circle.svg" alt=""/>
              <p class="text-secondary-light mb-8" >Yes, yessss! We got it. Donec ornare, felis sit amet finibus ullamcorper, tortor urna suscipit lectus, sit amet feugiat nisl turpis vel libero - Nunc!</p>
              <div class="d-flex mb-5"><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-full.svg" alt=""/><img class="img-fluid" src="zospace-assets/images/star-empty.svg" alt=""/></div>
              <h5 class="text-white" >Harry Douglas</h5><span class="text-white" >Asos</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-center"><a class="d-flex me-2 justify-content-center align-items-center bg-primary rounded-circle" href="#" style="width: 62px; height: 62px;">
        <svg width="7" height="14" viewbox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
        </svg></a><a class="d-flex justify-content-center align-items-center bg-primary rounded-circle" href="#" style="width: 62px; height: 62px;">
        <svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white"></path>
        </svg></a></div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40"><img class="position-absolute top-50 start-0 w-100 translate-middle-y img-fluid" src="zospace-assets/lines/line-two-montain.svg" alt=""/>
  <div class="container position-relative mx-auto">
    <h2 class="h3 text-white text-center mb-24" >Our Team</h2>
    <div class="row mw-xl-6xl mx-auto justify-content-center mb-24">
      <div class="col-12 col-lg-4 mb-20 mb-lg-0">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">
            <h4 class="text-white mb-2" >L&eacute;a Herrera</h4><span class="text-white" >UX Designer</span>
            <div class="mt-2 text-end">
              <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
              </svg>
            </div></a></div>
      </div>
      <div class="col-12 col-lg-4 mb-20 mb-lg-0 mt-lg-40">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">
            <h4 class="text-white mb-2" >Maxi Svennson</h4><span class="text-white" >Social Media Manager</span>
            <div class="mt-2 text-end">
              <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
              </svg>
            </div></a></div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.unsplash.com/photo-1615803795804-06a0c2a0030e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">
            <h4 class="text-white mb-2" >Oliver Haller</h4><span class="text-white" >Co-Founder</span>
            <div class="mt-2 text-end">
              <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
              </svg>
            </div></a></div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-outline-light" href="#" >More</a></div>
  </div>
</section>

<section class="pt-32 pb-44 bg-secondary-dark">
  <div class="container mx-auto">
    <div class="text-center mb-24">
      <h2 class="text-white mb-14" >Choose a plan</h2>
      <p class="text-secondary-light mb-0" >The quick brown fox jumps over the lazy dog.</p>
    </div>
    <div>
      <div class="row align-items-center">
        <div class="col-12 col-xl-4 mb-6 mb-xl-0">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0" >Free</h4>
                <p class="h5 fw-bold text-white mb-0" >$0,00</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-5">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#" >Try free</a></div>
          </div>
        </div>
        <div class="col-12 col-xl-4 mb-6 mb-xl-0">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 bg-primary rounded-3">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0" >Team</h4>
                <p class="h5 fw-bold text-white mb-0" >$9,90</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >20 team members</span>
              </li>
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >Unlimited anonymous editors</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >10GB cloud storage</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#" >Buy now</a></div>
          </div>
        </div>
        <div class="col-12 col-xl-4">
          <div class="mw-md mx-auto pt-12 px-6 px-md-8 pb-16 rounded bg-secondary">
            <div class="px-2 pb-6 mb-12 border-bottom">
              <div class="d-flex align-items-end justify-content-between">
                <h4 class="text-white mb-0" >Premium</h4>
                <p class="h5 fw-bold text-white mb-0" >$29,90</p>
              </div>
            </div>
            <ul class="mb-20">
              <li class="d-flex align-items-center mb-6">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >Complete files</span>
              </li>
              <li class="d-flex align-items-center mb-5">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >10GB cloud storage</span>
              </li>
              <li class="d-flex align-items-center">
                <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                </svg><span class="ms-6 text-white" >5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="btn btn-outline-light" href="#" >Buy now</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark py-24 py-md-40">
  <div class="container position-relative">
    <div class="position-relative mw-6xl mx-auto"><img class="position-absolute top-0 end-0 mt-n16 me-6 img-fluid" style="z-index: 1;" src="zospace-assets/images/stars.svg" alt=""/>
      <div class="position-relative px-6 ps-sm-12 ps-md-24 pe-sm-12 ps-xxl-36 pe-xxl-20 pt-20 pb-24 overflow-hidden rounded bg-secondary"><img class="position-absolute top-0 start-0 mt-n12 mw-6xl mw-md-none" src="zospace-assets/lines/blue-half-circle.svg" alt=""/><img class="position-absolute top-0 end-0 mt-n64 mw-sm mw-md-lg img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
        <div class="position-relative mw-lg"><span class="h6 text-white" >More news</span>
          <h4 class="text-white mt-2 mb-6" >Subscribe now</h4>
          <div class="input-group mb-8 bg-white rounded-pill">
            <input class="form-control ps-md-24 py-3 me-4 me-lg-14 border-0 bg-transparent" type="email" placeholder="Drop your Email" aria-label="Drop your Email" aria-describedby=""/>
            <svg class="d-none d-md-block position-absolute top-50 start-0 ms-10 translate-middle-y" width="37" height="37" viewbox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle>
              <circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle>
              <circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle>
            </svg>
            <button class="btn btn-primary px-md-12 rounded-pill" type="button" id="" >Subscribe</button>
          </div>
          <p class="text-secondary-light mb-0"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="position-fixed bottom-0 end-0 pb-16 px-4 px-lg-10" style="z-index: 50;">
  <div class="container">
    <div class="mw-2xl py-8 px-8 px-md-14 position-relative rounded bg-secondary">
      <div class="position-absolute top-0 start-0 translate-middle-y ms-12 bg-secondary" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); width: 40px; height: 40px;"></div>
      <div class="row align-items-center">
        <div class="col-12 col-md-5 mb-4 mb-md-0">
          <h5 class="text-white mb-2" >Cookie Policy</h5>
          <p class="text-secondary-light small" >By clicking &ldquo;Accept&rdquo;, you agree to the storing of cookies on your device to enhance site navigation...</p>
        </div>
        <div class="col-12 col-md-7 d-flex align-items-center justify-content-end"><a class="d-inline-flex mb-4 me-8 align-items-center text-decoration-none text-white" href="#"><span class="me-4" >More</span>
            <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.0851 7.66792L19.398 14.355L18.5621 13.5192L24.242 7.83927L0.590432 7.84345L0.590431 6.66485L24.242 6.66067L18.98 1.39873L19.8159 0.562843L26.0851 6.83202C26.3159 7.06286 26.3159 7.43708 26.0851 7.66792Z" fill="currentColor"></path>
            </svg></a><a class="btn mb-4 btn-outline-light" href="#" >Accept</a></div>
      </div>
    </div>
  </div>
</div>

<section class="bg-secondary-dark py-24 pt-md-40 pb-md-52">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 col-xl-4 mb-16 mb-lg-0">
        <div class="mw-md"><span class="h6 text-primary" >Clouds</span>
          <h2 class="h3 text-white mt-10 mb-14" >Trusted by brands all over the world</h2>
          <p class="text-secondary-light mb-0" >The brown fox jumps over the lazy dog.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6 offset-xl-2">
        <div class="row mw-xs mw-sm-xl mw-lg-2xl mx-auto">
          <div class="col-12 col-sm-3 mb-3 mb-sm-0 align-self-center">
            <div class="d-flex align-items-center justify-content-center rounded bg-secondary py-8"><img class="d-block mx-auto img-fluid" src="zospace-assets/logos/spotify-box.svg" alt=""/></div>
          </div>
          <div class="col-12 col-sm-4 mb-3 mb-sm-0">
            <div class="d-flex w-50 py-10 ms-auto mb-3 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/we-box.svg" alt=""/></div>
            <div class="d-flex w-100 py-16 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/slack-box.svg" alt=""/></div>
          </div>
          <div class="col-12 col-sm-4 mt-sm-20">
            <div class="d-flex w-100 py-8 mb-3 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/miro-box.svg" alt=""/></div>
            <div class="d-flex w-75 py-12 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/dropbox-box.svg" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-white pt-40 overflow-hidden">
  <div class="container mb-28">
    <div class="text-center"><a class="d-inline-block mb-8" href="#"><img class="img-fluid" src="zospace-assets/logos/zospace-dark-logo.svg" alt=""/></a>
      <h2 class="text-dark mb-8" >Collaborate everywhere.</h2>
      <p class="text-secondary mb-16" >Get our free mobile application.</p><a class="btn btn-primary" href="#" >Downolad</a>
    </div>
  </div>
  <div class="position-relative">
    <div class="position-absolute top-0 end-0 mt-24 col-6 bg-secondary-light" style="height: 1px;"></div>
    <div class="position-absolute top-50 start-0 col-6 bg-secondary-light" style="height: 1px;"></div><img class="position-relative d-block mx-auto img-fluid" src="zospace-assets/images/phone-center-with-apps.png" alt=""/>
  </div>
</section>

<section class="bg-secondary-dark py-24 py-md-40">
  <div class="container">
    <div class="row align-items-center pb-24 mb-14 border-bottom border-secondary">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0"><span class="h6 text-primary" >We&apos;re Zospace</span>
        <h2 class="mw-md h3 text-white mt-10 mb-12" >Thank you for your time</h2>
        <p class="text-secondary-light mb-16"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        <div><a class="btn btn-primary me-4" href="#" >Active demo</a><a class="btn btn-outline-light" href="#" >Contact</a></div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="row">
          <div class="col-6 col-md-4 mb-8 mb-lg-0">
            <ul class="list-unstyled">
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Hello</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Story</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Pricing</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Applictaions</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Stats</a></li>
              <li><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Blog</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-4 mb-8 mb-lg-0">
            <ul class="list-unstyled">
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Newsletter</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Features</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >How it works</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >FAQ</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Portfolio</a></li>
              <li><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Team</a></li>
            </ul>
          </div>
          <div class="col-12 col-md-4">
            <ul class="list-unstyled">
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >New account</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Log in</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Testimonials</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Contact</a></li>
              <li class="mb-6"><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Privacy Policy</a></li>
              <li><a class="d-inline-block text-secondary-light text-decoration-none" href="#" >Cookies</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="d-sm-flex align-items-center justify-content-between">
      <p class="text-secondary-light mb-sm-0" >&copy; 2022 Zospace. All rights reserved.</p>
      <div class="d-flex align-items-center"><a class="d-inline-block me-2" href="#"><img class="img-fluid" src="zospace-assets/logos/facebook.svg" alt=""/></a><a class="d-inline-block me-2" href="#"><img class="img-fluid" src="zospace-assets/logos/instagram.svg" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" src="zospace-assets/logos/twitter.svg" alt=""/></a></div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-40 overflow-hidden"><img class="position-absolute top-0 end-0 mt-n80 me-n80 img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 mt-xl-40 mw-xs mw-lg-none img-fluid" src="zospace-assets/images/five-stars.svg" alt=""/><img class="position-absolute top-0 start-0 col-6 col-md-4 col-lg-2 img-fluid" src="zospace-assets/images/blue-double-circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 col-6 col-md-4 col-lg-3 img-fluid" src="zospace-assets/lines/half-double-circle.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-lg mw-md-xl mw-xl-5xl mx-auto">
      <div class="mw-xl"><a class="d-inline-block mb-6" href="#"><img class="img-fluid" src="zospace-assets/logos/zospace-logo.svg" alt=""/></a>
        <h2 class="h3 text-white mb-14" >Sorry, we can&apos;t find that page or something has gone wrong...</h2>
        <p class="text-secondary-light mb-20" >Go back or try here:</p><a class="btn btn-primary" href="#" >Start again</a>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden"><img class="position-absolute bottom-0 start-50 ms-n40 mb-n64 img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
  <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 col-4 bg-white"></div>
  <div class="d-lg-none position-absolute bottom-0 end-0 w-100 py-40 bg-white"></div>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-md mx-auto"><span class="h6 text-primary" >Register Account</span>
          <h2 class="h3 text-white mt-10 mb-14" >Start creating a new template by selecting UI components</h2>
          <p class="text-secondary-light"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-md mx-auto pt-20 pb-24 px-8 px-md-12 px-xl-14 rounded bg-secondary">
          <form action="#">
            <h3 class="h5 text-white mb-10" >Register Account</h3>
            <div class="position-relative mb-4 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="20" height="21" viewbox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29593 0.492188C4.81333 0.492188 2.80078 2.50474 2.80078 4.98734C2.80078 7.46993 4.81333 9.48248 7.29593 9.48248C9.77851 9.48248 11.7911 7.46993 11.7911 4.98734C11.7911 2.50474 9.77851 0.492188 7.29593 0.492188ZM3.69981 4.98734C3.69981 3.00125 5.30985 1.39122 7.29593 1.39122C9.28198 1.39122 10.892 3.00125 10.892 4.98734C10.892 6.97342 9.28198 8.58346 7.29593 8.58346C5.30985 8.58346 3.69981 6.97342 3.69981 4.98734Z" fill="black"></path>
                  <path d="M5.3126 10.3816C2.38448 10.3816 0.103516 13.0524 0.103516 16.2253V19.8214C0.103516 20.0696 0.304772 20.2709 0.55303 20.2709H14.0385C14.2867 20.2709 14.488 20.0696 14.488 19.8214C14.488 19.5732 14.2867 19.3719 14.0385 19.3719H1.00255V16.2253C1.00255 13.4399 2.98344 11.2806 5.3126 11.2806H9.27892C10.5443 11.2806 11.6956 11.9083 12.4939 12.9335C12.6465 13.1293 12.9289 13.1644 13.1248 13.0119C13.3207 12.8594 13.3558 12.5769 13.2033 12.381C12.2573 11.1664 10.8566 10.3816 9.27892 10.3816H5.3126Z" fill="black"></path>
                  <rect x="15" y="15" width="5" height="1" rx="0.5" fill="black"></rect>
                  <rect x="17" y="18" width="5" height="1" rx="0.5" transform="rotate(-90 17 18)" fill="black"></rect>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="email" id="" placeholder="Your email" value=""/>
                <label for="" >Your email</label>
              </div>
            </div>
            <div class="position-relative mb-4 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="17" height="21" viewbox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.184 8.48899H15.2011V6.25596C15.2011 2.6897 12.3193 0 8.49924 0C4.67919 0 1.7974 2.6897 1.7974 6.25596V8.48899H1.81568C0.958023 9.76774 0.457031 11.3049 0.457031 12.9569C0.457031 17.3921 4.06482 21 8.49924 21C12.9341 21 16.5424 17.3922 16.5428 12.9569C16.5428 11.3049 16.0417 9.76774 15.184 8.48899ZM2.69098 6.25596C2.69098 3.14895 5.13312 0.893578 8.49924 0.893578C11.8654 0.893578 14.3075 3.14895 14.3075 6.25596V7.39905C12.8423 5.86897 10.7804 4.91468 8.49966 4.91468C6.21837 4.91468 4.15607 5.86946 2.69098 7.40017V6.25596ZM8.49966 20.1064C4.55762 20.1064 1.35061 16.8989 1.35061 12.9569C1.35061 9.01534 4.5572 5.80826 8.49924 5.80826C12.4422 5.80826 15.6488 9.01534 15.6492 12.9569C15.6492 16.8989 12.4426 20.1064 8.49966 20.1064Z" fill="black"></path>
                  <path d="M8.49957 8.93567C7.26775 8.93567 6.26562 9.93779 6.26562 11.1696C6.26562 11.8679 6.60247 12.5283 7.1592 12.9474V14.7439C7.1592 15.4829 7.76062 16.0843 8.49957 16.0843C9.2381 16.0843 9.83994 15.4829 9.83994 14.7439V12.9474C10.3966 12.5278 10.7335 11.8679 10.7335 11.1696C10.7335 9.93779 9.7309 8.93567 8.49957 8.93567ZM9.16793 12.3228C9.03032 12.4023 8.94636 12.5502 8.94636 12.7088V14.7439C8.94636 14.9906 8.74572 15.1907 8.49957 15.1907C8.25342 15.1907 8.05278 14.9906 8.05278 14.7439V12.7088C8.05278 12.5502 7.96833 12.4032 7.83072 12.3228C7.41026 12.078 7.1592 11.6468 7.1592 11.1696C7.1592 10.4307 7.76062 9.82925 8.49957 9.82925C9.2381 9.82925 9.83994 10.4307 9.83994 11.1696C9.83994 11.6468 9.58881 12.078 9.16793 12.3228Z" fill="black"></path>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="password" placeholder="Password" id="" value=""/>
                <label for="" >Password</label>
              </div>
            </div>
            <div class="position-relative mb-6 ps-14 py-2 pe-4 bg-white rounded-pill">
              <div class="position-absolute top-50 start-0 ms-8 translate-middle-y pe-4 py-1 border-end">
                <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.6243 13.5625C14.3939 13.5625 14.2077 13.7581 14.2077 14V16.4517C14.2077 18.2573 13.0443 20.125 11.0973 20.125H4.42975C2.56848 20.125 0.874349 18.3741 0.874349 16.4517V10.5H14.6243C14.8547 10.5 15.041 10.3044 15.041 10.0625C15.041 9.82058 14.8547 9.625 14.6243 9.625H14.2077V5.95175C14.2077 2.39183 11.8635 0 8.37435 0H6.70768C3.21855 0 0.874349 2.39183 0.874349 5.95175V9.625H0.457682C0.227282 9.625 0.0410156 9.82058 0.0410156 10.0625V16.4517C0.0410156 18.8322 2.13268 21 4.42975 21H11.0972C13.3089 21 15.0409 19.0023 15.0409 16.4517V14C15.041 13.7581 14.8547 13.5625 14.6243 13.5625ZM1.70768 5.95175C1.70768 2.86783 3.67022 0.875 6.70768 0.875H8.37435C11.4119 0.875 13.3743 2.86783 13.3743 5.95175V9.625H1.70768V5.95175Z" fill="black"></path>
                  <path d="M17.8815 9.3711C17.7482 9.17377 17.4878 9.12827 17.3003 9.26701L7.58655 16.4919L5.75235 14.5655C5.58942 14.3944 5.32608 14.3944 5.16322 14.5655C5.00028 14.7366 5.00028 15.0131 5.16322 15.1842L7.24655 17.3717C7.32695 17.4561 7.43362 17.4999 7.54115 17.4999C7.62488 17.4999 7.70868 17.4732 7.78282 17.4194L17.7828 9.98185C17.9703 9.84143 18.0141 9.56843 17.8815 9.3711Z" fill="black"></path>
                </svg>
              </div>
              <div class="form-floating ms-4">
                <input class="form-control border-0 bg-transparent" type="password" placeholder="Repeat password" id="" value=""/>
                <label for="" >Repeat password</label>
              </div>
            </div>
            <div class="form-check mb-12">
              <input class="form-check-input" type="checkbox" value="" id=""/>
              <label class="form-check-label small text-secondary-light"><span >By singning up, you agree to our </span><a class="d-inline-block text-decoration text-white" href="#" >Terms, Data Policy </a><span > and </span><a class="d-inline-block text-decoration text-white" href="#" >Cookies.</a></label>
            </div>
            <button class="btn btn-primary w-100" type="submit" >Get started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-white py-24 py-md-40">
  <div class="container pb-24 border-bottom">
    <div class="text-center pb-16 mb-16 border-bottom"><span class="h6 text-primary" >Check of details</span>
      <h2 class="h3 text-dark mt-8" >See all features</h2>
    </div>
    <div class="table-responsive mb-20">
      <table class="table table-borderless" style="min-width: max-content;">
        <thead>
          <tr>
            <th class="pb-12 text-secondary"></th>
            <th class="pb-12 text-secondary" >Feature 1</th>
            <th class="pb-12 text-secondary" >Feature 2</th>
            <th class="pb-12 text-secondary" >Feature 3</th>
            <th class="pb-12 text-secondary" >Feature 4</th>
            <th class="pb-12 text-secondary" >Feature 5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="ps-14 py-4 pe-6 bg-primary-light rounded-start" >Number of Team Members</td>
            <td class="py-4 bg-primary-light" >5</td>
            <td class="py-4 bg-primary-light" >20</td>
            <td class="py-4 bg-primary-light" >200+</td>
            <td class="py-4 bg-primary-light" >Unlimited</td>
            <td class="pe-14 py-4 bg-primary-light rounded-end" >Unlimited</td>
          </tr>
          <tr>
            <td class="ps-14 py-4" >Number of Team Members</td>
            <td class="py-4" >5</td>
            <td class="py-4" >20</td>
            <td class="py-4" >200+</td>
            <td class="py-4" >Unlimited</td>
            <td class="pe-14 py-4" >Unlimited</td>
          </tr>
          <tr>
            <td class="ps-14 py-4 bg-primary-light rounded-start" >Projects</td>
            <td class="py-4 bg-primary-light" >3/mo</td>
            <td class="py-4 bg-primary-light" >Unlimited</td>
            <td class="py-4 bg-primary-light" >Unlimited</td>
            <td class="py-4 bg-primary-light" >Unlimited</td>
            <td class="pe-14 py-4 bg-primary-light rounded-end" >Unlimited</td>
          </tr>
          <tr>
            <td class="ps-14 py-4" >Video chat</td>
            <td class="py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="pe-14 py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="ps-14 py-4 bg-primary-light rounded-start" >Realt-Time Collaboration</td>
            <td class="py-4 bg-primary-light text-primary">
              <svg width="16" height="2" viewbox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line y1="1.35" x2="16" y2="1.35" stroke="currentColor" stroke-width="1.3"></line>
              </svg>
            </td>
            <td class="py-4 bg-primary-light text-primary">
              <svg width="16" height="2" viewbox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line y1="1.35" x2="16" y2="1.35" stroke="currentColor" stroke-width="1.3"></line>
              </svg>
            </td>
            <td class="py-4 bg-primary-light text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="py-4 bg-primary-light text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="pe-14 py-4 bg-primary-light text-primary rounded-end">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
          </tr>
          <tr>
            <td class="ps-14 py-4" >Support</td>
            <td class="py-4 text-primary">
              <svg width="16" height="2" viewbox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line y1="1.35" x2="16" y2="1.35" stroke="currentColor" stroke-width="1.3"></line>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="16" height="2" viewbox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line y1="1.35" x2="16" y2="1.35" stroke="currentColor" stroke-width="1.3"></line>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="16" height="2" viewbox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line y1="1.35" x2="16" y2="1.35" stroke="currentColor" stroke-width="1.3"></line>
              </svg>
            </td>
            <td class="py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
            <td class="pe-14 py-4 text-primary">
              <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="currentColor"></path>
              </svg>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-end">
      <div class="d-flex align-items-center mw-xs pe-12 mb-4 mb-sm-0">
        <p class="h3 text-primary mb-0"><span >8</span><span class="h4 text-primary mb-0" >%</span></p>
        <p class="ms-6 text-dark mb-0" >The tell condimentum turpis lorem</p>
      </div>
      <div class="d-flex align-items-center mw-xs pe-12">
        <p class="h3 text-primary mb-0" >20</p>
        <p class="ms-6 text-dark mb-0" >A sad laoreet sit amet nec purus</p>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden"><img class="position-absolute top-0 start-0 col-12 col-md-6 col-xxl-auto translate-middle-x img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="position-absolute bottom-0 end-0 mb-n12 col-12 col-md-6 col-xxl-auto img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
  <div class="container position-relative">
    <div class="row mw-5xl mx-auto">
      <div class="col-12 col-lg-6 mb-20 px-lg-10">
        <div class="pt-16 px-8 px-sm-16 pb-20 position-relative bg-secondary rounded"><img class="d-lg-none position-absolute top-0 end-0 mt-n12 me-n2 img-fluid" src="zospace-assets/images/stars.svg" alt=""/><span class="d-flex justify-content-center align-items-center mb-14 bg-primary rounded" style="width: 80px; height: 80px;">
            <svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M22.6042 34.9999H2.1875C0.981458 34.9999 0 34.0185 0 32.8124V12.3958C0 11.1897 0.981458 10.2083 2.1875 10.2083H22.6042C23.8102 10.2083 24.7917 11.1897 24.7917 12.3958V32.8124C24.7917 34.0185 23.8102 34.9999 22.6042 34.9999ZM2.1875 11.6666C1.78646 11.6666 1.45833 11.9933 1.45833 12.3958V32.8124C1.45833 33.2149 1.78646 33.5416 2.1875 33.5416H22.6042C23.0052 33.5416 23.3333 33.2149 23.3333 32.8124V12.3958C23.3333 11.9933 23.0052 11.6666 22.6042 11.6666H2.1875Z" fill="white"></path>
                <path d="M34.2702 5.83333C33.8677 5.83333 33.541 5.50667 33.541 5.10417V3.64583C33.541 2.43979 32.5596 1.45833 31.3535 1.45833H29.8952C29.4927 1.45833 29.166 1.13167 29.166 0.729167C29.166 0.326667 29.4927 0 29.8952 0H31.3535C33.3646 0 34.9993 1.63625 34.9993 3.64583V5.10417C34.9993 5.50667 34.6727 5.83333 34.2702 5.83333Z" fill="white"></path>
                <path d="M6.56217 5.83333C6.15967 5.83333 5.83301 5.50667 5.83301 5.10417V3.64583C5.83301 1.63625 7.4678 0 9.47884 0H10.9372C11.3397 0 11.6663 0.326667 11.6663 0.729167C11.6663 1.13167 11.3397 1.45833 10.9372 1.45833H9.47884C8.2728 1.45833 7.29134 2.43979 7.29134 3.64583V5.10417C7.29134 5.50667 6.96467 5.83333 6.56217 5.83333Z" fill="white"></path>
                <path d="M24.0618 1.45833H16.7702C16.3677 1.45833 16.041 1.13167 16.041 0.729167C16.041 0.326667 16.3677 0 16.7702 0H24.0618C24.4643 0 24.791 0.326667 24.791 0.729167C24.791 1.13167 24.4643 1.45833 24.0618 1.45833Z" fill="white"></path>
                <path d="M31.3535 29.1666H29.8952C29.4927 29.1666 29.166 28.8399 29.166 28.4374C29.166 28.0349 29.4927 27.7083 29.8952 27.7083H31.3535C32.5596 27.7083 33.541 26.7268 33.541 25.5208V24.0624C33.541 23.6599 33.8677 23.3333 34.2702 23.3333C34.6727 23.3333 34.9993 23.6599 34.9993 24.0624V25.5208C34.9993 27.5303 33.3646 29.1666 31.3535 29.1666Z" fill="white"></path>
                <path d="M34.2702 18.9583C33.8677 18.9583 33.541 18.6316 33.541 18.2291V10.9374C33.541 10.5349 33.8677 10.2083 34.2702 10.2083C34.6727 10.2083 34.9994 10.5349 34.9994 10.9374V18.2291C34.9994 18.6316 34.6727 18.9583 34.2702 18.9583Z" fill="white"></path>
              </g>
            </svg></span>
          <h4 class="text-white mb-6" >Backups</h4>
          <p class="mw-xs text-secondary-light" >The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-20 px-lg-10"><img class="d-none d-lg-block position-absolute top-0 end-0 mt-n12 me-n6 img-fluid" src="zospace-assets/images/stars.svg" alt=""/>
        <div class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary"><span class="d-flex justify-content-center align-items-center mb-14 bg-info rounded" style="width: 80px; height: 80px;">
            <svg width="36" height="35" viewbox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M32.25 35H5.25C3.183 35 1.5 33.3638 1.5 31.3542V3.64588C1.5 3.24338 1.836 2.91672 2.25 2.91672C2.664 2.91672 3 3.24338 3 3.64588V31.3542C3 32.5603 4.0095 33.5417 5.25 33.5417H31.5V6.56255C31.5 6.16005 31.836 5.83338 32.25 5.83338C32.664 5.83338 33 6.16005 33 6.56255V34.2709C33 34.6734 32.664 35 32.25 35Z" fill="white"></path>
                <path d="M32.25 7.29167H5.25C3.183 7.29167 1.5 5.65542 1.5 3.64583C1.5 1.63625 3.183 0 5.25 0H29.25C29.664 0 30 0.326667 30 0.729167V5.83333H32.25C32.664 5.83333 33 6.16 33 6.5625C33 6.965 32.664 7.29167 32.25 7.29167ZM5.25 1.45833C4.0095 1.45833 3 2.43979 3 3.64583C3 4.85187 4.0095 5.83333 5.25 5.83333H28.5V1.45833H5.25Z" fill="white"></path>
                <path d="M12.9868 27.7055C12.2338 27.7055 11.6158 27.4897 11.1718 27.0566C10.2898 26.1991 10.2808 24.6838 11.1478 22.7866C11.9158 21.1051 13.3018 19.2443 15.0478 17.5482C16.7938 15.8507 18.7063 14.5047 20.4358 13.7565C22.3858 12.9122 23.9443 12.9209 24.8278 13.7799C25.7098 14.6374 25.7188 16.154 24.8518 18.0499C24.0838 19.7313 22.6978 21.5922 20.9518 23.2882C19.2058 24.9857 17.2933 26.3318 15.5638 27.0799C14.5963 27.4955 13.7263 27.7055 12.9868 27.7055ZM23.0143 14.582C22.5043 14.582 21.8188 14.754 21.0448 15.088C19.4803 15.7647 17.7268 17.0043 16.1068 18.5778C14.4868 20.1513 13.2148 21.8561 12.5188 23.3772C11.9488 24.627 11.8378 25.6405 12.2323 26.024C12.6268 26.4076 13.6693 26.2997 14.9548 25.7455C16.5193 25.0688 18.2728 23.8293 19.8928 22.2557C21.5128 20.6822 22.7863 18.9774 23.4823 17.4549C24.0523 16.2051 24.1633 15.1916 23.7688 14.808C23.6113 14.6563 23.3503 14.582 23.0143 14.582Z" fill="white"></path>
                <path d="M23.0128 27.7054C22.2733 27.7054 21.4033 27.4969 20.4358 27.0784C18.7063 26.3317 16.7923 24.9842 15.0478 23.2867C13.3018 21.5892 11.9173 19.7298 11.1478 18.0484C10.2808 16.1525 10.2898 14.6359 11.1718 13.7784C12.0523 12.9209 13.6138 12.9121 15.5638 13.755C17.2933 14.5017 19.2073 15.8492 20.9518 17.5467C22.6978 19.2442 24.0823 21.1036 24.8518 22.785C25.7188 24.6823 25.7098 26.1975 24.8278 27.055C24.3838 27.4882 23.7658 27.7054 23.0128 27.7054ZM12.9853 14.5819C12.6478 14.5819 12.3898 14.6563 12.2323 14.8094C11.8378 15.1929 11.9488 16.2065 12.5188 17.4563C13.2148 18.9773 14.4898 20.6821 16.1083 22.2571C17.7268 23.8321 19.4803 25.0702 21.0463 25.7469C22.3318 26.3025 23.3743 26.4075 23.7688 26.0254C24.1633 25.6419 24.0523 24.6284 23.4823 23.3786C22.7863 21.8575 21.5113 20.1527 19.8928 18.5777C18.2743 17.0027 16.5208 15.7646 14.9548 15.0879C14.1808 14.754 13.4953 14.5819 12.9853 14.5819ZM11.7013 14.2932H11.7163H11.7013Z" fill="white"></path>
              </g>
            </svg></span>
          <h4 class="text-white mb-6" >Navigation</h4>
          <p class="mw-xs text-secondary-light" >It&rsquo;s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6 px-lg-10 mb-20 mb-lg-0">
        <div class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary"><span class="d-flex justify-content-center align-items-center mb-14 bg-success rounded" style="width: 80px; height: 80px;">
            <svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M24.0625 18.9583C23.7402 18.9583 23.431 18.8927 23.1467 18.7615L17.5 16.1175L11.8592 18.7585C11.569 18.8927 11.2598 18.9583 10.9375 18.9583C9.73146 18.9583 8.75 17.9769 8.75 16.7708C8.75 16.4529 8.81417 16.1583 8.94833 15.8681L15.5079 1.28917C15.8419 0.510417 16.6265 0 17.5 0C18.3735 0 19.1581 0.510417 19.4965 1.30083L26.0546 15.874C26.1858 16.1583 26.25 16.4529 26.25 16.7708C26.25 17.9769 25.2685 18.9583 24.0625 18.9583ZM17.5 14.5833C17.605 14.5833 17.7115 14.6067 17.8092 14.6519L23.7592 17.4373C24.166 17.6225 24.7917 17.2856 24.7917 16.7708C24.7917 16.6629 24.7712 16.5754 24.7275 16.4763L18.1621 1.88854C17.9346 1.35771 17.061 1.36792 16.8423 1.87833L10.2754 16.4719C10.2287 16.5754 10.2083 16.6629 10.2083 16.7708C10.2083 17.2856 10.8092 17.6327 11.2467 17.4358L17.1908 14.6533C17.2885 14.6067 17.395 14.5833 17.5 14.5833Z" fill="white"></path>
                <path d="M17.4997 35C8.65488 35 1.45801 27.8031 1.45801 18.9583C1.45801 12.9194 4.7903 7.46227 10.154 4.71769C10.507 4.53685 10.9518 4.6754 11.1355 5.0356C11.3193 5.3929 11.1763 5.83331 10.8176 6.0156C5.94384 8.50936 2.91634 13.4691 2.91634 18.9583C2.91634 26.9996 9.45842 33.5417 17.4997 33.5417C25.5409 33.5417 32.083 26.9996 32.083 18.9583C32.083 13.4794 29.0613 8.51956 24.1963 6.0156C23.8376 5.83185 23.6961 5.39144 23.8813 5.03414C24.0665 4.67539 24.507 4.53539 24.8628 4.7206C30.2163 7.47394 33.5413 12.931 33.5413 18.9583C33.5413 27.8031 26.3445 35 17.4997 35Z" fill="white"></path>
              </g>
            </svg></span>
          <h4 class="text-white mb-6" >Documents</h4>
          <p class="mw-xs text-secondary-light" >The time, this accumsan augue, posuere posuere elit lorem.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6 px-lg-10">
        <div class="pt-16 px-8 px-sm-16 pb-20 rounded bg-secondary"><span class="d-flex justify-content-center align-items-center mb-14 bg-warning rounded" style="width: 80px; height: 80px;">
            <svg width="35" height="35" viewbox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0618 13.1249C24.0618 12.8935 23.952 12.6758 23.766 12.5384C23.5797 12.4009 23.3394 12.3599 23.1183 12.428L14.3682 15.1203C14.0623 15.2144 13.8535 15.4972 13.8535 15.8173V21.536C13.4245 21.2878 12.9264 21.1457 12.3952 21.1457C10.7844 21.1457 9.47852 22.4515 9.47852 24.0624C9.47852 25.6733 10.7844 26.9791 12.3952 26.9791C14.0044 26.9791 15.3092 25.6758 15.3118 24.0671V24.0624V16.3557L22.6035 14.1122V20.0777C22.1745 19.8294 21.6765 19.6874 21.1452 19.6874C19.5343 19.6874 18.2285 20.9932 18.2285 22.6041C18.2285 24.2149 19.5343 25.5207 21.1452 25.5207C22.7545 25.5207 24.0592 24.2174 24.0618 22.6087V22.6041V13.1249ZM22.6035 22.6041C22.6035 21.7986 21.9506 21.1457 21.1452 21.1457C20.3397 21.1457 19.6868 21.7986 19.6868 22.6041C19.6868 23.4095 20.3397 24.0624 21.1452 24.0624C21.9506 24.0624 22.6035 23.4095 22.6035 22.6041ZM12.3952 22.6041C11.5898 22.6041 10.9368 23.257 10.9368 24.0624C10.9368 24.8678 11.5898 25.5207 12.3952 25.5207C13.2006 25.5207 13.8535 24.8678 13.8535 24.0624C13.8535 23.257 13.2006 22.6041 12.3952 22.6041Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.208 3.64577C8.19447 3.64577 6.56217 5.27807 6.56217 7.2916V8.0937C4.89804 8.43149 3.64551 9.90278 3.64551 11.6666V27.7083C3.64551 29.7218 5.27781 31.3541 7.29134 31.3541H27.708C29.7215 31.3541 31.3538 29.7218 31.3538 27.7083V11.6666C31.3538 9.90278 30.1013 8.43149 28.4372 8.0937V7.2916C28.4372 5.27807 26.8049 3.64577 24.7913 3.64577H10.208ZM26.9788 8.02077V7.2916C26.9788 6.08347 25.9994 5.1041 24.7913 5.1041H10.208C8.99988 5.1041 8.02051 6.08347 8.02051 7.2916V8.02077H26.9788ZM7.29134 9.4791C6.08321 9.4791 5.10384 10.4585 5.10384 11.6666V27.7083C5.10384 28.9163 6.08321 29.8958 7.29134 29.8958H27.708C28.9161 29.8958 29.8955 28.9163 29.8955 27.7083V11.6666C29.8955 10.4585 28.9161 9.4791 27.708 9.4791H7.29134Z" fill="white"></path>
            </svg></span>
          <h4 class="text-white mb-6" >Weekly updates</h4>
          <p class="mw-xs text-secondary-light" >Again and again vehicula libero at nibh volutpat lacinia non sed you see.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark pt-24 pb-40 pt-md-40 position-relative">
  <div class="container">
    <div class="mw-4xl mx-auto mb-32 text-center">
      <h2 class="text-white mb-16" >We are Zospace. Founded in London</h2>
      <div class="d-flex justify-content-center align-items-center text-start"><img class="img-fluid rounded-circle" style="width: 80px; height: 80px" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt=""/>
        <div class="ms-8">
          <h5 class="text-white" >Harry Douglas</h5>
          <p class="text-white mb-0" >20 april, 8:30 am</p>
        </div>
      </div>
    </div>
    <div class="position-relative mb-32 mb-xl-20"><img class="d-block w-100 img-fluid" style="max-height: 650px; object-fit: cover;" src="https://images.unsplash.com/photo-1517171771326-cbc7f641008a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt=""/><img class="position-absolute bottom-0 start-0 mb-n24 mw-xs px-20 px-md-12 ms-md-20 img-fluid" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/></div>
    <div class="mw-xl mx-auto">
      <p class="lead text-secondary-light mb-6" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quidem doloremque, corporis sapiente, maiores soluta hic rerum non, sit cum ex deleniti. Quod!</p>
      <p class="lead text-secondary-light mb-6" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime id qui deserunt iure cupiditate vero. Id deleniti aliquid iste dolore! Tempore vel non atque laboriosam. Magnam, beatae explicabo.</p>
      <p class="lead text-secondary-light" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quidem doloremque, corporis sapiente, maiores soluta hic rerum non, sit cum ex deleniti. Quod!</p>
    </div>
  </div>
</section>