<div class="wrapper">
  <h2 class="h2">Flexbox</h2>
<ul class="flex cards">
  <li><h3 class="cardTitle">Card 1</h3>
    <img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 1</span></button>
  </li>
  <li><h3 class="cardTitle">Card 2</h3>
    <img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 2</span></button>
  </li>
  <li><h3 class="cardTitle">Card 3</h3>
    <img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 3</span></button>
  </li>
  <li><h3 class="cardTitle">Card 4</h3>
    <img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 4</span></button>
  </li>
  <li><h3 class="cardTitle">Card 5</h3>
    <img src="https://www.cstatic-images.com/car-pictures/xl/usc70lec301b021001.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 5</span></button>
  </li>
  
</ul>

  <h2 class="h2">CSS Grid Layout</h2>
<ul class="grid cards">
  <li><h3 class="cardTitle">Card 1</h3>
     <img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 1</span></button>
  </li>
  <li><h3 class="cardTitle">Card 2</h3>
     <img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 2</span></button>
  </li>
  <li><h3 class="cardTitle">Card 3</h3>
     <img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 3</span></button>
  </li>
  <li><h3 class="cardTitle">Card 4</h3>
     <img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 4</span></button>
  </li>
  <li><h3 class="cardTitle">Card 5</h3>
     <img src="http://st.motortrend.ca/uploads/sites/10/2016/08/2017-mercedes-benz-slc-amg-slc43-convertible-angular-front.png" alt="Car" class="cardimg">
    <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
    </p>
    <button href="#" class="button grow">Learn More<span class="sr-only">About Car 5</span></button>
  </li>
  
</ul>
</div>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.h2 {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 32px;
  font-size: 2em;
}

.cardTitle {
  font-size: 24px;
  font-size: 1.5em;
  text-align: center;
}

.wrapper {
  margin: 0 auto;
  width: 90%;
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards li {
  border: 1px solid #490A3D;
  border-radius:5px;
  background-color: #2474A6;
  color: #fff;
  flex: 1 1 200px;
  box-shadow: 5px 5px 20px grey;
}

.cards h3 {
  background-color: #F2A30F;
  margin: 0;
  padding: 10px;
}

.cards p {
  padding: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.flex li {
  flex: 1 1 200px;
  margin: 10px;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3,1fr);
  grid-gap: 20px;
}

.cardimg {
  max-width: 100%; 
  height: auto !important;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.button {
  width: 60%;
  background-color: #F2A30F;
  color:white;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  padding: 8px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Sheen Effect: https://cssanimation.rocks/pseudo-elements/ */

.button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

.button:hover::after, .button:focus::after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.