adalab / modulo-1-evaluacion-final-sarapalcam

modulo-1-evaluacion-final-sarapalcam created by GitHub Classroom

Ejercicio de Evaluación final del Módulo 1 de Adalab

En este ejericicio se nos pedía replicar una página web de acuerdo a un diseño dado y teniendo en cuenta las siguientes pautas:

• El botón de hamburguesa (en la esquina superior izquierda) debe estar fijo en la parte superior de la pantalla y no debe desaparecer al hacer scroll. El icono de la hamburguesa debe ser un enlace a la página de Adalab. Este menú de hamburguesa no desplega ningún submenú.

• Primer módulo (Anonymous proxy): debe estar maquetado con flexbox y debe ocupar el alto de la ventana del navegador.

• Segundo módulo (Looking Through A Window): se puede maquetar usando las propiedades de CSS que se deseen.

• Tercer módulo (3 Reasons To Purchase): los 3 elementos del listado deben estar maquetados con CSS Grid en todos los tamaños de pantalla.

• Cuarto módulo (footer): se debe maquetar usando flexbox. Todos los textos de la columna "ARTICLES" y todos los textos de la columna "TWITTER" deben ser enlaces a la página de Adalab.

• El botón de flecha del módulo hero debe enlazar a la sección "3 Reasons To Purchase".

• El botón de flecha del footer debe enlazar al inicio de la página.

  • Para resolver tanto en este caso como en el anterior, añadí un scroll suave al html para que ña experiencia de usuario sea más agradable.

• En el hover de los botones ("Go" y "3 Reasons To Purchase") se debe incluir una transición que dejamos a vuestra elección (por ejemplo: color, tamaño, etc.).

  • Además de en estos botones, añadí transiciones a los demás enlaces para que sea más evidente que son enlaces al hacer hover sobre ellos y hagan la experiencia de usuario más cómoda y atractiva.

• BONUS: hacer una pequeña animación en el botón del footer.

  • Incluí también la misma pequeña animación en el botón del hero, ambas para evidenciar que al clicar sobre ellas nos harán un scroll up o un scroll down.

• En el diseño dado en Zeplin la imagen del hero tiene un degradado vertical que oscurece la parte inferior de la imagen. La imagen cover.jpg que nos descargamos en el Zip no tiene este degradado, por lo que se lo añadí en css.

modulo-1-evaluacion-final-sarapalcam's Issues

Mejoras

Muy buen trabajo @sarapalcam!!!

Aquí tienes unos consejos para mejorar tu ejercicio:

• HTML > MÓDULO LOOKING: Debe haber un elemento con el texto "Insomnia tips" que sea un H2 - H6.

Ánimo y si tienes cualquier duda avísame!!!

Con cada mejora que hagas, márcala como completada en este issue y su súbela a este repo.

Este issue ha sido creado automáticamente por ello puede tener algún error, si hay algo que no te encaja escribe por slack al coordinador de Adalab.

Para corregir el ejercicio buscamos determinadas palabras en el código para identificar las secciones. Por ejemplo buscamos Creando para buscar el título de la página. Si has escrito mal alguna palabra en el código es posible que te aparezcan aquí falsos errores.

Por favor no cierres este issue, ya lo haremos nosotros.