Índice Poison Ivy

/*** ÍNDICE SIMPLE, SIN CSS AÑADIDO ***/

<link href="https://dl.dropboxusercontent.com/s/850oedq04fyzx6q/indice-poisonivy.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:400,700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><div class="poiv"><div class="poiv-1"><h1>Índice de Poison Ivy</h1> <div class="pivimg"></div></div><div class="pivimg1" style="background:url('https://i.imgur.com/C6pPlMP.png');"></div><a href="LINK AQUÍ"><div class="poivlinks"><span class="sf sf-warning"></span><b>Expediente</b></div></a><a href="LINK AQUÍ"><div class="poivlinks"><span class="sf sf-warning"></span><b>Cronología</b></div></a><a href="LINK AQUÍ"><div class="poivlinks"><span class="sf sf-warning"></span><b>Relaciones</b></div></a></div><div class="poivcred"><a href="https://valanwhistle.tumblr.com/">vac</a></div>



/*** ÍNDICE CON CSS AÑADIDO ***/


<link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:400,700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><div class="poiv"><div class="poiv-1"><h1>Índice de Poison Ivy</h1> <div class="pivimg"></div></div><div class="pivimg1" style="background:url('https://i.imgur.com/C6pPlMP.png');"></div><a href="/"><div class="poivlinks"><span class="sf sf-warning"></span><b>Expediente</b></div></a><a href="/"><div class="poivlinks"><span class="sf sf-warning"></span><b>Cronología</b></div></a><a href="/"><div class="poivlinks"><span class="sf sf-warning"></span><b>Relaciones</b></div></a></div><div class="poivcred"><a href="https://valanwhistle.tumblr.com/">vac</a></div>

<style> .poiv {width:400px; height:300px; box-sizing: border-box; margin:0 auto; background:#222723; border:6px solid #636d18; padding:5px; -webkit-box-shadow: 2px -2px 40px -11px rgba(143,158,32,1); -moz-box-shadow: 2px -2px 40px -11px rgba(143,158,32,1); box-shadow: 2px -2px 40px -11px rgba(143,158,32,1);} .poiv-1 {width:375px; height:90px; background:#394723; border:1px solid #636d18; margin:0 auto; display:flex;} .poiv-1 h1 {width:200px; color:#93a86f; font-family:'Playfair Display'; letter-spacing:2px; font-size:15px; margin-left:20px; margin-top:35px; text-align:left;} .pivimg, .pivimg1 {width:90px; height:90px; border-radius:100%;} .pivimg {background:#394723; border-left:4px solid #636d18; border-top:4px solid #394723; border-right:4px solid #636d18; border-bottom:4px solid #394723; position:relative; top:10px; left:35px; padding:5px; -webkit-animation: rotation 2s infinite linear;} .pivimg1 {background:url('https://placehold.it/90x90'); position:relative;top:-73px; left:265px;} @-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}} .poivlinks{width:300px; margin:0 auto; background:#636d18; padding:5px; margin-bottom:5px; position:relative;top:-50px;} .poivlinks span {font-size:20px; color:#000; position:relative; left:10px; top:3px;} .poivlinks b {font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color:#000; position:relative; left:180px; top:-5px; font-family:'Lato'; text-align:right; transition: all 1s;} .poiv a {color:#222; font-family:'Lato';} .poivcred {width:400px; margin:0 auto; text-align:right; text-transform:uppercase; font-size:8px;} .poivcred a:link, .poiv a:link {text-decoration:none;} .poivlinks:hover b {letter-spacing:4px; transition: all 1s;}</style>