[dohtml]<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">


<div id="pin">
<input type="radio" id="honk1" name="honkk" checked>
<label for="honk1">basics</label>
<ttl1>basics</ttl1>
<input type="radio" id="honk2" name="honkk">
<label for="honk2">about</label>
<ttl2>about</ttl2>
<input type="radio" id="honk3" name="honkk">
<label for="honk3">relations</label>
<ttl3>relationships</ttl3>

<div class="imgb">
<img src="500 X 550 IMG HERE WILL RESIZE TO FIT">
</div>
<brd1></brd1><brd2></brd2>

<div class="ngb">
firstname<span>lastname</span>
<li1></li1>
<descb>CHARACTER DESCRIPTION</descb>
<descb>CHARACTER DESCRIPTION</descb>
<descb>CHARACTER DESCRIPTION</descb>
<descb>CHARACTER DESCRIPTION</descb>

</div>

<div class="cont1">
<h1>
A HEADER
</h1>

words
</div>

<div class="cont2">
<h1>
platonic
</h1>

HERE

<h1>
romantic
</h1>

HERE

<h1>
antagonistic
</h1>

HERE
</div>

<li2></li2><li3></li3>

<!--DONT TOUCH ANYTHING IN THIS EXCEPT THE PATH FILL COLOUR CHANGE ON <w1> </w1>YOUR SVG WILL BREAK IDK-->

<w1><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 <path fill="#FF5642" fill-opacity="1" d="M0,0L16,26.7C32,53,64,107,96,112C128,117,160,75,192,74.7C224,75,256,117,288,122.7C320,128,352,96,384,69.3C416,43,448,21,480,16C512,11,544,21,576,26.7C608,32,640,32,672,42.7C704,53,736,75,768,96C800,117,832,139,864,149.3C896,160,928,160,960,160C992,160,1024,160,1056,170.7C1088,181,1120,203,1152,229.3C1184,256,1216,288,1248,277.3C1280,267,1312,213,1344,176C1376,139,1408,117,1424,106.7L1440,96L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z"></path>
</svg></w1><w2>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 <path fill="#181818" fill-opacity="1" d="M0,0L16,26.7C32,53,64,107,96,112C128,117,160,75,192,74.7C224,75,256,117,288,122.7C320,128,352,96,384,69.3C416,43,448,21,480,16C512,11,544,21,576,26.7C608,32,640,32,672,42.7C704,53,736,75,768,96C800,117,832,139,864,149.3C896,160,928,160,960,160C992,160,1024,160,1056,170.7C1088,181,1120,203,1152,229.3C1184,256,1216,288,1248,277.3C1280,267,1312,213,1344,176C1376,139,1408,117,1424,106.7L1440,96L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z"></path>
</svg></w2>
</div>
  <a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 500px; margin: 15px auto; text-align: center; font-size: 12px; font-family: courier; text-transform: lowercase; color: #555;">e v e</div></a>
<style>
#pin {width: 500px; height: 650px; position: relative; background: #181818; margin: auto; overflow: hidden}
#pin w1 {width: 100%; height: 100px; position: absolute; top: 200px; left: 0; transition: .5s ease}
#pin w2 {width: 100%; height: 100px; position: absolute; top: 202px; left: 0; transition: .5s ease}
#pin .imgb {width: 100%; height: 550px; position: absolute; top: -250px; transition: .5s ease}
#pin .imgb img {width: 100%; height: 100%; object-fit: cover; position: absolute; filter: grayscale(100%) brightness(30%) contrast(80%)}
#pin brd1 {height: 240px; border: 2px solid #FF5642; border-bottom: 0; top: 40px; width: calc(100% - 80px); left: 40px; position: absolute; transition: .5s ease}
#pin brd2 {height: 230px; border: 2px solid #FF5642; border-bottom: 0; top: 50px; width: calc(100% - 100px); left: 50px; position: absolute; transition: .5s ease}
#pin .ngb {width: calc(100% - 100px); height: 320px; background: none; position: absolute; left: 52px; top: 42px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 25px 50px; color: #FF5642; font-family: poppins; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 40px; line-height: 1; transition: .5s ease}
#pin .ngb li1 {width: 50%; height: 2px; background: #FF5642; margin: 20px 0; opacity: 0; transition: .5s ease}
#pin .ngb descb {text-transform: lowercase; font-size: 16px; font-weight: 700; line-height: 1.6; color: #FF5642; opacity: 0; transition: .5s ease}
#pin input {display: none}
#pin label {float: left; position: relative; z-index: 10; top: 590px; left: 40px; color: #FF5642; font-family: cousine; font-size: 12px; height: 20px; line-height: 1; margin-right: 20px}
#pin ttl1, #pin ttl2, #pin ttl3 {width: 150px; height: 50px; position: absolute; left: 40px; top: 540px; font-family: poppins; text-transform: lowercase; z-index: 11; font-weight: 800; font-style: italic; color: #FF5642; font-size: 30px; opacity: 0; transition: .4s ease; line-height: 1.5}
#pin .cont1, #pin .cont2 {width: 340px; height: 225px; left: 40px; bottom: 118px; background: none; position: absolute; font-family: noto sans jp; color: #eee; font-weight: 300; font-size: 12px; overflow: auto; box-sizing: border-box; padding-right: 15px; text-align: justify; transition: .5s ease; opacity: 0}
#pin .cont1 h1, #pin .cont2 h1 {font-family: poppins; text-transform: lowercase; color: #FF5642; font-weight: 800; font-style: italic; line-height: 1.2; text-align: left}
#pin .cont1 h1:nth-child(1), #pin .cont2 h1:nth-child(1) {margin-top: 0}
#pin li2 {position: absolute; bottom: 0; right: 46px; height: 330px; background: #FF5642; width: 2px; transition: .5s ease}
#pin li3 {position: absolute; bottom: 0; right: 36px; height: 345px; background: #FF5642; width: 2px; transition: .5s ease}
#pin ::-webkit-scrollbar {width: 9px}
#pin ::-webkit-scrollbar-thumb {border: 1px solid #FF5642; background: #181818}
#pin ::-webkit-scrollbar-track {border: 0!important; background: #181818}

#pin input:checked+label {color: #eee}
#pin #honk1:checked+label ~ w1 {top: 450px; transition-delay:.3s}
#pin #honk1:checked+label ~ w2 {top: 452px; transition-delay:.3s}
#pin #honk1:checked+label ~ .imgb {top: 0; transition-delay:.3s}
#pin #honk1:checked+label ~ brd1 {height: 510px; transition-delay:.3s}
#pin #honk1:checked+label ~ brd2 {height: 500px; transition-delay:.3s}
#pin #honk1:checked+label ~ .ngb {top: 52px; transition-delay:.3s}
#pin #honk1:checked+label ~ .ngb li1, #pin #honk1:checked+label ~ .ngb descb {opacity: 1; transition-delay:.3s}
#pin #honk1:checked+label ~ li2 {bottom: -345px; transition-delay:.3s}
#pin #honk1:checked+label ~ li3 {bottom: -345px; transition-delay:.3s}
#pin #honk1:checked+label ~ .cont1, #pin #honk1:checked+label ~ .cont2 {opacity: 0;}
#pin #honk2:checked+label ~ .cont1 {opacity: 1; z-index: 12; transition-delay: 0s}
#pin #honk3:checked+label ~ .cont2 {opacity: 1; z-index: 12; transition-delay: 0s}
#pin #honk1:checked+label ~ ttl1 {opacity: 1}
#pin #honk2:checked+label ~ ttl2 {opacity: 1}
#pin #honk3:checked+label ~ ttl3 {opacity: 1}
</style>[/dohtml]