Responsive Horizontal CSS Card

Placeholder image

Card Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since..

Read More

<div class="card">
  <img src="https://techoo.info/images/common/500x500/thumbnail-img.svg" alt="Placeholder image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
    been the industry's standard dummy text ever since..</p>
    <a href="#">Read More</a>
  </div>
</div>


/*  Card css start  */
.card {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  max-width: 550px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 7px 10px rgba(0,0,0,0.1);
  transform: scale(1.05);
}

.card img {
  width: 150px;
  height: auto;
  margin-right: 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card h3 {
  font-size: 1.2rem;
  margin: 0;
}

.card p {
  margin: 5px 0;
  font-size: 13px;
}

.card a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 13px;
  margin-top: 15px;
}


@media screen and (max-width: 600px) {
  .card {
    flex-direction: column;
  }
  
  .card img {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/*  Card css end  */


console.log("Hello, World!");





basic CSS card
Responsive basic CSS Cards
Youtube

Privacy Policy | Cookies Policy | Contact Us

We use cookies to improve your experience. By using our site, you agree to our cookie policy.