XPEqKK

index.html

<div class="container">
  <div class="card">
    <div class="image">
    <img src="http://res.cloudinary.com/dzuf4ztit/image/upload/c_fill,f_auto,g_center,q_auto:good,r_0,w_350/samples/landscapes/nature-mountains.jpg">
    </div>
    <div class="content">
      <div>AMAZING WILDERNESS VIEWS • 350 ACRES</div>
      <div class="price">$750,000</div>
      <div class="address">101 Greenfield Drive</div>
    </div>
  </div>
  
</div>

style.css

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  font-family: "Helvetica Neue"
}

.card {
  color: #4f4f4f;
  justify-self: center;
  align-self: center;
  box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 50px;
}

.content {
  line-height: 1.4;
  font-size: .85em;
  padding: 15px 0px 15px 15px;
}

.price {
  font-size: 2.5em;
  color: #2f2f2f;
}

.address {
  color: #5f5f5f;
}

xpeqkk.markdown

XPEqKK

A Pen by HigherEducation.com on CodePen.

License.