LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	
Volume 3–September 2013

CSS Off

Fading Away by Henry Peach Robinson
Feature

Positioning Relatives

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.

Barbie doll

Box Model

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.

Staying afloat

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.

Boots

List Style: Bullets.

A Round-up of Popular Ammunition

Remington, Winchester, Russian, and Thumper bullets
  • .223 Remington 69gr BTHP
  • .308 Winchester 168gr BTHP
  • 7.62×39mm Russian 154gr JSP
  • 7.62 Thumper 220gr RN
  • 7.62 Thumper 240gr BTHP

Displaying (famous) blocks

Beatles crossing Abbey Road

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. Photo: goo.gl/h44dc9

Upside-down heads

Border Bottom Line

Awful immigration laws from around the world.

  • Italy penalizes illegal immigrants with a fine of €5,000-10,000 and allows immigration officials to detain them for up to 6 months.
  • Switzerland immediately deports all convicted criminals from other countries and potentially even their family members.
  • Australia detains all non-citizens without a valid visa.
  • Japan 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.
  • The United Arab Emirates 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.
Transformers: Revenge of the Fallen DVD

Transformers

Revenge of the fallen

A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.

Rotten Tomato
Rating
20%
World Premiere
Den Haag Theatre
The Netherlands

Overflow

On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province's Banqiao Dam 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 millions of people that lay sleeping downstream.
It was a race they were about to lose.

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!"

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.

2013 CSSOff, Volume 3
Route Gregory, Building 31
01630 Prévessin-Moëns, France
+41 22 767 61 11
CSS
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font: normal 16px/1.4em 'Lato';
}
.column {
  width: 10em;
  float: left;
}
.column:before,
.column:after {
  content: '';
  display: table;
}
.column:after {
  clear: both;
}
.column.full {
  width: 60em;
  margin: 0 auto;
  float: none;
}
.column.five {
  width: 50em;
}
.leader {
  width: 100%;
  min-width: 960px;
  position: relative;
}
.leader:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 46%;
  height: 698px;
  background: #cdc9dd;
  border-bottom: 310px solid #d4d1e2;
  left: 0;
  top: 0;
}
.leader .volume {
  float: right;
  text-transform: uppercase;
  color: #bbb;
  font-family: 'lora';
  font-style: italic;
  letter-spacing: 0.2em;
  margin: 135px 0 -90px 0;
  font-size: 12px;
}
h1 {
  color: #fff;
  width: 520px;
  font: 100 280px/226px 'Lato';
  text-transform: uppercase;
  margin: 0 0 40px -40px;
  padding: 35px 0 0 0;
  letter-spacing: -0.04em;
}
h1:first-line {
  letter-spacing: 0.04em;
}
h1 em {
  position: relative;
  z-index: 4;
  font-style: normal;
}
.barbie {
  text-align: center;
  position: relative;
  z-index: 1;
  float: left;
  width: 22.5em;
  margin: 0 0 0 20px;
}
.barbie img {
  width: 450px;
  height: 390px;
  background: #fff;
  margin: -122px 0 -25px -150px;
  border: none;
  position: relative;
  z-index: 1;
}
.barbie h3 {
  font: 700 35px/1.4em 'Lora', serif;
  font-style: italic;
  color: #5f5d66;
  margin-bottom: 8px;
}
.barbie p {
  font-size: 18px;
  line-height: 27px;
  color: #6e6c77;
}
.positioning-relatives {
  float: right;
  width: 31.5em;
  margin: -290px 0 0 0;
  position: relative;
  z-index: 2;
}
.positioning-relatives:after {
  content: '';
  width: 543px;
  height: 46px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91550/shadow.png);
  position: absolute;
  left: -190px;
  top: 446px;
  z-index: -1;
}
.positioning-relatives img {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
  margin: -50px 0 -152px -117px;
  width: 794px;
  height: 494px;
}
.positioning-relatives .article-type {
  text-transform: uppercase;
  font: 300 13px/18px 'Merriweather', serif;
  letter-spacing: 0.2em;
  color: #aaa;
  position: relative;
  z-index: 1;
}
.positioning-relatives h2 {
  font: 400 75px/80px 'Oswald', sans-serif;
  color: #fdcd84;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.positioning-relatives p {
  font: 300 24px/32px 'Merriweather', serif;
}
.container {
  width: 60em;
  margin: 40px auto 0;
}
.staying-afloat {
  text-align: right;
  padding-right: 20px;
}
.staying-afloat h3 {
  color: #247a5a;
  font: 400 21px/32px 'Oswald', sans-serif;
}
.staying-afloat p {
  color: #444;
  font-size: 14px;
  line-height: 19px;
  width: 130px;
  float: right;
}
.staying-afloat img {
  height: 200px;
  width: 174px;
  position: relative;
  top: 20px;
  margin-bottom: -10px;
}
.bullets .bullet-header {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  text-align: center;
}
.bullets .bullet-header h3,
.bullets .bullet-header h4 {
  display: inline-block;
  text-transform: uppercase;
}
.bullets .bullet-header h3 {
  color: #b27d2b;
  font: 400 15px/18px 'Oswald', sans-serif;
  letter-spacing: 0.05em;
}
.bullets .bullet-header h4 {
  color: #e7c35f;
  font: 400 12px/18px 'Lato', sans-serif;
  position: relative;
  top: -2px;
  margin-left: 5px;
  letter-spacing: 0.1em;
}
.bullets img {
  display: block;
  margin: 28px 0 -283px 50px;
  position: relative;
}
.bullets ul {
  list-style-type: none;
  color: #e0e0e0;
  font: 300 24px/24px 'Oswald', sans-serif;
  display: table;
  width: 100%;
}
.bullets ul li {
  display: table-cell;
  vertical-align: bottom;
  width: 20%;
  height: 430px;
  padding-bottom: 35px;
}
.bullets ul li + li {
  border-left: 1px solid #e0e0e0;
}
.bullets ul li span {
  display: block;
  text-align: center;
}
.bullets ul li span.caliber {
  font-weight: 400;
}
.bullets ul li span.maker {
  text-transform: uppercase;
}
.bullets ul li.remington .caliber,
.bullets ul li.winchester .caliber {
  font-size: 78px;
  line-height: 74px;
}
.bullets ul li.remington .maker,
.bullets ul li.winchester .maker {
  font-size: 31px;
  line-height: 38px;
}
.bullets ul li.remington .type,
.bullets ul li.winchester .type {
  font-size: 35px;
  line-height: 33px;
}
.bullets ul li.winchester .maker {
  font-size: 29px;
  line-height: 38px;
}
.bullets ul li.winchester .type {
  font-size: 33px;
  line-height: 31px;
}
.bullets ul li.russian .caliber {
  font-size: 34px;
  font-weight: 300;
  line-height: 33px;
}
.bullets ul li.russian .maker {
  font-size: 44px;
  line-height: 51px;
}
.bullets ul li.russian .type {
  font-size: 43px;
  line-height: 40px;
}
.bullets ul li.thumper .caliber {
  font-size: 80px;
  line-height: 80px;
}
.bullets ul li.thumper .maker {
  font-size: 38px;
  line-height: 44px;
}
.bullets ul li.thumper .type {
  font-size: 40px;
  line-height: 38px;
}
.bullets ul li.thumper + .thumper .caliber {
  line-height: 67px;
}
.bullets ul li.thumper + .thumper .maker {
  line-height: 56px;
}
.bullets ul li.thumper + .thumper .type {
  font-size: 32px;
  line-height: 32px;
}
.famous-blocks {
  background: #524741;
  color: #fff;
  clear: both;
}
.famous-blocks h3 {
  text-align: center;
  text-transform: uppercase;
  font: 400 48px/120px 'Oswald', sans-serif;
}
.famous-blocks .abbey-map {
  position: relative;
}
.famous-blocks .abbey-map img {
  display: block;
  max-width: 100%;
}
.famous-blocks .abbey-map .map {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91550/abbey-map.png);
}
.famous-blocks .abbey-map .corner-peel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91550/corner-peel.png);
}
.famous-blocks .abbey-map .corner-peel:hover {
  cursor: pointer;
  background-position: 0 -130px;
}
.famous-blocks .abbey-map.reveal-map .map {
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
}
.famous-blocks .abbey-map.reveal-map .corner-peel {
  display: none;
}
.famous-blocks p {
  font: 300 25px/35px 'Merriweather', serif;
  background: #71625a;
  padding: 20px 25px 10px;
}
.famous-blocks p cite {
  color: #b8b0ac;
  display: block;
  font-style: normal;
  font-size: 17px;
  margin: 15px 0;
}
.famous-blocks p cite a {
  color: #b8b0ac;
  text-decoration: none;
}
.famous-blocks p cite a:hover {
  color: #fff;
}
.border {
  float: left;
  width: 45em;
  padding-right: 1.5em;
  position: relative;
}
.border img {
  width: 730px;
  height: 155px;
  margin: 0 -20px -6px 0;
}
.border h3,
.border h4 {
  font: 400 81px/110px 'Oswald', sans-serif;
  border-bottom: 21px solid #000;
}
.border h3 {
  text-transform: uppercase;
  padding-bottom: 5px;
}
.border h4 {
  font-size: 38px;
  line-height: 78px;
  border-bottom-width: 3px;
  white-space: nowrap;
  letter-spacing: 0.006em;
}
.border ul {
  list-style-type: disc;
  font: 300 21px/28px 'Merriweather', serif;
  margin: 15px 0;
}
.border ul li {
  display: inline;
}
.border ul li + li:before {
  content: '\2022';
  font-weight: 900;
  display: inline-block;
  margin: 0 15px 0 5px;
}
.border ul li strong {
  font-weight: 900;
}
.border:after {
  content: '';
  position: absolute;
  height: 80%;
  width: 1px;
  right: 0;
  top: 10%;
  background: #ddd;
}
.transformers {
  background: #3a83bb;
  float: right;
  width: 14em;
  color: #fff;
  margin: 15px 0 0 10px;
  padding: 0 20px 0 13px;
  position: relative;
}
.transformers:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  bottom: -17px;
  left: 50%;
  margin-left: -15px;
  border: 14px solid #fff;
  border-radius: 15px;
}
.transformers img {
  margin: -67px 0 -130px -51px;
  position: relative;
}
.transformers h4,
.transformers h5 {
  font: 400 30px/30px 'Oswald', sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.transformers h5 {
  font-size: 20px;
  line-height: 42px;
  padding: 0 0 5px 0;
  border-bottom: 8px solid #619bc8;
  letter-spacing: 0.015em;
}
.transformers p {
  font: 400 16px/1.5em 'Lora', sans-serif;
  font-style: italic;
  margin: 15px -20px 0 -13px;
  padding: 0 20px 18px 13px;
  border-bottom: 2px dashed #234f70;
}
.transformers dl {
  font-family: 'Oswald', sans-serif;
  border-top: 5px solid #3476a8;
  margin: 0 -20px 0 -13px;
  padding: 10px 20px 25px 13px;
  text-transform: uppercase;
}
.transformers dl dt {
  color: #75a8cf;
}
.transformers dl dt.rotten-tomato {
  font-size: 31px;
  float: left;
  width: 95px;
}
.transformers dl dt.rotten-tomato:first-line {
  font-size: 14px;
  line-height: 28px;
}
.transformers dl dt.premiere {
  clear: both;
  border-top: 2px dashed #234f70;
  margin: 0 -20px 0 -13px;
  padding: 15px 20px 0 13px;
  font-size: 14px;
  text-align: center;
  position: relative;
}
.transformers dl dt.premiere:before,
.transformers dl dt.premiere:after {
  content: '';
  position: absolute;
  background: #619cc8;
  height: 13px;
  width: 36px;
  top: 20px;
  left: 13px;
}
.transformers dl dt.premiere:after {
  left: auto;
  right: 12px;
  width: 42px;
}
.transformers dl dd.rotten-tomato {
  font-size: 52px;
  line-height: 59px;
  font-weight: 400;
  margin: 0 -20px 0 -13px;
  padding: 0 10px 0 108px;
  border-bottom: 5px solid #3476a8;
}
.transformers dl dd.rotten-tomato .rating-bar {
  height: 8px;
  width: 190px;
  background: #619cc8;
  border-left: 45px solid #fff;
  margin: 15px 0 24px -95px;
}
.transformers dl dd.premiere {
  text-align: center;
  margin: 0 -20px 0 -13px;
}
.transformers dl dd.premiere address {
  font-style: normal;
  font-size: 27px;
  line-height: 32px;
  color: #75a8cf;
  letter-spacing: 0.02em;
}
.transformers dl dd.premiere address:first-line {
  font-size: 26px;
  color: #fff;
}
.transformers dl dd.premiere time {
  font-size: 39px;
  line-height: 42px;
}
.overflow {
  clear: both;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91550/water.jpg) no-repeat 0 50px;
  padding: 200px 0 0 0;
  margin-right: -100px;
  position: relative;
  left: 68px;
  top: -57px;
}
.overflow h3 {
  font: 400 82px/36px 'Oswald', sans-serif;
  text-transform: uppercase;
  position: relative;
  color: #a0b4c0;
  -webkit-transform: rotate(6deg) translate(44px, -34px);
  -moz-transform: rotate(6deg) translate(44px, -34px);
  -ms-transform: rotate(6deg) translate(44px, -34px);
  transform: rotate(6deg) translate(44px, -34px);
}
.overflow h3:after {
  content: '';
  position: absolute;
  width: 368px;
  height: 100px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91550/overflow-mask.png);
  top: 0;
  left: 0;
  -webkit-transform: rotate(-6deg) translate(3px, 4px);
  -moz-transform: rotate(-6deg) translate(3px, 4px);
  -ms-transform: rotate(-6deg) translate(3px, 4px);
  transform: rotate(-6deg) translate(3px, 4px);
}
.overflow p {
  color: #5e6c74;
  font: 300 16px/27px 'Lora', serif;
  font-style: italic;
  letter-spacing: -0.02em;
  -webkit-transform: rotate(-1deg) translate(28px, -15px);
  -moz-transform: rotate(-1deg) translate(28px, -15px);
  -ms-transform: rotate(-1deg) translate(28px, -15px);
  transform: rotate(-1deg) translate(28px, -15px);
  width: 650px;
}
.overflow p strong {
  font-weight: 700;
}
.overflow p:first-of-type {
  text-align: right;
  -webkit-transform: rotate(2deg) translate(233px, -15px);
  -moz-transform: rotate(2deg) translate(233px, -15px);
  -ms-transform: rotate(2deg) translate(233px, -15px);
  transform: rotate(2deg) translate(233px, -15px);
  width: 730px;
}
.overflow p:last-child {
  -webkit-transform: rotate(1deg) translate(143px, 15px);
  -moz-transform: rotate(1deg) translate(143px, 15px);
  -ms-transform: rotate(1deg) translate(143px, 15px);
  transform: rotate(1deg) translate(143px, 15px);
  width: 700px;
}
footer {
  width: 60em;
  margin: 0 auto;
  border-top: 1px solid #eee;
  padding: 25px 0;
  color: #989898;
}
footer .volume {
  font-size: 17px;
  color: #ccc;
}
footer .volume em {
  font-style: normal;
  color: #666;
}
footer div.vcard {
  float: right;
  text-align: right;
  font: 300 13px/19px 'Merriweather', serif;
  padding: 0 0 25px 0;
}
@media screen and (max-width: 959px) {
  .leader,
  .column,
  .column.full,
  .column.five,
  section,
  article,
  footer {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    float: none;
  }
  .leader:before {
    display: none;
  }
  .leader .volume {
    margin: 0;
    color: #fff;
  }
  .leader h1 {
    font-size: 70px;
    line-height: 1em;
    width: auto;
    margin: 0;
    padding: 0;
    background: #cdc9dd;
  }
  .leader article.positioning-relatives {
    margin: 0;
  }
  .leader article.positioning-relatives h2 {
    font-size: 48px;
    line-height: 1.2em;
  }
  .leader article.positioning-relatives img {
    max-width: 90%;
    height: auto;
    margin: 0 0 -30px -30px;
  }
  .leader article.positioning-relatives p {
    font-size: 18px;
    line-height: 1.3em;
  }
  .leader article.positioning-relatives:after {
    display: none;
  }
  .leader article.barbie img {
    max-width: 100%;
    height: auto;
    margin: 0 0 -25px 0;
  }
  article.staying-afloat {
    padding: 20px 0;
  }
  article.staying-afloat img {
    float: right;
  }
  article.bullets {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  article.bullets ul {
    width: 800px;
  }
  article.famous-blocks h3 {
    font-size: 36px;
    line-height: 1.2em;
  }
  article.famous-blocks p {
    font-size: 18px;
    line-height: 1.3em;
    padding: 0.5em;
  }
  article.border img {
    max-width: 100%;
    height: auto;
  }
  article.border h3 {
    font-size: 48px;
    line-height: 1.2em;
  }
  article.border h4 {
    font-size: 36px;
    line-height: 1.2em;
    white-space: normal;
  }
  article.border:after {
    display: none;
  }
  article.transformers {
    overflow: hidden;
  }
  article.transformers h4,
  article.transformers h5 {
    clear: both;
  }
  article.transformers img {
    margin: -40px -60px -120px 0;
    float: right;
  }
  article.transformers dl {
    display: table;
    width: 100%;
    text-align: center;
    padding-right: 0;
  }
  article.transformers dl dd.rotten-tomato,
  article.transformers dl dt.rotten-tomato {
    float: none !important;
    display: inline-block !important;
  }
  article.transformers dl dd.rotten-tomato {
    padding-left: 18px;
    border: 0;
  }
  article.overflow {
    left: 0;
    top: 0;
    margin: 0;
  }
  article.overflow h3 {
    -webkit-transform: none;
    font-size: 48px;
    line-height: 1.5em;
  }
  article.overflow h3:after {
    display: none;
  }
  article.overflow p,
  article.overflow p:last-child,
  article.overflow p:first-of-type {
    width: auto;
    -webkit-transform: none;
    text-align: left;
    margin: 0 0 10px 0;
  }
  footer {
    text-align: center;
  }
  footer div.vcard {
    float: none;
    text-align: center;
    margin-top: 20px;
  }
}
JS
var mapReveal = document.getElementById('mapReveal');

mapReveal.onclick = function(){
  var map = document.getElementById('abbeyMap');
	map.className += ' reveal-map';
	return false;
};
Term
Fri, 01/12/2018 - 19:32

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv