galaxy/Forms/SteeveeG_neat-fly-82.html

<div class="container">
  <form class="SignInForms">
    <div class="font header">Sign in with existing account</div>
    <input type="email" class="Input" placeholder="Email address or Username" />
    <input type="password" class="Input" placeholder="Password" />
    <div class="Buttons">
      <button class="SignInUp">Sign in</button>
      <button class="ForgotPassword">Forgot password?</button>
    </div>
    <div class="font header OtherSignInLabel">Or sign in with:</div>

    <div class="SignInWith">
      <a href="#" class="SignInWithGoogle">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 533.5 544.3"
          class="GoogleLogo"
        >
          <path
            fill="#4285f4"
            d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
          ></path>
          <path
            fill="#34a853"
            d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
          ></path>
          <path
            fill="#fbbc04"
            d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
          ></path>
          <path
            fill="#ea4335"
            d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
          ></path>
        </svg>

        <div>Google</div>
      </a>

      <div class="SignInWithLogo">
        <a href="#">
          <svg
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
            ></path>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
      <div class="SignInWithLogo">
        <a href="#">
          <svg
            fill-rule="evenodd"
            viewBox="0 0 64 64"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path fill="#e24329" d="M32 61.477L43.784 25.2H20.216z"></path>
            <path fill="#fc6d26" d="M32 61.477L20.216 25.2H3.7z"></path>
            <path
              fill="#fca326"
              d="M3.7 25.2L.12 36.23a2.44 2.44 0 0 0 .886 2.728L32 61.477z"
            ></path>
            <path
              fill="#e24329"
              d="M3.7 25.2h16.515L13.118 3.366c-.365-1.124-1.955-1.124-2.32 0z"
            ></path>
            <path fill="#fc6d26" d="M32 61.477L43.784 25.2H60.3z"></path>
            <path
              fill="#fca326"
              d="M60.3 25.2l3.58 11.02a2.44 2.44 0 0 1-.886 2.728L32 61.477z"
            ></path>
            <path
              fill="#e24329"
              d="M60.3 25.2H43.784l7.098-21.844c.365-1.124 1.955-1.124 2.32 0z"
            ></path>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
      <div class="SignInWithLogo">
        <a href="#">
          <svg
            fill="none"
            viewBox="4 4 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#2684FF"
              d="M4.77044 5C4.29089 5 3.93123 5.43959 4.01115 5.87918L7.24814 25.7007C7.32806 26.2203 7.76766 26.5799 8.28717 26.5799H23.9526C24.3123 26.5799 24.632 26.3002 24.7119 25.9405L27.9888 5.91915C28.0688 5.43959 27.7091 5.03997 27.2296 5.03997L4.77044 5ZM18.5177 19.3067H13.5223L12.2035 12.2333H19.7565L18.5177 19.3067Z"
            ></path>
            <path
              fill="url(#paint0_linear)"
              d="M26.9098 12.2333H19.7165L18.5176 19.3067H13.5222L7.64771 26.3002C7.64771 26.3002 7.92744 26.54 8.32707 26.54H23.9925C24.3522 26.54 24.6719 26.2602 24.7518 25.9005L26.9098 12.2333Z"
            ></path>
            <defs>
              <linearGradient
                gradientUnits="userSpaceOnUse"
                y2="23.5316"
                x2="16.672"
                y1="14.2265"
                x1="28.5925"
                id="paint0_linear"
              >
                <stop stop-color="#0052CC" offset="0.176"></stop>
                <stop stop-color="#2684FF" offset="1"></stop>
              </linearGradient>
            </defs>
          </svg>
        </a>
        <div class="Bar"></div>
      </div>
    </div>
  </form>
  <div class="NoAcc">
    <form class="NoAccForms">
      <div class="font header">Not registerd yet?</div>
      <div class="font h3">Create JetBrains Account</div>
      <input type="email" class="Input" placeholder="Your email address" />
      <button class="SignInUp">Sign Up</button>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by SteeveeG  - Website: https://www.jetbrains.com/de-de/ - Name: Jetbrains - Tags: login, sign-up, login form, rounded, simple, blue, password, email, white, signin, create, username, signup, clear, Google, GitHub, GitLab, Bitbucket, JetBrains, hyperlink, existing */
.font {
  font-family:
    JetBrains Sans,
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Droid Sans,
    Helvetica Neue,
    Arial,
    sans-serif;
}
form {
  padding: 1.5em 1em;
}
.SignInForms {
  background-color: rgb(245, 245, 245);
  width: 22.375em;
  height: 20.313em;
}
.header {
  color: rgb(75, 75, 75);
  font-size: 0.938em;
  font-weight: 640;
  margin: 0 0 0.875em 0;
  display: block;
}

.Buttons {
  padding: 0 0 1em;
  border-bottom: solid #d2d0d0 0.063em;
  margin-bottom: 1.188em;
}

.SignInUp {
  cursor: pointer;
  color: #ffffff;
  background-color: #00a6fd;
  border: none;
  width: 6.875em;
  padding: 0.5em 1.25em;
  font-size: 0.875em;
  line-height: 1.65;
  border-radius: 1.25em;
  touch-action: manipulation;
  margin: 0 0.625em 0 0;
}

.ForgotPassword {
  cursor: pointer;
  color: #4c9dd0;
  padding: 0.5em 0;
  border: none;
  text-decoration: none;
  background-color: transparent;
  font-size: 0.875em;
}
.ForgotPassword:hover {
  text-decoration: underline;
  background-color: transparent;
}
.Input {
  padding: 0.25em;
  vertical-align: middle;
  width: 100%;
  margin: 0 0 1em 0;
  color: #4b4b4b;
  height: 2.5em;
  border: 1px solid #d9d9d9;
}
.Input:focus {
  outline: none;
  border-color: #00a6fd;
}

.SignInForms:focus-within,
.NoAcc:focus-within {
  -webkit-box-shadow: 0 0 6px 3px #caedff;
  box-shadow: 0 0 6px 3px #caedff;
  outline: 1px solid #97dbff;
}

.SignInUp:hover {
  background-color: #008bd4;
  border: #00a6fd;
}

.OtherSignInLabel {
  margin-bottom: 0.688em;
}

.SignInWith {
  display: flex;
  align-items: center;
}

.GoogleLogo {
  height: 1.25em;
  width: 1.25em;
  margin: 0 0.875em;
}

.SignInWithGoogle {
  min-width: 8.5em;
  height: 3em;
  text-decoration: none;
  color: #4b4b4b;
  display: flex;
  margin-right: 1.75em;
  align-items: center;
  position: relative;
  box-shadow:
    0 0 0.063em rgb(0 0 0 / 10%),
    0 0.063em 0.063em #b7b7b7;
  background: #ffffff;
  border-radius: 0.125em;
  user-select: none;
  font-size: 0.813em;
}

.SignInWithLogo {
  display: block;
  margin-right: 1.75em;
  position: relative;
}

.SignInWithLogo:hover .Bar {
  transition: ease-in-out 0.5s;
  opacity: 1;
}
.h3 {
  display: block;
  font-size: 1.17em;
  font-weight: 600;
  margin-bottom: 1em;
}
.Bar {
  background-color: #b7b6b6;
  bottom: -0.238em;
  left: -0.25em;
  position: relative;
  height: 0.094em;
  transition: ease-in-out 0.5s;
  opacity: 0;
  width: 2em;
  border-radius: 6.25em;
}

.NoAcc {
  top: 1em;
  width: 22.375em;
  height: 12.7em;
  padding: 1.188em;
  background-color: rgb(245, 245, 245);
  position: relative;
}
.NoAccForms {
  padding: 0;
}
.container {
  display: flex;

  flex-direction: column;
}

</style>