Construcción de Pantalla de Confirmación de Email Enviado

Clase 7 de 22 • Curso Práctico de Frontend Developer

Resumen

Ahora construiremos la pantalla en la que el email ha sido enviado reutilizando el código. Como recomendación, empieza creando la versión responsive del proyecto.

Código HTML

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

      <h1 class=""title"">Email has been sent!</h1>
      <p class=""subtitle"">Please check your inbox for instructions on how to reset the password</p>

      <div class=""email-image"">
        <img src=""./icons/email.svg"" alt=""email"">
      </div>

      <button class=""primary-button login-button"">Login</button>

      <p class=""resend"">
        <span>Didn't receive the email?</span>
        <a href=""/"">Resend</a>
      </p>
    </div>
  </div>

Código CSS

.login {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .form-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
      justify-items: center;
    }
    .logo {
      width: 150px;
      margin-bottom: 48px;
      justify-self: center;
      display: none;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 12px;
      text-align: center;
    }
    .subtitle {
      color: var(--very-light-pink);
      font-size: var(--md);
      font-weight: 300;
      margin-top: 0;
      margin-bottom: 32px;
      text-align: center;
    }
    .email-image {
      width: 132px;
      height: 132px;
      border-radius: 50%;
      background-color: var(--text-input-field);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24px;
    }
    .email-image img {
      width: 80px;
    }
    .resend {
      font-size: var(--sm);
    }
    .resend span {
      color: var(--very-light-pink);
    }
    .resend a {
      color: var(--hospital-green);
      text-decoration: none;
    }
    .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;
    }
    .login-button {
      margin-top: 14px;
      margin-bottom: 30px;
    }
    @media (max-width: 640px) {
      .logo {
        display: block;
      }

Responsive dising

Nuestro proyecto es responsive, es decir, se adapta a diferentes tamaños de pantalla. Para lograrlo implementamos media queries.

@media (max-width: 640px)

Los estilos que se encuentran fuera son para desktop.
Los que están dentro aplicarán cuando el viewport sea menor a 640 píxeles.

Existe otra forma de maquetación responsive que es justo a la inversa. Primero pensamos en los estilos para móviles y luego vamos ""subiendo"" hasta llegar a web. Esto se conoce como Maquetación Mobile First. Cliquea para ir al curso.

Uso de Figma

Ingresando al diseño en esta plataforma podrás hacer clic sobre los diferentes elementos y ver su código css. Incluso se te permite copiarlo. Claro está, si deseas practicar es mejor que tú no lo memorices y escribas el código css.