Cthulhu Fhtang Thread Template

<div class="cthulhu">
<div class="cbody">
<div class="ctexto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate lobortis consectetur. Donec ullamcorper, lacus eu placerat mollis, nibh quam rhoncus lorem, sed interdum elit quam id orci. Nunc id lobortis leo. Duis luctus turpis id tellus feugiat pharetra. Suspendisse potenti. Donec id orci libero. Integer quis justo in felis dictum bibendum. Suspendisse sit amet laoreet lorem, in placerat tortor. Mauris eu dui nulla. Cras quam urna, vestibulum ac laoreet id, tincidunt nec felis. Nunc malesuada suscipit erat at volutpat. Mauris elementum cursus ipsum at posuere.

Sed sed interdum dolor, eu porttitor nisl. Ut auctor ultricies nisi non euismod. Ut quis augue ut purus egestas vulputate et sed nibh. Quisque ac faucibus nulla. Morbi vitae lorem non tortor consectetur fermentum feugiat blandit turpis. Phasellus velit massa, pellentesque sed sagittis sit amet, posuere sit amet libero. In porta dignissim justo, ut convallis massa sollicitudin a. Quisque porta sed enim rutrum consectetur.</div>
</div>
<div class="cheader">
<div class="cimagen" style="background-image:url(https://i.imgur.com/5gV2khn.png);"></div>
<div class="ctitle">cthulhu fhtagn
<span>In his house at R'lyeh dead Cthulhu waits dreaming</span></div>
<div class="csubtitle">Crystal Palace + 4th november 1926 + Septimus Goodfellow</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.cthulhu{ --bckg-1:linear-gradient(#92a374, #444f2b); --bckg-2: #fafafa; --border-1: #222; --border-2: #333; --border-3: #111; --txt: #333; --title-txt: #fff; --accent-1: #92a374; --accent-2: #d6dec5; }</style>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap&subset=latin-ext" rel="stylesheet"/>
<style>.cthulhu { width: 300px; height: 450px; background: var(--bckg-1); padding: 40px; margin: 0 auto; } .cthulhu br{ display:none; } .cthulhu .ctexto br{ display:block; } .cbody { background: var(--bckg-2); height: 306px; border-top: 20px solid var(--border-1); box-sizing: border-box; padding: 20px; } .cbody .ctexto { text-align: justify; font: 10px Verdana, sans-serif; line-height: 13px; overflow: auto; height:246px; padding-right:5px; color: var(--txt); } .cheader{ background:var(--border-1); color:white; display:flex; justify-content:flex-start; flex-wrap:wrap; padding:10px 10px 0 10px; align-items:center; box-sizing:border-box; height:144px; } .cheader .ctitle{ font:20px 'abril fatface', serif; width:170px; text-transform:capitalize; } .cheader .ctitle span, .cheader .csubtitle{ font:8px calibri; text-transform:uppercase; display:block; } .cheader .csubtitle{ width:300px; background:var(--border-2); border-top:1px solid var(--border-3); padding:5px 0; text-align:center; font-size:9px; margin: 10px -10px 0; } .cheader .cimagen{ width:100px; height:100px; border:5px solid var(--border-2); margin-right:10px; border-radius:100%; background-size:cover; box-sizing:border-box; } .cbody .ctexto::-webkit-scrollbar { width: 3px; } .cbody .ctexto::-webkit-scrollbar-thumb { background: var(--accent-1); border: 1px solid var(--bckg-2); border-width:3px 1px; } .cbody .ctexto::-webkit-scrollbar-track { background: var(--accent-2); border-left: 1px solid var(--bckg-2); border-right: 1px solid var(--bckg-2); } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color:#aaa; } .cthulhu + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>