A Pen by Hiroki Tani.

dnGeB.markdown

dnGeB

A Pen by Hiroki Tani on CodePen.

License.

index.html

<div class="media speaker u-mbl">
  <div class="media__image speaker__image">
    <img src="http://html5nagoya.jp/frontrend/assets/img/prof_thumb_tani.jpg" width="120" height="120">
  </div>
  <div class="media__body">
    <p class="speaker__name">谷 拓樹</p>
    <div class="speaker__bio">
      <p>中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はスマートフォンアプリの開発、テクニカルディレクションを担当している。Frontrend、JS Girls、html5jなどのコミュニティ活動や講演活動、その他技術書の執筆もおこなう。</p>
    </div>    
  </div>
</div>
  
<div class="media book u-mbl">
  <div class="media__image book__image">
    <img src="http://havelog.ayumusato.com/archives/002/201406/539db1aef1dba.jpg" width="100">
  </div>
  <div class="media__body">
    <p class="book__name">フロントエンドエンジニア養成読本</p>
    <p class="book__info">
      <span class="book__pubdate">2014年7月2日発売</span>
      <span class="book__price">2,138円</span>
    </p>
    <div class="book__intro">
      <p>フロントエンドエンジニアは、主にWebブラウザとシステムの間を取り持つエンジニアとしてWeb系企業では...（省略）..フロントエンド開発の基礎知識や現役のエンジニアがステップアップするために必要な技術を解説します。</p>
    </div>    
    <ul class="book__shop">
      <li><a href="#publisher" class="btn btn--primary">出版元で購入</a></li>
      <li><a href="#amazon" class="btn btn--amazon">Amazon.co.jpで購入</a></li>
    </ul>    
  </div>
</div> 

<ul class="events">
  <li>
    <div class="media event">
      <a href="http://jsgirls.org/events/osaka-201407.html" class="event__target">
        <div class="media__image event__image">
          <img src="http://jsgirls.org/assets/img/event/osaka-201407.jpg" width="60">
        </div>
        <div class="media__body">
          <p class="event__name">JS Girls Osaka #1</p>
        </div>
      </a> 
    </div> 
  </li>
  <li>
    <div class="media event">
      <a href="http://jsgirls.org/events/osaka-201407.html" class="event__target">
        <div class="media__image event__image">
          <img src="http://jsgirls.org/assets/img/event/fukuoka-201406.jpg" width="60">
        </div>
        <div class="media__body">
          <p class="event__name">JS Girls Fukuoka #1</p>
        </div>
      </a> 
    </div> 
  </li>
</ul>

style.css

html {
  background-color: #8BAFAB;
}
body {
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  padding: 100px 0;
  width: 480px;
}
img {
  vertical-align: bottom;
}
.n {
  display: none;
}

.media {
  overflow: hidden; /* Clearfix */
}
.media__image {
  float: left;
  margin-right: 15px;
}
.media__body {
  overflow: hidden;
}

.speaker {
  padding: 20px;
  background-color: #fff;
}
.speaker__image > img {
  border-radius: 60px;
}
.speaker__name {
  margin-bottom: 14px;
  line-height: 1;
  font-weight: bold;
  font-size: 1.8em;
}
.speaker__bio {
  font-size: 0.875em;
  color: #333;
}

.book {
  padding: 20px;
  background-color: #9DBCB8;
  color: #FFF;
}
.book__image {
  margin-right: 20px;
}
.book__name {
  margin-bottom: 10px;
  line-height: 1.3;
  font-weight: bold;
  font-size: 1.2em;
}
.book__info {
  margin-bottom: 10px;
  font-size: 0.875em;
  color: #EEE;
}
.book__pubdate {
  color: #FD0;
}
.book__intro {
  color: #EEE;
}
.book__shop {
  margin-top: 10px;
}
.book__shop > li {
  display: inline-block;
}

.events > li {
  margin-bottom: 15px;
}
.event__target {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}
.event__image {
   margin-right: 15px;
}
.event__image > img {
  border: 5px solid #9DBCB8;
  width: 60px;
  height: 60px;
}
.event__name {
  line-height: 70px;  
}

.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  text-decoration: none;
}
.btn--primary {
  background-color: #11C263;
  font-weight: bold;
  color: #000;
}
.btn--amazon {
  background-color: #FB0;
  font-weight: bold;
  color: #000;
}

.u-mbl {
  margin-bottom: 30px;
}