Gainsight/Custom_Templates/customer_templates/Crayon/auth_url_email.html.liquid

<main class="np-box-container np-open-access">
  <div class="np-box sign-up-body">
    <div class="np-box-content-container sign-up-body-content-container login-body-content-container">

      <div class="sign-in-text-content-wrapper login-text-content-wrapper">
        <img class="login-logo" src="https://s3.amazonaws.com/static.northpass.com/Crayon/crayon_logo_horizontal.png" alt="Welcome To Crayon Academy!">
        <div class="np-form-headline login-text">
          <span class="welcome-header"> Welcome to <span style="color: #FEC311">Crayon Academy</span></span>
        </div>
        <div class="np-form-subheadline login-text">
          <span class="welcome-subheader">Whether you're a new or returning learner, please complete the form to access the academy.
            <span class="login-emoji-mobile"> 👇</span> 
            <span class="login-emoji-desktop">👉</span></span>
        </div>
      </div>

      <div class="sign-in-form-content-wrapper login-form-wrapper">
        <form class="np-form np-box-content login-form" action="{{ form.url }}" method="get" novalidate>
          {% form_authenticity_token %}
          <div class="np-form-field">
            <label class="np-input-label login-text login-input-label" for="learner_first_name">
              First name
            </label>
            <input
              autofocus="autofocus"
              class="np-input login-input"
              id="learner_first_name"
              name="first_name"
              placeholder="e.g., Jane"
              type="text"
              value="{{ form.first_name }}"
            />
          </div>
          <div class="np-form-field">
            <label class="np-input-label login-text login-input-label" for="learner_last_name">
              Last name
            </label>
            <input
              type="text"
              class="np-input login-input"
              value="{{ form.last_name }}"
              id="learner_last_name"
              placeholder="e.g., Smith"
              name="last_name"
            />
          </div>
          <div class="np-form-field">
            <label class="np-input-label login-text login-input-label" for="learner_email">
              Email
            </label>
            <input
              type="text"
              class="np-input login-input"
              value="{{ form.email }}"
              id="learner_email"
              placeholder="e.g., jane.smith@acme.com"
              name="email"
            />
          </div>
          <input
            class="np-button np-button-big np-form-action login-button"
            name="commit"
            type="submit"
            value="{% t shared.enter %}"
          />
        </form>
      </div>

    </div>
  </div>
</main>

<style>
  .np-open-access{
    height: 100%;
  }

  .sign-up-body{
    align-items: center;
    background: #0538BF;
    border-radius: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 !important;
    width: 100%;
  }

  .sign-up-body-content-container{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    margin: 0 !important;
  }

  .sign-in-text-content-wrapper{
    text-align: center;
  }

  .login-logo{
    height: 100px;
    padding: 20px;
  }

  .login-text{
    color: #FFFFFF;
  }

  .welcome-header{
    font-size: 36px;
  }

  .welcome-subheader{
    font-size: 24px;
  }

  .login-emoji-desktop{
    display: none;
  }

  .login-form-wrapper{
    width: 80%;
  }

  .login-input-label{
    font-size: 14px;
    margin-bottom: 10px;
  }

  .login-input{
    background: #FEC311;
    border: 3px solid #FFFFFF;
    border-radius: 0;
  }

  .login-button{
    background: #FEC311;
    border: 2px solid #FFFFFF;
    color: #000000;
    font-size: 30px;
    margin-top: 30px;
    padding: 0;
  }

  .login-button:hover{
    background: #0538BF;
    color: #FFFFFF;
  }

  @media screen and (min-width: 768px){
    .np-box-content-container{
      flex-direction: row;
    }

    .login-text-content-wrapper{
      align-items: flex-start;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 50%;
    }

    .login-logo{
      padding-left: 0;
    }

    .login-text{
      text-align: left;
    }

    .welcome-header{
      font-size: 62px;
    }

    .welcome-subheader{
      font-size: 24px;
    }

    .login-emoji-mobile{
      display: none;
    }

    .login-emoji-desktop{
      display: inline;
    }

    .login-form-wrapper{
      align-items: flex-end;
      display: flex;
      flex-direction: column;
      max-width: 50%;
    }

    .login-form{
      width: 80%;
    }
  }

  @media screen and (min-width: 1000px){
    .login-body-content-container{
      padding: 75px;
    }
  }

  @media screen and (min-width: 1200px){
    .welcome-header{
      font-size: 80px;
    }

    .welcome-subheader{
      font-size: 36px;
    }
  }
</style>