Ahora trabajaremos en la maquetación de la pantalla de login. Allí es donde las y los usuarios podrán ingresar a la aplicación que estás creando. También conocerás un reto de maquetación que podrás resolver en los comentarios.

Código HTML

Como podemos ver en la imagen tenemos un logo, dos inputs, un botón con texto debajo y otro botón que en su versión móvil se desplaza hasta el final de la pantalla.

<divclass="login">
    <divclass="form-container">
      <img src="./logos/logo_yard_sale.svg" alt="logo"class="logo">

      <form action="/"class="form">
        <labelfor="email"class="label">Email address</label>
        <inputtype="text" id="email" placeholder="[email protected]"class="input input-email">

        <labelfor="password"class="label">Password</label>
        <inputtype="password" id="password" placeholder="*********"class="input input-password">

        <inputtype="submit" value="Log in"class="primary-button login-button">
        <a href="/">Forgot my password</a>
      </form>

      <buttonclass="secondary-button signup-button">Sign up</button>
    </div>
  </div>

Código CSS

Podemos estilizar nuestro código HTML así:

.login {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .form-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }
    .logo {
      width: 150px;
      margin-bottom: 48px;
      justify-self: center;
      display: none;
    }
    .form {
      display: flex;
      flex-direction: column;
    }
    .forma {
      color: var(--hospital-green);
      font-size: var(--sm);
      text-align: center;
      text-decoration: none;
      margin-bottom: 52px;
    }
    .label {
      font-size: var(--sm);
      font-weight: bold;
      margin-bottom: 4px;
    }
    .input {
      background-color: var(--text-input-field);
      border: none;
      border-radius: 8px;
      height: 30px;
      font-size: var(--md);
      padding: 6px;
      margin-bottom: 12px;
    }
    .input-email {
      margin-bottom: 22px;
    }
    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .secondary-button {
      background-color: var(--white);
      border-radius: 8px;
      border: 1px solid var(--hospital-green);
      color: var(--hospital-green);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .login-button {
      margin-top: 14px;
      margin-bottom: 30px;
    }
    @media (max-width: 640px) {
      .logo {
        display: block;
      }
    }

Tipos de posicionamiento en HTML