Question

How do you create a card with HTML and CSS?

Answer 1

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-content">
    <h3>Title</h3>
    <p>Card content goes here.</p>
    <a href="#" class="button">Read More</a>
  </div>
</div>

 

.card {
  width: 300px;
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 20px;
}

.card img {
  width: 100%;
}

.card-content {
  margin-top: 10px;
}

.button {
  background-color: #333;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
}

 

 

See the Pen card by Mr Ram (@mrram) on CodePen.