Post de Rol

<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/css?family=Merriweather:400,400i&display=swap" rel="stylesheet">

<div class="postbonito"><div class="headp2" style="background:url(https://i.pinimg.com/originals/12/77/a0/1277a0aea47f68a659c170876c72afec.jpg); background-size:cover;"><div class="iim2"><img src="https://placehold.jp/120x120.png"></div><div class="tithead2">I'll be there for you</div></div><div class="contenidd"><div class="dtsc"><i class="fas fa-user-astronaut"></i> w/Betty. <i class="fas fa-hotel"></i> Heladeria. <i class="fas fa-history"></i> 20hs</div><div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed odio suscipit, hendrerit libero in, mollis massa. Integer placerat mattis hendrerit. Fusce sagittis tortor orci, sed sagittis risus iaculis et. Duis rutrum placerat sollicitudin. Praesent id gravida felis. Nulla augue sapien, luctus et tempor at, tincidunt ut dolor. Suspendisse sit amet finibus turpis, vel cursus felis. Curabitur lacus enim, mattis at eros at, mollis sodales nunc. Nulla eget bibendum nulla, nec egestas dolor. Morbi nec dolor vitae tellus rhoncus iaculis. Proin quis augue eget arcu iaculis ultrices sed vel magna. Nulla id pellentesque diam. Quisque hendrerit eu orci eu pretium. Donec molestie arcu purus, sed sagittis massa gravida non. Praesent ut purus erat. Vivamus vel ultrices lacus, sed faucibus enim.<br/><br/>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla molestie finibus sapien eu efficitur. Nunc in orci vitae tellus rutrum tempor. Ut nec libero ut odio scelerisque molestie nec in nisl. Aenean ut vulputate libero, vitae venenatis eros. Praesent ac commodo nulla. Vestibulum porttitor, justo et maximus posuere, libero ex commodo lorem, eget dapibus nisi mauris non nibh. Phasellus et tortor et eros cursus tempor. Integer eu metus bibendum, fringilla lacus eu, volutpat ligula. Vivamus tortor dolor, ultricies a dictum sit amet, porta non augue. Proin ornare sapien elit, et imperdiet libero fringilla vehicula. Maecenas eu mauris a urna feugiat ullamcorper et ac orci. Proin pulvinar enim quis sapien elementum interdum eget ut libero. In hac habitasse platea dictumst.</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
<style>.postbonito{ width:380px; padding:0px; margin:5px auto; outline:1px solid #ddd; background:#fff; } .headp2{background-color:#ddd; d isplay:flex; justify-content: center; align-items: center; border-bottom:1px solid #eee; padding:25px 0px; outline:0px solid #fff; outline-offset:-3px;} .iim2{width:120px; height:120px; padding:4px; border:4px solid #fff; border-radius:180px; margin:0 auto;} .iim2 img{width:120px; height:120px; border-radius:180px;} .tithead2 {margin: 20px auto 0px;line-height:18px; color:#F99B7E; font-family: 'Merriweather', serif; font-style:italic; background:#fff; border-radius:7px; font-size:20px; font-weight:700;justify-content:center; width:250px; border:1px solid #eee; align-items: center; line-height:25px; text-align:center; height:auto; padding:20px 10px 8px} .tithead2:after{content: "";position: relative;border-width: 0px 10px 10px;border-style: solid; border-color: #fff transparent;display: block; width: 0; left: 115px;top: -55px;} .txt{padding:40px; font-size:12px; line-height:20px; font-family: 'Merriweather', serif; text-align:justify; color:#555} .dtsc{font-size:10px; padding:10px; border-bottom:1px solid #eee; text-align:center; font-family: 'Merriweather', serif; font-style:italic;} .dtsc i{color:#F99B7E; font-size:14px; padding:0px 10px; border-left:1px solid #ccc; margin-left:8px;}.cred{margin:0px auto; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;} </style>