En este proyecto construyo un sitio de e-commerce usando Bootstrap 4, siguiendo los siguientes requerimientos:
El resultado en pantallas de escritorio (lg
) y más grandes (xl
) es el siguiente:
La sección de la izquierda ocupa 3 columnas y la sección de la derecha 9.
En tablets (md
) es el siguiente:
Ahora las secciones se muestran de modo vertical y las categorías han desaparecido.
El resultado en dispositivos móviles (xs
y sm
) es el siguiente:
Ahora sólo se muestran dos camisetas por fila.
Los links a las imágenes del carrusel y los productos son las siguientes (puedes usar tus propias imágenes si quieres):
- Carrusel: Imagen 1, Imagen 2, Imagen 3.
- Productos: Camiseta 1, Camiseta 2, Camiseta 3, Camiseta 4, Camiseta 5.
El botón de "Detalles" del primer producto debe abrir un modal como se muestra en la siguiente imagen:
Cuando la pestaña de comentarios se oprime, se debe mostrar al menos un comentario y un campo para ingresar un nuevo comentario como en la siguiente imagen: