Hoe te maken: productkaart

Leer hoe je een productkaart maakt met CSS.

Jeans
Aangepaste Jeans

$19.99

Enkele tekst over de jeans. Zeer smal en comfortabel lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Try it yourself

Hoe een productkaart te maken

Eerste stap - Voeg HTML toe:

<div class="kaart">
  <img src="jeans3.jpg" alt="Jeans" style="breedte:100%">
  <h1>Aangepaste Jeans</h1>
  <p class="prijs">$19.99</p>
  <p>Enkele tekst over de jeans...</p>
  <p><button>Voeg toe aan winkelwagen</button></p>
</div>

Tweede stap - Voeg CSS toe:

.kaart {
  schaduw: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  maxbreedte: 300px;
  marge: auto;
  tekstuitlijning: center;
  lettertype: arial;
{}
.prijs {
  kleur: grijs;
  lettergrootte: 22px;
{}
.kaart knop {
  rand: none;
  omlijning: 0;
  inbeslagneming: 12px;
  kleur: wit;
  achtergrondkleur: #000;
  tekstuitlijning: center;
  cursor: aanwijzer;
  breedte: 100%;
  lettergrootte: 18px;
{}
.kaart knop:hover {
  opacity: 0.7;
{}

Try it yourself