Prototype II

[dohtml]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,800,900|Monda" rel="stylesheet">

<style>
#hanie-gallery2{
  width: 500px;
  height: 400px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  border: 10px solid #fff;
}

#hanie-gallery2 .base{
  width: 500px;
  height: 400px;
  background: url(https://i.imgur.com/3Hbmj3h.png);
  transition-delay: 1.2s;
  transition-duration: 1s;
}
#hanie-gallery2:hover .base{
  background: url(https://i.imgur.com/BCcY2sd.png);
}
#hanie-gallery2:not(:hover) .base{
 transition-duration: 0.5s;
 transition-delay: 0s;
}

#hanie-gallery2 ::-webkit-scrollbar {
   width: 5px;
}

#hanie-gallery2 ::-webkit-scrollbar-track {
 background: #333;
 border: 2px solid #fff;
}

#hanie-gallery2 ::-webkit-scrollbar-thumb {
   background: #000;
   border: 0.5px solid #000;
}

#hanie-gallery2 .polygon1{
  position: absolute;
  top: 0px;
  left: -175px;
  width: 175px;
  height: 400px;
  background: #000;
  -webkit-clip-path: polygon(0 0, 100% 0, 51% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 51% 100%, 0% 100%);
  transition-delay: 1s;
  transition-duration: 1s;
}
#hanie-gallery2:hover .polygon1{
 left: 0px;
}
#hanie-gallery2:not(:hover) .polygon1{
 transition-duration: 0.5s;
 transition-delay: 0s;
}
#hanie-gallery2 .polygon2{
  position: absolute;
  top: 0px;
  right: -174px;
  width: 174px;
  height: 400px;
  background: #000;
  -webkit-clip-path: polygon(51% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(51% 0, 100% 0, 100% 100%, 0 100%);
  transition-delay: 1s;
  transition-duration: 1s;
}
#hanie-gallery2:hover .polygon2{
  right: 0px;
}
#hanie-gallery2:not(:hover) .polygon2{
 transition-duration: 0.5s;
 transition-delay: 0s;
}

#hanie-gallery2 .subtitle{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
  position: absolute;
  bottom: 116px;
  right: -115px;
  width: 125px;
  height: 20px;
  background: transparent;
  transform: rotate(90deg);
  transition-delay: 2s;
  transition-duration: 1s;
  line-height: 12px;
}
#hanie-gallery2:hover .subtitle{
  right: 12px;
}
#hanie-gallery2:not(:hover) .subtitle{
 transition-duration: 0.5s;
 transition-delay: 0s;
}

#hanie-gallery2 bx{
  background: #F24E38;
  padding: 3px 4px 2px 8px;
  border: 1px solid #F24E38;
}
#hanie-gallery2 nx{
  border: 1px solid #F24E38;
  padding: 3px 7px 2px 8px;
  margin-left: -2px;
}

#hanie-gallery2 .tab-box{
  position: absolute;
  top: 50px;
  left: -305px;
  width: 300px;
  height: 300px;
  background: #fff;
  border: 0.5px solid #fff;
  transition-delay: 2s;
  transition-duration: 1s;
}
#hanie-gallery2:hover .tab-box{
  left: 102px;
}
#hanie-gallery2:not(:hover) .tab-box{
 transition-duration: 0.5s;
 transition-delay: 0s;
}

#hanie-gallery2 .HEREtabs {
 margin: 0px auto;
 position: relative;
 width: 300px;
 height:  300px;
}

#hanie-gallery2 .HEREtab {
 display: block;
}


#hanie-gallery2 .HEREtab label {
 display: block;
 width: 29px;
 height: 23px;
 padding-top: 5px;
 background: #F24E38;
 border: 0.5px solid #F24E38;
 margin-bottom: 10px;
 position: relative;
 left: -175px;
 top: 0px;
 color: #fff;
 z-index: 3;
}
#hanie-gallery2 .fa{
  font-size: 13px;
  line-height: 12px;
}

#hanie-gallery2 .HEREtab input[type=radio]:checked ~ label {
 background: #000;
 z-index: 2;
}

#hanie-gallery2 .HEREtab input[type=radio] {
 display: none; /* DON'T EDIT */
}

/* if you want tab transitions they go here */
#hanie-gallery2 .HEREcontent {
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 background: white;
 padding: 20px;
 overflow: hidden;
}

#hanie-gallery2 .HEREtab input[type=radio]:checked ~ label ~ .HEREcontent {
 z-index: 1;
}

#hanie-gallery2 .title{
  width: 299px;
  height: 25px;
  padding-top: 9px;
  color: #fff;
  background: #000;
  left: 0.5px;
  top: 28px;
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 110px;
  line-height: 17px;
  text-align: left;
}
#hanie-gallery2 .avatar{
  position: absolute;
  top: 12px;
  left: 25px;
  width: 50px;
  height: 50px;
  background-size: 50px;
  border: 10px solid #000;
  border-radius: 100px;
}
#hanie-gallery2 img{
  width: 50px;
  height: 50px;
  border-radius: 100px;
}

#hanie-gallery2 .textbox{
  font-family: 'Monda', sans-serif;
  font-size: 9px;
  position: absolute;
  top: 85px;
  width: 232px;
  height: 165px;
  background: #fff;
  background-size: 50px;
  border: 12px solid #fff;
  overflow: auto;
  text-align: justify;
  line-height: 13px;
  padding-right: 10px;
}

#hanie-gallery2 .ttlbase{
  position: absolute;
  width: 200px;
  height: 200px;
  background: transparent;
  top: 100px;
  left: 125px;
  border: 0.5px solid #fff;
  transition: 1s;
}
#hanie-gallery2:hover .ttlbase{
  top: -205px;
}
#hanie-gallery2:not(:hover) .ttlbase{
 transition-duration: 0.5s;
 transition-delay: 0.8s;
}

#hanie-gallery2 .ttlfg{
  position: absolute;
  bottom: 100px;
  right: 120px;
  width: 200px;
  height: 200px;
  background: transparent;
  transition: 1s;
}
#hanie-gallery2:hover .ttlfg{
  bottom: -140px;
}
#hanie-gallery2:not(:hover) .ttlfg{
 transition-duration: 0.5s;
 transition-delay: 0.8s;
}

#hanie-gallery2 .ttl{
  font-family: 'Montserrat', sans-serif;
  font-size: 23px;
  font-weight: 900;
  position: absolute;
  width: 180px;
  height: 40px;
  padding-top: 10px;
  background: #fff;
  top: 60px;
  right: 0px;
  color: #000;
  text-transform: uppercase;
  line-height: 30px;
}
#hanie-gallery2 .subttl{
  font-family: 'Muli', sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  position: absolute;
  width: 180px;
  height: 20px;
  padding-top: 7px;
  background: #000;
  top: 110px;
  right: 0px;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 10px;
}

#hanie-gallery2 .list{
  position: absolute;
  top: 85px;
  width: 232px;
  height: 175px;
  background: #fff;
  background-size: 50px;
  border: 12px solid #fff;
  overflow: auto;
  text-align: justify;
  line-height: 20px;
  padding-right: 10px;
  letter-spacing: 1px;
}
#hanie-gallery2 l{
  font-family: 'Montseratt', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fff;
  padding: 4px 10px 3px 10px;
  border: 0.5px solid #000;
  border-bottom: 1px solid #000;;
  color: #F24E38;
}
#hanie-gallery2 r{
  font-family: 'Monda', sans-serif;
  font-size: 9px;
  border-bottom: 0.5px solid #ccc;
  padding: 10px 0px 5px 0px;
  font-style: italic;
  color: #111;
}

#hanie-gallery2 a{
  text-decoration: none;
  transition: 0.5s;
}
#hanie-gallery2 a:hover{
  letter-spacing: 2px;
  font-style: italic;
}

</style>

<center>
<div id="hanie-gallery2">
<div class="base">

    <div class="ttlbase"></div>

    <div class="ttlfg">
       <div class="ttl">Prototype</div>
       <div class="subttl">hanie // 21. comp-sci</div>
    </div>

    <div class="polygon1"></div>
    <div class="polygon2"></div>

    <div class="tab-box">
        <div class="HEREtabs">

            <div class="HEREtab">
              <input type="radio" id="HEREtab-2" name="HEREtab-group-1" checked>
              <label for="HEREtab-2"><i class="fa fa-tasks"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Thread</div>
                  <div class='avatar'><img src="https://i.imgur.com/dFnGHRJ.gif"></div>

                     <div class="list">
<a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=30&hl=#entry47933"><l>Price of Freedom</l></a><br>
                       <r>dark colored fluid thread template </r><br><br>

                     <a href="https://shadowplayers.jcink.net/index.php?showtopic=7845"><l>Young God</l>
                  </a><br>
                       <r>simple thread template with hover</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=7113"><l>Dandy Mott</l></a><br>
                       <r>simple light colored thread template</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=7103"><l>Dysfunctional</l></a><br>
                       <r>dark and complex thread template</r>
                     </div>

              </div>
            </div>


            <div class="HEREtab">
              <input type="radio" id="HEREtab-3" name="HEREtab-group-1">
              <label for="HEREtab-3"><i class="fa fa-anchor"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Signature</div>
                  <div class='avatar'><img src="https://i.imgur.com/rdCKyrC.gif"></div>

                     <div class="list">
                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&#entry47215"><l>hit the road jack</l></a><br>
                       <r>light colors; a <b>request</b> done for Ellie</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&#entry47059"><l>the way i are</l></a><br>
                       <r>complex + dark; a <b>request</b> done for Ralu</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&#entry41639"><l>dusk till dawn</l></a><br>
                       <r>dark colors; for my <b>personal use</b></r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&#entry38964"><l>fastest man alive</l></a><br>
                       <r>muted colors; a <b>request</b> done for Mario</r>
                     </div>

              </div>
            </div>

            <div class="HEREtab">
              <input type="radio" id="HEREtab-4" name="HEREtab-group-1">
              <label for="HEREtab-4"><i class="fa fa-heartbeat"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Foundation</div>
                  <div class='avatar'><img src="https://i.imgur.com/wKUxjBb.gif"></div>

                     <div class="list">
                        <a href="https://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&#entry46907"><l>Elliot Hayes</l></a><br>
                        <r>dark colored <b>application</b> template</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=5532"><l>Lestat de lioncourt</l></a><br>
                       <r>minimal + boxed <b>shipper</b> template</r>
                     </div>

              </div>
            </div>


            <div class="HEREtab">
              <input type="radio" id="HEREtab-5" name="HEREtab-group-1">
              <label for="HEREtab-5"><i class="fa fa-desktop"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Skin / template</div>
                  <div class='avatar'><img src="https://i.imgur.com/8IIABSM.gif"></div>

                     <div class="list">
                       <a href=""><l>coming soon</l></a><br>
                       <r>write description here</r>
                     </div>

              </div>
            </div>

            <div class="HEREtab">
              <input type="radio" id="HEREtab-6" name="HEREtab-group-1">
              <label for="HEREtab-6"><i class="fa fa-puzzle-piece"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Mini-profiles</div>
                  <div class='avatar'><img src="https://i.imgur.com/e8t2onz.gif"></div>

                     <div class="list">
                       <a href="https://shadowplayers.jcink.net/index.php?showtopic=7015"><l>Mike Wheeler</l></a><br>
                       <r>light colors + complex mini profile</r><br><br>

                       <a href="https://shadowplayers.jcink.net/index.php?act=ST&f=94&t=2029&st=0#entry25995"><l>Draco Malfoy</l></a><br>
                       <r>simple mini profile for my <b>personal use</b></r>
                     </div>

              </div>
            </div>

            <div class="HEREtab">
              <input type="radio" id="HEREtab-1" name="HEREtab-group-1">
              <label for="HEREtab-1"><i class="fa fa-cube"></i></label>
              <div class="HEREcontent">
                  <div class='title'>Miscellaneous</div>
                  <div class='avatar'><img src="https://i.imgur.com/dFnGHRJ.gif"></div>

                     <div class="list">
                       <a href="http://shadowplayers.jcink.net/index.php?showtopic=2029&st=15&hl=#entry47306"><l>Prototype</l></a><br>
                       <r>multi-tabbed tracker for my <b>personal use</b></r>
                     </div>

              </div>
            </div>

        </div>
    </div>

    <div class="subtitle"><bx>p</bx><nx>rototype</nx></div>

</div>
</div>
</center>
[/dohtml]