<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE 8]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/reset.css" type="text/css" />
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/css-layout.css" type="text/css" />
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/css-helpers.css" type="text/css" />
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/cssoff_1.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Lato:100,%20400|Lora:400,400italic,700italic|Oswald|Merriweather:300,700' rel='stylesheet' type='text/css'>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/cssoff-ie8.css" />
<![endif]-->
<title>CSS OFF 2013</title>
</head>
<body>
<header class="head h-pr">
<div class="container cf h-pr">
<h1 class="h-pr head-title">CSS <span>OFF</span></h1>
<p class="h-pa head-info">Volume 3— <time datetime="2013-09" >September 2013</time> </p>
</div>
</header>
<div class="container">
<section class="cf h-pr main">
<article class="h-iblock gap-5 box h-tcenter h-balign h-pr">
<figure class="bx-image h-pr">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/img-barbie.png" alt="Box Model" />
</figure>
<div class="bx-inner">
<header>
<h1 class="bx-title">Box Model</h1>
</header>
<p class="bx-txt">The Barbie doll was invented in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie's job was teenage fashion doll. The full name of the first doll was Barbie Millicent Roberts, from Willows, Wisconsin.</p>
</div>
</article>
<article class="h-iblock gap-7 positions h-balign">
<figure class="pst-image h-pr">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/img-positions.jpg" alt="Image Position Relatives" />
</figure>
<div class="pst-inner h-pr">
<header>
<h2 class="pst-subtitle">feature</h2>
<h1 class="pst-title">positioning relatives</h1>
</header>
<p class="pst-txt">In 1958, English pictorial photographer Henry Peach Robinson created the world’s first photomontage by combining five different negatives to make one complete print of a young girl on her deathbed. “Fading Away”—Robinson’s first and most famous composite photo—depicts a young girl dying of consumption and was controversial when it was exhibited, with many believing it was not a suitable subject for photography.</p>
</div>
</article>
</section>
<section class="cf">
<article class="col gap-2 h-tright boots">
<div class="bts-inner">
<header class="bts-header">
<h1 class="bts-title">Staying afloat</h1>
</header>
<p class="bts-txt">Lobsterman John Aldridge fell into the shark-infested water of Long Island while his crewmates were asleep. He was kept afloat for more than 12 hours by his rubber boots, which he used as flotation devices. The coast guard rescued him 43 miles south of Montauk where he fell off his vessel.</p>
</div>
<figure class="bts-image h-pr">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/boots.png" alt="Green Boots" />
</figure>
</article>
<article class="bullets col gap-10">
<header class="h-tcenter bll-header">
<h1 class="h-iblock h-malign bll-title">list style: bullets.</h1>
<h2 class="h-iblock h-malign bll-subtitle">a round-up of popular ammunition</h2>
</header>
<ul class="bll-lst">
<li class="h-pr">
<span class="h-pa bullet bll-01"></span>
<div class="bll-lst-txt h-pr h-iblock h-balign h-tcenter">
<p class="bll-number bll-size-02">.223</p>
<dl>
<dt class="bll-name bll-size-08">Remington</dt>
<dd class="bll-weight bll-size-06">69gr BTHP</dd>
</dl>
</div>
</li>
<li class="h-pr">
<span class="h-pa bullet bll-02"></span>
<div class="bll-lst-txt h-pr h-iblock h-balign h-tcenter">
<p class="bll-number bll-size-02">.308</p>
<dl>
<dt class="bll-name bll-size-08">Winchenster</dt>
<dd class="bll-weight bll-size-06">168gr BTHP</dd>
</dl>
</div>
</li>
<li class="h-pr">
<span class="h-pa bullet bll-03"></span>
<div class="bll-lst-txt h-pr h-iblock h-balign h-tcenter">
<p class="bll-number bll-size-07">7.62x39mm.</p>
<dl>
<dt class="bll-name bll-size-03">Russian</dt>
<dd class="bll-weight bll-size-04">154gr JSP</dd>
</dl>
</div>
</li>
<li class="h-pr">
<span class="h-pa bullet bll-04"></span>
<div class="bll-lst-txt h-pr h-iblock h-balign h-tcenter">
<p class="bll-number bll-size-01">7.62</p>
<dl>
<dt class="bll-name bll-size-05">Thumper</dt>
<dd class="bll-weight bll-size-03">220gr RN</dd>
</dl>
</div>
</li>
<li class="h-pr">
<span class="h-pa bullet bll-05"></span>
<div class="bll-lst-txt h-pr h-iblock h-balign h-tcenter">
<p class="bll-number bll-size-01">7.62</p>
<dl>
<dt class="bll-name bll-size-05">Thumper</dt>
<dd class="bll-weight bll-size-06">240gr BTHP</dd>
</dl>
</div>
</li>
</ul>
</article>
</section>
<article class="btl">
<h1 class="btl-hdr h-pr h-tcenter">Displaying (famous) blocks</h1>
<figure class="btl-fig h-pr">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/beatles.jpg" alt="Beatles in Abbey Road" class="h-block max-img" />
<span class="btl-curl h-pa"></span>
</figure>
<p class="btl-txt">Abbey Road is a thoroughfare located in the borough of Camden and the City of Westminster in London, running roughly northwest to southeast through St. John’s Wood, near Lord’s Cricket Ground. It is part of the B507. This road is best known for the Abbey Road Studios and the 1969 album, Abbey Road, by The Beatles.</p>
<footer class="btl-author">
<p>Photo: goo.gl/h44dc9</p>
</footer>
</article>
<section class="cf">
<article class="col gap-9 cnt">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/cnt-img.jpg" alt="headers down" class="cnt-image" />
</figure>
<header>
<h1 class="cnt-hdr h-iblock">Border Bottom Line</h1>
<h2 class="cnt-sbt h-iblock">Awful immigration laws from around the world.</h2>
</header>
<ul class="inl-list cnt-lst">
<li><strong>Italy</strong> penalizes illegal immigrants with a fine of €5,000-10,000 and allows immigration officials to detain them for up to 6 months.</li>
<li><strong>Switzerland</strong> immediately deports all convicted criminals from other countries and potentially even their family members.</li>
<li><strong>Australia</strong> detains all non-citizens without a valid visa.</li>
<li><strong>Japan</strong> is allowed to pay $3,000 to each unemployed Latin Americn immigrant of Japanese descent and $2,000 to each of that unemployed worker’s family members to return to their country of origin.</li>
<li>The <strong>United Arab Emirates</strong> prohibits foreigners from engaging in any sort of labor union-like activity, resulting in harsh living conditions, 80-hour work weeks, back-breaking manual labor, and below-minimum-wage pay.</li>
</ul>
</article>
<article class="col gap-3">
<div class="rating-inner h-pr">
<div class="h-pr rtn-header">
<figure class="h-tcenter lst-rtn-image h-pr">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91056/transformers.png" alt="Transformers Revenge of the fallen" class="h-iblock h-pr" />
</figure>
<header>
<h1 class="lst-rtn-header h-iblock">Transformers <span>Revenge of the fallen</span></h1>
<p class="lst-rtn-description">A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</p>
</header>
</div>
<ul class="rtn-lst">
<li class="h-pr">
<div class="h-iblock">
<div class="h-iblock lst-rtn-numbers">
<p class="lst-rtn-light">ROTTEN TOMATO</p>
<p class="lst-rtn-light">RATING</p>
</div>
<p class="h-iblock prg-value">
20<span>%</span>
</p>
<div class="progress-bar h-pr">
<span class="h-pa" data-progress="20%" style="width: 20%;"></span>
</div>
</div>
</li>
<li class="h-pr h-tcenter premiere">
<h2 class="prm-header h-pr lst-rtn-light"><span class="h-iblock h-pr">World premiere</span></h2>
<address>
<p class="prm-address">Den Haag theatre</p>
<p class="prm-country lst-rtn-light">The netherlands</p>
</address>
<time datetime="2009-06-23" class="prm-date">June 23, 2011</time>
</li>
</ul>
</div>
</article>
</section>
<section class="ovf h-pr">
<header>
<h1 class="ovf-title h-pr" data-content="Overflow">Overflow</h1>
</header>
<ul class="ovf-lst h-pr">
<li class="h-tright">
<p class="h-iblock gap-9">On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province's <strong>Banqiao Dam</strong> while being battered by the worst storm ever recorded in the region. They were in a race with the rapidly rising Ru River to save the dam and the millions of people that lay sleeping downstream. It was a race they were about to lose.</p>
</li>
<li>
<p class="h-iblock gap-9">Just after 1:00 am, the sky cleared and stars emerged from behind the storm clouds. There was an eerie calm as someone yelled, "The water level is going down! The flood is retreating!"</p>
</li>
<li class="h-tcenter">
<p class="h-iblock gap-9 h-tleft">There was little chance to enjoy that calm. One survivor recalled that a few seconds later it "sounded like the sky was collapsing and the earth was cracking." The equivalent of 280,000 Olympic-sized swimming pools burst through the crumbling dam, taking with it entire towns and as many as 171,000 lives.</p>
</li>
</ul>
</section>
<footer class="ftr cf">
<p class="ftr-copy">2013 CSSOff, <span>Volume 3</span></p>
<address class="ftr-address h-tright">
<span class="address"><strong>Route Gregory</strong>, Building 31</span>
<span class="city">01630 Prévessin-Moëns, France</span>
<span class="phone">+41 22 767 61 11</span>
</address>
</footer>
</div>
</body>
</html>
!
