Sweet Sour Grape RS

<div class="grape">
<div class="gheader"><i class="sf sf-grapes"></i><span>Título</span></div>
<div class="grela">
<div class="gimg glove" style="background:url(http://placehold.it/125x150);"></div>
<div class="gtxt">
<h>Nombre (amante)</h>
<p>Lorem ipsum adolor sit amet, consectetur adipiscing elit. Nulla vel enim vitae ligula luctus placerat eu quis orci. Donec non ex ac augue auctor facilisis. Vivamus sagittis, massa eu venenatis vestibulum, augue purus dictum urna, eget dignissim quam dui a ligula. Donec vel enim vel nibh semper tempor id quis urna. Ut orci nisl, vehicula vel ultrices at, malesuada a purus. Aenean at elementum lacus.</p>
</div>
</div>
<div class="grela">
<div class="gtxt">
<h>Nombre (amigo)</h>
<p>Lorem ipsum adolor sit amet, consectetur adipiscing elit. Nulla vel enim vitae ligula luctus placerat eu quis orci. Donec non ex ac augue auctor facilisis. Vivamus sagittis, massa eu venenatis vestibulum, augue purus dictum urna, eget dignissim quam dui a ligula. Donec vel enim vel nibh semper tempor id quis urna. Ut orci nisl, vehicula vel ultrices at, malesuada a purus. Aenean at elementum lacus.</p>
</div>
<div class="gimg gfriend" style="background:url(http://placehold.it/125x150);"></div>
</div>
<div class="grela">
<div class="gimg genemy" style="background:url(http://placehold.it/125x150);"></div>
<div class="gtxt">
<h>Nombre (enemigo)</h>
<p>Lorem ipsum adolor sit amet, consectetur adipiscing elit. Nulla vel enim vitae ligula luctus placerat eu quis orci. Donec non ex ac augue auctor facilisis. Vivamus sagittis, massa eu venenatis vestibulum, augue purus dictum urna, eget dignissim quam dui a ligula. Donec vel enim vel nibh semper tempor id quis urna. Ut orci nisl, vehicula vel ultrices at, malesuada a purus. Aenean at elementum lacus.</p>
</div>
</div>
<div class="grela">
<div class="gtxt">
<h>Nombre (familia)</h>
<p>Lorem ipsum adolor sit amet, consectetur adipiscing elit. Nulla vel enim vitae ligula luctus placerat eu quis orci. Donec non ex ac augue auctor facilisis. Vivamus sagittis, massa eu venenatis vestibulum, augue purus dictum urna, eget dignissim quam dui a ligula. Donec vel enim vel nibh semper tempor id quis urna. Ut orci nisl, vehicula vel ultrices at, malesuada a purus. Aenean at elementum lacus.</p>
</div>
<div class="gimg gfamily" style="background:url(http://placehold.it/125x150);"></div>
</div>
<div class="gdatos">Frase aquí.</div>
</div>
<a href="http://necromancercoding.tumblr.com" class="ncredit"><i class="fas fa-heart"></i></a>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous"/><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"/><style>.grape br { display: none; } .gtxt br{ display:block; } .grape { background: #fafafa; width: 375px; margin: 5px auto; border: 1px solid white; outline: 1px solid #b399de; } .gheader { background: #b399de; padding: 15px 10px; margin: -1px -1px 0 -1px; } .gheader i { display: inline-block; vertical-align: middle; height: 42px; width: 42px; border-radius: 100%; background: rgba(255, 255, 255, 0.3); margin: 5px; color: white; text-align:center; box-sizing: border-box; padding-top: 12px; font-size: 18px; } .gheader span { display: inline-block; vertical-align: middle; width: calc((100%) - (57px)); text-align: center; margin-left: 5px; font: 9px calibri; text-transform: uppercase; color: white; letter-spacing: 5px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.18); } .gtxt { background: #f2f2f2; padding:10px; text-align: justify; font: 11px calibri; line-height: 12px; width:196px; height:160px; box-sizing:border-box; border:1px solid #b399de; } .gimg{ width:135px; height:160px; position:relative; box-sizing:border-box; border:5px solid #f2f2f2; outline:1px solid #b399de; margin:1px; } .gtxt p{ max-height:100px; overflow:auto; padding-right:5px; } .gtxt strong, .gtxt b { color: #b399de; } .gtxt h{ background:#b399de; font: 9px calibri; text-transform: uppercase; color: white; letter-spacing: 1px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.18); height:20px; display:flex; justify-content:center; align-items:center; } .grela { display:flex; justify-content:space-between; align-items:center; width:376px; box-sizing:border-box; padding:15px; } .gimg:after{ font-family:'Font Awesome 5 Free'; font-size:10px; border-radius:100%; background:#b399de; display:block; width:30px; height:30px; display:flex; justify-content:center; align-items:center; color:white; position:absolute; top:-12px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.18); } .gimg:first-of-type:after{ right:-15px; } .gimg:last-of-type:after{ left:-15px; } .glove:after{ content:"\f004"; } .gfriend:after{ content:"\f4c4"; } .genemy:after{ content:"\f05e"; } .gfamily:after{ content:"\f0e8"; } .gdatos { background: #b399de; color: white; font: 9px calibri; text-transform: uppercase; font-weight: bold; text-align: center; padding: 5px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.18); letter-spacing: 1px; } .gtxt p::-webkit-scrollbar{ width:3px; } .gtxt p::-webkit-scrollbar-track{ background:#b399de; border:1px solid #f2f2f2; } .gtxt p::-webkit-scrollbar-thumb{ background:#b399de; border-top:2px solid #f2f2f2; border-bottom:2px solid #f2f2f2; } a.ncredit { display: block; width: 379px; text-align: center; font-size: 8px; margin: 5px auto; color: #b399de !important; } .grape + br { display: none; }</style>