A Pen by Melanie Sumner.

index.html

<script type="text/javascript" src="//use.typekit.net/zyq7dpl.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="container">
  <h1 class="font-bg uppercase">The Avengers that Avenge</h1>
  <div class="row">
    <div class="col-md-12 col-lg-6">
      <div class="person">
           <div class="row">
             <div class="col-sm-8">
              <h2 class="person-name">Thor
                <br/>
                <small class="person-title">Avenger</small>
              </h2>
               <p class="person-description">The crown prince of Asgard, and does some pretty serious damage with that hammer. While the long blonde hair may be rather reminiscent of heavy metal bands in the 80's, he was nice to his mother so it's a win.</p>
             </div>
            <div class="col-sm-4">
          <img class="person-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/Img-placeholder.jpg"/>
          </div>
        </div>
        
      </div><!--end person-->
    </div>
    <div class="col-md-12 col-lg-6">
      <div class="person">
           <div class="row">
             <div class="col-sm-8">
              <h2 class="person-name">Iron Man
                <br/>
                <small class="person-title">Avenger</small>
              </h2>
               <p class="person-description">Disfigured by his own weapons, Tony Stark, aka Iron Man, shows that there is always an opportunity for redemption. Or that sons of wealthy men aren't always interested in doing the same things their fathers did. Either way, he wins.</p>
             </div>
            <div class="col-sm-4">
          <img class="person-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/Img-placeholder.jpg"/>
          </div>
        </div>
        
      </div><!--end person-->
    </div>
    <div class="row">
    <div class="col-md-12 col-lg-6">
      <div class="person">
           <div class="row">
             <div class="col-sm-8">
              <h2 class="person-name">Hawkeye
                <br/>
                <small class="person-title">Avenger</small>
              </h2>
               <p class="person-description">Hawkeye aided the Black Widow in her attempts to steal technology developed by Tony Stark. After the Black Widow was seriously injured during one of these attempts, however, he decided that being a superhero was better than being a criminal.</p>
             </div>
            <div class="col-sm-4">
          <img class="person-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/Img-placeholder.jpg"/>
          </div>
        </div>
        
      </div><!--end person-->
    </div>
    <div class="col-md-12 col-lg-6">
      <div class="person">
           <div class="row">
             <div class="col-sm-8">
              <h2 class="person-name">Captain America
                <br/>
                <small class="person-title">Avenger</small>
              </h2>
               <p class="person-description">Captain America is the alter ego of Steve Rogers, a frail young man who was enhanced to the peak of human perfection by an experimental serum, in order to aid the United States government's imminent efforts in World War II.</p>
             </div>
            <div class="col-sm-4">
          <img class="person-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/Img-placeholder.jpg"/>
          </div>
        </div>
        
      </div><!--end person-->
    </div>
  </div>
  </div>
</div>

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.font-bg {
  font-family: "brandon-grotesque", "Helvetica Nueue", sans-serif;
  font-style: normal;
}
.uppercase {
  text-transform: uppercase;
}
.person {
  display: inline-block;
  padding: 1em;
  margin: 0.5em auto;
  /*border: 1px dotted #e9e9e9;*/
  float: left;
}
.person-name {
  font-family: "brandon-grotesque";
  text-transform: uppercase;
  font-size: 2em;
  vertical-align: top;
  padding-top: 0;
  margin-top: 0;
}
.person-title {
  font-family: "brandon-grotesque";
  text-transform: uppercase;
  color: #999;
  margin: 0;
  padding: 0;
  
}
.person-image {
  width:150px;
  height: 150px;
  float: right;

}
.person-description {
  font-family: "open sans", "Source Sans Pro", "Helvetica Nueue", sans-serif;
 padding: 0;
}

The-Team.markdown

The Team

Working on ways to better display "our staff" or "staff directory" pages....than a table. Because Seriously. Tables. No.

A Pen by Melanie Sumner on CodePen.

License.