Doggo


<html>
<body><style>
@import url('https://fonts.googleapis.com/css?family=Comfortaa');

body{
 background-color: white;
 color: #3A306F;
 text-shadow: #735A9C 0.2vh 0.2vh 0.5vh;
 font-family: 'Comfortaa', cursive;
}

#ooc{
 z-index: 2;
 position: fixed;
 right: 2vw;
 top: 35vh;
 opacity: 1;
 width: 4vw;
 height: 3vh;
 font-size: 2.5vh;
 text-align: right;
 overflow: hidden;
 transition: 1s;
 border: 0.2vh solid #3A306F;
 box-shadow: 0.5vh 0.5vh 0.5vh #735A9C;
 border-radius: 2vh;
 padding: 0.5vh 1.5vh 0.5vh 0vh;
 background-color: white;
}
#ooc:hover{
 height: 20vh;
 width: 25vw;
}

#text{
 z-index: 2;
 position: fixed;
 right: 2vw;
 top: 10vh;
 opacity: 0;
 font-size: 5vh;
 text-align: right;


-webkit-animation:textin 4s 1;
 animation:textin 4s 1;
 animation-delay:6s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:6s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes textin{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes textin{
0%{opacity:0;}
100%{opacity:1;}
}

#intro{
 z-index: 1;
 position: fixed;
 left: 0;
 width: 100%;
 height: 100%;
 bottom: 185vh;
 background-color: white;

 -webkit-animation:picslide 10s 1;
 animation:picslide 10s 1;
 animation-delay:0.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:0.5s;
 -webkit-animation-fill-mode:forwards;
}
#intro img{
 width: 100%;
}

@keyframes picslide{
0%{bottom: 185vh;}
100%{bottom: 0vh;}
}
@-webkit-keyframes picslide{
0%{bottom: 185vh;}
100%{bottom: 0vh;}
}


</style>

<div id="intro">
 <img src="http://img09.deviantart.net/e3b0/i/2015/267/e/1/greater_dog_by_anaugi-d9apdq8.png" />
</div>

<div id="text">
"Greater Dog is seeking affection. "<br><br>

<span style="font-size:4vh;">
Best Doggo<br>
</span>

<span style="font-size:3vh;">
Excitable | Loyal | playful<br><br>
</span>

<div id="ooc">
OOC<br><br>

OOC goes here
</div>

</div>
<script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"5fe62938045759660bd9199fa5542c98",petok:"afbe181a9a51773ec5abe4ba181ce16564fa7bee-1487554320-1800",adblock:1,betok:"ab2df68beb1495aa2d72ec459a7fb48482cb6566-1487554320-120",zone:"roleplay.chat",rocket:"0",apps:{"ga_key":{"ua":"UA-33787108-1","ga_bs":"2"},"abetterbrowser":{"ie":"7","opera":null,"chrome":null,"safari":null,"firefox":null}}}];!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=f2befc48d1/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33787108-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
</body>
</html>