A Pen by 宋佳洋.

A-Pen-by-宋佳洋.markdown

A Pen by 宋佳洋

A Pen by 宋佳洋 on CodePen.

License.

index.html

<div class='container'>
  <div class='cell_fluid'>
    <h1>I'm Grid</h1>
  </div>
  <div class='cell_2-3'>
    <p class='lead'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. </p>
    <p>Objectively implement user friendly best practices whereas multidisciplinary value. Globally whiteboard stand-alone vortals before strategic markets. Dynamically grow long-term high-impact niches through diverse total linkage. Phosfluorescently repurpose enterprise-wide communities whereas premium infomediaries. Assertively leverage existing error-free portals rather than web-enabled. Damnnn it, i am feel so <span>Awkwakw</span>.</p>
  </div>
  <div class='cell_1-3'>
    <p>Hi, my name is John Doe. I am a anonymous person. I write my words here. I also share my great and nice works. I am available to be hired until <span>27th January 2014.</span></p>
    <p class='workshop'>
      <span class='title'>Speaking</span>
      <span>Why CSS?</span>, France, March 2014
    </p>
  
  </div>
  <div class='cell_fluid footer'>
    <p>
      © 2013 <span>someone</span>. This site built with <span>I'm Grid</span>. Work in progress.</p>
  </div>
</div>

style.css

.container {
  max-width: 58em;
  margin: 0 auto;
}

[class*='cell'] {
  box-sizing: border-box;
  margin-right: -0.3em;
  display: inline-block;
  vertical-align: top;
  padding: 0 1.618em;
}
.cell_fluid {
  width: 100%;
}
.cell_2-3 {
  width: 66.666%;
}
.cell_1-3 {
  width: 33.333%;
}
@media (max-width: 30em) {
  [class*='cell'] {
    width: auto;
    display: block;
    margin: 0;
  }
}

body {
  font-family: 'Quando';
  color: #333;
  line-height: 30px;
  font-size: 15px;
}
h1,h3 {
  font-weight: normal;
  text-align: center;
}
h1 {
  font-size: 44px;
  margin-top: 50px;
}
.lead {
  font-size: 18px;
  line-height: 35px;
  
}
span {
  border-bottom: 1px dotted #333;
  cursor: pointer;
  display: inline;
}
span.title {
  display: block;
  border: 0;
  font-style: italic;
  color: #999;
 
}
.workshop {
  padding: 8px 0;
  border-top: 1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
}
.footer {
  font-size: 13px;
}