Stained Glass - Cronología

<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="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
        <div class="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
        <div class="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
        <div class="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
        <div class="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
        <div class="glcr">
          <div class="glcic"><span class="sf sf-check-o"></span></div>
          <div class="glcr1">
            <div class="glct">Donut sugar I love chocolate cake donut muffin.</div>
            <div class="glcp">Con Fulanito, en Lugar</div>
          </div>
        </div>
      </div>
    </div>
    <div class="gld">
      <span><span class="sf sf-check-o"></span>Culminados</span>
      <span><span class="sf sf-clock-3-o"></span>En curso</span>
      <span><span class="sf sf-cross"></span>Abandonados</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); z-index: 99!important;}
.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;}

.glcr{width: 410px; height: 70px; background: var(--color3); margin-top: 5px; opacity: 0.9; display: flex;}
.glcic{width: 60px; height: 60px; line-height: 80px; font-size: 30px; margin-left: 12px; color: var(--color4);}
.glcr1{width: 330px; text-align: center; margin-top: 10px; margin-left: -10px;}
.glct{font: 12px 'Montserrat'; text-transform: uppercase;}
.glcp{border-top: 2px 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);}
#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>