Psithurism - Post de Rol

<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&display=swap" rel="stylesheet">
<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
<div class="marb">
  <div class="marb2">
    <div class="marbit">
      <div class="marbi"><span class="sf sf-leaf-2-o"></span></div>
      <div class="marbtit">TITULO</div>
      <div class="marbsub">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="marbtm">
      <div class="marbtext">
        <div class="marbtext1">TEXTO AQUI</div>
      </div>
      <div class="marbimg"></div>
    </div>
    <div class="marbimg1"></div>
    <div class="marbin1">
      <div class="mar2">Dato aqui</div>
      <div class="mar2">Dato aqui</div>
      <div class="mar2">Dato aqui</div>
      <div class="mar2">Dato aqui</div>
    </div>
  </div>
</div>
<div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>

<style>
.marb{--color1: #F0F7DA; --color2: #C9DF8A; --color3: #77AB59; --color4: #000; --imgfond:url('URL DE IMAGEN AQUI')}
.marb{width: 420px; height: 540px; background: var(--color2); padding: 15px; margin: 0 auto;}
.marb2{width: 400px; height: 520px; padding: 10px; border: 1px solid var(--color3); margin: 0 auto;}
.marbit{display: flex;}
.marbi{width: 120px; height: 120px; background: var(--color3); color: var(--color2); font-size: 80px; line-height: 140px; text-align: center;}
.marbtit{width: 290px; padding: 5px; font: 45px 'Oswald'; color: var(--color3); text-transform: uppercase;}
.marbsub{position: absolute; width: 280px; margin-top: 70px; margin-left: 125px; font: 12px 'Montserrat'; text-transform: lowercase; text-align: justify; color: var(--color4);}
.marbtm{display: flex; margin: 0 auto; margin-top: 20px;}

.marbtext{width: 180px; height: 320px;padding: 5px; border: 1px solid var(--color3)}
.marbtext1{width: 160px; height: 290px; padding: 10px; margin: 0 auto; overflow: auto; font: 11px 'Montserrat'; text-align: justify; color: var(--color4);}

.marbimg{width: 180px; height: 300px; background: var(--color3); margin-left: 3px;}
.marbimg1{width: 190px; height: 300px; position: absolute; margin-top: -300px; margin-left: 210px; background:var(--imgfond); background-size: cover; }

.marbin1{display: flex; margin: 0 auto; justify-content: center; margin-top: 10px;}
.mar2{width: 80px; height: 20px; background: var(--color3); margin-left: 2px; padding:5px; text-align: center; font: 12px 'Oswald'; text-transform: uppercase; color: var(--color1);}
#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: var(--color3); margin: 0 auto; margin-top: 1px;} #myscr a{color: var(--color3);text-decoration: none;}
.marbtext1::-webkit-scrollbar{width:3px;} .marbtext1::-moz-scrollbar{width:2px;}
.marbtext1::-webkit-scrollbar-thumb:vertical{ background-color: var(--color3);} .marbtext1::-moz-scrollbar-thumb:vertical{background-color: var(--color3);}


</style>