<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jofpin/pen/hntoB?depth=everything&order=popularity&page=55&q=develop&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">/* BugoneCSS3 by @mrjopino */
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body{
background:url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg.jpg);
background-size:cover;
background-position:center center;
background-attachment:fixed;
font-family: helvetica, arial;
text-align: center;
margin:0;
padding:0;
}
.carita {
height: 100px;
width: 200px;
margin: 2% auto;
background: url(http://jopbox.tk/i/u/ns_1388608540.png)center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: linear-gradient(top, hsla(0,0%,100%,.2) 1px, hsla(0,0%,100%, 0) 1px, hsla(0,0%,0%, .1) 100% );
0 60px 20px -12px hsla(0,0%,0%,.1);
animation: animacion 1s infinite ease-in-out alternate;
top:50px;
left:15px;
}
@keyframes animacion {
100% {
transform: translateY(30px);
box-shadow: 0 40px 10px -18px hsla(0,0%,0%,.2),
}
}
.texto{
color:white;
font-size:30px;
margin: 2% auto;
text-align:center;
font-family: 'pacifico', sans-serif;
text-shadow: 1px 2px 1px rgba(0,0,0,.4); /* Sombrita */
}
h1{
font-family:'Pacifico', cursive;
font-size:4em;
text-align:center;
color: hsl(6, 78%, 57%);
margin: 2% auto;
text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -0px 2px, rgba(0,0,0,0.8) 0 30px 25px;
}
h1:hover {
text-shadow: 2px 2px 20px #2c90c6;
}
/* My Copyright */
.flow boton {
border: none;
background: hsl(192, 15%, 84%);
border-radius: 4px;
outline: none;
padding: 7px 10px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 15px #000;
}
.flow boton:hover {
background: hsl(204, 8%, 76%);
transition: background .7s;
}
.flow boton:active {
background: hsl(204, 8%, 66%);
}
.flow .copyright {
border: none;
background: hsl(6, 78%, 57%);
}
.flow .copyright:hover {
background: #7db9e8
}
.flow .copyright:active {
background: hsl(6, 64%, 36%)
}
/* Footer developed by @mrjopino */
.footer {
display: block;
max-width: 400px;
font-family: helvetica, arial sans-serif;
text-align: center;
padding: 0;
font-size: 0.8em;
color: #888888;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.footer p a,
.footer a {
color: white;
text-decoration: none;
font-weight: 700;
}
.footer p a:hover,
.footer a:hover,
.footer p a:active,
.footer a:active {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
color: white;
}
footer {
max-width: 175px;
margin: 0 auto;
display: block;
padding: 2em;
width: 100%;
}</style></head><body>
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<div class="carita" title="Ghostpock" alt="Ghostpock">
</div>
<h1 title="GhostPock">Ghostpock</h1>
<p class="texto" title="Cloud Security">Cloud Security</p>
<div class="flow">
<boton class="copyright" title="Copyright © 2013 Fraph">©</boton>
</div>
<footer class="footer">
<h5>Developed by <a target="_blank" href="https://twitter.com/mrjopino" title="José Pino">@mrjopino</a></h5>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
