Design values, direction and motion · Lesson 17 of 17
Project: a product card
Combine colour, spacing and Flexbox in a polished card.
10 minutes1 games
Build a product card: an image, a name, a price and a “Buy” button. Use padding, border-radius and a soft shadow, plus Flexbox so the price and button share a line.
HTML
<style>
.product {
width: 260px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
font-family: system-ui, sans-serif;
}
.product img { width: 100%; display: block; }
.info { padding: 16px; }
.row { display: flex; justify-content: space-between; align-items: center; }
.price { font-size: 22px; font-weight: 700; }
.buy { background: #111; color: white; border: 0; padding: 8px 16px; border-radius: 999px; }
</style>
<div class="product">
<img src="https://picsum.photos/seed/shoe/260/160" alt="Running shoes">
<div class="info">
<h3>Running shoes</h3>
<div class="row">
<span class="price">850 EGP</span>
<button class="buy">Buy</button>
</div>
</div>
</div>Exercise
Restyle it: make the .buy button green and give the card a 24px border-radius.
HTML
<style>
.product { width: 260px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 16px; }
.buy { background: #111; color: white; border: 0; padding: 8px 16px; }
</style>
<div class="product">
<h3>Running shoes</h3>
<button class="buy">Buy</button>
</div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.