/**************** INDICE **************************/
<div class="bt5baul"><div class="b5b-portada"><div class="b5b-iconPrinc" style="background:#fafafa;"><div class="b5b-icon" style="background:#a58064;"><span class="sf sf-wolf"></span></div></div><div class="b5b-imagen"><img src="https://placehold.jp/300x300.png"/><div class="b5b-contacto"><a href="#">Expediente</a><a href="#">MP</a><a href="#">Twitter</a><a href="">Moodboard</a><a href="">Playlist</a></div></div></div><div class="b5b-datos"><div><b style="color:#a58064">Danielle</b><span>R. Flowers</span><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ"/></div></div></div><a class="bettycred" style="margin-top:-5px;width:430px;" href="http://bettyleg.tumblr.com/">bettyleg</a>

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>@font-face {font-family: 'Birdlove'; src: url('https://dl.dropbox.com/s/zywffa3gsui6e5i/Birdlove.ttf?dl=0');src: url('https://dl.dropbox.com/s/zywffa3gsui6e5i/Birdlove.ttf?dl=0') format('truetype'); font-weight: normal;font-style: normal;} .bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden; background:#fff;} .b5b-iconPrinc{padding:10px; right:-360px; top:-130px; margin-bottom:-170px; z-index:4;} .b5b-icon,.b5b-iconPrinc{width:150px; height:150px;clip-path: circle(75.6% at 77% 24%); position:relative;} .b5b-portada .b5b-imagen{width:300px; height:300px; margin:30px auto 10px; border-radius:10px; border:15px solid #fafafa; box-shadow:0 0 1px #444; overflow:hidden;} .b5b-imagen img{width:300px; height:300px; border-radius:5px;} .bt5baul:hover .b5b-iconPrinc{right:-240px; top:-10px; } .b5b-iconPrinc, .bt5baul:hover .b5b-iconPrinc, .b5b-contacto,.bt5baul:hover .b5b-contacto,.b5b-contacto a:hover, .b5b-contacto a{-webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s;} .b5b-icon{display:flex; align-items:center; justify-content:center;} .b5b-icon > span{font-size:80px; position:relative; right:-15px; color:transparent; -webkit-text-stroke: 1.2px #fff;} .b5b-datos img{width:150px; display:block; margin:10px auto;border-radius:10px;} .b5b-datos{margin:50px auto 40px; width:300px; text-align:center; line-height:30px;} .b5b-datos b{font-family:'Birdlove',cursive; font-size:70px; letter-spacing:-.5px; color:#c5bab7; display:block; } .b5b-datos span{font-family:"Hammersmith One", sans-serif; font-size:15px; text-transform:uppercase; color:#999;} .b5b-contacto{width:300px; height:300px; margin-top:-300px; box-sizing: border-box; padding:40px 20px; opacity:0;} .b5b-contacto a{color:#fff; font-family:'Hind'; text-decoration:none; margin:5px; font-size:13px; text-transform:uppercase; font-weight:700; display:block; border-left:0px solid #ddd;} .bt5baul:hover .b5b-contacto{backdrop-filter:grayscale(1) contrast(.6); opacity:1;} .b5b-contacto a:hover{letter-spacing:3px;padding-left:5px;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>

/**************** CRONOLOGIA *********************/
<div class="bt5baul" style="width:550px;"><div class="b5b-titulo"><i class="sf sf-wolf" style="background:#a58064;"></i><b style="color:#a58064;">My adventures</b></div><div class="b5b-listadoDeTemas"><div class="b5b-temas bt-temasAbiertos"><div class="b5b-subtit">Temas abiertos</div><div class="b5b-modulT"><a href="#" style="color:#a58064;">She is a lady</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Plastic Heart</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Somebody that I used to know</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Princesses don't cry</a><span>Bernice A. Flower</span></div></div><div class="b5b-temas bt-temasCerrados"><div class="b5b-subtit">Temas cerrados</div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Angels like you</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Plastic Heart</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Call out my name</a><span>Bernice A. Flower</span></div><div class="b5b-modulT"><a href="#" style="color:#a58064;">Teach me how to love</a><span>Bernice A. Flower</span></div></div></div></div><a class="bettycred" style="margin-top:-5px;width:580px;" href="http://bettyleg.tumblr.com/">bettyleg</a>

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>@font-face {font-family: 'Birdlove'; src: url('https://dl.dropbox.com/s/bcqwv61xi3n97j3/Birdlove.ttf');src: url('https://dl.dropbox.com/s/bcqwv61xi3n97j3/Birdlove.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden;} .b5b-titulo{height:80px; border-bottom:1px solid #ddd; display:flex; align-items:center; overflow:hidden; padding:0px 30px; justify-content:space-between;} .b5b-titulo i{font-size:30px; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height: 50px; border-radius:10px; text-align:center;} .b5b-titulo b{font-family:"Hind", sans-serif; font-size:20px;} .b5b-listadoDeTemas{box-sizing:border-box; padding:30px; display:flex; background:#fdfdfd} .b5b-temas{width:200px; border:1px solid #ddd; padding:20px; max-height:450px; overflow:auto;background:#fff;} .b5b-temas:not(:last-child){margin-right:20px;} .b5b-subtit{height:30px; border-bottom:1px solid #ddd; font-size:13px; font-family:"Hind", sans-serif; font-weight:700; text-align:center; color:#999; } .b5b-modulT a{display:block; font-family:"Hammersmith One",sans-serif; text-decoration:none; font-size:18px; line-height:16px; letter-spacing:-.5px} .b5b-modulT{margin:20px 10px 0px; text-align:center; line-height:13px;} .b5b-modulT > span{text-transform:uppercase; font-size:10px; color:#999; font-weight:900; font-family:"Hind"; letter-spacing:.5px;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>

/**************** RELACIONES ********************/
<div class="bt5baul" style="width:550px;"><div class="b5b-titulo"><i class="sf sf-wolf" style="background:#a58064;"></i><b style="color:#a58064;">People that I love</b></div><div class="b5b-listaDePJ"><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor amiga</div></div><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor amiga</div></div><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor amiga</div></div><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor amiga</div></div><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor amiga</div></div><div class="b5b-modulPJ"><div class="b5b-cinta"  style="background:#a58064d8;"></div><img src="https://placehold.jp/120x120.png"/><div class="b5b-relacion">Mejor<br/> amiga</div></div></div></div><a class="bettycred" style="margin-top:-5px;width:580px;" href="http://bettyleg.tumblr.com/">bettyleg</a>

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>@font-face {font-family: 'Birdlove'; src: url('https://dl.dropbox.com/s/bcqwv61xi3n97j3/Birdlove.ttf');src: url('https://dl.dropbox.com/s/bcqwv61xi3n97j3/Birdlove.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden;} .b5b-titulo{height:80px; border-bottom:1px solid #ddd; display:flex; align-items:center; overflow:hidden; padding:0px 30px; justify-content:space-between;} .b5b-titulo i{font-size:30px; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height: 50px; border-radius:10px; text-align:center;} .b5b-titulo b{font-family:"Hind", sans-serif; font-size:20px;} .b5b-listaDePJ{display:grid; grid-template-columns:repeat(3,184px); overflow:hidden;} .b5b-modulPJ{width:184px; border-left:1px solid #ddd; height:200px; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:center; position:relative; background:#fdfdfd} .b5b-modulPJ img{ width:120px; height:120px; border:10px solid #fff; outline:1px solid #ddd; display:block;position:relative;} .b5b-cinta{width:100px; height:15px; position:absolute; background:#eee; top:20px; z-index:3;} .b5b-modulPJ:hover img,.b5b-modulPJ:hover .b5b-cinta{transform:rotate(5deg)} .b5b-modulPJ:hover .b5b-cinta{margin-left:15px} .b5b-modulPJ:hover img,.b5b-modulPJ:hover .b5b-cinta, .b5b-cinta, .b5b-modulPJ img,.b5b-relacion,.b5b-modulPJ:hover .b5b-relacion{-webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s;} .b5b-relacion{position:absolute; color:#fff; font-family:'Hind'; font-size:14px; line-height:15px; letter-spacing:2px; width:120px; text-align:center; opacity:0;} .b5b-modulPJ:hover .b5b-relacion{opacity:1; letter-spacing:0;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>