Crea este diseño utilizando solo HTML y CSS en un archivo INDEX.HTML, yo voy a colocar el backgroud el cual es una imagen llamada back.png, la cual es el diseño que te muestro sin las letras, tiene que enlazar ese archivo al lado del index.html.
Solamente tienes que colocar la letras del mismo tamaño que en la foto referencial que te envio y tienen que ser la fuente tipografica "Montserrat".
aparte de eso, la resolución tiene que ser 960 x 540 asi como te muestro en la foto referencial de la resolución
Perfecto entendido. Voy a crear un archivo index.html con HTML y CSS puro que incluya:
- Resolución de 960x540
- Fondo como imagen back.png (la imagen naranja sin texto)
- Texto con fuente Montserrat: "CARTÓN DE HUEVO" y "REF. 7.3.6 KG"
- Tamaños de texto que coincidan con el diseño referencial
¡Listo! He creado el archivo index.html con los siguientes detalles:
✅ Resolución: 960 x 540px
✅ Fuente: Montserrat importada desde Google Fonts
✅ Texto: "CARTÓN DE HUEVO" como título principal y "REF. 7.3.6 KG" con el tamaño adecuado
✅ Background: Enlazado a back.png (debe estar en la misma carpeta que el index.html)
✅ Estilos: Texto en blanco con sombra sutil para mejor legibilidad sobre el fondo naranja
El archivo está listo para usar. Solo coloca la imagen back.png en la misma carpeta que el index.html y funcionará perfectamente.
Perfecto, ahora voy a hacer los cambios solicitados:
Listo. He realizado los cambios solicitados:
- Centrado del precio: El contenido con "REF. 7.3.6 KG" ahora está centrado horizontalmente usando
text-align: center. - Menor interlineado: Reducí los valores de
line-heighta 0.8 y 0.9 para que el texto del precio esté más compacto y próximo. - Espacio para imagen: Agregué un comentario con la estructura HTML lista para tu imagen. Solo necesitas descomentar la línea y cambiar
producto.pngpor el nombre de tu archivo de imagen cuando la tengas lista.
