cat
Card title goes here

Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.

Card button

<div class="card-holder">
  <div class="card">
    <img src="./img/img-1.jpg" alt="cat">
    <h5>Card title goes here</h5>
    <p>Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.</p>
    <a href="javascript:void(0)">Card button</a>
  </div>
</div>      

.card-holder {
  max-width: 1100px;
  margin: 0 auto;
}

.card-holder .card {
  max-width: 350px;
  border: 1px solid #4285F4;
  border-radius: 3px;
  -webkit-transition: -webkit-box-shadow 0.7s ease-in;
  transition: -webkit-box-shadow 0.7s ease-in;
  transition: box-shadow 0.7s ease-in;
  transition: box-shadow 0.7s ease-in, -webkit-box-shadow 0.7s ease-in;
  margin: 30px 15px;
}

.card-holder .card h5 {
  padding: 20px 15px;
}

.card-holder .card p {
  padding: 0 15px;
  margin: 0 0 20px;
}

.card-holder .card a {
  padding: 15px 30px;
  display: inline-block;
  background-color: #E43E31;
  margin: 0 15px 20px;
  border: 1px solid #d92a1c;
  border-radius: 25px;
  color: #FFFFFF;
  text-transform: uppercase;
  text-shadow: 2px 1px #222222;
  -webkit-transition: background-color 0.7s ease;
  transition: background-color 0.7s ease;
  font-weight: 700;
  font-size: 14px;
}

.card-holder .card a:hover {
  background-color: #c2190c;
}

.card-holder .card:hover {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
dog
Card title goes here

Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.

  • Lorem ipsum dolor sit elit
  • Amet consectetur adipisicing
  • Obcaecati modi ex culpa
  • Provident nostrum possimus

<div class="card-holder">
  <div class="card">
    <img src="./img/img-2.jpg" alt="dog">
    <h5>Card title goes here</h5>
    <p>Your card description goes here. Consectetur adipisicing elitllum nulla odit nihil sit sequi quia eligendi corporis.</p>
    <ul>
      <li>Lorem ipsum dolor sit elit</li>
      <li>Amet consectetur adipisicing</li>
      <li>Obcaecati modi ex culpa</li>
      <li>Provident nostrum possimus</li>
    </ul>
    <div class="links">
      <a href="javascript:void(0)">Eligendi</a>
      <a href="javascript:void(0)">Possimus</a>
    </div>
  </div>
</div>  <!-- .card-holder -->

// in addition to the example-1, I have the folllowing css
ul {
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 14px;
  border-bottom: 1px solid #c0c1c2;
  padding: 15px 15px;
}

ul li:first-child {
  border-top: 1px solid #c0c1c2;
}

Pricing cards

Basic

$300

  • Lorem ipsum dolor
  • Sit amet consectetur
  • Adipisicing elit
  • Facere illo distinctio
  • Voluptates vero

Standard

$500

  • Lorem ipsum dolor
  • Sit amet consectetur
  • Adipisicing elit
  • Facere illo distinctio
  • Voluptates vero
  • Facere accusantium

Premium

$700

  • Lorem ipsum dolor
  • Sit amet consectetur
  • Adipisicing elit
  • Facere illo distinctio
  • Voluptates vero
  • Facere accusantium
  • Dicta tempore doloremque