CSSOff 2013 Submission

Developer
Eduard Mayer
Size
14,766 Kb
Views
38,456
  1. CSSOff 2013 Submission Previews
  2. CSSOff 2013 Submission HTML Codes
  3. CSSOff 2013 Submission CSS Codes
  4. CSSOff 2013 Submission JS Codes

How do I make an cssoff 2013 submission?

My entry to the latest CSSoff :) Have fun judges!. What is a cssoff 2013 submission? How do you make a cssoff 2013 submission? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

CSSOff 2013 Submission Previews
IQ Test

CSSOff 2013 Submission - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSSOff 2013 Submission</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head>	<meta charset="UTF-8"> <meta name="author" content="Eduard Mayer">	<title>CSSOff 2013- Eduard Mayer</title>	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">	<!--[if lt IE 9]> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/html5shiv.js"></script>	<![endif]-->
</head>
<body>	<div class="wrapper">	<header id="cssoff">	<h1>CSS<span>Off</span></h1>	<span class="volume right">Volume 3&ndash;September 2013</span>	</header>	<section id="box-model" class="left">	<article>	<header>	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/box-model.png" alt="Box Model">	<h2>Box Model</h2>	</header>	<p>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>	</article>	</section>	<section id="positioning-relatives" class="left">	<article>	<header>	<div class="img"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/positioning.jpg" alt="Feature Positioning Relatives"></div>	<h2><span>Feature</span> Positioning Relatives</h2>	</header>	<p>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>	</article>	</section>	<section id="staying-afloat">	<h3>Staying afloat</h3>	<p>	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>	<img id="afloat" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/shoes.png" alt="Staying afloat">	</section>	<!-- -->	<section id="bullet-container" class="right">	<h2>list style: bullets. <em>a round-up of popular ammunition</em></h2>	<div class="bullets gr69">	<div class="bullet"></div>	<span id="bullets1" class="details">.223</span>	<span id="bullets2" class="manufacturer">Remington</span>	<span class="weight">69gr BTHP</span>	</div>	<!-- -->	<div class="bullets gr168">	<div class="bullet"></div>	<span class="details">.308</span>	<span class="manufacturer">Winchester</span>	<span class="weight">168gr BTHP</span>	</div>	<!-- -->	<div class="bullets gr154">	<div class="bullet"></div>	<span class="details">7.63<span>&#10006;</span>39mm</span>	<span class="manufacturer">Russian</span>	<span class="weight">154gr JSP</span>	</div>	<!-- -->	<div class="bullets gr220">	<div class="bullet"></div>	<span class="details">7.62</span>	<span class="manufacturer">Thumper</span>	<span class="weight">220gr RN</span>	</div>	<!-- -->	<div class="bullets gr240">	<div class="bullet"></div>	<span class="details">7.62</span>	<span class="manufacturer">Thumper</span>	<span class="weight">240gr BTHP</span>	</div>	</section>	<!-- -->	<section id="beatles">	<article>	<h1>displaying (famous) blocks</h1>	<div class="visual-image">	<a href="http://bit.ly/1b1Q0rJ" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/beatles.jpg" alt="Abbey Road"></a>	</div>	<div class="text-container">	<p>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>	<a href="http://goo.gl/h44dc9" target="_blank" class="src-link">Photo: goo.gl/h44dc9</a>	</div>	</article>	</section>	<!-- -->	<section id="border-bottom">	<aside id="transformers" class="right">	<section class="description">	<img id="rating-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/transformers-box.png" alt="Transformers">	<h1>Transformers</h1>	<h3>Revenge of the Fallen</h3>	<p>A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</p>	</section>	<section class="rating">	<div class="rating-wrapper">	<div class="score-label">	<h3 class="title left">Rotten Tomato <span>Rating</span></h3>	<h3 class="score right"><span id="score-int">20</span>%</h3>	</div>	<div class="score-bar">	<div id="score" class="score-bar-inner"></div>	</div>	</div>	</section>	<section class="premiere">	<header><h3>World premiere</h3></header>	<p>	<span class="theatre">Den Haag theatre</span>	<span class="country">The netherlands</span>	<span class="date">June 23, 2011</span>	</p>	</section>	</aside>	<article class="left" >	<h1>Border Bottom Line</h1>	<h3>Awful immigration laws from around the world.</h3>	<p><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.</p>	<p class="bullet"><strong>Switzerland</strong> immediately deports all convicted criminals from other countries and potentially even their family members.</p>	<p class="bullet"><strong>Australia</strong> detains all non-citizens without a valid visa.</p>	<p class="bullet"><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.</p>	<p class="bullet">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.</p>	</article>	</section>	<!-- -->	<section id="overflow">	<article>	<h1>Overflow</h1>	<p class="first">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.<br>It was a race they were about to lose.</p>	<p class="second">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>	<p class="third">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>	</article>	</section>	<!-- -->	<footer>	<div class="copy left">	<span><em>2013 CSSOff,</em> Volume 3</span>	</div>	<address class="right">	<span class="addr"><em>Route Gregory</em>, Building 31</span>	<span class="city">01630 Prévessin-Moëns, France</span>	<span class="tel">+41 22 767 61 11</span>	</address>	</footer>	</div> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/jquery.min.js"></script>	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/transit.min.js"></script>	<!--<script src="assets/js/cssoff.js"></script>-->	<!--[if lt IE 9]> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/rem.js"></script>	<![endif]-->
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSSOff 2013 Submission - Script Codes CSS Codes

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Lora:400italic,700italic);
* { box-sizing: border-box; -moz-box-sizing: border-box;
}
a, a img { border: 0; outline: 0;
}
html { -webkit-text-size-adjust: 100%;
}
body { margin: 0; padding: 0; font-size: 16px; overflow-x: hidden;
}
body:before { content: ''; width: 45%; height: 1008px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/header-bg.png) 0 0 repeat-x; position: absolute; top: 0; left: 0; z-index: -3; display: block;
}
@media screen and (max-width: 980px) { body:before { width: 100%; height: 450px; }
}
.left { float: left;
}
@media screen and (max-width: 980px) { .left { float: none; }
}
.right { float: right;
}
@media screen and (max-width: 980px) { .right { float: none; }
}
* { -webkit-transition: translate3d(0, 0, 0);
}
.wrapper { max-width: 960px; width: 100%; margin: 0 auto; padding: 0 20px; display: block; position: relative; box-sizing: content-box; -moz-box-sizing: content-box;
}
@media screen and (max-width: 980px) { .wrapper { box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; }
}
section, article { width: 100%; position: relative; display: block;
}
section:after, article:after { display: table; content: ''; clear: both;
}
footer { max-width: 960px; width: 100%; display: block; position: relative; border-top: solid 1px #e5e5e5; padding-top: 24px; margin-top: 80px;
}
footer:after { display: table; content: ''; clear: both;
}
footer .copy span { font-family: "Lato"; color: rgba(140, 140, 140, 0.6); font-style: normal; font-size: 17px; line-height: 26px; letter-spacing: -0.5px; display: block; margin-top: -4px;
}
footer .copy span em { color: rgba(0, 0, 0, 0.6); font-weight: 400; font-style: inherit;
}
footer address { font-family: "Merriweather"; font-weight: 400; line-height: 19px; font-size: 13px; text-align: right; font-style: normal; color: #989898; letter-spacing: -0.25px;
}
@media screen and (max-width: 980px) { footer address { text-align: left; margin-top: 15px; padding-bottom: 15px; }
}
footer address span { display: block;
}
footer address em { font-style: normal; font-weight: 700;
}
#overflow:after { display: table; content: ''; clear: both;
}
#overflow h1 { font-family: "Oswald"; font-weight: 400; text-transform: uppercase; color: transparent; display: inline-block; font-size: 82px; z-index: 1; line-height: 1; text-indent: 43px; position: relative; margin: 0; font-size: 0\0; transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
}
@media screen and (max-width: 980px) { #overflow h1 { width: 100%; display: block; }
}
#overflow h1:before { content: ''; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/overflow-headline.png) 45px 0 no-repeat; display: block; height: 400px; width: 1059px; z-index: 3; left: -55px; top: -90px; position: absolute; transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg);
}
@media screen and (max-width: 980px) { #overflow h1:before { top: initial; max-width: 100%; width: 100%; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/overflow-headline.png) 0px 0 no-repeat; height: 184px; left: 0; background-size: cover; }
}
#overflow p { color: #6a7e8b; font-family: "Lora"; display: block; font-weight: 400; font-style: italic; line-height: 26px; font-size: 16px; position: relative; max-width: 720px; letter-spacing: -0.5px; float: left;
}
#overflow p.first { float: right; text-align: right;
}
#overflow p.first { transform: rotate(2.1deg); -webkit-transform: rotate(2.1deg); -moz-transform: rotate(2.1deg); letter-spacing: -0.18px; margin-top: 90px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #overflow p.first { margin-top: 150px; }
}
#overflow p.second { transform: rotate(-0.73deg); -webkit-transform: rotate(-0.73deg); -moz-transform: rotate(-0.73deg); max-width: 655px;
}
#overflow p.third { transform: rotate(0.94deg); -webkit-transform: rotate(0.94deg); -moz-transform: rotate(0.94deg); text-align: left; float: left; margin-left: 120px; margin-bottom: 0;
}
@media screen and (max-width: 980px) { #overflow p.third { margin-left: 0; }
}
#border-bottom article { max-width: 720px; position: relative; width: 75%; margin-bottom: 45px;
}
@media screen and (max-width: 980px) { #border-bottom article { width: 100%; max-width: 100%; }
}
#border-bottom article h1, #border-bottom article h3 { font-family: "Oswald"; color: #000; display: block; position: relative;
}
#border-bottom article h1 { text-transform: uppercase; line-height: 82px; font-size: 82px; letter-spacing: -0.5px; margin: 0px; padding-bottom: 24px; border-bottom: solid 21px #000;
}
@media screen and (max-width: 980px) { #border-bottom article h1 { font-size: 50px; line-height: 1; }
}
#border-bottom article h1:before { content: ''; display: block; position: relative; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/border-bottom-line.jpg) top left no-repeat; margin-bottom: 30px; height: 157px; width: 100%;
}
#border-bottom article h3 { border-bottom: solid 3px #000; line-height: 1.2; padding: 15px 0; font-size: 37px; margin: 0 0 15px 0;
}
#border-bottom article p { font-family: "Merriweather"; font-size: 22px !important; line-height: 29px !important; display: inline; color: #000; margin: 0;
}
@media screen and (max-width: 980px) { #border-bottom article p { font-size: 1rem !important; line-height: 1.3 !important; }
}
#border-bottom article p strong { font-weight: 700;
}
#border-bottom article p.bullet:before { content: '•'; font-size: 41px; line-height: 0; vertical-align: middle; font-family: inherit; color: inherit; margin: 0 10px 0 3px;
}
#border-bottom aside { max-width: 225px; position: relative; width: 25%; border-top: 15px solid #FFF; border-left: 15px solid #FFF; box-shadow: -2px 0 0 0 #e5e5e5; background: #3a83bb; zoom: 1;
}
@media screen and (max-width: 980px) { #border-bottom aside { max-width: 100%; width: 100%; box-shadow: none; border-left: 0; margin-bottom: 15px; }
}
#border-bottom aside h1, #border-bottom aside h3 { font-family: "Oswald"; color: #FFF; display: block; position: relative; width: 100%; text-transform: uppercase; font-weight: normal; margin: 0;
}
#border-bottom aside::after { content: ""; width: 40px; height: 40px; border-radius: 50%; display: block; position: absolute; left: 50%; margin-left: -20px; background: #FFF; bottom: -25px; zoom: 1;
}
@media screen and (max-width: 980px) { #border-bottom aside section.description { background: rgba(0, 0, 0, 0.6); }
}
#border-bottom aside section.description img { display: block; width: 300px; margin: -30% 0 0 -50px; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;
}
@media screen and (max-width: 980px) { #border-bottom aside section.description img { width: 100%; opacity: 0.3; padding-top: 10%; margin: 0 0 -60% 0; }
}
#border-bottom aside section.description h1, #border-bottom aside section.description h3, #border-bottom aside section.description p { padding: 0 10px;
}
#border-bottom aside section.description h1 { font-size: 30px; margin-top: -12px;
}
#border-bottom aside section.description h3 { font-size: 20px; padding-bottom: 14px; border-bottom: 8px solid #619fce;
}
#border-bottom aside section.description p { font-family: "Lora"; font-weight: 400; font-style: italic; color: white; font-size: 16px; margin: 0; position: relative; padding-top: 1rem; padding-bottom: 1rem; line-height: 24px; letter-spacing: -0.5px;
}
@media screen and (max-width: 980px) { #border-bottom aside section.description p { background: #3a83bb; }
}
@media screen and (max-width: 980px) { #border-bottom aside section.rating { background: #3a83bb; }
}
#border-bottom aside section.rating:before { content: ''; display: block; position: relative; width: 100%; height: 10px; margin-bottom: 5px; box-shadow: inset 0 5px 0 0 #3476a8; border-top: 3px dashed #234f71;
}
#border-bottom aside section.rating:after { content: ''; display: block; position: relative; width: 100%; height: 10px; margin-top: 23px; box-shadow: 0 -5px 0 0 #3476a8; border-top: 3px dashed #234f71;
}
#border-bottom aside section.rating .rating-wrapper { display: block; padding: 0 10px;
}
#border-bottom aside section.rating .score-label { margin-bottom: 10px;
}
#border-bottom aside section.rating .score-label:after { display: table; content: ''; clear: both;
}
#border-bottom aside section.rating .score-label .title { color: #619fce; font-size: 14px; line-height: 25px; width: 50%;
}
@media screen and (max-width: 980px) { #border-bottom aside section.rating .score-label .title { float: left; }
}
#border-bottom aside section.rating .score-label .title span { display: block; font-size: 32px;
}
#border-bottom aside section.rating .score-label .score { font-size: 43px; line-height: 1.4; width: 50%; text-align: right;
}
@media screen and (max-width: 980px) { #border-bottom aside section.rating .score-label .score { float: right; }
}
#border-bottom aside section.rating .score-bar { padding: 0 10px; background: #619fce; width: 100%; height: 8px; margin-top: 5px; position: relative; display: block; clear: both;
}
#border-bottom aside section.rating .score-bar .score-bar-inner { background: #FFF; width: 20%; position: absolute; left: 0; height: 100%; top: 0;
}
#border-bottom aside section.premiere { padding: 10px 10px 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; text-align: center; text-transform: uppercase; background: #3a83bb;
}
#border-bottom aside section.premiere header { display: block; width: 100%; height: 14px; background: #619fce;
}
@media screen and (max-width: 980px) { #border-bottom aside section.premiere header { max-width: 180px; margin: 0 auto; }
}
#border-bottom aside section.premiere header h3 { font-size: 14px; color: #619fce; background: #3a83bb; padding: 0 10px; position: relative; line-height: 1; vertical-align: 2px; z-index: 5; display: inline;
}
#border-bottom aside section.premiere p { font-family: "Oswald"; font-weight: normal; color: #fff; line-height: 1.2; margin-top: 2px;
}
#border-bottom aside section.premiere p span { display: block;
}
#border-bottom aside section.premiere p span.theatre { font-size: 25px; letter-spacing: -0.4px;
}
#border-bottom aside section.premiere p span.country { color: #619fce; font-size: 25px;
}
#border-bottom aside section.premiere p span.date { font-size: 35px;
}
#beatles { background-color: #524741; width: 100%; padding: 17px 0; clear: both;
}
#beatles article { color: #fff;
}
#beatles article h1 { font-family: "Oswald"; text-transform: uppercase; text-align: center; font-size: 49px; line-height: 79px; margin: 0 0 17px;
}
@media screen and (max-width: 980px) { #beatles article h1 { font-size: 24px; line-height: 1.5; }
}
#beatles article .visual-image { position: relative;
}
#beatles article .visual-image img { width: 100%; display: block;
}
#beatles article .visual-image::after { content: ""; display: block; width: 130px; height: 130px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/map-corner.gif) 0 0 no-repeat; position: absolute; right: 0; bottom: 0;
}
@media screen and (max-width: 980px) { #beatles article .visual-image::after { transform: scale(0.75); -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform-origin: bottom right; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; }
}
#beatles article .text-container { padding: 0 25px; font-family: "Merriweather"; font-weight: 300; font-size: 25px; letter-spacing: -0.25px; -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 980px) { #beatles article .text-container { font-size: 18px; }
}
#beatles article .text-container p { line-height: 35px;
}
@media screen and (max-width: 980px) { #beatles article .text-container p { line-height: 1.4; }
}
#beatles article .text-container a.src-link { color: #afa29b; font-size: 18px; display: block; text-decoration: none; transition: color 250ms ease-in-out; -webkit-transition: color 250ms ease-in-out; -moz-transition: color 250ms ease-in-out;
}
#beatles article .text-container a.src-link:hover { color: #fff;
}
#bullet-container { max-width: 800px; width: 80%; position: relative; display: table; margin: 0 0 30px; background: #fff\0;
}
#bullet-container:after { display: table; content: ''; clear: both;
}
@media screen and (max-width: 980px) { #bullet-container { max-width: 100%; width: 100%; background: transparent; }
}
#bullet-container h2 { display: table-caption; text-align: center; font-family: "Oswald", sans-serif; font-weight: normal; text-transform: uppercase; color: #a97d35; font-size: 15px; letter-spacing: 0.25px; margin: 30px 0 20px; padding: 10px 0; border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; line-height: 1; background: #fff\0;
}
@media screen and (max-width: 980px) { #bullet-container h2 { margin: 30px 0 0; background: white; }
}
#bullet-container h2 em { font-style: normal; font-family: "Lato"; font-weight: bold; font-size: 12px; color: #e0c167; margin-left: 5px; vertical-align: top;
}
@media screen and (max-width: 980px) { #bullet-container h2 em { display: block; margin-top: 5px; }
}
#bullet-container .bullets { color: #e0e0e0; padding: 0 13px 35px; font-family: "Oswald"; background: #fff\0; font-weight: normal; width: 20%; bottom: 0; height: 400px; display: table-cell; vertical-align: bottom; text-align: center; position: relative; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out;
}
@-moz-document url-prefix() { #bullet-container .bullets { display: inline-block !important; float: left; }
}
@media screen and (max-width: 980px) { #bullet-container .bullets { display: block; width: 100%; padding: 20px; height: 200px; background: white; overflow: hidden; border-bottom: 1px solid #E5E5E5; border-right: 0 !important; }
}
#bullet-container .bullets div { line-height: 1.1; margin: 0;
}
#bullet-container .bullets span { display: block; vertical-align: bottom; margin: 0; line-height: 1.1; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out;
}
@media screen and (max-width: 980px) { #bullet-container .bullets span { text-align: right; }
}
#bullet-container .bullets.hover .bullet { opacity: 0.3; bottom: 100px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
@media screen and (max-width: 980px) { #bullet-container .bullets.hover .bullet { bottom: initial; transform: rotate(52deg) translateY(-40px) scale(1.4); -webkit-transform: rotate(52deg) translateY(-40px) scale(1.4); -moz-transform: rotate(52deg) translateY(-40px) scale(1.4); }
}
#bullet-container .bullets.hover span { margin-bottom: 5px; color: #3d3d3d;
}
#bullet-container .bullets.gr69 { border-right: solid 1px #e5e5e5;
}
#bullet-container .bullets.gr69 .details { font-size: 4.6rem;
}
#bullet-container .bullets.gr69 .manufacturer { font-size: 1.6rem;
}
#bullet-container .bullets.gr69 .weight { font-size: 1.8rem;
}
#bullet-container .bullets.gr168 { border-right: solid 1px #e5e5e5;
}
#bullet-container .bullets.gr168 .details { font-size: 4.6rem;
}
#bullet-container .bullets.gr168 .manufacturer { font-size: 1.6rem;
}
#bullet-container .bullets.gr168 .weight { font-size: 1.8rem;
}
#bullet-container .bullets.gr154 { border-right: solid 1px #e5e5e5;
}
#bullet-container .bullets.gr154 .details { font-size: 1.8rem; font-size: 29px\0 !important;
}
#bullet-container .bullets.gr154 .details span { font-size: 0.5em !important; display: inline; vertical-align: 50%;
}
@media screen and (max-width: 980px) { #bullet-container .bullets.gr154 .details { font-size: 3.3rem; }
}
#bullet-container .bullets.gr154 .manufacturer { font-size: 2.3rem;
}
#bullet-container .bullets.gr154 .weight { font-size: 2.2rem;
}
#bullet-container .bullets.gr220 { border-right: solid 1px #e5e5e5;
}
#bullet-container .bullets.gr220 .details { font-size: 5rem;
}
#bullet-container .bullets.gr220 .manufacturer { font-size: 2.1rem;
}
#bullet-container .bullets.gr220 .weight { font-size: 2.2rem;
}
#bullet-container .bullets.gr240 { border-bottom: 0;
}
#bullet-container .bullets.gr240 .details { font-size: 5rem;
}
#bullet-container .bullets.gr240 .manufacturer { font-size: 2.1rem;
}
#bullet-container .bullets.gr240 .weight { font-size: 1.7rem; margin-top: 0.5rem;
}
#bullet-container .bullets .manufacturer { text-transform: uppercase;
}
#bullet-container .bullets .bullet { position: absolute; bottom: 125px; display: block; width: 100px; height: 287px; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out;
}
@media screen and (max-width: 980px) { #bullet-container .bullets .bullet { bottom: initial; left: 0; margin-left: 0; -webkit-transform: rotate(30deg); }
}
#bullet-container .bullets .bullet:before { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/bullets.png); background-repeat: no-repeat; content: ''; display: block; position: relative; width: 100px; height: 287px;
}
#bullet-container .bullets.gr69 .bullet:before { background-position: 7px bottom;
}
#bullet-container .bullets.gr168 .bullet:before { background-position: -87px bottom;
}
#bullet-container .bullets.gr154 .bullet:before { background-position: -194px bottom;
}
#bullet-container .bullets.gr220 .bullet:before { background-position: -293px bottom;
}
#bullet-container .bullets.gr240 .bullet:before { background-position: -386px bottom;
}
#staying-afloat { float: left; width: 27%; max-width: 160px; text-align: right; background: #fff\0; bottom: -25px; z-index: 3; clear: both; padding-right: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;
}
@media screen and (max-width: 980px) { #staying-afloat { width: 100%; max-width: 100%; text-align: left; padding-right: 0; margin-bottom: 30px; z-index: -1; }
}
#staying-afloat h3 { margin: 0 0 5px; font-family: "Oswald", sans-serif; color: #24795a; font-size: 21px; font-weight: normal;
}
@media screen and (max-width: 980px) { #staying-afloat h3 { font-size: 24px; margin-top: 10px; }
}
#staying-afloat p { font-family: "Lato"; font-weight: normal; color: #464646; margin: 5px 0; font-size: 14px; padding-left: 18px; line-height: 19px; letter-spacing: -0.5px;
}
@media screen and (max-width: 980px) { #staying-afloat p { width: 100%; text-align: left; font-size: 18px; line-height: 1.3; padding-left: 0; }
}
#staying-afloat img { position: relative; left: -30px;
}
@media screen and (max-width: 980px) { #staying-afloat img { width: 50%; left: initial; right: 0; position: absolute; z-index: -1; opacity: 0.3; top: 0; }
}
#staying-afloat img:hover { animation: afloat 0.5625s infinite linear; -webkit-animation: afloat 0.5625s infinite linear; -moz-animation: afloat 0.5625s infinite linear;
}
#positioning-relatives { width: 60%; display: inline-block; margin-top: 30px; max-width: 560px; padding-left: 40px;
}
#positioning-relatives:after { display: table; content: ''; clear: both;
}
@media screen and (max-width: 980px) { #positioning-relatives { max-width: 100%; padding-left: 0; width: 100%; }
}
#positioning-relatives article { width: 512px;
}
@media screen and (max-width: 980px) { #positioning-relatives article { width: 100%; }
}
#positioning-relatives header { text-transform: uppercase; position: relative;
}
@media screen and (max-width: 980px) { #positioning-relatives header { margin-bottom: 60px; }
}
#positioning-relatives header .img { display: block; position: absolute; top: -410px; left: -105px; width: 882px; height: 550px; z-index: -1; transform: rotate(-3.84deg); -webkit-transform: rotate(-3.84deg); -moz-transform: rotate(-3.84deg); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.99775496, M12=0.06697048, M21=-0.06697048, M22=0.99775496,sizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99775496, M12=0.06697048, M21=-0.06697048, M22=0.99775496,sizingMethod='auto expand');
}
@media screen and (max-width: 980px) { #positioning-relatives header .img { top: 0; left: -20%; width: 120%; height: initial; position: relative; }
}
#positioning-relatives header .img img { width: 100%; display: block;
}
#positioning-relatives header .img:after { content: ''; display: block; width: 100%; height: 100%; z-index: -1; position: absolute; bottom: -7%; left: -5%; transform: rotate(3.84deg); -webkit-transform: rotate(3.84deg); -moz-transform: rotate(3.84deg); background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12377/pos-shadow.png) bottom left no-repeat;
}
#positioning-relatives header h2 { font-family: "Oswald"; line-height: 79px; font-size: 75px; color: #fdcd84; display: block; font-weight: normal; margin: 0; word-spacing: 100rem;
}
@media screen and (max-width: 980px) { #positioning-relatives header h2 { font-size: 55px; line-height: 1.2; margin-top: -175px; text-shadow: 0 0 20px black; }
}
#positioning-relatives header h2 span { font-family: "Merriweather"; font-weight: 400; font-size: 13px; display: block; line-height: 1; color: #cbb8a0;
}
#positioning-relatives p { font-family: "Merriweather"; color: #000000; line-height: 33px; font-size: 25px; font-weight: 300; letter-spacing: -0.5px;
}
@media screen and (max-width: 980px) { #positioning-relatives p { font-size: 1.25rem; margin-top: 2rem; line-height: 1.3; }
}
#box-model { display: inline-block; max-width: 400px; width: 40%; margin-top: -40px;
}
@media screen and (max-width: 980px) { #box-model { margin-top: 50px; max-width: 100%; width: 100%; }
}
#box-model article { text-align: center;
}
#box-model article img { margin-left: -56px; display: block;
}
@media screen and (max-width: 980px) { #box-model article img { margin: 0 auto 15px; max-width: 100%; }
}
#box-model article h2 { font-family: "Lora"; font-weight: 700; font-style: italic; font-size: 36px; color: #5f5d66; margin: 0;
}
#box-model article p { font-family: "Lato"; line-height: 27px; font-size: 19px; color: #6e6c77; letter-spacing: -0.3px; padding: 0 20px;
}
#cssoff { margin-top: 40px; position: relative;
}
#cssoff .volume { display: block; margin-top: -420px; color: #b0aeb8; font-size: 12px; font-family: "Lora"; letter-spacing: 2px; text-transform: uppercase;
}
@media screen and (max-width: 980px) { #cssoff .volume { margin-top: 30px; color: #FFF; }
}
#cssoff h1 { font-family: "Lato"; font-size: 279px; font-size: 279px\0 !important; color: #fff; font-weight: 100; text-transform: uppercase; line-height: 0.85; letter-spacing: 1rem; margin: 0; margin-left: -45px;
}
@media screen and (max-width: 980px) { #cssoff h1 { font-size: 8rem; margin-left: 0; }
}
#cssoff h1 span { letter-spacing: -.65rem; display: block;
}
@media screen and (max-width: 980px) { #cssoff h1 span { letter-spacing: 0; }
}
@-webkit-keyframes afloat { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: translate(2px, 0px) rotate(-3deg); } 50% { -webkit-transform: translate(0px, -2px) rotate(0deg); } 75% { -webkit-transform: translate(-2px, 0px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
}
@-moz-keyframes afloat { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: translate(2px, 0px) rotate(-3deg); } 50% { -webkit-transform: translate(0px, -2px) rotate(0deg); } 75% { -webkit-transform: translate(-2px, 0px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
}
@-o-keyframes afloat { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: translate(2px, 0px) rotate(-3deg); } 50% { -webkit-transform: translate(0px, -2px) rotate(0deg); } 75% { -webkit-transform: translate(-2px, 0px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
}
@keyframes afloat { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: translate(2px, 0px) rotate(-3deg); } 50% { -webkit-transform: translate(0px, -2px) rotate(0deg); } 75% { -webkit-transform: translate(-2px, 0px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
}

CSSOff 2013 Submission - Script Codes JS Codes

$(document).ready(function(){ // Animation Reset $('.score-bar-inner').css({'width': 0}); $('#overflow article p').css({ 'top': '-30px', 'opacity': 0 });	$.fn.isOnScreen = function() { var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; function count($this) { var current = parseInt($this.html(), 10); $this.html(++current); if(current !== $this.data('count')){ setTimeout(function(){count($this)}, 50); } }	// bullet hover	var $bullet = $('.bullets');	$bullet.each(function() {	$(this).hover(function() {	$(this).toggleClass('hover');	});	}); // rating var $score = $('#score'),	$numScore = $('#score-int'),	ratingShown = false;	// overflow var overflowShown = false; $(window).on('scroll', function() {	if (ratingShown == false && $('.score-label').isOnScreen() == true ) {	ratingShown = true;	$numScore.each(function() {	$(this).data('count', parseInt($(this).html(), 10));	$(this).html('0'); count($(this)); });	$score.animate({'width': '20%'}, 1000);	}	if(overflowShown == false && $('#overflow').isOnScreen() == true ) {	overflowShown = true;	$('#overflow article p').each(function() {	$(this).animate({	'opacity': 1,	'top': 0	}, 1200);	});	} }); $('#transformers').hover(function() {	$('#rating-image').transition({ scale: '1.1' }, 500, 'ease'); }, function() {	$('#rating-image').transition({ scale: '1.0' }, 500, 'ease'); });
});
CSSOff 2013 Submission - Script Codes
CSSOff 2013 Submission - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 3
Size 14,766 Kb
Views 38,456
Do you need developer help for CSSOff 2013 Submission?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eduard Mayer (codewunder) Script Codes
Name
Social Sharing Buttons
A Pen by Eduard Mayer
Animated Ubuntu Touch-styled checkboxes
Enlarge text with buttons and js, with limited max- and min sizes
VelocityJS, fade on scroll
Twitter Widget Rebound
Infotype SVG Animation
A Pen by Eduard Mayer
Responsive GTA V Slider
Scrollable see-through headline
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!