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

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.

Recuerda que para poder hacerlo primero debes crearte una cuenta en Figma.

Luego abre este link y selecciona la opción “Open in Editor”

Haciendo esto, también dispondrás del texto que lee el usuario.

Si te gustaría dominar esta herramienta puedes completar los siguientes cursos:

• Curso de Figma
• Curso de Figma avanzado

Contribución creada por Guadalupe Monge Barale con los aportes de Katerin Calderón y Belmer Alberto Cordoba Diaz.