Strawberry Cheesecake (Thread Tracker)

<div class="strawberry">
<div class="sheader"><i class="fas fa-cookie-bite fa-fw"></i><span>Strawberry Cheesecake</span></div>
<div class="stexto"><a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
<a href="#">Tema</a><span>Usuario - Sitio - Fecha</span>
</div>
<img class="simage" src="https://i.imgur.com/a2BKRLn.png"/>
<div class="sdatos">Let's get ice-cream together!</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"/><style>.strawberry > br { display: none; } .strawberry { background: #fafafa; width: 375px; margin: 5px auto; border: 1px solid white; outline: 1px solid #edc2db; } .sheader { background: #edc2db; padding: 15px 10px; margin: -1px -1px 0 -1px; } .sheader 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; box-sizing: border-box; padding-top: 12px; font-size: 18px; } .sheader 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); } .stexto { width:190px; max-height:500px; overflow:auto; text-align:center; background: #fafafa; margin: 20px; border: 10px solid #fafafa; font: 11px calibri; line-height: 12px; display:inline-block; vertical-align:middle; } .stexto strong, .stexto b, .stexto a { color: #eaafca; } .stexto a{ text-decoration: none; font-weight:bold; text-transform:uppercase; display:block; margin-bottom:2px; border-bottom:1px solid #eee; padding-bottom:2px; margin-top:10px; transition:ease 1s; padding-top:2px; border-radius:0px } .stexto a:hover{ border-radius:3px; background:#edc2db; border-bottom:1px solid #edc2db; color:white; } .simage{ display:inline-block; vertical-align:middle; width:115px; height:auto; max-height:500px; margin: 10px 0; border:5px solid #fff; box-sizing:border-box; outline:1px solid #edc2db; } .sdatos { background: #edc2db; 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; } a.ncredit { display: block; width: 379px; text-align: center; font-size: 8px; margin: 5px auto; color: #edc2db !important; } .strawberry + br { display: none; } </style>