Edge Of Sleep Thread Template

<div class="edge">
<div class="eheader">
<h1>título del</h1>
<div class="eimg" style="background-image:url(https://placehold.it/100);">
</div>
<span>tema aquí</span>
</div>
<div class="ebody">
<div class="etext">
Texto aquí.
</div>
<div class="esubtitle">Datos del tema</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.edge { --bckg-1: linear-gradient(#83b5c6, #3b669c); --bckg-2: #111; --bckg-3: #fafafa; --accent-1: #3b669c; --accent-2: #83b5c6; --txt-1: #333; --txt-2: #fff; }</style>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap&subset=latin-ext" rel="stylesheet"/>
<style> .edge { background: var(--bckg-1); width: 300px; margin: 0 auto; padding: 50px; } .eheader { background: var(--bckg-2); height: 50px; display: flex; align-items: center; justify-content: center; position: relative; } .eheader h1 { margin: 0 auto; position: absolute; left: 8px; width: 100px; height: 50px; font: 18px "Abril Fatface"; text-transform: uppercase; display: flex; justify-content: flex-start; align-items: center; text-align: left; color: var(--txt-2); line-height: 15px; } .eheader span { margin: 0 auto; position: absolute; right: 8px; text-align: right; width: 100px; height: 50px; font: 18px "Abril Fatface"; text-transform: uppercase; display: flex; justify-content: flex-end; align-items: center; color: var(--txt-2); line-height: 15px; } .ebody { background: var(--bckg-3); padding: 80px 50px 80px; font: 11px "Verdana"; } .ebody .etext { max-height: 240px; overflow: auto; text-align:justify; padding-right:5px; color:var(--txt-1); } .ebody .esubtitle { background: var(--bckg-2); margin: 80px -50px -80px; color: white; font: 9px calibri; text-transform: uppercase; text-align: center; padding: 10px; } .eimg { background-size: cover; width: 100px; height: 100px; -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%); clip-path: polygon(100% 0, 0 0, 50% 100%); position: absolute; bottom: -30px; } .eheader:before { content: ""; -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%); clip-path: polygon(100% 0, 0 0, 50% 100%); background: var(--bckg-2); width: 108px; height: 108px; display: block; position: absolute; bottom: -44px; } .etext em, .etext i { color: var(--accent-1); } .etext strong, .etext b { color: var(--accent-2); } .edge br {display:none;} .edge .etext br {display:block;} .ebody .etext::-webkit-scrollbar { width: 3px; } .ebody .etext::-webkit-scrollbar-thumb { background: var(--accent-1); border: 1px solid var(--bckg-3); border-width: 3px 1px; } .ebody .etext::-webkit-scrollbar-track { background: var(--accent-2); border-left: 1px solid var(--bckg-3); border-right: 1px solid var(--bckg-3); } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color: #aaa; } .edge + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>