• HTML
• CSS

HTML

<section class="fdb-block" style="background-image: url(https://frelements.com/img/extra/modal_5.png);">
      <div class="container">
        <div class="row text-center">
          <div class="col">
            <h1 class="text-white">Precios</h1>
          </div>
        </div>
    
        <div class="row mt-5 align-items-center">
          <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center">
            <div class="fdb-box p-4">
              <h2>Bronce</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
    
              <p class="h1 mt-5 mb-5">S./ 99.00</p>
    
              <p><a href="#" class="btn btn-dark">Comprar</a></p>
            </div>
          </div>
    
          <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center pt-4 pt-lg-0">
            <div class="fdb-box px-4 pt-5">
              <h2>Plata</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
    
              <p class="h1 mt-5 mb-5">S./ 299.00</p>
    
              <p><a href="#" class="btn btn-secondary">Comprar</a></p>
            </div>
          </div>
    
          <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-center pt-4 pt-lg-0">
            <div class="fdb-box p-4">
              <h2>Oro</h2>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
    
              <p class="h1 mb-5 mt-5">S./ 699.00</p>
    
              <p><a href="#" class="btn btn-dark">Comprar</a></p>
            </div>
          </div>
        </div>
      </div>
    </section>

CSS

.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%; }