Como criar: Carta de produto

Aprenda a usar CSS para criar uma carta de produto.

Jeans
Jeans Personalizados

$19.99

Algum texto sobre os jeans. Super fino e confortável lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Experimente pessoalmente

Como criar uma carta de produto

Primeiro passo - Adicionar HTML：

<div class="carta">
  <img src="jeans3.jpg" alt="Jeans" style="largura:100%">
  <h1>Jeans Personalizados</h1>
  <p class="preço">$19.99</p>
  <p>Algum texto sobre os jeans...</p>
  <p><button>Adicionar ao Carrinho</button></p>
</div>

Segundo passo - Adicionar CSS：

.carta {
  sombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  largura máxima: 300px;
  margem automática;
  alinhamento do texto: centro;
  família da fonte: arial;
}
.preço {
  cor: cinza;
  tamanho da fonte: 22px;
}
.botão da carta {
  borda: none;
  contorno: 0;
  preenchimento: 12px;
  cor: branco;
  cor de fundo: #000;
  alinhamento do texto: centro;
  cursor: ponteiro;
  largura: 100%;
  tamanho da fonte: 18px;
}
.botão da carta: hover {
  opacity: 0.7;
}

Experimente pessoalmente