Skip to content

Instantly share code, notes, and snippets.

@skopp

skopp/COPYRIGHTS_FAQ_EULA

Forked from 101010101/COPYRIGHTS_FAQ_EULA
Created April 1, 2013 15:05
Show Gist options
  • Save skopp/5285446 to your computer and use it in GitHub Desktop.
Save skopp/5285446 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
COPYRIGHTS_FAQ_EULA
//// Google John is a toilet that reads data from your waste matter and returns relevant ads in Web History!
/// Works with Google Nose Beta!
// Google Nose Beta will intensify the aroma of the house you built by a whoppin 4%!
/////
// *F*A*Q*
// "BULL!" you say?
// We sh## you not
//"ETA?"
//Does the pope cr@/o in the woods?
__
// ) ) ___ / ___ ___ ___ ___
// / / (( ) ) //\ \ // ) ) // ) ) // ) ) ®
\\ () ) ) \ \ // \ \ // / / //___/ / //___/ /
\\__/ / // ) ) // \ \ ((___/ / // //
// derived from an ORIGINAL WORK..... Google Now loading animation. by
__
/ | / /
( O_/ ___ _ _ ___ ___ ___ ( ___ ___
| |___ | | | )| )| )| | | ) \ )|___)\ )
|__/ __/ | | / |__/ | / |__ | |__/| \/ |__ \_/
/
////
/////////
Raw
index.html
<div class="cont">
<div class="frame1"></div>
<div class="frame2"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="line7"></div>
<div class="line8"></div>
<div class="line9"></div>
<span><h1>Google<h2>john</h2></h1></span>
<div><h3 class="q">The Perfect <a href="http://goo.gl/AQn58">Google Nose</a> Companion</h3></div>
<div><p>omega</p></div>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAIoAAAAECAIAAADeXzCbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODFEOUEyMzFBOERFQzcyQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQTlDNkVFOEVGQzIxMUUxOUJDNkEyREUzQzEzOUJGNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQTlDNkVFN0VGQzIxMUUxOUJDNkEyREUzQzEzOUJGNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDZENjQwNjM2MzIwNjgxMTgwODM4RUVFOTdCQkFFREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgxRDlBMjMxQThERUM3MkMiLz4gPC9yZGY6RGVzY3JpcHRpb24%2BIDwvcmRmOlJERj4gPC94OnhtcG1ldGE%2BIDw/eHBhY2tldCBlbmQ9InIiPz6z2rdVAAAAMElEQVR42mJkaP/OQHvwb7Y1A10AY%2B85Oln0OYwOtjAxjIJBDEajZzR6RgG5ACDAAGNHBgAfwwAlAAAAAElFTkSuQmCC">
</div>
<div><h3 style="margin-left:5em;">Coming Soon</h3></div>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Roboto:400,300,100);
* {margin:0;padding:0;font-size:100%;vertical-align:baseline;border:2em;outline:0;background:transparent;font-weight:normal;outline:none;line-height:2em;-webkit-text-size-adjust:100%;}
body {
background: #f5f5f5;
margin-top:50px;
}
h1 {
display:inline;
background: #f5f5f5;
position:absolute;
left:-100px;
top:60px;
animation: google 4.5s 0.2s ease;
font: 400 72px/80px 'Libre Baskerville', serif;
z-index: 20;
color:gray;
}
p {
font:300 'Roboto', sans-serif;, serif;
animation: google 7s 0.5s ease;
display:inline;
position:absolute;
margin-left:20em;;
margin-top:5em;
z-index:19;
}
h3 {
font:100 'Roboto', sans-serif;, serif;
}
h2 {
display:inline;
position:absolute;
left:180px;
top:50px;
animation: google2 6s 0.3s ease;
color:brown;
font:300 70px/80px 'Roboto', sans-serif;, serif;
}
h1 span {
font:300 30px/30px 'Roboto', sans-serif;, serif;
position:relative;
top:-20px;
}
.cont {
position:relative;
width:30em;
margin: auto;
}
.frame1 {
position: absolute;
width: 13em;
height: 0em;
background:#555;
animation: frame1 3.4s 0.5s ease;
z-index: 2;
}
.frame2 {
position: absolute;
width: 0em;
height: 16em;
margin-left: 1.5em;
margin-top: 1.5em;
background:#cdd5e0;
animation: frame2 4.6s 0.5s ease;
z-index: 3;
}
.line1, .line2, .line3 {
position: absolute;
width: 7em;
height: 0em;
margin-left: 3em;
margin-top: 3em;
background:#fff;
z-index: 4;
}
.line4, .line5, .line6, .line7, .line8, .line9 {
position: absolute;
z-index: 1;
}
.line4 {
width: 0em;
height: 2em;
margin-left: 2em;
margin-top: 7em;
background:#AFCC17;
animation: left 2s 2.8s ease;
}
.line5 {
width: 4em;
height: 0em;
margin-left: 4em;
margin-top: 7em;
background:#F2CE3B;
animation: right 2s 2.8s ease;
}
.line6 {
width: 3em;
height: 0em;
margin-left: 2em;
margin-top: 12em;
background:#F06533;
animation: right 2s 3s ease;
}
.line7 {
width: 2em;
height: 0em;
margin-left: 4em;
margin-top: 7em;
background:#4491AB;
animation: right 2s 2.8s ease;
}
.line8 {
width: 0em;
height: 2em;
margin-left: 3em;
margin-top: 9em;
background:#AFCC17;
animation: left 2s 3s ease;
}
.line9 {
width: 3em;
height: 0em;
margin-left: 4em;
margin-top: 3em;
background:#F06533;
animation: right 2s 2.7s ease;
}
.line1 { animation: line 4.2s 0.9s ease; }
.line2 { animation: line 4.1s 0.8s ease; margin-top: 7.5em;}
.line3 { animation: line 4s 0.7s ease; margin-top:12em}
@keyframes line {
0% { height: 4em; opacity: 0;}
10% { top: 0em; opacity: 1;}
20% { top: 0em; }
60% { top: 0em; left:0; opacity: 1; width: 7em;}
100% { left: 30em; opacity: 0; height:4em; width: 0.1em; }
}
@keyframes left {
0% { height: auto; opacity: 0;}
10% { top: 0em; opacity: 1;}
20% { top: 0em; }
60% { top: 0em; left:0; opacity: 1; width: 7em;}
100% { left: -30em; opacity: 0; height:4em; width: 0.1em; }
}
@keyframes right {
0% { width: 4em; height: auto; opacity: 0;}
10% { top: 0em; opacity: 1;}
20% { top: 0em; }
60% { top: 0em; left:0; opacity: 1; width: 7em;}
100% { left: 30em; opacity: 0; height:4em; width: 0.1em; }
}
/*
@keyframes frame1 {
0% { height: 0.1em; top:12em; left:0;}
10% { height: 22em; top: -1em; left:0;}
20% { height: 20em; top: 0em; left:0;}
70% { top: 0em; left:0; opacity: 1;}
95% { width: 13em; top:0em; left: -30em; opacity: 0;}
100% { height:20em; width: 0.1em; opacity: 0;}
}
@keyframes frame2 {
0% { width: 10em; top:0; left:0; opacity: 0;}
10% { top: 0em; left:0; opacity: 1;}
20% { top: 0em; left:0;}
70% { width: 10em; top: 0em; left:0; opacity: 1;}
100% { left: -40em; opacity: 0; width:0.1em; }
}*/
@keyframes google {
0% { opacity: 0;}
10% { }
20% { }
90% { opacity: 0;}
100% { opacity: 1; }
}/*
@keyframes google2 {
0% { opacity: 0;}
10% { }
80% { left: -100px;}
90% { opacity: 0;}
100% { opacity: 1; }
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment