<section class="pricing">
  <div class="row">
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--1"></div>
          <h4 class="card__heading">
            <span class="card__h-span-1">Road Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Skinny tires</li>
              <li>On-road racing</li>
              <li>Paved trails</li>
              <li>Very light</li>
              <li>Very fast</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-1">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$999</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--2"></div>
          <h4 class="card__heading">
            <span class="card__h-span-2"><span class="card__span-mountain">Mountain</span> Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Flat handlebars</li>
              <li>Full-suspension</li>
              <li>Wide tires</li>
              <li>Hydraulic breaks</li>
              <li>26'</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-2">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$1999</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--3"></div>
          <h4 class="card__heading">
            <span class="card__h-span-3">City Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Ergonomic</li>
              <li>Lightweight</li>
              <li>Carbon front</li>
              <li>Mudquarded</li>
              <li>+ Carrier</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-3">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$499</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400');

/* ------ START CSS RESET ------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------ END CSS RESET ------ */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 62.5%;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .08rem;
}

.pricing {
  text-align: center;
  padding: 4rem;
  background-color: #eee;
}

.row {
  max-width: 60rem;
  margin: 0 auto; 
}
.row:not(:last-child) { margin-bottom: 8rem; }

.row::after {
  content: "";
  display: table;
  clear: both; 
}

.row [class^="col-"] { float: left; }
.row [class^="col-"]:not(:last-child) { margin-right: 3rem; }

.row .col-1-of-3 { width: 18rem; }

.card {
  -moz-perspective: 300rem;
  perspective: 300rem;
  position: relative;
  height: 30rem;
  border-radius: 5px;
  backface-visibility: hidden;
}

.card__side {
  height: 30rem;
  transition: all 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }

.card__side--front {
  background-color: #fff; }
 
.card__side--back {
  transform: rotateY(180deg); }

.card__side--back-1 {
  background-image: linear-gradient(to right bottom, #ffc93c, #f07b3f); }

.card__side--back-2 {
  background-image: linear-gradient(to right bottom, #30e3ca, #11999e); }

.card__side--back-3 {
  background-image: linear-gradient(to right bottom, #e84545, #903749); }

.card:hover .card__side--front {
    transform: rotateY(-180deg); }

.card:hover .card__side--back {
  transform: rotateY(0); }

.card__pic {
  width: calc(100% - 2rem);
  height: 10rem;
  margin-bottom: 2rem;
  padding: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  background-size: cover;
}

.card__pic--1 {
  background-image: url('https://source.unsplash.com/rumn3j2jTa4/600x400');
}

.card__pic--2 {
  background-image: url('https://source.unsplash.com/CfhwQ2ZTaRY/600x400'); 
}

.card__pic--3 {
  background-image: url('https://source.unsplash.com/T7MS6msFRwg/600x400'); 
}

.card__heading {
  position: absolute;
  top: 8rem;
  right: 1rem;
  color: #fff;
  width: 65%;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.card__heading span {
  padding: .3rem 1.5rem;
  box-decoration-break: clone;
}

.card__h-span-1 { background-image: linear-gradient(to right bottom, rgba(255, 201, 60, 0.8), rgba(240, 123, 63, 0.8)); }

.card__h-span-2 { background-image: linear-gradient(to right bottom, rgba(48, 227, 202, 0.8), rgba(17, 153, 158, 0.8)); }

.card__h-span-3 { background-image: linear-gradient(to right bottom, rgba(232, 69, 69, 0.8), rgba(144, 55, 73, 0.8)); }

span.card__span-mountain {
  font-size: 1.2rem;
  padding: 0;
}

.card__details {
  color: #777;
  font-size: .9rem;
  margin-top: -5rem;
  padding-top: 6rem;
  padding-bottom: 1rem;
}
.card__details ul {
  width: 60%;
  margin: auto;
}

.card__details li:not(:last-child) {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}

.card__side2-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__price {
  color: #fff;
  font-size: .8rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4rem;
}

.card__price-value {
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.6;
}

.btn {
  display: inline-block;
  font-size: 1rem;
  text-transform: uppercase;
  padding: .8rem 1.6rem;
  border-radius: 2rem;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn:active,
.btn:focus {
  transform: translateY(0);
}

.btn--white {
  background-color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.