Stained Glass - Relaciones

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&family=Montserrat&display=swap" rel="stylesheet">
<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
<div class="glcon">
  <div class="glcon1"></div>
  <div class="glcon2">
    <div class="glt">Stained Glass</div>
    <div class="gltx">
      <div class="gltx1">
        <div class="glre">
          <div class="glric"><span class="sf sf-hearts-o"></span></div>
          <div class="glrr1">
            <div class="glrt">Alguien C. Relación</div>
            <div class="glrp">Relación</div>
          </div>
          <div class="glrim" style="background:url('http://placehold.it/60')"></div>
        </div>
        <div class="glre">
          <div class="glric"><span class="sf sf-skull-1-o"></span></div>
          <div class="glrr1">
            <div class="glrt">Alguien C. Relación</div>
            <div class="glrp">Relación</div>
          </div>
          <div class="glrim" style="background:url('http://placehold.it/60')"></div>
        </div>
        <div class="glre">
          <div class="glric"><span class="sf sf-group-1-o"></span></div>
          <div class="glrr1">
            <div class="glrt">Alguien C. Relación</div>
            <div class="glrp">Relación</div>
          </div>
          <div class="glrim" style="background:url('http://placehold.it/60')"></div>
        </div>
        <div class="glre">
          <div class="glric"><span class="sf sf-hearts-o"></span></div>
          <div class="glrr1">
            <div class="glrt">Alguien C. Relación</div>
            <div class="glrp">Relación</div>
          </div>
          <div class="glrim" style="background:url('http://placehold.it/60')"></div>
        </div>
        <div class="glre">
          <div class="glric"><span class="sf sf-hearts-o"></span></div>
          <div class="glrr1">
            <div class="glrt">Alguien C. Relación</div>
            <div class="glrp">Relación</div>
          </div>
          <div class="glrim" style="background:url('http://placehold.it/60')"></div>
        </div>


      </div>
    </div>
    <div class="gld">
      <span><span class="sf sf-home-o"></span>Familia</span>
      <span><span class="sf sf-hearts-o"></span>Amor</span>
      <span><span class="sf sf-group-1-o"></span>Amigos</span>
      <span><span class="sf sf-skull-1-o"></span>Odio</span>
    </div>
  </div>
</div>
<div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>
<style>.glcon{--color1: #020D23; --color2: #FFF;--color3: #17365A; --color4: #FFD380; --pattern:url('http://www.colourlovers.com/wallPaper/1200x800/n/2962632/COLOURlovers.com')}
.glcon{width: 600px; height: 400px; margin: 0 auto; display: flex;}
.glcon1{background: var(--pattern); width: 150px; height: 400px;}
.glcon2{width: 500px; height: 360px; padding: 20px; background: var(--color1); margin-left: 1px; }
.glt{font: 50px 'Allura'; color: var(--color2);}
.gltx{ width: 450px; height: 300px; margin-top: -15px;}
.gltx1{font: 12px 'Montserrat'; color: var(--color2); width: 410px; height: 220px; padding: 20px; overflow: auto; text-align: justify;}

.glre{width: 410px; height: 70px; background: var(--color3); margin-top: 5px; opacity: 0.9; display: flex;}
.glric{width: 60px; height: 60px; line-height: 80px; font-size: 30px; margin-left: 12px; color: var(--color4);}
.glrr1{width: 270px; text-align: center; margin-top: 16px; margin-left: -10px;}
.glrt{font: 12px 'Montserrat'; text-transform: uppercase;}
.glrp{border-top: 2px solid var(--color4);}
.glrim{width: 60px; height: 60px; margin-top: 4px; margin-left: 12px; border: 1px solid var(--color4);}

.gld{width: 450px; margin: 0 auto; text-align: center; margin-top: -10px; }
.gld span{width: 150px; padding: 10px; background: var(--color3); color: var(--color2); font: 12px 'Montserrat';}
.gld span .sf{color: var(--color4); font-size:12px;}
#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; margin: 0 auto; margin-top: 1px;} #myscr a{color: #020D23;text-decoration: none;}

.gltx1::-webkit-scrollbar{width:4px;} .gltx1::-moz-scrollbar{width:4px;}
.gltx1::-webkit-scrollbar-thumb:vertical{ background-color: var(--color2);}
.gltx1::-moz-scrollbar-thumb:vertical{background-color: var(--color2);}</style>