paradise - cronología con iconos

<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="para24"><div class="para25"><div class="para26"><img src="https://via.placeholder.com/100"></div><div class="para27">And dream of paradise<br><span>when she was just a girl she expected the world</span></div></div>
<div class="para28"><div class="para29"><i class="fas fa-sun"></i></div><div class="para29"><i class="fas fa-moon"></i></div><div class="para29"><i class="fas fa-cloud-rain"></i></div><div class="para30">abiertos</div><div class="para30">cerrados</div><div class="para30">abandonados</div></div>
<div class="para31">mes</div>
<div class="para32"><i class="fas fa-sun"></i><a href="#">Título del tema</a>
00 de mes, con nombre de personaje</div>
<div class="para32"><i class="fas fa-moon"></i><a href="#">Título del tema</a>
00 de mes, con nombre de personaje</div>
<div class="para31">mes</div>
<div class="para32"><i class="fas fa-sun"></i><a href="#">Título del tema</a>
00 de mes, con nombre de personaje</div>
<div class="para32"><i class="fas fa-cloud-rain"></i><a href="#">Título del tema</a>
00 de mes, con nombre de personaje</div>
</div>
<div class="stcred"><a href="https://stardustcodes.tumblr.com/ "target="_blank">stardust</a></div>

<style>.para24 {margin: 0 auto; width: 420px; background: #fff; border-top: 70px solid #8498af; border-bottom: 50px solid #8498af; outline: 10px solid #f9f9f9}.para25 {width: 420px; display: flex; margin-top: -30px}.para26 {width: 120px; height: 100px; padding: 0 10px}.para26 img {width: 100px; height: 100px; border-radius: 50%; border: 10px solid #fff}.para27 {width: 280px; height: 80px; font-family: abril fatface; font-size: 22px; color: #8498af; text-align: center; line-height: 100%; padding: 40px 10px 0 0}.para27 span {font-family: calibri; font-size: 11px; color: #888;}.para28 {width: 360px; text-align: center; border: 1px solid #eee; display: flex; flex-wrap: wrap; line-height: 100%; padding: 10px 0; margin: 0 auto; justify-content: center} .para29 {width: 100px; color: #8498af; font-size: 12px; text-align: center} .para30 {width: 100px; font-family: calibri; font-size: 9px; color: #888; text-align: center;} .para31 {background: #8498af; font-family: abril fatface; font-size: 30px; color: #fff; text-align: right; padding: 10px} .para32 {font family: calibri; font-size: 10px; color: #888; line-height: 180%} .para32 i{font-size: 35px; color: #8498af; padding: 0 10px 0 20px; float: left} .para32 a {text-decoration: none; font-family: abril fatface; font-size: 12px; color: #8498af}.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>