Bootstrap 5 Sign in / Sign up Components

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 order-last order-lg-first">
          <div class="mw-md mw-xl-none position-relative">
            <div class="position-absolute bottom-0 start-0 w-100 p-6">
              <div class="py-10 px-6 px-sm-10 bg-dark bg-opacity-25 rounded">
                <h6 class="text-white">Selina Destin</h6>
                <span class="d-block fs-9 text-white fw-semibold mb-6">Web Development Agency</span>
                <p class="fs-5 text-white fw-semibold mb-14">"Untitled has become essential in starting every new project, we can't imagine working without it."</p>
                <div>
                  <button class="btn btn-link p-0 me-2">
                    <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="white"></rect></svg>
                  </button>
                  <button class="btn btn-link p-0 me-2">
                    <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="white"></rect></svg>
                  </button>
                  <button class="btn btn-link p-0">
                    <svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="4" rx="2" fill="#511BEA"></rect></svg>
                  </button>
                </div>
              </div>
            </div>
            <img class="img-fluid d-block w-100" style="min-height: 620px; object-fit: cover;" src="saturn-assets/images/sign-up/image-face.png" alt="">
          </div>
        </div>
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md mw-xl-lg ms-xl-auto">
            <h5 class="font-heading mb-4">Sign in to your account</h5>
            <p class="mw-md fs-7 text-secondary mb-10">Greetings on your return! We kindly request you to enter your details.</p>
            <div class="row mb-6 flex-column flex-sm-row">
              <div class="col-sm-6 mb-3 mb-sm-0">
                <a class="btn btn-outline-light px-3 w-100 fs-9 text-secondary rounded-pill" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.12 5.32003H17V2.14003C16.0897 2.04538 15.1751 1.99865 14.26 2.00003C11.54 2.00003 9.67999 3.66003 9.67999 6.70003V9.32003H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32003H13.36V7.05003C13.36 6.00003 13.64 5.32003 15.12 5.32003Z" fill="#1E2238"></path>
                  </svg>
                  <span class="ms-2">Login with Facebook</span>
                </a>
              </div>
              <div class="col-sm-6">
                <a class="btn btn-outline-light px-3 w-100 fs-9 text-secondary rounded-pill" href="#">
                  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.44 5.19C15.8181 4.75428 16.1063 4.24817 16.2882 3.70074C16.4701 3.1533 16.5421 2.57533 16.5 2C15.3394 2.09369 14.262 2.63956 13.5 3.52C13.1351 3.94198 12.8586 4.43288 12.6868 4.96364C12.5151 5.49441 12.4516 6.05424 12.5 6.61C13.0662 6.61472 13.6258 6.4891 14.1356 6.24286C14.6454 5.99662 15.0918 5.63637 15.44 5.19ZM17.96 12.63C17.9667 11.8637 18.1686 11.1118 18.5465 10.4452C18.9244 9.77859 19.466 9.21926 20.12 8.82C19.7073 8.22524 19.1616 7.73483 18.5263 7.38767C17.891 7.04052 17.1835 6.84615 16.46 6.82C14.9 6.66 13.46 7.73 12.63 7.73C11.8 7.73 10.63 6.84 9.33003 6.86C8.48016 6.888 7.65205 7.13578 6.92648 7.57919C6.20091 8.02259 5.60264 8.64648 5.19003 9.39C3.43003 12.45 4.74003 17 6.50003 19.47C7.30003 20.68 8.30003 22.05 9.62003 22C10.94 21.95 11.37 21.18 12.9 21.18C14.43 21.18 14.9 22 16.2 21.97C17.5 21.94 18.42 20.73 19.26 19.52C19.8551 18.6415 20.3199 17.6816 20.64 16.67C19.8475 16.332 19.1714 15.7693 18.6951 15.0513C18.2188 14.3333 17.9633 13.4916 17.96 12.63Z" fill="#1E2238"></path>
                  </svg>
                  <span class="ms-2">Login with Apple</span>
                </a>
              </div>
            </div>
            <div class="d-flex mb-6 align-items-center">
              <div class="border-top w-100"></div>
              <span class="d-inline-block mx-4 text-secondary fs-9 fw-semibold">Or</span>
              <div class="border-top w-100"></div>
            </div>
            <form action="">
              <div class="mb-6">
                <label class="fw-semibold fs-9 mb-1" for="">Email</label>
                <input class="form-control" type="email" name="" id="" placeholder="pat@saturn.dev">
              </div>
              <div class="mb-8">
                <div class="d-flex mb-1 justify-content-between">
                  <label class="fw-semibold fs-9" for="">Password</label>
                  <a class="btn btn-link p-0 fs-9 fw-semibold" href="#">Forget password?</a>
                </div>
                <input class="form-control" type="password" name="" id="" placeholder="Enter your password">
              </div>
              <div class="form-check mb-6">
                <input class="form-check-input" type="checkbox" value="" id="">
                <label class="ms-2 fs-10 form-check-label" for="">Remember for 30 days</label>
              </div>
              <button class="btn btn-primary mb-6 w-100 rounded-pill" type="submit">Login</button>
              <p class="fs-10 fw-semibold">
                <span>Don’t have an account?</span>
                <a class="btn btn-link fw-semibold fs-10 p-0" href="#">Sign up</a>
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-info-light position-relative overflow-hidden">
  <div class="d-none d-md-block position-absolute top-0 start-0 h-100 bg-white col-6"><img class="img-fluid d-block" src="flaro-assets/images/sign-in/gradient.svg" alt=""/></div>
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-md-6 position-relative">
          <div class="d-md-none position-absolute top-0 start-0 w-100 h-100 bg-white"><img class="img-fluid d-block" src="flaro-assets/images/sign-in/gradient.svg" alt=""/></div>
          <div class="position-relative mw-md mx-auto pt-16 pb-12 pb-lg-32"><a class="d-inline-block mb-24" href="#"><img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt=""/></a>
            <h3 class="mb-16 mb-md-32" >Sign in and start saving time today.</h3>
            <h6 class="fs-7 mb-10" >Why should you join us?</h6>
            <div class="d-flex mw-xs mb-5 align-items-start"><span>
                <svg width="25" height="26" viewbox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#4F46E5"></path>
                </svg></span><span class="ms-2" >The best you can do in no time at all, amazing feature goes here</span></div>
            <div class="d-flex mw-xs align-items-start"><span>
                <svg width="25" height="26" viewbox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#4F46E5"></path>
                </svg></span><span class="ms-2" >The best you can do in no time at all, amazing feature goes here</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md py-12 mx-auto">
            <form action="">
              <div class="mb-4">
                <label class="form-label fw-light" >Email Address *</label>
                <input class="form-control" type="email" placeholder="Enter email address"/>
              </div>
              <div class="mb-4">
                <label class="form-label fw-light" >Password *</label>
                <input class="form-control" type="password" placeholder="*******"/>
              </div>
              <div class="d-flex mb-5 flex-wrap align-items-center justify-content-between">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id=""/>
                  <label class="form-check-label fs-9" for="" >Remember Me</label>
                </div>
                <div><a class="btn p-0 btn-link fs-9" href="#" >Forgot Password?</a></div>
              </div><a class="btn w-100 mb-8 btn-primary shadow" href="#" >Sign In</a>
              <div class="text-center mb-5"><span class="fs-9 text-secondary" >Or continue with</span></div>
              <div class="d-lg-flex align-items-center"><a class="btn d-flex justify-content-center px-3 mb-2 mb-lg-0 me-lg-4 btn-light border fw-semibold" href="#">
                  <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.64622 3.94602C10.9855 3.9452 12.2818 4.41846 13.3054 5.28195L16.1729 2.55134C15.0721 1.53639 13.75 0.791963 12.3114 0.377139C10.8727 -0.0376843 9.35723 -0.111485 7.88511 0.161594C6.41298 0.434673 5.02477 1.04711 3.83064 1.95031C2.63651 2.85351 1.66933 4.02261 1.00586 5.36482L4.23849 7.85648C4.61549 6.71964 5.34062 5.73023 6.31117 5.0284C7.28173 4.32657 8.4485 3.9479 9.64622 3.94602Z" fill="#D94F3D"></path>
                    <path d="M3.94597 9.64569C3.94678 9.03746 4.04537 8.43333 4.23797 7.85641L1.00534 5.36475C0.344108 6.69493 0 8.16021 0 9.64569C0 11.1312 0.344108 12.5964 1.00534 13.9266L4.23797 11.435C4.04537 10.858 3.94678 10.2539 3.94597 9.64569Z" fill="#F2C042"></path>
                    <path d="M18.8967 7.89197H9.68945V11.8379H14.9069C14.5965 12.9537 13.8854 13.9156 12.9098 14.5396L16.1174 17.0124C18.1672 15.1727 19.3715 12.1812 18.8967 7.89197Z" fill="#5085ED"></path>
                    <path d="M12.9091 14.5397C11.9178 15.107 10.7877 15.3862 9.64622 15.3455C8.4485 15.3436 7.28173 14.965 6.31117 14.2631C5.34062 13.5613 4.61549 12.5719 4.23849 11.4351L1.00586 13.9267C1.80432 15.5363 3.03604 16.8911 4.56247 17.8389C6.0889 18.7866 7.84949 19.2897 9.64622 19.2915C12.0105 19.3557 14.315 18.5437 16.1167 17.0116L12.9091 14.5397Z" fill="#57A75C"></path>
                  </svg><span class="ms-2" >Sign in with Google</span></a><a class="btn d-flex justify-content-center px-3 btn-light border fw-semibold" href="#">
                  <svg width="22" height="20" viewbox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.0617 10.0602C21.0615 8.13735 20.5103 6.25481 19.4734 4.63546C18.4365 3.01611 16.9573 1.72778 15.211 0.922985C13.4646 0.118189 11.5243 -0.169366 9.61956 0.0943624C7.71486 0.358091 5.92561 1.16206 4.46364 2.41109C3.00166 3.66011 1.92819 5.30189 1.3703 7.14205C0.812418 8.98222 0.793484 10.9437 1.31574 12.7943C1.838 14.6449 2.87958 16.3071 4.31717 17.5841C5.75476 18.8611 7.52816 19.6995 9.42741 19.9999V12.969H6.87247V10.0602H9.42741V7.84321C9.42741 5.32181 10.93 3.9282 13.2275 3.9282C13.9823 3.93903 14.7353 4.0046 15.4806 4.12441V6.60137H14.2111C13.829 6.55064 13.4423 6.65376 13.1361 6.88805C12.83 7.12234 12.6294 7.46862 12.5785 7.85075C12.5641 7.95776 12.5619 8.06606 12.5718 8.17358V10.0602H15.3599L14.9138 12.969H12.566V19.9999C14.9339 19.6268 17.0909 18.4204 18.6484 16.5982C20.206 14.7759 21.0618 12.4574 21.0617 10.0602Z" fill="#3A81EF"></path>
                  </svg><span class="ms-2" >Sign in with Facebook</span></a></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-32 pb-36 overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%)"><img class="position-absolute top-50 start-0 translate-middle-y" src="gradia-assets/elements/sign-up/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-10 mb-3" >Join Gradia for free</h2>
          <p class="fs-17 text-muted mb-12" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <form class="mw-md-xl">
          <div class="row mb-6 g-4">
            <div class="col-12 col-md-6">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-1" style="border-radius: 3px;" type="email" placeholder="First name"/>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-2" style="border-radius: 3px;" type="email" placeholder="Last name"/>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-3" style="border-radius: 3px;" type="email" placeholder="Email address"/>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-4" style="border-radius: 3px;" type="email" placeholder="Website"/>
              </div>
            </div>
          </div>
          <div class="form-check mb-8">
            <input class="form-check-input" id="signUpInput1-5" type="checkbox" value=""/>
            <label class="fs-19 text-dark form-check-label" for="signUpInput1-5"><span >I agree to the </span> <span class="text-secondary" >Terms &amp; Conditions</span> <span >of Gradia</span></label>
          </div>
          <button class="btn btn-light-light fs-20 px-9 py-5 text-uppercase" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Sign up for free</button>
        </form>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg ms-auto">
          <div class="mb-12">
            <p class="fs-16 mb-8" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus urna aliquet malesuada gravida viverra vehicula. Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem.</p>
            <div class="row align-items-center g-3">
              <div class="col-auto"><img src="gradia-assets/images/sign-up/elipse3.png" alt=""/></div>
              <div class="col">
                <h3 class="fs-17 mb-1" >Kristin Watson</h3>
                <p class="fs-19 text-muted mb-0" >Scrum Master</p>
              </div>
            </div>
          </div>
          <div>
            <p class="fs-16 mb-8" >Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem ipsum.</p>
            <div class="row align-items-center g-3">
              <div class="col-auto"><img src="gradia-assets/images/sign-up/elipse4.png" alt=""/></div>
              <div class="col">
                <h3 class="fs-17 mb-1" >Jane Cooper</h3>
                <p class="fs-19 text-muted mb-0" >Software Tester</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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>
          <a class="btn w-100 d-flex 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>
        </form>
      </div>
    </div>
    <div class="col-lg-6 bg-light-light">
      <div class="d-flex h-100 align-items-center justify-content-center py-24 px-10">
        <svg width="308" height="208" viewBox="0 0 308 208" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_261_29364)">
            <path d="M304.001 75V12.5C304.001 5.59644 298.404 1.94094e-06 291.501 1.63918e-06L254.001 0C247.097 -3.01765e-07 241.501 5.59644 241.501 12.5V62.5C241.501 103.921 207.922 137.5 166.501 137.5L116.501 137.5C109.597 137.5 104.001 143.096 104.001 150V187.5C104.001 194.404 109.597 200 116.501 200L179.001 200C248.036 200 304.001 144.036 304.001 75Z" fill="white"></path>
            <path d="M4 125L4 187.5C4 194.404 9.59644 200 16.5 200H54C60.9036 200 66.5 194.404 66.5 187.5V137.5C66.5 96.0786 100.079 62.5 141.5 62.5H191.5C198.404 62.5 204 56.9036 204 50V12.5C204 5.59645 198.404 4.5038e-06 191.5 4.42148e-06L129 3.67618e-06C59.9644 2.85294e-06 4 55.9644 4 125Z" fill="white"></path>
          </g>
        </svg>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="mw-md mw-lg-2xl mx-auto">
      <div class="mw-lg mb-16">
        <h2 class="text-white mb-4">Create a free account</h2>
        <p class="lead text-white mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
      </div>
      <form action="">
        <div class="row">
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="text" placeholder="Full Name">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="email" placeholder="Email Address">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="password" placeholder="Password">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="password" placeholder="Confirm Password">
          </div>
          <div class="col-12 mb-7">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="">
              <label class="form-check-label text-secondary-dark" for="">
                <span>I agree to the</span>
                <a class="d-inline-block text-secondary" href="#">Terms &amp; Conditions &amp; Privacy Policy</a>
              </label>
            </div>
          </div>
          <div class="col-12 mb-7">
            <button class="btn btn-primary w-100">Create Free Account</button>
          </div>
          <div class="col-12">
            <p class="fw-medium text-white">
              <span>Already have an account?</span>
              <a href="#">Sign In</a>
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="bg-black position-relative overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 end-0 col-6 h-100 bg-dark bg-opacity-10 text-center pt-52 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="d-block mx-auto mb-40 img-fluid" src="nightsable-assets/images/sign-in/stats.png" alt=""><span class="d-block fs-9 text-secondary-light mb-8">Trusted by</span>
    <div class="d-flex align-items-center justify-content-center gap-8"><img class="img-fluid" src="nightsable-assets/images/sign-in/netflix.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/allianz.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/spotify.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/uber.svg" alt=""></div>
  </div>
  <div class="container position-relative">
    <div class="mw-md mx-auto mx-lg-0 pt-10 pb-20 pb-lg-32"><a class="btn mb-32 p-0" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <div class="text-center">
        <h4 class="mb-4" style="letter-spacing: -0.1rem;">Let`s Get Started</h4><span class="d-block text-secondary-light mb-10">Now create your account!</span>
        <form action=""><a class="btn mb-2 w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/google.svg" alt=""><span class="ms-4 fw-medium">Sign up with Google</span></a><a class="btn w-100 bg-dark bg-opacity-50" href="#"><img class="img-fluid" src="nightsable-assets/images/sign-in/apple-logo.svg" alt=""><span class="ms-4 fw-medium">Sign up with Apple</span></a>
          <div class="d-flex mt-8 mb-10 align-items-center">
            <div class="w-100 border-top"></div><span class="d-inline-block flex-shrink-0 mx-5 fs-10 fw-medium text-secondary-light">or sign in with email</span>
            <div class="w-100 border-top"></div>
          </div>
          <input class="form-control bg-transparent mb-6" type="email" placeholder="Enter your email">
          <button class="btn btn-primary mb-6 w-100 fw-medium" type="submit">Sign up</button>
          <p class="d-flex align-items-center justify-content-center"><span class="text-secondary-light">Dont have an account?</span><a class="btn ms-1 p-0 text-decoration-underline" href="#"> Sign up</a></p>
        </form>
      </div>
    </div>
  </div>
  <div class="d-lg-none bg-dark bg-opacity-10 text-center pt-24 pb-12" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="d-block mx-auto mb-40 img-fluid" src="nightsable-assets/images/sign-in/stats.png" alt=""><span class="d-block fs-9 text-secondary-light mb-8">Trusted by</span>
    <div class="d-flex align-items-center justify-content-center gap-8"><img class="img-fluid" src="nightsable-assets/images/sign-in/netflix.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/allianz.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/spotify.svg" alt=""><img class="img-fluid" src="nightsable-assets/images/sign-in/uber.svg" alt=""></div>
  </div>
</section>

<section class="position-relative py-20">
  <div class="position-absolute start-0 bottom-0 end-0 col-12 col-lg-8 h-100 bg-light"></div><img class="d-none d-lg-block position-absolute top-0 start-0 mt-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 end-0 mb-16" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt=""/>
  <div class="position-relative container">
    <div class="row gap-12 align-items-center">
      <div class="col-12 col-lg-6">
        <h2 class="mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <div class="col-12 col-lg-5">
        <div class="p-6 px-lg-10 py-lg-12 bg-white text-center border rounded">
          <form action="#"><span class="d-inline-block mb-4 small text-info fw-bold">Sign Up</span>
            <h3 class="mb-12">Create new account</h3>
            <div class="position-relative mb-6">
              <input class="form-control" type="email" placeholder="e.g hello@shuffle.dev"/><span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Your email address</span>
            </div>
            <div class="position-relative mb-6">
              <input class="form-control" type="password" placeholder="******"/><span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Password</span>
            </div>
            <div class="position-relative mb-6">
              <input class="form-control" type="password" placeholder="******"/><span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-white text-muted small">Repeat password</span>
            </div>
            <label class="d-flex mb-10">
              <input class="mt-1" type="checkbox" name="terms" value="1"/><span class="d-inline-block text-muted">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</span>
            </label>
            <button class="btn btn-primary w-100">Get Started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="p-8 bg-secondary rounded-4">
      <div class="row mb-8 pb-6 border-bottom border-light-dark">
        <div class="col-12 col-sm-6 mb-6 mb-sm-0">
          <h4 class="fs-5 fw-bold text-white mb-1">Personal info</h4>
          <p class="fs-9 text-secondary-light mb-0">Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col-12 col-sm-6">
          <div class="d-flex align-items-center justify-content-end"><a class="btn me-4 btn-sm btn-dark-light text-secondary-light" href="#">Cancel</a><a class="btn btn-sm btn-primary" href="#">Save</a></div>
        </div>
      </div>
      <form action="">
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Name</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="row">
                  <div class="col-12 col-sm-6 mb-4 mb-sm-0">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="John">
                  </div>
                  <div class="col-12 col-sm-6">
                    <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Doe">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Email address</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="email" placeholder="johndoe@trizzle.ui">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Photo</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="d-flex flex-wrap flex-sm-nowrap mw-xl">
                <div class="flex-shrink-0 mb-4 me-4 rounded-pill" style="width: 80px; height: 80px;"><img class="img-fluid" src="trizzle-assets/images/avatar-photo-form.png" alt=""></div>
                <div class="w-100 py-8 px-4 text-center border border-light-dark rounded-3">
                  <div class="position-relative mx-auto mb-4" style="width: 56px; height: 56px;">
                    <div class="d-flex align-items-center justify-content-center bg-primary rounded-pill" style="width: 56px; height: 56px;">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.71 5.71002L9 3.41002V13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8947 9.73478 14 10 14C10.2652 14 10.5196 13.8947 10.7071 13.7071C10.8946 13.5196 11 13.2652 11 13V3.41002L13.29 5.71002C13.383 5.80375 13.4936 5.87814 13.6154 5.92891C13.7373 5.97968 13.868 6.00582 14 6.00582C14.132 6.00582 14.2627 5.97968 14.3846 5.92891C14.5064 5.87814 14.617 5.80375 14.71 5.71002C14.8037 5.61706 14.8781 5.50645 14.9289 5.3846C14.9797 5.26274 15.0058 5.13203 15.0058 5.00002C15.0058 4.86801 14.9797 4.7373 14.9289 4.61544C14.8781 4.49358 14.8037 4.38298 14.71 4.29002L10.71 0.290018C10.6149 0.198978 10.5028 0.127613 10.38 0.0800184C10.1365 -0.0199996 9.86346 -0.0199996 9.62 0.0800184C9.49725 0.127613 9.3851 0.198978 9.29 0.290018L5.29 4.29002C5.19676 4.38326 5.1228 4.49395 5.07234 4.61577C5.02188 4.73759 4.99591 4.86816 4.99591 5.00002C4.99591 5.13188 5.02188 5.26245 5.07234 5.38427C5.1228 5.50609 5.19676 5.61678 5.29 5.71002C5.38324 5.80326 5.49393 5.87722 5.61575 5.92768C5.73757 5.97814 5.86814 6.00411 6 6.00411C6.13186 6.00411 6.26243 5.97814 6.38425 5.92768C6.50607 5.87722 6.61676 5.80326 6.71 5.71002ZM19 10C18.7348 10 18.4804 10.1054 18.2929 10.2929C18.1054 10.4804 18 10.7348 18 11V17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8947 17.2652 18 17 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V11C2 10.7348 1.89464 10.4804 1.70711 10.2929C1.51957 10.1054 1.26522 10 1 10C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11V17C0 17.7957 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7957 20 17V11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10Z" fill="#E8EDFF"></path>
                      </svg>
                    </div>
                    <input class="position-absolute top-0 start-0 opacity-0" style="width: 56px; height: 56px;" id="" type="file" name="filephoto">
                  </div>
                  <p class="fw-semibold mb-1"><span class="text-primary">Click to upload a file</span> <span class="text-secondary-light">or drag and drop</span></p><span class="fs-10 text-secondary-light fw-semibold">PNG, JPG, GIF or up to 10MB</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Role</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="Frontend Developer">
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Country</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                    <option class="bg-gray-500" value="1">United States</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Timezone</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <div class="position-relative d-block w-100 fs-9 text-light fw-medium border border-light-dark bg-secondary rounded-3"><span class="position-absolute top-50 end-0 me-5 translate-middle-y">
                    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99807 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99807 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z" fill="#3D485B"></path>
                    </svg></span>
                  <select class="position-relative form-control fs-8 border-0 text-light w-100 px-0 py-5 px-3 bg-transparent" style="appearance: none; outline: none;" id="" name="">
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                    <option class="bg-gray-500" value="1">Central Daylight Time (GMT-5) UTC-08:00</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pb-8 mb-8 border-bottom border-light-dark">
          <div class="row">
            <div class="col-12 col-sm-4 mb-4 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Website</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <input class="form-control bg-transparent text-light" id="" type="text" placeholder="trizzle.ui/shuffle">
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="row">
            <div class="col-12 col-sm-4 mb-6 mb-sm-0"><span class="d-block fs-9 fw-medium text-light">Bio</span><span class="d-block fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet</span></div>
            <div class="col-12 col-sm-8">
              <div class="mw-xl">
                <textarea class="form-control bg-transparent text-light" style="height: 225px; resize: none;" id="" type="text" placeholder="Lorem ipsum dolor sit amet"></textarea>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden"><img class="d-none d-lg-block position-absolute top-50 start-0 w-100 translate-middle-y img-fluid" src="zospace-assets/lines/line-mountain.svg" alt=""/><img class="d-lg-none position-absolute top-0 start-0 mt-20 w-100 img-fluid" src="zospace-assets/lines/line-mountain.svg" alt=""/>
  <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" id="" placeholder="Repeat password" 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 py-24 py-xl-40 bg-light">
  <div class="container">
    <div class="pt-8 pb-32 bg-white rounded">
      <div class="d-flex flex-column flex-sm-row mb-16 mb-md-24 px-6 px-md-12 justify-content-end align-items-end align-items-sm-center"><span class="small text-secondary-dark mb-4 mb-sm-0 me-sm-4" >I already have an account</span><a class="btn p-0 d-flex align-items-center text-success" href="#"><span class="me-3" >Sign in</span>
          <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
          </svg></a></div>
      <div class="px-6 px-md-16 px-lg-24">
        <h2 class="display-5 mb-16" >Sign up to Wrexa</h2>
        <div class="mw-sm mw-md-none mx-auto px-md-12 px-lg-24">
          <form action="#" method="post">
            <div class="row mb-12">
              <div class="col-12 col-md-6 mb-6 mb-md-0">
                <div class="form-floating">
                  <input class="form-control" type="email" placeholder="support@shuffle.dev" value=""/>
                  <label for="" >Your email</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-floating">
                  <input class="form-control" type="text" placeholder="Your name"/>
                  <label for="" >Your name</label>
                </div>
              </div>
            </div>
            <div class="d-md-flex mb-16 align-items-center"><a class="d-flex align-items-center text-decoration-none" href="#"><img class="img-fluid me-6" style="width: 22px;" src="wrexa-assets/logos/brands/google.svg" alt=""/><span class="small text-secondary-dark" >Sign Up with Google</span></a>
              <div class="d-none d-md-block mx-8 bg-secondary" style="width: 1px; height: 12px;"></div>
              <div class="d-md-none ms-1 my-8 bg-secondary" style="width: 12px; height: 1px;"></div><a class="d-flex align-items-center text-decoration-none" href="#"><img class="img-fluid me-6" src="wrexa-assets/logos/brands/facebook.svg" alt=""/><span class="small text-secondary-dark" >Sign Up with Facebook</span></a>
            </div>
            <div class="text-center">
              <button class="btn btn-primary" type="submit" >Create Account</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-32 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-7 text-center mw-md mx-auto">
      <div class="mb-6 d-flex align-items-center justify-content-center mx-auto bg-success rounded-3" style="width: 64px; height: 64px;">
        <img class="img-fluid" style="height: 40px;" src="flex-assets/images/sign-in/logo.svg" alt="">
      </div>
      <h2 class="font-heading mb-4 fs-7">Sign in to your account</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">Start your demo version</p>
    </div>
    <form class="mw-sm mx-auto">
      <div class="mb-4 row g-6">
        <div class="col-12">
          <div class="form-group">
            <label class="mb-1 fw-medium text-light-dark" for="signInInput2-1">Email</label>
            <input class="form-control text-secondary-dark shadow" id="signInInput2-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Email">
          </div>
        </div>
        <div class="col-12">
          <div class="form-group">
            <label class="mb-1 fw-medium text-light-dark" for="signInInput2-2">Password</label>
            <input class="form-control text-secondary-dark shadow" id="signInInput2-2" type="password" aria-describedby="passwordlHelp" value="**********************" placeholder="Password">
          </div>
        </div>
      </div>
      <div class="mb-6 row align-items-center justify-content-between g-2">
        <div class="col-auto">
          <div class="form-check">
            <input class="form-check-input shadow" id="flexCheckDefault" type="checkbox" value="">
            <label class="form-check-label fs-13 fw-medium text-light-dark" for="flexCheckDefault">Remember me</label>
          </div>
        </div>
        <div class="col-auto"><a class="fs-13 fw-medium text-success link-success" href="#">Forgot your password?</a></div>
      </div>
      <div class="mb-6 row">
        <div class="col-12">
          <button class="btn btn-lg btn-success fs-11 py-3 w-100 text-success-light shadow" type="submit">Sign In</button>
        </div>
      </div>
      <p class="mb-0 fs-13 fw-medium text-light-dark text-center">
        <span>Don&rsquo;t have an account?</span>
        <a class="text-success link-success" href="#">Sign up</a>
      </p>
    </form>
  </div>
</section>

<section class="py-20 bg-light overflow-hidden">
  <div class="position-relative container">
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-info-light ms-n6 me-n6" style="height: 90%;"></div>
      <div class="position-relative py-16 pt-md-32 pb-md-20 px-4 px-sm-8 bg-white">
        <div class="mw-lg mx-auto text-center"><a class="d-inline-block h6 mb-14" href="#"  ><img class="img-fluid" src="yofte-assets/logos/yofte-logo.svg" alt=""/></a>
          <h2 class="mb-8" >Signing up with social is super quick</h2>
          <p class="mb-10 fw-bold" >Please, do not hesitate</p>
          <form action="">
            <input class="form-control form-control-lg mb-4" type="text" placeholder="john@example.com"/>
            <input class="form-control form-control-lg mb-4" type="password" placeholder="Password"/>
            <input class="form-control form-control-lg mb-10" type="password" placeholder="Repeat password"/>
            <div class="form-check" for="">
              <input class="form-check-input" type="checkbox"/>
              <label class="form-check-label" >By singning up, you agree to our Terms, Data Policy and Cookies.</label>
            </div>
            <button class="mt-12 mt-md-16 btn btn-dark" >JOIN yofte</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 py-lg-36 bg-white" style="background-image: url('pstls-assets/images/forms/form-1-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;" >
  <div class="container">
    <div class="text-center mw-sm mx-auto px-3"><img class="img-fluid" src="pstls-assets/logos/pstls-logo-form.svg" alt="" />
      <h2 class="mb-2 lh-sm mt-6 font-heading" >Log in to your account</h2>
      <p class="mb-6 lh-lg" >Please enter your details to proceed.</p>
      
      <form class="text-start" action="">
        <label class="d-block mb-6"><span class="small" >Email</span>
          <input class="form-control mt-2" type="email" placeholder="Your email address"/>
        </label>
        <label class="d-block mb-4"><span class="small" >Password</span>
          <input class="form-control mt-2" type="password" placeholder="Your password"/>
        </label>
        <label class="d-flex mb-6">
          <input class="form-check-input me-4 border" type="checkbox" name="terms" value="1"/><span style="font-size: 12px;"><span >By signing up, you agree to our</span> <a class="text-decoration-none" href="#" >Terms, Data Policy, and Cookies Policy.</a></span>
        </label><a class="btn btn-dark d-block mb-4" href="#" >Sign In</a><a class="btn mb-6 btn-transparent border d-flex justify-content-center align-items-center" href="#"><img class="img-fluid me-2" src="pstls-assets/logos/google-form-xs.svg" alt=""/><span >Sign In with Google</span></a>
        <span class="text-center d-block" style="font-size: 12px;"><span >Don&rsquo;t have an account?</span> <a class="text-decoration-none" href="#" >Sign Up</a></span>
      </form>
    </div>
  </div>
</section>

<section class="position-relative pb-5">
  <div class="container">
    <div class="position-absolute top-0 end-0 d-none d-lg-flex align-items-center col-lg-6 h-100 bg-primary">
      <div class="p-4">
        <img class="img-fluid" src="metis-assets/illustrations/walk-dog.png" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="row pt-4">
          <div class="col-12 col-md-8 col-lg-10 mx-auto">
            <div class="mb-5 pb-5 d-flex align-items-center justify-content-between">
              <a href="#">
                <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
              </a>
              <a class="btn btn-outline-primary" href="#">Sign Up</a>
            </div>
            <div class="mb-4">
              <form action="#">
                <span class="text-muted">Sign In</span>
                <h2 class="mb-4 fw-light">Join our community</h2>
                <div class="mb-3 input-group">
                  <input class="form-control" type="email" placeholder="name@email.com">
                  <span class="input-group-text">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                    </svg>
                  </span>
                </div>
                <div class="mb-3 input-group">
                  <input class="form-control" type="password" placeholder="Enter your password">
                  <div class="input-group-text">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                  </div>
                </div>
                <button class="btn btn-primary mb-4 w-100">Sign In</button>
                <p class="mb-4 text-muted text-center">or continue with</p>
                <button class="btn btn-outline-secondary mb-2 w-100 text-start" href="#">
                  <img class="img-fluid me-2" src="metis-assets/logos/facebook-sign.svg">
                  <span>Sign In with Facebook</span>
                </button>
                <button class="btn btn-outline-secondary w-100 text-start" href="#">
                  <img class="img-fluid me-2" src="metis-assets/logos/google-sign.svg">
                  <span>Sign In with Google</span>
                </button>
                <p class="mt-4"><a href="#">Police privacy</a> and <a href="#">Terms of Use</a></p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-20 bg-primary overflow-hidden">
  <div class="d-none d-md-block position-absolute top-0 start-0 bg-white w-75 h-100"><img class="d-none d-lg-block position-absolute top-0 end-0" style="height: 88px;" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 end-0" style="height: 88px;" src="cronos-assets/elements/light-green-left.svg" alt=""/></div>
  <div class="d-md-none position-absolute top-0 start-0 bg-white w-100 h-100"></div>
  <div class="container position-relative">
    <div class="row py-lg-16 align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="py-12 px-12 mw-xl mx-auto bg-white shadow-lg text-center">
          <form action="#"><span class="badge bg-secondary-light text-uppercase">Sign Up</span>
            <h3 class="mt-6 mb-8">Create new account</h3>
            <input class="form-control mb-6" type="email" placeholder="E-mail address"/>
            <input class="form-control mb-6" type="password" placeholder="Password"/>
            <input class="form-control mb-6" type="password" placeholder="Repeat password"/>
            <label class="d-flex mb-5 text-start">
              <input class="form-check-input me-4" type="checkbox" name="terms" value="1"/><small class="text-muted">By signing up, you agree to our <a class="text-muted text-decoration-none fw-bold" href="#">Terms, Data Policy</a> and <a class="text-muted text-decoration-none fw-bold" href="#">Cookies Policy</a>.</small>
            </label>
            <button class="btn btn-secondary w-100">Get Started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-danger-dark">
  <div class="position-absolute top-0 end-0 col-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-pink1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Sign up</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Already have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Login</a></p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="form-label fs-9" for="">Email</label>
              <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
            </div>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
            </div><a class="btn w-100 mb-6 d-inline-flex align-items-center justify-content-center btn-danger btn-shadow-danger border-3 border-white border-opacity-10" href="#">Sign up</a><a class="btn w-100 d-inline-flex align-items-center justify-content-center btn-light text-danger-dark border-3 border-danger border-opacity-10" href="#">
              <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.6716 8.36788H18.0003V8.33329H10.5003V11.6666H15.2099C14.5228 13.607 12.6766 15 10.5003 15C7.73908 15 5.50033 12.7612 5.50033 9.99996C5.50033 7.23871 7.73908 4.99996 10.5003 4.99996C11.7749 4.99996 12.9345 5.48079 13.8174 6.26621L16.1745 3.90913C14.6862 2.52204 12.6953 1.66663 10.5003 1.66663C5.89824 1.66663 2.16699 5.39788 2.16699 9.99996C2.16699 14.602 5.89824 18.3333 10.5003 18.3333C15.1024 18.3333 18.8337 14.602 18.8337 9.99996C18.8337 9.44121 18.7762 8.89579 18.6716 8.36788Z" fill="#FFC107" style="fill:#FFC107;fill:color(display-p3 1.0000 0.7569 0.0275);fill-opacity:1;"></path>
                <path d="M15.8118 3.91835L13.8038 5.92639C12.9022 5.19322 11.7543 4.74996 10.5004 4.74996C8.40852 4.74996 6.60603 5.97412 5.76255 7.74334L3.45195 6.04881C4.83686 3.58332 7.47296 1.91663 10.5004 1.91663C12.5359 1.91663 14.3904 2.67488 15.8118 3.91835Z" fill="#FF3D00" stroke="#2E0F17" style="fill:#FF3D00;fill:color(display-p3 1.0000 0.2392 0.0000);fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="0.5"></path>
                <path d="M15.7036 16.1732L13.4963 14.3054C12.6198 14.92 11.5736 15.2509 10.4998 15.25L15.7036 16.1732ZM15.7036 16.1732C14.2965 17.3616 12.4843 18.0834 10.4998 18.0834C7.43286 18.0834 4.76999 16.3714 3.40035 13.8525L15.7036 16.1732Z" fill="#4CAF50" stroke="#2E0F17" style="fill:#4CAF50;fill:color(display-p3 0.2980 0.6863 0.3137);fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="0.5"></path>
                <path d="M18.6713 8.36796H18V8.33337H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.988L13.5079 13.9871L16.0871 16.1696C15.9046 16.3355 18.8333 14.1667 18.8333 10C18.8333 9.44129 18.7758 8.89587 18.6713 8.36796Z" fill="#1976D2" style="fill:#1976D2;fill:color(display-p3 0.0980 0.4627 0.8235);fill-opacity:1;"></path>
              </svg><span class="ms-3">Sign up with Google</span></a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="d-lg-none p-8"><img class="img-fluid d-block w-100 mw-md mx-auto" src="vista-assets/images/sign-up/picture-pink1.png" alt=""></div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 img-fluid" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/headers/circle-double-element-dark.svg" alt=""/><img class="position-absolute top-0 end-0 mt-16 me-6 me-lg-64 img-fluid animate-spinStar" src="casper-assets/headers/blink-sm.png" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-end">
      <div class="col-12 col-lg-6 mb-14 mb-lg-0">
        <div class="mw-md mw-lg-xl mx-auto">
          <h2 class="font-heading fw-medium text-white mb-6">Sign in to your account</h2>
          <p class="display-5 lh-lg text-light-light mb-16">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          <div class="mw-md">
            <form action="">
              <div class="row mb-6">
                <div class="col-md-6 mb-4 mb-md-0"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
                    </svg><span class="ms-2">Login with Facebook</span></a></div>
                <div class="col-md-6"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.94 5.19C15.3181 4.75428 15.6063 4.24817 15.7882 3.70074C15.9701 3.1533 16.0421 2.57533 16 2C14.8394 2.09369 13.762 2.63956 13 3.52C12.6351 3.94198 12.3586 4.43288 12.1868 4.96364C12.0151 5.49441 11.9516 6.05424 12 6.61C12.5662 6.61472 13.1258 6.4891 13.6356 6.24286C14.1454 5.99662 14.5918 5.63637 14.94 5.19ZM17.46 12.63C17.4667 11.8637 17.6686 11.1118 18.0465 10.4452C18.4244 9.77859 18.966 9.21926 19.62 8.82C19.2073 8.22524 18.6616 7.73483 18.0263 7.38767C17.391 7.04052 16.6835 6.84615 15.96 6.82C14.4 6.66 12.96 7.73 12.13 7.73C11.3 7.73 10.13 6.84 8.83003 6.86C7.98016 6.888 7.15205 7.13578 6.42648 7.57919C5.70091 8.02259 5.10264 8.64648 4.69003 9.39C2.93003 12.45 4.24003 17 6.00003 19.47C6.80003 20.68 7.80003 22.05 9.12003 22C10.44 21.95 10.87 21.18 12.4 21.18C13.93 21.18 14.4 22 15.7 21.97C17 21.94 17.92 20.73 18.76 19.52C19.3551 18.6415 19.8199 17.6816 20.14 16.67C19.3475 16.332 18.6714 15.7693 18.1951 15.0513C17.7188 14.3333 17.4633 13.4916 17.46 12.63Z" fill="white"></path>
                    </svg><span class="ms-2">Login with Apple</span></a></div>
              </div>
              <div class="d-flex align-items-center">
                <div class="w-100 border-bottom border-secondary"></div><span class="d-inline-block flex-shrink-0 mx-4 text-light-light">Or</span>
                <div class="w-100 border-bottom border-secondary"></div>
              </div>
              <div class="mb-5">
                <label class="form-label text-white" for="">Email</label>
                <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
              </div>
              <div class="mb-8">
                <div class="d-flex mb-1 justify-content-between">
                  <label class="form-label mb-0 text-white" for="">Password</label><a class="d-inline-block small fw-medium text-info" href="#">Forget password?</a>
                </div>
                <div class="position-relative">
                  <input class="form-control rounded-1 bg-secondary-dark" type="password" placeholder="Enter your password"/>
                  <button class="btn p-0 position-absolute top-50 translate-middle-y end-0 me-3">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.81994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.81994 6 11.9999 6C15.1799 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1799 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" fill="#80818C"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="form-check mb-6">
                <input class="form-check-input" type="checkbox" value=""/>
                <label class="form-check-label ms-2 text-secondary">Remember for 30 days</label>
              </div>
              <button class="btn mb-5 w-100 btn-primary text-black" type="submit"><span class="me-2">LOGIN NOW</span>
                <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
                </svg>
              </button>
              <p class="small fw-medium mb-0"><span class="text-white">Don&rsquo;t have an account?</span><a class="d-inline-block text-info" href="#">Sign up</a></p>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6"><img class="img-fluid d-block w-100 mw-md mw-lg-none mx-auto me-lg-0" src="casper-assets/sign-in/photo1.png" alt=""/></div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-16 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mw-lg-7xl">
    <div class="bg-white rounded-5 overflow-hidden">
      <div class="row">
        <div class="col-12 col-lg-6 pt-16 px-8 px-sm-16 pb-20">
          <div>
            <span class="d-block fs-6 fw-semibold mb-4">Account</span>
            <h3 class="fs-1 mb-6">Try a demo for free</h3>
            <p class="lead fs-8 mb-16">At the heart of our success is a diverse and talented team.</p>
            <form action="">
              <a class="btn mb-6 w-100 py-4 btn-outline-primary" href="#">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_231_2117)">
                    <path d="M31.9994 16.3674C31.9994 15.2797 31.9094 14.1862 31.7175 13.1162H16.3203V19.2775H25.1376C24.7717 21.2647 23.596 23.0225 21.8746 24.1395V28.1373H27.1349C30.224 25.3506 31.9994 21.2353 31.9994 16.3674Z" fill="#4285F4"></path>
                    <path d="M16.3218 32C20.7244 32 24.4373 30.5831 27.1424 28.1374L21.8821 24.1396C20.4185 25.1155 18.5291 25.6682 16.3278 25.6682C12.0691 25.6682 8.45827 22.8521 7.16268 19.0659H1.73438V23.1872C4.50551 28.5901 10.1497 32 16.3218 32Z" fill="#34A853"></path>
                    <path d="M7.15486 19.0661C6.47107 17.079 6.47107 14.9272 7.15486 12.9401V8.81885H1.73255C-0.582725 13.3399 -0.582725 18.6664 1.73255 23.1874L7.15486 19.0661Z" fill="#FFD805"></path>
                    <path d="M16.3218 6.3319C18.6491 6.29663 20.8984 7.15498 22.5839 8.73058L27.2444 4.16251C24.2933 1.44636 20.3766 -0.0469312 16.3218 0.000101659C10.1497 0.000101659 4.50551 3.40999 1.73438 8.81877L7.15668 12.94C8.44628 9.148 12.0631 6.3319 16.3218 6.3319Z" fill="#FF3F00"></path>
                  </g>
                </svg>
                <span class="ms-5">Continue with Google</span>
              </a>
              <span class="d-block mb-4 text-center fw-medium">OR</span>
              <div class="mb-6">
                <label class="form-label fw-medium text-muted" for="">Your Name</label>
                <input class="form-control" type="email" name="" id="" placeholder="ex. d.duncan@email.com">
              </div>
              <button class="btn btn-lg py-4 mb-6 btn-primary w-100" type="submit">Register now</button>
              <p class="d-flex align-items-center text-muted fs-9 fw-medium mb-0">
                <span class="me-1">Already have an account?</span>
                <a class="btn text-muted border-0 p-0" href="#">Log in</a>
              </p>
            </form>
          </div>
        </div>
        <div class="col-12 col-lg-6 p-0">
          <div class="d-flex align-items-center justify-content-center h-100 p-12 bg-danger rounded-4">
            <div class="mw-sm py-12 px-10 bg-white rounded-4">
              <img class="d-block mb-3 img-fluid" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
              <p class="fw-medium text-muted mb-6">Shape Tomorrow with Digital Learning Today!</p>
              <img class="d-block mx-auto img-fluid" src="mirga-assets/images/sign-in/picture1.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-5 overflow-hidden">
  <div class="d-none d-md-block position-absolute top-0 start-0 bg-primary w-75 h-100"></div>
  <div class="d-md-none position-absolute top-0 start-0 bg-primary w-100 h-100"></div>
  <div class="container position-relative mx-auto">
    <div class="row align-items-center">
      <div class="col-12 col-md-8 col-lg-5 mb-5">
        <div>
          <h2 class="display-5 fw-bold mb-4 text-white">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-0 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 col-md-10 col-lg-5 ms-auto">
        <div class="p-5 bg-light rounded text-center">
          <form action="#">
            <span class="text-muted">Sign Up</span>
            <h3 class="fw-bold mb-5">Create new account</h3>
            <input class="form-control mb-2" type="email" placeholder="E-mail address">
            <input class="form-control mb-2" type="password" placeholder="Password">
            <input class="form-control mb-2" type="password" placeholder="Repeat password">
            <label class="d-inline-block mb-4">
              <input class="form-check-input me-2" type="checkbox" name="terms" value="1">
              <small class="text-muted">By signing up, you agree to our <a href="#">Terms, Data Policy</a> and <a href="#">Cookies Policy</a>.</small>
            </label>
            <button class="btn btn-primary py-2 w-100">Get Started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="position-fixed top-0 start-0 h-100 w-100">
    <div class="d-flex h-100 w-100 py-20 px-5 align-items-center justify-content-center">
      <div class="position-relative pt-16 pb-10 pt-md-10 px-6 px-md-16 w-100 mw-xl mx-auto text-center bg-white border rounded-5">
        <button class="position-absolute top-0 end-0 mt-6 me-8 btn btn-link p-0">
          <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="#222222" stroke-width="1"></path>
          </svg>
        </button>
        <div class="mw-md mx-auto">
          <form action="">
            <h3 class="fs-4 fw-medium mb-10" >Sign up to studio</h3><a class="btn btn-lg px-4 mb-2 w-100 btn-outline-light" href="#"><img src="asitrastudio-assets/sign-in/google.svg" alt=""/><span class="ms-4 text-dark" >Sign up with Google</span></a><a class="btn btn-lg px-4 mb-8 w-100 btn-outline-light" href="#">
              <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
                <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
              </svg><span class="ms-4 text-dark" >Sign up with Apple</span></a>
            <div class="d-flex mb-8 align-items-center">
              <div class="w-100 bg-light" style="height: 2px;"></div><span class="fs-10 mx-5 text-light-dark text-uppercase" >or</span>
              <div class="w-100 bg-light" style="height: 2px;"></div>
            </div>
            <div>
              <input class="form-control mb-4" type="text" placeholder="Full name"/>
              <input class="form-control mb-4" type="email" placeholder="E-mail"/>
              <div class="position-relative mb-6">
                <input class="form-control" type="password" placeholder="Password"/>
                <button class="position-absolute top-0 end-0 btn btn-link mt-5 p-0 me-8">
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1095 7.89167L7.89283 12.1083C7.33367 11.5492 7.01953 10.7908 7.01953 10C7.01953 9.60845 7.09665 9.22073 7.24649 8.85898C7.39634 8.49723 7.61596 8.16854 7.89283 7.89167C8.1697 7.6148 8.49839 7.39518 8.86014 7.24533C9.22189 7.09549 9.60961 7.01837 10.0012 7.01837C10.7919 7.01837 11.5503 7.33251 12.1095 7.89167Z" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14.8518 4.80834C13.3935 3.70834 11.7268 3.10834 10.0018 3.10834C7.06016 3.10834 4.31849 4.84167 2.41016 7.84167C1.66016 9.01667 1.66016 10.9917 2.41016 12.1667C3.06849 13.2 3.83516 14.0917 4.66849 14.8083M7.01849 16.275C7.96849 16.675 8.97682 16.8917 10.0018 16.8917C12.9435 16.8917 15.6852 15.1583 17.5935 12.1583C18.3435 10.9833 18.3435 9.00834 17.5935 7.83334C17.3185 7.4 17.0185 6.99167 16.7102 6.60834" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.9263 10.5833C12.8134 11.1646 12.5294 11.699 12.1106 12.1177C11.6919 12.5364 11.1576 12.8204 10.5763 12.9333M7.89297 12.1083L1.66797 18.3333M18.3346 1.66667L12.1096 7.89167" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
              <button class="btn btn-lg mb-6 w-100 btn-light-dark" type="submit" >Sign up</button>
              <p class="mw-xs mx-auto fs-10 text-secondary-light"><span >By signing up, you agree to Capital&rsquo;s</span><a href="#" >Terms of Service, Privacy Policy</a><span >and Deposit Account Agreement</span></p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>