HTML & CSS | Clonado Responsive de Product Hunt

Introducción

Product Hunt es un sitio web que permite a los usuarios compartir y descubrir nuevos productos. El site, que fue fundada por Ryan Hoover en Noviembre del 2013, ha vuelto de manos de Y Combinator. Los usuarios suben productos que son listados cada día.

Product Hunt es uno de los mejores sitios para mantenerse al día sobre las últimas tendencias en productos tecnológicos. Visita su web para ver cómo funcionan... porque el ejercicio va de clonar su web.!!

Ejercicio

Requerimientos

• Hacer Fork del repositorio

• Clonar el repositorio en la carpeta de trabajo local

• Usar Media Queries para crear diferentes layouts en el clone de Product Hunt.

• Correr los siguientes comandos para subir los cambios

  git add .
  git commit -m "hecho"
  git push origin master
  

• Navigar al repositorio vuestro y crear un Pull Request

Código de partida

El código inicial contiene la estructura básica de HTML y CSS para comenzar a trabajar. También se facilita el logo de Product Hunt en la carpeta /images, aquí deberás almacenar otras imágenes que necesites para el ejercicio.

Nota: Para la barra derecha "Upcoming Live Chats" section, puedes usar un <div> redondeado para representar las imágen de los chats.

ViewPorts

Product Hunt tiene un diseño Responsive muy interesante. Aquí tienes cuatro pantallazos que representan los diferentes tipos de estructura que debes reproducir. Presta atención a los pequeños detalles para ver las diferencias entre ellas.

LG

MD

SM

XS