LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
	
	
	
	
	
	
	Evan Jaffe | CSSOff 2013
	
	


VOLUME 3—SEPTEMBER 2013

CSSOFF

Positioning Relatives

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.

Box Model Barbie

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

.223 Remington
.223
REMINGTON
69gr BTHP
.308 Winchester
.308
WINCHESTER
168gr BTHP
7.62x39mm Russian
7.62×39mm
RUSSIAN
154gr JSP
7.62 Thumper 220gr
7.62
THUMPER
220gr RN
7.62 Thumper 240gr
7.62
THUMPER
240gr BTHP
DISPLAYING (FAMOUS) BLOCKS

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/ht44dc9

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 immgration officials to detian 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.

Water

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 the 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.

CSS
/* ==============================
====================
FONTS
====================
============================== */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Lato:100,400,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);

/* ==============================
====================
ERIC MEYER'S RESET
https://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
====================
============================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-weight:inherit;
  font-style:inherit;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
}
/* remember to define focus styles! */
:focus {
  outline:0;
}
body {
  line-height:1;
  color:#000;
  /*background:white;*/
}
ol, ul {
  list-style:none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse:separate;
  border-spacing:0;
}
caption, th, td {
  text-align:left;
  font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:"";
}
blockquote, q {
  quotes:"" "";
}

/* ====================
EXTRA RESET SYLES
==================== */
/* ***** HTML5 ELMS ***** */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{
  display:block;
}
/* ***** DOCUMENT SETUP ***** */

body{
  font-style:inherit;
  font-size:100%;
  font-family:Helvetica, Arial, sans-serif;
  color:#000;
  overflow-x:hidden;
}
*, *:before, *:after {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}
a{text-decoration:none;color:inherit;}

/* ==============================
====================
GENERAL LAYOUT STYLES
====================
============================== */
p{
  margin:3px 0;
}
.wrapper{
  margin:0 auto;
  min-width:320px;
  width:960px;
  
  height:100%;

}
/* ***** SIMPLE ACCESSIBLE GRID FOR RESPONSIVE DESIGN ***** */
.row{
  display:block;
  position:relative;
  width:100%;
}
.row:after{
  clear:both;
  content:"";
  display:table;
}

[data-col-span]{
  float:left;
  height:100%;
  position:relative;
  width:100%
}
[data-col-span="1"]{width:80px;}
[data-col-span="2"]{width:160px;}
[data-col-span="3"]{width:240px;}
[data-col-span="4"]{width:320px;}
[data-col-span="5"]{width:400px;}
[data-col-span="6"]{width:480px;}
[data-col-span="7"]{width:560px;}
[data-col-span="8"]{width:640px;}
[data-col-span="9"]{width:720px;}
[data-col-span="10"]{width:800px}
[data-col-span="11"]{width:880px;}
[data-col-span="12"]{width:960px;}

/* ==============================
====================
MAIN TITLE & VOLUME
====================
============================== */
.title{
  background:#cdc9dd;
  height:1008px;
  position:absolute;
  width:45%;
}
.title:after{
    background:#d9d5e5;
    background:-webkit-gradient(linear,0 0,0 bottom,from(#d9d5e5),to(#cfcbde));
    background:-webkit-linear-gradient(#d9d5e5, #cfcbde);
    background:-moz-linear-gradient(#d9d5e5, #cfcbde);
    background:-ms-linear-gradient(#d9d5e5, #cfcbde);
    background:-o-linear-gradient(#d9d5e5, #cfcbde);
    background:linear-gradient(#d9d5e5, #cfcbde);
    content:""; 
    bottom:0;
    height:310px;
    left:0;
    position:absolute;
    right:0;
}
  .title h1{
    color:#fff;
    font:100 17.4375em/.8em "Lato", sans-serif;
    position:absolute;
    right:-57px;
    text-align:center;
    top:30px;
    z-index:2;
  }
    .title h1 span{
      display:block;
      letter-spacing:-.07em
    }
.volume{
  color:#b0aeb8;
  font:italic 400 .75em "Lora", sans-serif;
  position:absolute;
  right:160px;
  top:140px;
  z-index:4;
}

/* ==============================
====================
BOX MODEL & POSITION RELATIVE
====================
============================== */
.box-position{
  margin-bottom:30px;
}

/* ==============================
====================
POSITION RELATIVE
====================
============================== */

.position-relative{
  float:right;
  padding-left:50px;
  z-index:0;
}

  /* The dynamic shadow behind the image*/
  .position-relative .position-relative-img-wrap:after{
    background:#000;
    content:"";
    display:block;
    height:10px;
    left:-40px;
    margin-top:-15px;
    position:absolute;
    width:300px;
    z-index:-1;
    -webkit-border-radius:20px;
       -moz-border-radius:20px;
            border-radius:20px; 
    -webkit-box-shadow:-80px 30px 30px 0px rgba(0, 0, 0, .7),-80px 30px 60px 0px rgba(0, 0, 0, .5);
       -moz-box-shadow:-80px 30px 30px 0px rgba(0, 0, 0, .7),-80px 30px 60px 0px rgba(0, 0, 0, .5);
            box-shadow:-80px 30px 30px 0px rgba(0, 0, 0, .7),-80px 30px 60px 0px rgba(0, 0, 0, .5);
  }
    .position-relative .position-relative-img-wrap img.position-relative-img{
      height:500px;
      margin-left:-115px;
      margin-top:190px;
      width:auto;
        -webkit-transform:rotate(-3.8deg);
           -moz-transform:rotate(-3.8deg);
            -ms-transform:rotate(-3.8deg);
                transform:rotate(-3.8deg);
    }
  .position-relative header{
    margin-top:-155px;
    position:relative;
  }
    .position-relative header h1{
      color:#fdcd84;
      font:400 4.6875em/1.125em "Oswald", sans-serif;
      -webkit-text-shadow:0px 2px 5px rgba(0,0,0,.3);
         -moz-text-shadow:0px 2px 5px rgba(0,0,0,.3);
              text-shadow:0px 2px 5px rgba(0,0,0,.3);
    }
    .position-relative header h1:before{
      content:"FEATURE";
      display:block;
      font:400 .1733em "Merriweather", serif;
    }
  .position-relative p{
    font:300 1.5625em/1.25em "Merriweather", serif;
    margin-top:20px;
  }

/* ==============================
====================
BOX MODEL
====================
============================== */


.box-model{
  float:left;
  margin-top:405px;
  z-index:3;
}
  .box-model img.box-model-img{
    height:389px;
    margin-left:-100px;
    width:450px;
  }

  .box-model h1{
    color:#5f5d66;
    font:italic 700 2.25em "Lora", serif;
    margin-top:-20px;
    text-align:center;
  }
  .box-model p{
    color:#6e6c77;
    font:400 1.1875em/1.6875em "Lato", sans-serif;
    margin-top:10px;
    text-align:center;
  }

/* ==============================
====================
AFLOAT & BULLETS
====================
============================== */
.float-bullets{
  height:533px;
}

/* ==============================
====================
STAYING AFLOAT
====================
============================== */
  .staying-afloat{
    text-align:right;
    padding:0 20px;
  }
    .staying-afloat header h1{
      color:#24795a;
      font:1.31em/1.5em "Oswald", sans-serif;
    }
    .staying-afloat p{
      color:#464646;
      font:.875em/1.22em "Lato", sans-serif;
      margin-bottom:15px;
    }
    .staying-afloat .boots{
      float:left;
      height:196px;
      margin-left:-20px;
      position:relative;
      width:160px;
      z-index:99; 
    }

/* ==============================
====================
LIST STYLE BULLETS
====================
============================== */
  .list-style-bullets{
    text-align:center;
    position:relative;
  }   
    .list-style-bullets header{
      height:46px;
      border-top:solid 1px #e5e5e5;
      border-bottom:solid 1px #e5e5e5;
    }
      .list-style-bullets header h1,
      .list-style-bullets header h2{
        display:inline-block;
        vertical-align:middle;
        margin:0 2px;
      }
      .list-style-bullets header h1{
        color:#a97d35;
        font:1em/2.875em "Oswald", sans-serif;
        letter-spacing:.1em;
      }
      .list-style-bullets header h2{
        color:#e0c167;
        font:700 0.6875em/2.875em "Lato", sans-serif;
        letter-spacing:.125em;
      }

    .list-style-bullets .ammunition{
      height:100%;
      padding-top:16px;
      padding-bottom:110px;
    }
      .list-style-bullets .ammunition .ammunition-bullet{
        border-left:solid 1px #e5e5e5;
      }
      .list-style-bullets .ammunition .ammunition-bullet:first-child{
        border-left:none;
      }
        .list-style-bullets .ammunition .ammunition-bullet img.ammunition-bullet-img{
          width:100%;height:auto;
        }
        .list-style-bullets .ammunition .ammunition-bullet .bullet-info{
          bottom:35px;
          color:#e0e0e0;
          font-family:"Oswald", sans-serif;
          left:0;
          position:absolute;
          right:0; 
          z-index:-1;
        }

      .ammunition-bullet#remington .bullet-info-cal{font-size:4.9375em;}
      .ammunition-bullet#remington .bullet-info-name{font-size:1.75em;}
      .ammunition-bullet#remington .bullet-info-gr{font-size:2em;}
      
      .ammunition-bullet#winchester .bullet-info-cal{font-size:4.9375em;}
      .ammunition-bullet#winchester .bullet-info-name{font-size:1.75em;}
      .ammunition-bullet#winchester .bullet-info-gr{font-size:2em;}

      .ammunition-bullet#russian .bullet-info-cal{font-size:1.9375em;}
      .ammunition-bullet#russian .bullet-info-name{font-size:2.5em;}
      .ammunition-bullet#russian .bullet-info-gr{font-size:2.4375em;}
      
      .ammunition-bullet#thumper220 .bullet-info-cal{font-size:5.4375em;}
      .ammunition-bullet#thumper220 .bullet-info-name{font-size:2.375em;}
      .ammunition-bullet#thumper220 .bullet-info-gr{font-size:2.5em;}

      .ammunition-bullet#thumper240 .bullet-info-cal{font-size:5.4375em;}
      .ammunition-bullet#thumper240 .bullet-info-name{font-size:2.375em;}
      .ammunition-bullet#thumper240 .bullet-info-gr{font-size:2em;}

/* ==============================
====================
DISPLAYING FAMOUS BLOCKS
====================
============================== */
.displaying-famous-blocks [data-col-span]{
  margin-top:-24px;
  color:#fff;
}
  .displaying-famous-blocks header{
    background:#524741;
    font:3.0625em/1em "Oswald", sans-serif;
    min-height:116px;
    letter-spacing:.0125em;
    line-height:116px;
    text-align:center;
  }
  .displaying-famous-blocks .abbey-road{
    height:auto;
    max-height:635px;
    position:relative;  
  }
  .displaying-famous-blocks .abbey-road:after{
    content:"";
    position:absolute;
    height:6px;
    background:rgba(0,0,0,.2);
    top:0;
    left:0;
    right:0;
  }
    .displaying-famous-blocks .abbey-road img.abbey-road-img{
      height:auto;
      width:100%;
    }
    .displaying-famous-blocks .abbey-road a.abbey-road-map{
        bottom:0;
        height:85px;
        overflow:hidden;
        position:absolute;
        right:0;
        width:85px;
        -webkit-transition:.3s ease;
           -moz-transition:.3s ease;
                transition:.3s ease;
    }
    .displaying-famous-blocks .abbey-road a.abbey-road-map:hover{
        cursor:pointer;
        height:171px;
        width:171px;
        -webkit-transition:.5s ease;
           -moz-transition:.5s ease;
                transition:.5s ease;
    } 
      .displaying-famous-blocks .abbey-road a.abbey-road-map img.abbey-road-map-img{
        background:#524741;
        bottom:0; 
        height:350px;
        position:absolute;
        right:0;
        width:600px; 
      }
      .displaying-famous-blocks .abbey-road a.abbey-road-map img.curl{
        bottom:0;
        height:100px;
        position:absolute;
        right:0;
        width:100px;
        -webkit-transition:.3s ease;
           -moz-transition:.3s ease;
                transition:.3s ease;
      }
      .displaying-famous-blocks .abbey-road a.abbey-road-map img.curl:hover{
        height:200px;
        width:200px;
        -webkit-transition:.5s ease;
           -moz-transition:.5s ease;
                transition:.5s ease;
      }
  .displaying-famous-blocks .abbey-road-caption{
    background:#71625a;
    font:300 1.625em "Merriweather", serif;
    padding:25px;
  }
    .displaying-famous-blocks .abbey-road-caption a.abbey-road-img-src{
      display:block;
      font-size:61.5%;
      margin-top:25px;
      opacity:0.5;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    .displaying-famous-blocks .abbey-road-caption a.abbey-road-img-src:hover{
      text-decoration:underline;    
    }

.displaying-famous-blocks .abbey-road{margin-bottom:-5px;}
/* ==============================
====================
BORDER BOTTOM LINE
====================
============================== */
.border-bottom-line{
  border-right:solid 1px #e5e5e5;
  padding-right:22px;
  z-index:2;
}
  .border-bottom-line header{
    font-family:"Oswald", sans-serif;
    text-align:center;

  }
  .border-bottom-line header img.heads{
    width:105%;
    height:auto;
    z-index:-1;
  }


  .border-bottom-line header h1,
  .border-bottom-line header h2{
    border-bottom-color:#000;
    border-bottom-style:solid;
    white-space:nowrap;
    /* Allow stroke to become an actual border
    without impacting layout */
    -webkit-box-sizing:content-box;
       -moz-box-sizing:content-box;
            box-sizing:content-box;
  }
  .border-bottom-line header h1{
    border-bottom-width:21px;
    font-size:5.125em;
    height:119px;
    line-height:119px;
  }
  .border-bottom-line header h2{
    border-bottom-width:3px;
    font-size:2.4375em;
    height:78px;
    line-height:78px;
  }
  .border-bottom-line p{
    font:300 1.3em "Merriweather", serif;
    margin-top:17px;
  }
  .border-bottom-line p b{
    font-weight:900;
  }

/* ==============================
====================
MOVIE (TRANSFORMERS)
====================
============================== */
.movie{
  background:#3a83bb;
  color:#fff;
  border-left:solid 15px #fff;
  border-top:solid 15px #fff;
  text-align:center;
}
/* The notches */
.movie:before,
.movie:after{
  background:#fff;
  content:"";
  height:30px;
  left:50%;
  margin-left:-15px;
  position:absolute;
  width:30px;
  -webkit-border-radius:15px;
     -moz-border-radius:15px;
          border-radius:15px;        
}
.movie:before{
  top:-15px;
}
.movie:after{
  bottom:-15px;
}
  .movie .movie-box{
    display:inline-block;
    margin-top:-66px;
  }
  /* The dynamic shadow behind the DVD image*/
  .movie .movie-box:after{
    content:"";
    background:#000;
    display:block;
    height:40px;
    margin-top:-60px;
    width:180px;
    z-index:1;
    -webkit-border-radius:90px;
       -moz-border-radius:90px;
            border-radius:90px; 
    -webkit-transform:rotate(-4.9deg);
       -moz-transform:rotate(-4.9deg);
        -ms-transform:rotate(-4.9deg);
            transform:rotate(-4.9deg);
    -webkit-box-shadow:0px 10px 90px 0px rgba(0, 0, 0, 1),0px 5px 120px 0px rgba(0, 0, 0, 1);
       -moz-box-shadow:0px 10px 90px 0px rgba(0, 0, 0, 1),0px 5px 120px 0px rgba(0, 0, 0, 1);
            box-shadow:0px 10px 90px 0px rgba(0, 0, 0, 1),0px 5px 120px 0px rgba(0, 0, 0, 1);

  }
    .movie .movie-box img.movie-box-img{
      height:244px;
      position:relative;
      width:185px;
      z-index:2;
    }
  .movie .movie-content{
    padding:25px 15px;
    font-family:"Oswald", sans-serif;
    position:relative;
  }
  .movie a:hover .movie-content,
  .movie a:hover .movie-content.movie-premier .premier-title span{
    background:#2e6895;
    cursor:pointer;
  }
  .movie .movie-content.movie-rating{
    border-top:dashed 2px rgba(0,0,0,.4);
    border-bottom:dashed 2px rgba(0,0,0,.4);
    position:relative;
  }
  .movie .movie-content.movie-rating:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background:transparent;
    border-top:solid 5px rgba(0,0,0,.1);
    border-bottom:solid 5px rgba(0,0,0,.1);
  }
    .movie .movie-content .movie-content-hr{
      border:0;
      height:8px;
      background:rgba(255,255,255,.2);
    }
    .movie .movie-content.movie-info{
      line-height:2.25em
    }
      .movie .movie-content.movie-info .info-name{
        font-size:1.9375em;
      }
      .movie .movie-content.movie-info .info-tag{
        font-size:1.3125em;
      }
      .movie .movie-content.movie-info .info-desc{
        font:italic 400 1em/1.5em "Lora", serif;
        text-align:left;
      }
      .movie .movie-content.movie-rating{width:100%}
      .movie .movie-content.movie-rating .rating-name{
        float:left;
        font-size:.8em;
        line-height:1.875em;
        margin-bottom:20px;
          opacity:0.5;
          filter:alpha(opacity=50);
          -moz-opacity:0.5;
          -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      }
      .movie .movie-content.movie-rating .rating-name:after{
        font-size:2.3em;
        content:'RATING';
        display:block;
      }
      .movie .movie-content.movie-rating .rating-num{
        float:right;
        font-size:3.125em;
      }
      .movie .movie-content .rating-bar{
        background:rgba(255,255,255,.2);
        clear:both;
        height:8px;
        overflow:hidden;
        position:relative;
        text-indent:-999px;
        width:100%; 
      }
      .movie .movie-content .rating-bar:before{
        background:#fff;
        bottom:0;
        content:"";
        left:0;
        position:absolute;
        top:0;
        width:20%;
      }
      .movie .movie-content.movie-premier .premier-title{
          background:#88aed1;
          font-size:.875em;
          height:13px;
          margin-bottom:5px;
          text-align:center;
          width:100%;  
          white-space:nowrap; 
      }
        .movie .movie-content.movie-premier .premier-title span{
          background:#3a83bb;
          padding:0 11px;
          color:#88aed1;
        }
  .movie .movie-content.movie-premier .premier-theatre{
    line-height:1.2em;
    font-size:1.65em;
  }
  .movie .movie-content.movie-premier .premier-location{
    color:#88aed1;
    font-size:1.7em; 
    line-height:1.2em;
  }
  .movie .movie-content.movie-premier .premier-date{
    font-size:2.3em;
    line-height:1.2em;
  }

/* ==============================
====================
OVERFLOW
====================
============================== */
.overflow [data-col-span]{
  padding-top:150px;
}
  .overflow img.overflow-water{
    height:300px;
    left:-22px;
    position:absolute;
    top:-17px;
    width:1058px;
  }
  .overflow p{
    color:#5e6c74;
    font:italic 400 1em/1.625em "Lora", serif;
  }
    .overflow p b{
      font-weight:700;
    }
  .overflow p.overflow-first,
  .overflow p.overflow-third{
    -webkit-transform:rotate(2.1deg);
       -moz-transform:rotate(2.1deg);
        -ms-transform:rotate(2.1deg);
            transform:rotate(2.1deg);
  }
  .overflow p.overflow-first{
    padding-left:22%;
    text-align:right;
  }
  .overflow p.overflow-second{
    padding-right:25%;
    -webkit-transform:rotate(-.7deg);
       -moz-transform:rotate(-.7deg);
        -ms-transform:rotate(-.7deg);
            transform:rotate(-.7deg);
  }
  .overflow p.overflow-third{
    margin-top:40px;
    padding-left:11%;
    padding-right:11%;
  }

/* ==============================
====================
FOOTER
====================
============================== */

footer{
  border-top:solid 1px #e5e5e5;
  line-height:1.25em;
  margin-top:58px;
  position:relative;
}
  footer .footer-left{
    color:#8c8c8c;
    font:400 1.0625em "Lato", sans-serif;
    left:0;
    position:absolute;
    top:23px;
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  }
    footer .footer-left span{
      color:#000;
    }
  footer .footer-right{
    color:#989898;
    font:300 .8125em "Merriweather", serif;
    position:absolute;
    text-align:right;
    top:23px; right:0;
  }
    footer .footer-right span{
      font-weight:900;
    }

/* ==============================
====================
MOBILE / RESPONSIVE STUFF
====================
============================== */
@media all and (max-width:767px){
  html{
    -webkit-text-size-adjust:100%;
       -moz-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
  }
  body{
    min-width:320px; 
    overflow-x:hidden;
  }
  .volume{
    padding:5px;
    position:static;
    text-align:center;
  }
  .title{
    height:auto;
    position:static;
    width:100%; 
  }
  .title:after{
    display:none;
  }
    .title h1{
      font-size:5em;
      padding:10px;
      position:static; 
    }
      .title h1 span{
        display:inline-block;
      }

  .wrapper,
  [data-col-span]{
    width:100%
  }

  .box-position{
    margin:0;
  }
    .position-relative,
    .box-model{
      float:none;
      padding:20px;
    }
      .position-relative .position-relative-img-wrap:after{
        display:none;
      }
        .position-relative .position-relative-img-wrap img.position-relative-img{
          height:auto; 
          margin:0;
          width:100%;   
        }
      .position-relative header{
        margin-top:-75px;
        padding:20px;
      }
        .position-relative header h1{
          font-size:3em;
        }
      .position-relative p{
        margin:0;
      }

    .box-model{  
      background:#d9d5e5;
      background:-webkit-gradient(linear,0 0,0 bottom,from(#d9d5e5),to(#cfcbde));
      background:-webkit-linear-gradient(#d9d5e5, #cfcbde);
      background:-moz-linear-gradient(#d9d5e5, #cfcbde);
      background:-ms-linear-gradient(#d9d5e5, #cfcbde);
      background:-o-linear-gradient(#d9d5e5, #cfcbde);
      background:linear-gradient(#d9d5e5, #cfcbde);
      clear:both;
      margin:0;
    }
      .box-model img.box-model-img{
        height:auto;
        margin:0;
        width:100%;
      }

  .float-bullets{
    height:auto;
  }
    .staying-afloat p{
      float:right;
      width:50%;
    }

  .list-style-bullets .ammunition{
    padding:0 20px 20px;
    width:100%;
  }
    .list-style-bullets .ammunition .ammunition-bullet{
      border-top:solid 1px #e5e5e5;
      border-left:none;
      padding:20px;
      text-align:right;
    }
    .list-style-bullets .ammunition .ammunition-bullet:first-child{
      border-top:none;
    }
    .list-style-bullets .ammunition .ammunition-bullet img.ammunition-bullet-img{
      float:left;
      margin-top:-10px;
      width:40%;
    }
      .list-style-bullets .ammunition .ammunition-bullet .bullet-info{
        margin-top:50px;
        position:static;
      }

  .displaying-famous-blocks header{
    padding:10px 0px;
    line-height:1.125em;
  }

  .border-bottom-line{
    padding:0;border:none;
  }
    .border-bottom-line header h1,
    .border-bottom-line header h2{  
      height:auto;
      line-height:1em;
      padding:10px;
      white-space:normal;
    }
    .border-bottom-line p{
      padding:0 20px;
    }

  .movie{
    border-right:solid 15px #fff;
  } 
    .movie .movie-box{
      margin-top:20px;
    }

  .overflow{
    overflow:hidden;
  }
    .overflow img.overflow-water{
      left:-65px;
    }
    .overflow p[class*="overflow"]{
      margin-top:20px;
      padding:0 20px;
      text-align:center;
      -webkit-transform:rotate(0deg);
         -moz-transform:rotate(0deg);
          -ms-transform:rotate(0deg);
              transform:rotate(0deg);     
    }
}
JS
var controller = $.superscrollorama();
var scrollDuration = 200; 
$(function() {
	if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
		controller.addTween('#position-relative-img', TweenMax.from( $('#position-relative-img'), .5, {css:{rotation: 0}}), scrollDuration, 300);
		controller.addTween('#bullet-remington', TweenMax.from( $('#bullet-remington'), .5, {css:{'margin-top': '-75px'}, ease:Bounce.easeOut}), scrollDuration, -80);
		controller.addTween('#bullet-winchester', TweenMax.from( $('#bullet-winchester'), .5, {css:{'margin-top': '-75px'}, ease:Bounce.easeOut}), scrollDuration, -60);
		controller.addTween('#bullet-russian', TweenMax.from( $('#bullet-russian'), .5, {css:{'margin-top': '-75px'}, ease:Bounce.easeOut}), scrollDuration, -40);
		controller.addTween('#bullet-thumper-220', TweenMax.from( $('#bullet-thumper-220'), .5, {css:{'margin-top': '-75px'}, ease:Bounce.easeOut}), scrollDuration, -20);
		controller.addTween('#bullet-thumper-240', TweenMax.from( $('#bullet-thumper-240'), .5, {css:{'margin-top': '-75px'}, ease:Bounce.easeOut}), scrollDuration, 0);
		controller.addTween('#displaying-famous-blocks', TweenMax.from( $('#displaying-famous-blocks'), .5, {css:{'margin-top': '55px'}}), scrollDuration, -400);
		controller.addTween('#movie', TweenMax.from( $('#movie'), .5, {css:{'margin-top': '100px'}}), scrollDuration, -400);
		controller.addTween('#bottom-line', TweenMax.from( $('#bottom-line'), .5, {css:{'border-bottom-width': 0}}), scrollDuration, -100);
		controller.addTween('#bottom-line-sub', TweenMax.from( $('#bottom-line-sub'), .5, {css:{'border-bottom-width': 0}}), scrollDuration, -100);
		controller.addTween('#overflow', TweenMax.from( $('#overflow'), .5, {css:{'top': '50px'}}), scrollDuration, -300);
		controller.addTween('#overflow-first', TweenMax.from( $('#overflow-first'), .5, {css:{rotation: 0}}), scrollDuration, -200);
		controller.addTween('#overflow-second', TweenMax.from( $('#overflow-second'), .5, {css:{rotation: 0}}), scrollDuration, -200);
		controller.addTween('#overflow-third', TweenMax.from( $('#overflow-third'), .5, {css:{rotation: 0}}), scrollDuration, -200);
	}
});
Term
Fri, 01/12/2018 - 19:32

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv