galaxy/Forms/Galahhad_proud-fox-45.html

<div class="form-container" tabindex="0">
  <div class="form-container__block">
    <div class="form-container__header">
      <p>Sign in with existing account</p>
      <form class="form-container__form">
        <input placeholder="Email address or Username" type="email">
        <input placeholder="Password" type="password">
        <div class="form-container__register-buttons">
          <button class="form-container__sign">Sign In</button>
          <a class="form-container__sign forgot" href="#">Forgot password?</a>
        </div>
      </form>
    </div>
    <div class="form-container__footer">
      <p class="top-line">Or sign in with:</p>
      <div class="form-container__sign-app-buttons">
        <button class="google"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#167ee6" fill="#167ee6" d="m492.668 211.489-208.84-.01c-9.222 0-16.697 7.474-16.697 16.696v66.715c0 9.22 7.475 16.696 16.696 16.696h117.606c-12.878 33.421-36.914 61.41-67.58 79.194L384 477.589c80.442-46.523 128-128.152 128-219.53 0-13.011-.959-22.312-2.877-32.785-1.458-7.957-8.366-13.785-16.455-13.785z"></path>
              <path data-original="#12b347" fill="#12b347" d="M256 411.826c-57.554 0-107.798-31.446-134.783-77.979l-86.806 50.034C78.586 460.443 161.34 512 256 512c46.437 0 90.254-12.503 128-34.292v-.119l-50.147-86.81c-22.938 13.304-49.482 21.047-77.853 21.047z"></path>
              <path data-original="#0f993e" fill="#0f993e" d="M384 477.708v-.119l-50.147-86.81c-22.938 13.303-49.48 21.047-77.853 21.047V512c46.437 0 90.256-12.503 128-34.292z"></path>
              <path class="" data-original="#ffd500" fill="#ffd500" d="M100.174 256c0-28.369 7.742-54.91 21.043-77.847l-86.806-50.034C12.502 165.746 0 209.444 0 256s12.502 90.254 34.411 127.881l86.806-50.034c-13.301-22.937-21.043-49.478-21.043-77.847z"></path>
              <path class="" data-original="#ff4b26" fill="#ff4b26" d="M256 100.174c37.531 0 72.005 13.336 98.932 35.519 6.643 5.472 16.298 5.077 22.383-1.008l47.27-47.27c6.904-6.904 6.412-18.205-.963-24.603C378.507 23.673 319.807 0 256 0 161.34 0 78.586 51.557 34.411 128.119l86.806 50.034c26.985-46.533 77.229-77.979 134.783-77.979z"></path>
              <path data-original="#d93f21" fill="#d93f21" d="M354.932 135.693c6.643 5.472 16.299 5.077 22.383-1.008l47.27-47.27c6.903-6.904 6.411-18.205-.963-24.603C378.507 23.672 319.807 0 256 0v100.174c37.53 0 72.005 13.336 98.932 35.519z"></path>
            </g>
          </svg><span>Google</span></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#000000" fill="#000000" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#ffa100" fill="#ffa100" d="M29.653 201.648.957 289.816c-2.599 8.006.208 16.843 7.07 21.834l247.972 180.183-79.366-155.859-146.98-134.326zM482.347 201.648l28.696 88.168c2.599 8.006-.208 16.843-7.07 21.834L256.001 491.832l87.212-184.854 139.134-105.33z"></path>
              <path class="" data-original="#ff6d18" fill="#ff6d18" d="m256 491.832-.001-178.6-94.302-111.585-65.97-32.822-66.074 32.822L256 491.832zM256 491.832l.001-189.402 94.302-100.783 71.367-32.822 60.677 32.822L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="m256 491.832 94.302-290.185H161.698L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="M29.654 201.65h132.148L104.929 26.874c-2.911-8.942-15.596-8.942-18.611 0L29.654 201.65zM482.346 201.65H350.198l56.769-174.776c2.911-8.942 15.596-8.942 18.611 0l56.768 174.776z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#2684ff" fill="#2684ff" d="M16.436 25.814c-10.23 0-17.903 9.378-16.198 18.756l69.056 422.86c1.705 11.085 11.083 18.756 22.166 18.756h334.196c7.674 0 14.494-5.967 16.198-13.641l69.907-427.123c1.707-10.231-5.967-18.756-16.196-18.756l-479.129-.852zm293.275 305.21H203.143l-28.134-150.899H336.14l-26.429 150.899z"></path>
              <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 -1 0 2434)" y2="2012.875" y1="2211.385" x2="270.312" x1="524.616" id="a">
                <stop style="stop-color:#0052CC" offset=".176"></stop>
                <stop style="stop-color:#2684FF" offset="1"></stop>
              </linearGradient>
              <path fill="" style="fill:url(#a);" d="M488.743 180.125H335.286L309.71 331.024H203.14L77.818 480.219s5.968 5.116 14.493 5.116h334.196c7.674 0 14.494-5.969 16.198-13.643l46.038-291.567z"></path>
            </g>
          </svg></button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: form */
.form-container__sign-app-buttons svg {
  width: 22px;
  height: auto;
}

.google svg {
  width: 18px;
  height: auto;
}

.form-container {
  min-width: 350px;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #4b4b4b;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.form-container:focus-within:not(:focus) {
  box-shadow: 0 0 6px 3px #caedff;
  -webkit-box-shadow: 0 0 6px 3px #caedff;
  outline: 1px solid #97dbff;
}

.form-container p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 14px;
}

.top-line {
  padding-top: 12px;
}

.form-container__form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.form-container__form input {
  height: 31px;
  border: 1px solid #d9d9d9;
  padding: 4px;
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-container__form input:focus {
  border-color: #00a6fd;
  outline: 0;
  box-shadow: none;
}

.form-container__register-buttons {
  display: flex;
  column-gap: 10px;
}

.form-container__sign {
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.65;
  border-radius: 20px;
  width: 110px;
  white-space: nowrap;
  background-color: #00a6fd;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.form-container__sign:first-child:active,
.form-container__sign:first-child:hover {
  background-color: #0099e9;
}

.form-container__sign:focus {
  outline-offset: -2px;
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}

.forgot {
  width: auto;
  padding: 8px 0;
  background: none;
  font-weight: 400;
  color: #428bca;
  text-decoration: none;
}

.forgot:hover {
  text-decoration: underline;
  color: #4c9dd0;
}

.form-container__header {
  padding-bottom: 16px;
}

.form-container__footer {
  padding-top: 12px;
  border-top: 1px solid #cacaca;
}

.form-container__sign-app-buttons {
  display: flex;
  column-gap: 24px;
}

.form-container__sign-app-buttons button:not(:first-child) {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container__sign-app-buttons button:not(:first-child)::before {
  position: absolute;
  content: '';
  width: 120%;
  height: 2px;
  background: rgb(187, 187, 187);
  bottom: 0;
  opacity: 0;
}

.form-container__sign-app-buttons button:not(:first-child):hover::before {
  opacity: 1;
  transition: 1s;
}

.form-container__sign-app-buttons button:not(:first-child):focus::before {
  opacity: 1;
  background-color: #4b4b4b;
}

.form-container__sign-app-buttons button:first-child {
  justify-content: center;
  min-width: 110px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;
  display: flex;
  align-items: center;
  color: #4b4b4b;
  font-size: 13px;
  column-gap: 15px;
  cursor: pointer;
}

.form-container__sign-app-buttons button:first-child:active {
  background: #eeeeee;
}

.form-container__sign-app-buttons button:first-child:focus:not(:active) {
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}
</style>