Diseño de Producto en Sitio Web | Ejemplo Romuald

Hola compañeros,

Estoy trabajando es mis webs y tengo un problema en cuanto a la personalización de mis productos, por ejemplo en la web de Romuald el diseño del producto individual es así; Zapatos con Calaveras | DECALAVERAS.COM. Como puedes ver es la imagen del producto, una linea negra que divide y el precio a un costado.

¿Alguien sabe como es que puedo hacerlo igual? O al menos si alguien puede decirme que es lo que tengo que buscar exactamente para encontrarlo, no se si son con estilos, plugins o derivadas por eso pido su ayuda.

Solo debes de darle un borde bottom de color a la imagen y uno margin y padding para separar un poco.
El precio solo tiene un pequeño padding y un backgraund negro.


Solo es cosa que le apliques estos estilos a las clases correspondientes de las imágenes, precios y ponerlos en tu styles.css, yo solo puse un ejemplo.

Stron dijo:

Solo debes de darle un borde bottom de color a la imagen y uno margin y padding para separar un poco.
El precio solo tiene un pequeño padding y un backgraund negro.

HTML:

.img {
    border-bottom: 2px solid black;
    margin-bottom: 2px;
    padding-bottom: 4px;
}
 .price {
    background: black;
    color: white;
    font-size: 12px;
    padding: 4px;
    float: right;
}

Solo es cosa que le apliques estos estilos a las clases correspondientes de las imágenes, precios y ponerlos en tu styles.css, yo solo puse un ejemplo.

Hacer clic para expandir...

Me funciono muy bien amigo, el único problema es que no aparece la linea de separación, eso como lo puedo hacer si no te molesto?

bespokel dijo:

Me funciono muy bien amigo, el único problema es que no aparece la linea de separación, eso como lo puedo hacer si no te molesto?

Hacer clic para expandir...

Si me pasas por MP tu web puedo dar un vistaso y probar los estilos.