paradise - portada

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">

<div class="para6"><div class="para7"><div class="para8"><img src="https://via.placeholder.com/100"></div><div class="para9">And dream of paradise<br><span>when she was just a girl she expected the world</span></div></div><div class="para10"><a href="#" data-title="expediente"><div class="para11"><i class="fas fa-user"></i></div></a> <a href="#" data-title="mp"><div class="para11"><i class="fas fa-envelope"></i></div></a> <a href="#" data-title="cronología"><div class="para11"><i class="fas fa-calendar-alt"></i></div></a> <a href="#" data-title="relaciones"><div class="para11"><i class="fas fa-star"></i></div></a>
</div></div>
<div class="stcred"><a href="https://stardustcodes.tumblr.com/ "target="_blank">stardust</a></div>

<style>.para6 {margin: 0 auto; width: 420px; background: #fff; border-top: 70px solid #8498af; border-bottom: 50px solid #8498af; outline: 10px solid #f9f9f9}.para7 {width: 420px; display: flex; margin-top: -30px}.para8 {width: 120px; height: 100px; padding: 0 10px}.para8 img {width: 100px; height: 100px; border-radius: 50%; border: 10px solid #fff}.para9 {width: 280px; height: 80px; font-family: abril fatface; font-size: 22px; color: #8498af; text-align: center; line-height: 100%; padding: 40px 10px 0 0}.para9 span {font-family: calibri; font-size: 11px; color: #888;}.para10 {display: flex; flex-wrap: wrap; justify-content:center; padding: 20px 40px}.para11 {width: 60px; border-radius: 50%; background: #8498af; font-size: 20px; color: #fff; text-align: center; margin: 10px; padding: 20px 0; transition: 0.5s}.para11 a{text-decoration: none}.para11:hover {background: #f9f9f9; color: #8498af}a[data-title]:hover:after {content: attr(data-title); position: absolute; margin: -20px 0 0 25px; padding: 0 10px; background: #8498af; font-size: 10px; color: #fff; border-radius: 2px; font-family: abril fatface; text-align: center; text-decoration: none}.stcred {margin: 0 auto; width: 380px; text-align: center} .stcred a {text-decoration: none; font-family: calibri; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 3px}</style>