Fire and Water - Post

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Roboto&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><div class="myselm"> <div class="myselmtocon"> <div class="myselmtr"></div><span id="melem1" class="th th-fire"></span> <div class="myselmtit">TITULO</div></div><div class="myselmtit2">SUBTITULO</div><div class="myselmbotc" style="background: var(--color3);"> <div class="myselemdat">Hola 1</div><div class="myselemdat">Hola 2</div><div class="myselemdat">Hola 3</div><div class="myselemdat">Hola 4</div></div><div class="myselmbotc1" style="background: var(--color3);">TEXTO AQUI</div></div><div class="myselm"> <div class="myselmtocon"> <div class="myselmtr1"></div><span id="melem2" class="th th-drop"></span> <div class="myselmtit1">TITULO</div></div><div class="myselmtit4">SUBTITULO</div><div class="myselmbotc" style="background: var(--color4);"> <div class="myselemdat">Hola 1</div><div class="myselemdat">Hola 2</div><div class="myselemdat">Hola 3</div><div class="myselemdat">Hola 4</div></div><div class="myselmbotc1" style="background: var(--color4);">TEXTO AQUI</div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>
<style>.myselm{--color1: #000; --color2: #FFF; --color3:#6F0000; --color4: #071E4A;}.myselm{width: 500px; padding: 10px; background:var(--color1); margin: 0 auto;}.myselmtocon{width: 500px; height: 250px; position: absolute;}#melem1{color: var(--color1); position: absolute; font-size: 100px; margin-top: 20px; margin-left: 10px;}#melem2{color: var(--color1); position: absolute; font-size: 100px; margin-top: 20px; margin-left: 390px;}.myselmtr{width: 0px; height: 0px; border-left: 150px solid var(--color3); border-top: 150px solid transparent; border-bottom: 150px solid transparent; position: absolute; margin-left: -22px; margin-top: -96px; transform: rotate(225deg);}.myselmtr1{width: 0px; height: 0px; border-right: 150px solid var(--color4); border-top: 150px solid transparent; border-bottom: 150px solid transparent; position: absolute; margin-left: 372px; margin-top: -96px; transform: rotate(135deg);}.myselmtit{width: 400px; margin-left: 90px; margin-top: 30px; font-family:'Abril Fatface'; font-size: 30px; color: var(--color2); text-align: right; position: absolute;}.myselmtit1{width: 400px; margin-left: 5px; margin-top: 30px; font-family:'Abril Fatface'; font-size: 30px; color: var(--color2); text-align: left; position: absolute;}.myselmtit2{font-family:'Roboto'; font-size: 15px; color: var(--color2); background: var(--color1); width: 420px; height: 15px; padding: 5px; margin: 0 auto; text-align: right; margin-top: 120px; margin-right: 0px; border-top: 2px solid var(--color3); z-index: 99;}.myselmtit4{font-family:'Roboto'; font-size: 15px; color: var(--color2); background: var(--color1); width: 420px; height: 15px; padding: 5px; margin: 0 auto; text-align: left; margin-top: 120px; margin-left: 0px; border-top: 2px solid var(--color4); z-index: 99;}.myselmbotc{width: 500px; height: 45px; margin-top: 30px; display: flex;}.myselemdat{width: 100px; height: 15px; padding: 5px; margin: 0 auto; font-family:'Roboto'; font-size: 12px; color: var(--color2); background: var(--color1); text-align: center; margin-top: 10px; text-transform: uppercase; z-index: 99;}.myselmbotc1{width: 460px; color: var(--color2); padding: 20px; padding-bottom: 20px; margin-top: 10px; text-align: justify;}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}</style>