Hur man skapar: Produktkort

Lär dig hur du använder CSS för att skapa produktkort.

Jeans
Anpassade byxor

19.99 kr

Några texter om byxorna. Super smala och bekväma lorem ipsum lorem byxor lorem byxorsum. Lorem byxorsum denim lorem byxorsum.

Prova själv

Hur man skapar produktkort

第1步 - Lägg till HTML：

<div class="card">
  <img src="jeans3.jpg" alt="Byxor" style="width:100%">
  <h1>Anpassade byxor</h1>
  <p class="price">19.99 kr</p>
  <p>Några texter om byxorna..</p>
  <p><button>Lägg till i kundvagn</button></p>
</div>

第2步 - 添加 CSS：

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}
.price {
  color: grey;
  font-size: 22px;
}
.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}
.card button:hover {
  opacity: 0.7;
}

Prova själv