5 667
edições
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 39: | Linha 39: | ||
.image-item { margin-bottom: 1em; } | .image-item { margin-bottom: 1em; } | ||
.image-info { margin-top: 0.5em; } | .image-info { margin-top: 0.5em; } | ||
.variations-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
margin-top: 1em; | |||
} | |||
.variation-item { | |||
width: 30%; | |||
box-sizing: border-box; | |||
margin: 10px; | |||
text-align: center; | |||
border: 1px solid #ccc; | |||
padding: 10px; | |||
} | |||
.variation-item img { | |||
width: 100px; | |||
height: 100px; | |||
display: block; | |||
margin: 0 auto 10px; | |||
} | |||
</style> | </style> | ||
</head> | </head> | ||
| Linha 153: | Linha 176: | ||
if (imageInfo.variations) { | if (imageInfo.variations) { | ||
imagesHtml += '<div class="variations-container">'; | |||
imageInfo.variations.forEach(variation => { | imageInfo.variations.forEach(variation => { | ||
imagesHtml += ` | imagesHtml += ` | ||
<div class=" | <div class="variation-item"> | ||
<img src="https://via.placeholder.com/100" alt="Variation Image"> | |||
<div class="image-info"> | <div class="image-info"> | ||
<b>Descrição</b>: ${variation.description} <br> | <b>Descrição</b>: ${variation.description} <br> | ||
| Linha 163: | Linha 188: | ||
`; | `; | ||
}); | }); | ||
imagesHtml += '</div>'; | |||
} | } | ||
| Linha 169: | Linha 195: | ||
} | } | ||
</script> | </script> | ||
</ | </ | ||