• HTML
• CSS

HTML

<section class="fdb-block">
      <div class="container">
        <div class="row text-center">
          <div class="col">
            <h1>Planes</h1>
          </div>
        </div>
    
        <div class="row mt-5 align-items-top">
          <div class="col-12 col-md-8 m-auto col-lg-4 text-center">
            <img alt="image" height="60" src="https://frelements.com/img/extra/user_1.png">
            <h2><strong>Bronce</strong></h2>
            <p class="h3 mb-4 mb-lg-5"><em>$9 / mes</em></p>
    
            <p>10 horas de soporte</p>
            <p>40MB de almacenamiento</p>
            <p>subdominios</p>
    
            <p class="text-center mt-4 mt-lg-5"><a href="#" class="btn btn-primary">Choose Plan</a></p>
          </div>
    
          <div class="col-12 col-md-8 col-lg-4 text-center m-auto pt-5 pt-lg-0">
            <img alt="image" height="60" src="https://frelements.com/img/extra/user_2.png">
            <h2><strong>Plata</strong></h2>
            <p class="h3 mb-4 mb-lg-5"><em>$19 / mes</em></p>
    
            <p>10 horas de soporte</p>
            <p>40MB de almacenamiento</p>
            <p>subdominios</p>
    
            <p class="text-center mt-4 mt-lg-5"><a href="#" class="btn btn-primary">Choose Plan</a></p>
          </div>
    
          <div class="col-12 col-md-8 m-auto col-lg-4 text-center pt-5 pt-lg-0">
            <img alt="image" height="60" src="https://frelements.com/img/extra/user_4.png">
            <h2><strong>Oro</strong></h2>
            <p class="h3 mb-4 mb-lg-5"><em>$29 / mes</em></p>
    
            <p>10 horas de soporte</p>
            <p>40MB de almacenamiento</p>
            <p>subdominios</p>
    
            <p class="text-center mt-4 mt-lg-5"><a href="#" class="btn btn-primary">Choose Plan</a></p>
          </div>
        </div>
      </div>
    </section>

CSS

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

.shadow {
  box-shadow: 0 0.3125rem 0.875rem 0 rgba(129, 129, 129, 0.2) !important; }

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

.shadow-none {
  box-shadow: none !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0.3rem; }

p {
  color: #8892a0;
  font-weight: 400; }

.rounded {
  overflow: hidden; }

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important; }
  
.fdb-block {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  padding: 7.5rem 0;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-color: #FFFFFF; }
  .fdb-block .container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    .fdb-block .container.bg-r {
      background-position: right; }
  .fdb-block.fdb-viewport {
    min-height: calc(100% - 2 * 7.5rem); }
    .fdb-block.fdb-viewport .container {
      min-height: calc(100% - 2 * 7.5rem); }
  .fdb-block.fdb-image-bg {
    color: #f2f2f2; }
  .fdb-block .fdb-box {
    background: #FFFFFF;
    padding: 3.75rem 2.5rem;
    overflow: hidden;
    color: #444444;
    border-radius: 0.25rem;
    box-shadow: 0 0.3125rem 0.875rem 0 rgba(129, 129, 129, 0.2) !important; }
  .fdb-block .fdb-touch {
    border-top: solid 0.3125rem #329ef7;
    z-index: 2; }
  .fdb-block img + p, .fdb-block img + h3, .fdb-block img + h4 {
    margin-top: 1.25rem; }
  .fdb-block img + h1, .fdb-block img + h2 {
    margin-top: 2.5rem; }
  .fdb-block .col-fill-left {
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1; }
    .fdb-block .col-fill-left + div {
      position: relative;
      z-index: 2; }
  .fdb-block .col-fill-right {
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1; }
    .fdb-block .col-fill-right + div {
      position: relative;
      z-index: 2; }
  .fdb-block img.fdb-icon {
    width: auto;
    width: 3.75rem; }
  .fdb-block img.fdb-icon-round {
    width: auto;
    width: 3.75rem; }
  .fdb-block .row-100 {
    height: 6.25rem;
    width: 100%; }
  .fdb-block .row-50 {
    height: 3.125rem;
    width: 100%; }
  .fdb-block .row-70 {
    height: 4.375rem;
    width: 100%; }