Project Title #034

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.

The subtitle for the project

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.

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.

“I remember going up to that McDonald's and getting my damn McRib. When I first got there.”

Michael Jordan

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.

Other Projects

Portfolio Project

HTML

<main>
  <article class="bg-white">
    <div class="vh-75 cover bg-center" style="background-image: url(http://mrmrs.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.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.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.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.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

@import './_normalize';

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

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-box-sizing tachyons-aspect-ratios tachyons-background-size tachyons-background-position tachyons-borders tachyons-border-colors tachyons-border-widths tachyons-clears tachyons-display tachyons-floats tachyons-font-family tachyons-font-weight tachyons-heights tachyons-letter-spacing tachyons-line-height tachyons-max-widths tachyons-widths tachyons-overflow tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale tachyons-typography tachyons-utilities tachyons-hovers

Other Components

Article Lists

Title Preview Author Media Flipped Title Preview Author Media

Articles

Feature Full Bleed Background Headline Title Text Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Highlight Header Cover Title Text Image Title Text

Avatars

Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square

Banners

Basic Info Single Cta

Buttons

Basic Previous Next Basic Rounded Extra Small Basic Rounded Small Basic Rounded Basic Centered Icons Pill Grow Pill

Cards

Album Centered Album Left Basic Text Card News Card Product Card Profile Card Title Subtitle Profile Card Suggested Profile Text Card

Collections

Albums Movies Posters Dim Posters Square Title Subtitle Vinyl

Definition Lists

Inline Simple

Error Pages

404

Footers

Centered Icons Hover Glow Inline Text Simple Large Type Small Print Social Circles Social Simple Text Social Simple Social Text Social Studios

Forms

Checkbox List Input Text Label Newsletter Subscription Password Sign In Sign Up Textarea Label

Headers

Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero

Layout

Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column

Links

Animate Background Color Animate Color Dim No Underline Underline On Hover

Lists

Block Item Dotted Border Border Spaced Border Tight Contact Phone Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

Marketing

Iphone App

Nav

Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Minimal Sign Up Title Link List

Pages

4x4 Mixed Grid Double Portfolio Project Swiss Cover Five Columns

Quotes

Left Border Pull Quote

Tables

Basic Striped Dark

Text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Title Subtitle Centered Wide Paragraph