En este proyecto crearás una landing page maquetada y responsive para una “supuesta tienda” de la que serás dueñ@.
Para esto, navega a cualquier web de una tienda ya existente (o si prefieres, inventa tu propia tienda), y copia su página de inicio con HTML y CSS.
Por ejemplo, accede a la web de PcComponentes y guarda una captura completa del diseño de su página de inicio como referencia para la entrega.
@amunizp eligio: https://www.ethicalsuperstore.com/
Consideraremos el proyecto completo cuando hayas maquetado al completo la landing page correspondiente. ¡Te pediremos unos mínimos a entregar, por lo que intenta que la web tenga algunas secciones y no sea algo sencillo o parecido a Google!
Como indicaciones para comenzar:
- Crea tu carpeta de proyecto e inicializa un repositorio de Git en ella. 🗹
- Crea un archivo index.html y un archivo style.css. 🗹
- Carga el CSS en el HTML y haz tu primer commit. 🗹
- Sube todo a la rama main de un nuevo repositorio de Github. 🗹
Ya puedes empezar tu proyecto 🚀
[X] Has creado una estructura HTML semántica donde priman los section y article frente a los div siempre y cuando sea correcto su uso. Estará el contenido envuelto en un main.
[X] La web cuenta con al menos un elemento header o un elemento footer para contenido de navegación o adicional.
[X] Hay al menos un elemento de tipo ul o de tipo ol con varios productos enumerados.
[X] La web tendrá imágenes para al menos 10 productos, puedes copiar su URL de la web original haciendo click derecho > abrir imagen en nueva pestaña > copia la URL de la imagen o con el inspector del navegador.
[X] La web contendrá links a que apunten a los productos originales, recuerda usar rel="noopener" para añadir links a webs externas.
[X] Se han aplicado estilos globales para añadir box-sizing: border-box; y eliminar el padding y margin del body.
[X] El posicionamiento de los elementos se ha realizado por medio de flex. En su defecto, se habrá podido usar grid para esto.
[X] La web cuenta con media queries para hacerla responsive, de forma que se ve el contenido correctamente en móvil menor de 375px y en “escritorio” mayor que mobile.
[X] Punto adicional si haces la web adecuada para tablet, entre los rangos de 375px y 768px.
[X] Existen variables de CSS para los colores y tamaños más utilizados.
[X] Se ha configurado el texto para definir estilos generales para los h1, h2, h3, p, span.
[X] Punto adicional si ha cargado fuentes de Google Fonts.
Pega en enlace de la aplicación desplegada en Netlify para entregar el proyecto.