HTML
<main>
<article class="bg-white">
<div class="vh-75 cover bg-center" style="background-image: url(http://mrmrs.github.io/photos/001.jpg);"></div>
<div class="ph4 ph5-m ph6-l">
<div class="pv5 f4 f2-ns measure center">
<h1 class="fw6 f1 fl w-100 black-70 mt0 mb3 avenir">Project Title #034</h1>
<p class="db lh-copy black-70 serif fw1 mv0 f4 f3-m f2-l measure baskerville">
A short description of your project. Maybe a few notes concerning your
constraints and process. Standard lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore etc. al dolore magna
aliqua. Ut enim ad.
</p>
</div>
<div class="cf mw8 center">
<div class='fl w-33 w-50-m w-33-l pr2 pr2-l'>
<div class="pv6 cover bg-center" style="background: url(http://mrmrs.github.io/photos/002.jpg);"></div>
</div>
<div class='fl w-33 w-50-m w-33-l ph3 pr0-m ph3-l'>
<div class="pv6 cover bg-center" style="background-image: url(http://mrmrs.github.io/photos/003.jpg);"></div>
</div>
<div class='fl w-33 w-100-m w-33-l pl2 pl0-m pl2-l mt4-m'>
<div class="pv6 cover bg-center" style="background-image: url(http://mrmrs.github.io/photos/004.jpg);"></div>
</div>
</div>
<div class="measure f3 center mv5 black-70">
<h1 class="fw6 f3 avenir">The subtitle for the project</h1>
<p class="lh-copy measure f4 f3-ns black-70 baskerville">
Back in the office after his vacation on a 154-foot rented yacht named Mister Terrible, he feels that relaxation slipping away. He feels pulled inward, toward his own most valuable and destructive traits. Slights roll through his mind, eating at him: worst record ever, can't build a team, absentee landlord. Jordan reads the things written about him, the fuel arriving in a packet of clips his staff prepares. He knows what people say. He needs to know, a needle for a hungry vein. There's a palpable simmering whenever you're around Jordan, as if Air Jordan is still in there, churning, trying to escape. It must be strange to be locked in combat with the ghost of your former self.
</p>
<p class="lh-copy measure f4 f3-ns black-70 baskerville">
The memories came to him, how he felt then. "It was very pure, if I can say it right," he'd explain later. "It was pure in 1984 … I was still dreaming." During the Olympics, he was deep in negotiations with Nike for his first shoe contract. He traded pins with other athletes. Eight years later, when he was the most famous person in the world and the Dream Team was forced to stay outside the Olympic Village, he'd be disappointed when that separation kept him from swapping pins again.
</p>
</div>
<img src="http://mrmrs.github.io/photos/005.jpg" class="db w-100"/>
<blockquote class="mh0 pr0 mt5">
<p class="f2 f1-l fw1 mv0 tc lh-title baskerville">
“I remember going up to that McDonald's and getting my damn McRib. When I first got there.”
</p>
<p class="tc f6 gray">
Michael Jordan
</p>
</blockquote>
<div class="measure f4 f3-ns center mv5 black-70">
<p class="lh-copy measure f3 black-70 baskerville">
There's an unspoken shadow over the stories about that town house on Essex Drive. James Jordan remodeled the basement for his son. Did all the work himself, because he'd never let Michael pay for something he could do on his own. The first winter, while Michael was out of town for the All-Star Game, his pipes froze. His dad ripped out the walls, replacing the pipes himself, patching and repainting when he finished. He spent two weeks fixing his son's home. James and Mike -- that's where all this nostalgia has been headed, from the moment it began.
</p>
<div class="aspect-ratio aspect-ratio--16x9 mv5">
<iframe src="https://www.youtube.com/embed/LAr6oAKieHk" class="aspect-ratio--object" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</article>
<section class="cf mt5 pv5 bt b--black-05 ph6-l">
<h1 class="tc f5 ttu fw6 tracked mb4 avenir">Other Projects</h1>
<a href="#0" class="fl w-third w-25-ns border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-center pv5 pv6-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/hw-080411-cargo_960.jpg);"></div>
</a>
<a href="#0" class="fl w-third w-25-ns border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-top pv5 pv6-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/hwspringtour-cargo_960-1.jpg);"></div>
</a>
<a href="#0" class="fl w-third w-25-ns border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-top pv5 pv6-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/cc010611.s_960.jpg);"></div>
</a>
<a href="#0" class="fl w-100 w-25-ns border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-top pv5 pv6-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/adam-stern-031209_960-2.jpg);"></div>
</a>
<a href="#0" class="fl w-50 border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-center pv5 pv7-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/zh170311.4.cargo_960.jpg);"></div>
</a>
<a href="#0" class="fl w-50 border-box overflow-hidden ba bw2 white" title="">
<div class="grow cover bg-center pv5 pv7-l" style="background-image:url(https://s3-us-west-2.amazonaws.com/prnt/hw090911_960.jpg);"></div>
</a>
</section>
</main>
css
.border-box {
box-sizing: border-box;
}
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.cover {
background-size: cover !important;
}
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top {
background-repeat: no-repeat;
background-position: top center;
}
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.b--black-05 {
border-color: rgba(0, 0, 0, .05);
}
.bw2 {
border-width: .25rem;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.db {
display: block;
}
.fl {
float: left;
_display: inline;
}
.serif {
font-family: georgia, times, serif;
}
.avenir {
font-family: 'avenir next', avenir, sans-serif;
}
.baskerville {
font-family: baskerville, serif;
}
.fw1 {
font-weight: 100;
}
.fw6 {
font-weight: 600;
}
.vh-75 {
height: 75vh;
}
.tracked {
letter-spacing: .1em;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
.mw8 {
max-width: 64rem;
}
.w-33 {
width: 33%;
}
.w-50 {
width: 50%;
}
.w-100 {
width: 100%;
}
.w-third {
width: calc(100% / 3);
}
.overflow-hidden {
overflow: hidden;
}
.black-70 {
color: rgba(0, 0, 0, .7);
}
.gray {
color: #777;
}
.white {
color: #fff;
}
.bg-white {
background-color: #fff;
}
.pl2 {
padding-left: .5rem;
}
.pr0 {
padding-right: 0;
}
.pr2 {
padding-right: .5rem;
}
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.mt0 {
margin-top: 0;
}
.mt5 {
margin-top: 4rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.tc {
text-align: center;
}
.ttu {
text-transform: uppercase;
}
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2.25rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1.25rem;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
.grow {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform .25s ease-out;
}
.grow:hover, .grow:focus {
transform: scale(1.05);
}
.grow:active {
transform: scale(.9);
}
@media screen and (min-width: 30em) {
.w-25-ns {
width: 25%;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w-50-m {
width: 50%;
}
.w-100-m {
width: 100%;
}
.pl0-m {
padding-left: 0;
}
.pr0-m {
padding-right: 0;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.mt4-m {
margin-top: 2rem;
}
.f3-m {
font-size: 1.5rem;
}
}
@media screen and (min-width: 60em) {
.w-33-l {
width: 33%;
}
.pl2-l {
padding-left: .5rem;
}
.pr2-l {
padding-right: .5rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
}
