Skip to content

Instantly share code, notes, and snippets.

@danillonunes

danillonunes/Rodrigo Ghedin.html

Last active December 29, 2015 22:09
Show Gist options
  • Save danillonunes/7734385 to your computer and use it in GitHub Desktop.
Save danillonunes/7734385 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
deal-with-it.css
#principal::before,
#principal::after {
background: url("deal-with-it.png");
content: "";
display: block;
position: absolute;
visibility: hidden;
width: 250px;
-moz-transition: 3s top linear;
-ms-transition: 3s top linear;
-o-transition: 3s top linear;
-webkit-transition: 3s top linear;
transition: 3s top linear;
}
#principal::before {
background: url("deal-with-it.png");
height: 50px;
margin-left: 15px;
top: -50px;
}
@keyframes dealwithit {
0% { width: 100px; }
49% { width: 100px; }
50% { width: 200px; }
99% { width: 200px; }
100% { width: 248px; }
}
@-webkit-keyframes dealwithit {
0% { width: 100px; }
49% { width: 100px; }
50% { width: 200px; }
99% { width: 200px; }
100% { width: 248px; }
}
#principal::after {
background: url("deal-with-it.png") left bottom no-repeat;
height: 30px;
margin: 0 41px;
top: 330px;
width: 0;
}
.deal-with-it #principal::before {
top: 210px;
visibility: visible;
}
.deal-with-it #principal::after {
visibility: visible;
-moz-animation: dealwithit 2s steps(3) 4s forwards;
-ms-animation: dealwithit 2s steps(3) 4s forwards;
-o-animation: dealwithit 2s steps(3) 4s forwards;
-webkit-animation: dealwithit 2s steps(3) 4s forwards;
animation: dealwithit 2s steps(3) 4s forwards;
}
Raw
deal-with-it.js
var deal_with_it = new Konami(function() {
var b = document.getElementsByTagName("body")[0],
c = b.className ? b.className.split(" ") : [];
c.push("deal-with-it");
b.className = c.join(" ");
});
Raw
konami.min.js
/*
* Konami-JS ~
* :: Now with support for touch events and multiple instances for
* :: those situations that call for multiple easter eggs!
* Code: http://konami-js.googlecode.com/
* Examples: http://www.snaptortoise.com/konami-js
* Copyright (c) 2009 George Mandis (georgemandis.com, snaptortoise.com)
* Version: 1.4.2 (9/2/2013)
* Licensed under the MIT License (http://opensource.org/licenses/MIT)
* Tested in: Safari 4+, Google Chrome 4+, Firefox 3+, IE7+, Mobile Safari 2.2.1 and Dolphin Browser
*/
var Konami=function(e){var t={addEvent:function(e,t,n,r){if(e.addEventListener)e.addEventListener(t,n,false);else if(e.attachEvent){e["e"+t+n]=n;e[t+n]=function(){e["e"+t+n](window.event,r)};e.attachEvent("on"+t,e[t+n])}},input:"",pattern:"38384040373937396665",load:function(e){this.addEvent(document,"keydown",function(n,r){if(r)t=r;t.input+=n?n.keyCode:event.keyCode;if(t.input.length>t.pattern.length)t.input=t.input.substr(t.input.length-t.pattern.length);if(t.input==t.pattern){t.code(e);t.input="";n.preventDefault();return false}},this);this.iphone.load(e)},code:function(e){window.location=e},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,orig_keys:"",keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP"],code:function(e){t.code(e)},load:function(e){this.orig_keys=this.keys;t.addEvent(document,"touchmove",function(e){if(e.touches.length==1&&t.iphone.capture==true){var n=e.touches[0];t.iphone.stop_x=n.pageX;t.iphone.stop_y=n.pageY;t.iphone.tap=false;t.iphone.capture=false;t.iphone.check_direction()}});t.addEvent(document,"touchend",function(n){if(t.iphone.tap==true)t.iphone.check_direction(e)},false);t.addEvent(document,"touchstart",function(e){t.iphone.start_x=e.changedTouches[0].pageX;t.iphone.start_y=e.changedTouches[0].pageY;t.iphone.tap=true;t.iphone.capture=true})},check_direction:function(e){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);if(this.keys.length==0){this.keys=this.orig_keys;this.code(e)}}}};typeof e==="string"&&t.load(e);if(typeof e==="function"){t.code=e;t.load()}return t}
Raw
Rodrigo Ghedin.html
<!DOCTYPE html>
<!-- saved from url=(0032)http://www.rodrigoghedin.com.br/ -->
<html lang="pt-BR"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Rodrigo Ghedin</title>
<link href="http://www.rodrigoghedin.com.br/css" rel="stylesheet" type="text/css">
<link href="http://www.rodrigoghedin.com.br/favicon.png" rel="shortcut icon" type="image/x-icon">
<meta name="description" content="Página pessoal de Rodrigo Ghedin.">
<meta name="keywords" content="rodrigo ghedin, ghedin, gizmodo, gemind, rodrigo, meio bit, winajuda, paranavaí, direito, faculdades maringá, uem, comunicação, maringá">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">*{border:0;margin:0;padding:0; font-size: 20px;font-family: Gudea,Calibri,sans-serif;}
a {color: #006AD5; }
a:hover {color: #202D60}
abbr { border-bottom: 1px dotted black; cursor: help;}
#principal { margin: auto; margin-top: 60px; max-width: 640px;}
.avatar {width: 330px; height: 330px; float: left; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 40px; margin-top: 40px;}
p { margin-bottom: 26px; line-height: 28px; text-align: right;}
footer {margin: 120px auto 20px; max-width:640px; }
footer p, footer p a{line-height: 26px; color: gray; text-align: center !important; font-size: 14px !important; }
@media screen and (max-width: 700px) {
#principal{max-width:100%;padding-left:20px;padding-right:20px;margin-top:20px}
.avatar {margin-bottom: 60px; margin-top: 0}
p{text-align: left}
footer {margin-top: 60px}
}
</style>
<style type="text/css"></style><style type="text/css"></style></head>
<body>
<div id="principal">
<img src="http://www.rodrigoghedin.com.br/rodrigo-ghedin2013.jpg" class="avatar">
<p><strong>Rodrigo Ghedin</strong>.</p>
<p>Escrevo sobre tecnologia no <a href="http://www.manualdousuario.net/" title="Manual do Usuário">Manual do Usuário</a> e aleatoriedades no <a href="http://www.rodrigoghedin.com.br/blog" title="Blog do Rodrigo Ghedin">meu blog</a>.</p>
<p>Perfis no <a href="http://twitter.com/ghedin" title="@ghedin no Twitter">Twitter</a>, <a href="http://www.facebook.com/rghedin" title="Rodrigo Ghedin no Facebook">Facebook</a> e <a href="https://plus.google.com/102088801366341413192" title="Rodrigo Ghedin no Google+">Google+</a>. Fotos no <a href="http://flickr.com/photos/rghedin" title="Rodrigo Ghedin no Flickr">Flickr</a> e <a href="http://instagram.com/rghedin" title="rghedin no Instagram">Instagram</a>. Perfil profissional no <a href="http://br.linkedin.com/in/rodrigoghedin/pt" title="Rodrigo Ghedin no LinkedIn">LinkedIn</a>. O que me inspira no <a href="http://ghedin.tumblr.com/" title="Excertos">Tumblr</a>.</p>
<p>Entre em contato <a href="mailto:[email protected]">por email</a>.</p>
</div>
<footer>
<p>2013. <a href="http://validator.w3.org/check?uri=referer" title="XHTML 1.0 Transitional válido.">XHTML</a>, <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.rodrigoghedin.com.br/style.css" title="CSS 2.1 (quase) válido.">CSS</a></p>
</footer>
<script type="text/javascript" src="konami.min.js"></script>
<script type="text/javascript" src="deal-with-it.js"></script>
<link rel="stylesheet" href="deal-with-it.css" />
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment