Skip to content

Instantly share code, notes, and snippets.

@ericrasch
Created Jul 22, 2020
Embed
What would you like to do?
XPEqKK
<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>
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment