galaxy/Forms/gharsh11032000_nasty-insect-66.html

<div class="form-container">
      <div class="logo-container">
        Welcome Back!
      </div>

      <div class="social-buttons">
        <button class="social-button facebook">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2 12.001 2Z"></path>
          </svg>
                    <span>Sign in with Facebook</span>

        </button>
        <button class="social-button apple">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.6734 7.2221C10.7974 7.2221 9.44138 6.2261 8.01338 6.2621C6.12938 6.2861 4.40138 7.3541 3.42938 9.0461C1.47338 12.4421 2.92538 17.4581 4.83338 20.2181C5.76938 21.5621 6.87338 23.0741 8.33738 23.0261C9.74138 22.9661 10.2694 22.1141 11.9734 22.1141C13.6654 22.1141 14.1454 23.0261 15.6334 22.9901C17.1454 22.9661 18.1054 21.6221 19.0294 20.2661C20.0974 18.7061 20.5414 17.1941 20.5654 17.1101C20.5294 17.0981 17.6254 15.9821 17.5894 12.6221C17.5654 9.8141 19.8814 8.4701 19.9894 8.4101C18.6694 6.4781 16.6414 6.2621 15.9334 6.2141C14.0854 6.0701 12.5374 7.2221 11.6734 7.2221ZM14.7934 4.3901C15.5734 3.4541 16.0894 2.1461 15.9454 0.850098C14.8294 0.898098 13.4854 1.5941 12.6814 2.5301C11.9614 3.3581 11.3374 4.6901 11.5054 5.9621C12.7414 6.0581 14.0134 5.3261 14.7934 4.3901Z"></path>
          </svg>
          <span>Sign in with Apple</span>
        </button>
      </div>
      <div class="line"></div>
      <form class="form">
        <div class="form-group">
          <label for="email">Email</label>
          <input required="" placeholder="Enter your email" name="email" id="email" type="text">
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input required="" name="password" placeholder="Enter your password" id="password" type="password">
        </div>

        <button type="submit" class="form-submit-btn">Sign In</button>
      </form>

      <a class="forgot-password-link link" href="#">Forgot Password</a>

      <p class="signup-link">
        Don't have an account?
        <a class="signup-link link" href="#"> Sign up now</a>
      </p>
    </div>
<style>
/* From Uiverse.io by gharsh11032000 - Tags: form, login , login form, signin */
.form-container {
  width: 350px;
  background-color: #fff;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: #212121;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container button:active {
  scale: 0.95;
}

.form-container .logo-container {
  margin-bottom: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}

.form-container .social-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.form-container .social-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: inherit;
  color: #fff;
  border: none;
  padding: 12px 16px;
  gap: 8px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container .social-button svg {
  width: 22px;
  height: 22px;
  fill: white;
}

.form-container .social-button.facebook {
  background-color: #1778f2;
}

.form-container .social-button.apple {
  background-color: #212121;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-container .form-group input[type="text"],
.form-container .form-group input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: inherit;
  border: 1px solid #ccc;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input[type="text"]:focus,
.form-container .form-group input[type="password"]:focus {
  outline: none;
  border-color: #1778f2;
}

.form-container .form-submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  color: #fff;
  background-color: #212121;
  border: none;
  width: 100%;
  padding: 12px 16px;
  font-size: inherit;
  gap: 8px;
  margin: 12px 0;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
}

.form-container .form-submit-btn:hover {
  background-color: #313131;
}

.form-container .link {
  color: #1778f2;
  text-decoration: none;
}

.form-container .forgot-password-link {
  align-self: flex-end;
  margin-top: -20px;
}

.form-container .signup-link {
  align-self: center;
  font-weight: 500;
}

.form-container .signup-link .link {
  font-weight: 400;
}

.form-container .link:hover {
  text-decoration: underline;
}

.form-container .line {
  width: 100%;
  height: 1px;
  background-color: #212121;
  opacity: 0.1;
}

</style>