atrocity exhibition

[dohtml]<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet">
<div id="eternal">
 <img1 style="background-image: url(IMAGE HERE WILL RESIZE/CROP TO FIT)"></img1>
 <h1>FIRST<br>LAST</h1>
 <descs>AGE<br>OCCUPATION<br>MEMBERGROUP</descs>
 <li1></li1><li2></li2>
 <input type="radio" name="elabels" id="eternaltab1" checked>
 <label for="eternaltab1">001</label>
   <input type="radio" name="elabels" id="eternaltab2">
 <label for="eternaltab2">002</label>
   <input type="radio" name="elabels" id="eternaltab3">
 <label for="eternaltab3">003</label>
 <ttl1>freeform</ttl1>
 <ttl2>shipper</ttl2>
 <ttl3>relationships</ttl3>

 <div id="eternal-cont">
   <div id="eternal-cont1"><h2>header</h2>

A MORE DETAILED FREEFORM HERE. HAVE FUN. YAY

</div>
       <div id="eternal-cont2">A SHIPPER OR BRIEF SUMMARY OR SOMETHING HERE
</div>
       <div id="eternal-cont3">

       <h2>friends</h2>
FRIENDS HERE

       <h2>enemies</h2>
ENEMIES STUFF HERE

       <h2>lovers</h2>
LOVERS STUFF HERE

       <h2>family</h2>
FAMILY STUFF HERE


</div>

 </div>
<a href="oliviacodes.tumblr.com"><div style="width: 550px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>

<style>
#eternal {height: 450px; width: 550px; position: relative; margin: auto; background: #222;}
#eternal img1 {height: 450px; width: 250px; position: absolute; filter: grayscale(100%); background-size: cover}
#eternal h1 {height: 60px; position: absolute; bottom: 20px; right: 25px; background: none; width: 350px; font-family: work sans; text-transform: uppercase; font-weight: 900; color: #EDC707; font-style: italic; font-size: 40px; line-height: 0.9}
#eternal descs {height: 65px; width: 140px; position: absolute; bottom: 45px; background: none; left: 25px; text-align: right; font-family: cousine; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; color: #EDC707; line-height: 2.7; font-weight: 700;}
#eternal li1 {height: 150px; width: 1px; background: #EDC707; position: absolute; bottom: 120px; left: 250px;}
#eternal-cont {height: 300px; width: 250px; top: 25px; right: 25px; position: absolute; background: none; overflow: hidden}
#eternal-cont1, #eternal-cont2, #eternal-cont3 {height: 300px; width: 250px; box-sizing: border-box; background: none; position: absolute; border-width: 20px 15px 20px 20px; border-color: #222; border-style: solid; color: #eee; font-family: cousine; font-size: 10px; transition: 0.6s; overflow: auto; padding-right: 5px; line-height: 1.4; text-align: justify}
#eternaltab1+label, #eternaltab2+label, #eternaltab3+label {display: block; position: relative; font-family: cousine; color: #eee; font-size: 11px; letter-spacing: 1px; left: 210px; top: 180px; margin-bottom: 15px; cursor: crosshair; transition: 0.3s; height: 20px; line-height: 1;}
#eternal input {display: none}
#eternaltab1:checked+label, #eternaltab2:checked+label, #eternaltab3:checked+label {color: #EDC707;}
#eternaltab1:checked+label ~ #eternal-cont > #eternal-cont1 {top: 0px}
#eternaltab1:checked+label ~ #eternal-cont > #eternal-cont2 {top: 300px}
#eternaltab1:checked+label ~ #eternal-cont > #eternal-cont3 {top: 600px}
#eternaltab2:checked+label ~ #eternal-cont > #eternal-cont1 {top: -300px}
#eternaltab2:checked+label ~ #eternal-cont > #eternal-cont2 {top: 0px}
#eternaltab2:checked+label ~ #eternal-cont > #eternal-cont3 {top: 300px}
#eternaltab3:checked+label ~ #eternal-cont > #eternal-cont1 {top: -600px}
#eternaltab3:checked+label ~ #eternal-cont > #eternal-cont2 {top: -300px}
#eternaltab3:checked+label ~ #eternal-cont > #eternal-cont3 {top: 0px}
#eternal-cont1::-webkit-scrollbar, #eternal-cont2::-webkit-scrollbar, #eternal-cont3::-webkit-scrollbar {width: 5px}
#eternal-cont1::-webkit-scrollbar-thumb, #eternal-cont2::-webkit-scrollbar-thumb, #eternal-cont3::-webkit-scrollbar-thumb {background: #EDC707; border: 2px solid #222}
#eternal-cont1::-webkit-scrollbar-track, #eternal-cont2::-webkit-scrollbar-track, #eternal-cont3::-webkit-scrollbar-track {background: #222; border:none!important}

#eternal h2 {font-family: work sans; font-weight: 900; font-style: italic; font-size: 22px; text-transform: uppercase; margin-top: 0; margin-bottom: 10px; color: #EDC707}
#eternal ttl1, #eternal ttl2, #eternal ttl3 {font-family: cousine; color: #eee; width: 100px; height: 20px; line-height: 1; text-transform: uppercase; font-size: 10px; z-index: 10; position: absolute; left: 90px; text-align: right; opacity: 0; transition: 0.3s; letter-spacing: 1px}
#eternal ttl1 {top: 180px;}
#eternal ttl2 {top: 215px;}
#eternal ttl3 {top: 250px;}
#eternaltab1:checked+label ~ ttl1 {opacity: 1}
#eternaltab2:checked+label ~ ttl2 {opacity: 1}
#eternaltab3:checked+label ~ ttl3 {opacity: 1}
#eternal li2 {height: 25px; width: 1px; left: 250px; bottom: 0; background: #EDC707; position: absolute}
</style>
[/dohtml]