[html]<link href="https://fonts.googleapis.com/css?family=Kumar+One+Outline" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<style>
#ellis {height: 500px; width: 500px; background: #000; margin: auto; position: relative; overflow: hidden}
#ellis .mainbit {height: 500px; width: 380px; position: absolute; overflow: hidden}
#ellis .mainbit img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); position: absolute}
#ellis .mainbit scr {height: 100%; width:100%; background: #0076bd; mix-blend-mode:multiply; position: absolute}
#ellis .firstlast {text-transform: uppercase; position: absolute; color: #eee; width: 100%; justify-content: flex-start; flex-direction: column; display: flex; box-sizing: border-box;  padding-right: 50px; top: 270px; line-height: 1.55; background: none; align-items: flex-end; font-family: poppins; text-transform: uppercase; text-align: right; font-size: 11px; font-weight:600; letter-spacing: 1px; transition: 0.6s ease; right: 0}
#ellis .firstlast span {font-family: kumar one outline; font-size: 35px; text-align: left; font-weight: 400; letter-spacing: 0; line-height: 1.1}
#ellis li1 {height: 50px; width: 1px; background:  #0076bd; position: absolute; left: 410px}
#ellis input {display: none}
#ellis #trtog+label {height: 25px; line-height: 25px; position: absolute; width: 200px; background: none; font-family: poppins; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; font-size: 10px; color: #eee; transform: rotate(90deg); top: 150px; left: 310px; cursor: crosshair}
#ellis #trtog+label span.closed {opacity: 1}
#ellis #trtog:checked+label span.closed {opacity: 0}
#ellis #trtog+label span.open {opacity: 0}
#ellis #trtog:checked+label span.open {opacity: 1}
#ellis #trtog+label span.closed, #ellis #trtog+label span.open {position: absolute}
#ellis #trtog:checked+label ~ .firstlast {right: -30px; opacity: 0}
#ellis .mainbit .tracker {width: 380px; height: 500px; background: #000; left: 380px; position: absolute; transition: 0.9s ease; box-sizing: border-box; color: #eee; border: 50px solid #000; overflow: auto}
#ellis .mainbit .tracker::-webkit-scrollbar {width: 0}
#ellis #trtog:checked+label ~ .mainbit .tracker {left: 0}
#ellis .mainbit .tracker .header {font-family: kumar one outline; text-transform: uppercase; color: #0076bd; font-size: 20px; line-height: 1.3; margin: 10px 0;}
#ellis .mainbit .tracker .linkbit {display: flex; flex-direction: column; justify-content: center; font-family: poppins; text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: 1px; align-items: flex-end; line-height: 1.7; margin-bottom: 5px}
#ellis .mainbit .tracker .linkbit a {color: #eee; font-family: kumar one outline; text-decoration: none; font-size: 13px; letter-spacing: 0px}
</style>

<div id="ellis">

<li1></li1>
<input type="checkbox" id="trtog" name="ellislabel">
<label for="trtog">
<span class="closed">click to view tracker</span>
<span class="open">return home</span>
</label>
<div class="mainbit">
   <img src="https://i.pinimg.com/1200x/d9/dc/3c/d9dc3cafcf74f03b78c47ec4859cf8b9.jpg">
   <scr></scr>
   <div class="tracker">
     <div class="header">active threads</div>
     <div class="linkbit"><a href="https://kindredspirits.ru/viewtopic.php?id=538">[03.01.2024] You bleed just to know you're alive.</a> Stefan Ivory</div>

     <div class="header">dead threads</div>

     <div class="header">complete threads</div>
   

   </div>
</div>
<div class="firstlast"><span>Oliver<br>Stone</span>54<br>tattoo artist<br>tainted<br></div>
</div>

<a href="http://wecode.jcink.net/index.php?showuser=4918"><div style="width: 500px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>
[/html]

[hideprofile]