Comment créer : Carte produit

Apprendre à utiliser CSS pour créer une carte produit.

Jeans
Jeans sur mesure

$19.99

Quelques textes sur les jeans. Très mince et confortable lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Try it yourself

Comment créer une carte produit

Première étape - Ajouter HTML :

<div class="carte">
  <img src="jeans3.jpg" alt="Jeans" style="largeur:100%">
  <h1>Jeans sur mesure</h1>
  <p class="prix">$19.99</p>
  <p>Quelques textes sur les jeans...</p>
  <p><bouton>Ajouter au panier</bouton></p>
</div>

Deuxième étape - Ajouter CSS :

.carte {
  ombre-portee: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  largeur-max: 300px;
  marge-auto;
  alignement-texte: centre;
  police-famille: arial;
{}
.prix {
  couleur: gris;
  taille-police: 22px;
{}
.bouton carte {
  bordure: none;
  contour: 0;
  marge-interieure: 12px;
  couleur: blanc;
  couleur-fond: #000;
  alignement-texte: centre;
  curseur: pointeur;
  largeur: 100%;
  taille-police: 18px;
{}
.bouton carte:hover {
  opacity: 0.7;
{}

Try it yourself