Home
Roleplay Profile Layouts
VS#12HNI: Reincarnation Ascensation Mk. II
CSS
/* Last Update: 07/15/18 */ /* PAGE BACKGROUND AND FONT */ body { background-image:url(https://i.ytimg.com/vi/rSaG894TKTM/maxresdefault.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:auto 100%; background-position:center; background-color:#000000; font-family:'Roboto Slab',serif; font-size:102%; } /* MAIN DISPLAY COLORS */ .color { background-color:#ab0a1a; border:2px solid #0e1111; color:#0e1111; } .color:hover { background-color:#d7d7d7; } #title { color:#ab0a1a; } #title, h2, a { text-shadow:2px 0px 2px #0e1111, 0px 2px 2px #0e1111, 0px -2px 2px #0e1111, -2px 0px 2px #0e1111; } h2, a { color:#ffffff; } /* GOOGLE CHROME SCROLLBARS */ ::-webkit-scrollbar { width:8px; height:8px; background-color:#dddddd; } ::-webkit-scrollbar-thumb:vertical { background-color:#0e1111; } ::-webkit-scrollbar-thumb:horizontal { background-color:#0e1111; } /* TITLE ANIMATION */ @keyframes cycle { 0% {content:"Reincarnation Ascensation";} 10% {content:"Itsumo waratte";} 20% {content:"boku o naburu kimi";} 30% {content:"ukiM enustaH";} 40% {content:"Aa aa nante tanoshisou";} 50% {content:"Konya konya naisho";} 60% {content:"no shikaeshi";} 70% {content:"Hatsune Miku";} 80% {content:"noitasnecsA noitanracnieR";} 90% {content:"Boku no ban";} } @-o-keyframes cycle { 0% {content:"Reincarnation Ascensation";} 10% {content:"Itsumo waratte";} 20% {content:"boku o naburu kimi";} 30% {content:"ukiM enustaH";} 40% {content:"Aa aa nante tanoshisou";} 50% {content:"Konya konya naisho";} 60% {content:"no shikaeshi";} 70% {content:"Hatsune Miku";} 80% {content:"noitasnecsA noitanracnieR";} 90% {content:"Boku no ban";} } @-moz-keyframes cycle { 0% {content:"Reincarnation Ascensation";} 10% {content:"Itsumo waratte";} 20% {content:"boku o naburu kimi";} 30% {content:"ukiM enustaH";} 40% {content:"Aa aa nante tanoshisou";} 50% {content:"Konya konya naisho";} 60% {content:"no shikaeshi";} 70% {content:"Hatsune Miku";} 80% {content:"noitasnecsA noitanracnieR";} 90% {content:"Boku no ban";} } @-webkit-keyframes cycle { 0% {content:"Reincarnation Ascensation";} 10% {content:"Itsumo waratte";} 20% {content:"boku o naburu kimi";} 30% {content:"ukiM enustaH";} 40% {content:"Aa aa nante tanoshisou";} 50% {content:"Konya konya naisho";} 60% {content:"no shikaeshi";} 70% {content:"Hatsune Miku";} 80% {content:"noitasnecsA noitanracnieR";} 90% {content:"Boku no ban";} } /* TITLE ANIMATION END CONTENT */ #title::after { content:"Reincarnation Ascensation"; } /* CSS MEAT */ #line, .infobox { position:fixed; transform:rotate(15deg); -o-transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); } #line { top:52%; left:-5%; height:27.5%; width:110%; background-image:url(https://orig00.deviantart.net/d555/f/2018/188/5/2/red_sound_waves_by_cera_nore-dcgirh2.gif); background-size:auto 100%; } #title { position:fixed; bottom:0%; width:67.5%; font-size:7vh; opacity:0; text-align:right; transition:2s; -o-transition:2s; -moz-transition:2s; -webkit-transition:2s; } body:hover #title { opacity:1; transition:8s; -o-transition:8s; -moz-transition:8s; -webkit-transition:8s; } body:hover #title::after { animation:cycle 0.7s ease-out 6; -o-animation:cycle 0.7s ease-out 6; -moz-animation:cycle 0.7s ease-out 6; -webkit-animation:cycle 0.7s ease-out 6; } .infobox, .tab { transition:1.5s; -o-transition:1.5s; -moz-transition:1.5s; -webkit-transition:1.5s; } .infobox { height:40%; width:4px; text-align:left; opacity:0.95; } .infobox:hover { height:60%; width:28%; transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .tab { position:absolute; top:3%; left:3%; height:94%; width:94%; opacity:0; overflow:hidden; } .infobox:hover .tab { opacity:1; overflow-y:auto; } .tab img { width:100%; } #one { top:25%; left:13%; } #one:hover { top:3%; left:2.5%; } #two { top:44%; left:49.5%; } #two:hover { top:20%; left:36%; } #three { top:61%; left:80%; } #three:hover { top:37%; left:69.5%; } h2 { text-align:center; } p { text-indent:5%; } #credit { position:fixed; height:17px; right:1%; bottom:0%; background-color:#ffffff; border-radius:5px; }
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> <div id="title"></div> <div id="line"></div> <div class="color infobox" id="one"> <div class="tab"> <h2>Stats</h2> <p style="text-align:center;text-indent:0%;"> <b>Name:</b> Stat here <br/> <b>Species:</b> Stat here <br/> <b>Gender:</b> Stat here <br/> <b>Age:</b> Stat here <br/> <b>Hair:</b> Stat here <br/> <b>Eyes:</b> Stat here <br/> <b>Height:</b> Stat here <br/> <b>Weight:</b> Stat here <br/> <b>Build:</b> Stat here <br/> <b>Orientation:</b> Stat here <br/> <audio controls controlsList="nodownload"> <source src="http://k003.kiwi6.com/hotlink/ovjfpyfpp5/-Reincarnation_Ascensation_Extended_mix_.mp3" type="audio/mpeg"> </audio> </p> </div> </div> <div class="color infobox" id="two"> <div class="tab"> <h2>About</h2> <p> Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous. </p> <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a> </div> </div> <div class="color infobox" id="three"> <div class="tab"> <h2>OOC</h2> <ul> <li>Bullet one</li> <li>Bullet two</li> <li>Bullet three</li> <li>Bullet four</li> <li>Bullet five</li> <li>Bullet six</li> <li>Bullet seven</li> <li>Bullet eight</li> </ul> </div> </div> <a href="https://tinyurl.com/midoriya" target="_blank" title="VS#12"> <img src="https://i.imgur.com/7XPiOlr.png" id="credit"/> </a>