[dohtml]<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">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">


<style>
#crackship2 {height: 470px; width: 550px; margin: auto; position: relative; background: rgba(0,0,0,0.3); border: 1px solid var(--accent)}
#crackship2 .pt1 {width: 200px; height: 470px; position: absolute;}
#crackship2 .pt1 img {height: 100%; width: 100%; position: absolute; object-fit: cover}
#crackship2 .pt1 .nmm {font-family: poppins; text-transform: uppercase; height: 200px; width: 470px; position: absolute; transform: rotate(90deg); transform-origin: top left;  -webkit-transform: rotate(90deg); -webkit-transform-origin: top left;  -moz-transform: rotate(90deg); -moz-transform-origin: top left;display: flex; flex-direction: column; left: 100%; justify-content: center; text-align: right; padding-right:60px; text-shadow: 1px 1px 0 var(--accent), -1px -1px 0 var(--accent), 1px -1px 0 var(--accent), -1px 1px 0 var(--accent); font-weight:800; font-style: italic; box-sizing: border-box; padding-left: 50px; font-size: 40px; line-height: 1; mix-blend-mode: screen; color:#000; }
#crackship2 .pt1 .nmm span {color: var(--accent); text-shadow: none;}
#crackship2 .pt1 .nmm eveb {font-size: 13px; color: var(--accent); text-shadow: none; margin-top: 10px; letter-spacing: 2px; }
#crackship2 bxx {height: 50px;background:transparent; width: 300px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); left: 200px; position: absolute;}
#crackship2 input {display: none;}
#crackship2 label {letter-spacing: 2px; font-family: 'Cormorant Garamond', serif; font-weight:700; text-transform: uppercase; color: #eee; font-size: 14px; display: flex; align-items: center; justify-content: center; position: relative; width: calc(240px / 4);; height: 50px; float: left; left: 230px;}
#crackship2 input:checked+label {color: var(--accent) }
#crackship2 .contb {height: 320px; width: 250px; background: none; position: absolute; bottom: 50px; right: 50px; overflow: hidden}
#crackship2 .contb .contm {height: 100%; width: 100%; position: absolute; top: 0; font-family: arimo; font-size: 10px;color:#eee; overflow: auto; text-align: justify; line-height: 2; box-sizing: border-box; padding-right: 10px; transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease;}
#crackship2 .contb .contm h1 {text-transform: uppercase; font-family: 'Cormorant Garamond', serif; font-weight:700; letter-spacing: 3px; color: var(--accent); margin-left: 3px; font-size: 10px}
#crackship2 #eve1:checked+label ~ .contb .contm:nth-child(1) {left: 0}
#crackship2 #eve1:checked+label ~ .contb .contm:nth-child(2) {left: 110%}
#crackship2 #eve1:checked+label ~ .contb .contm:nth-child(3) {left: 220%}
#crackship2 #eve1:checked+label ~ .contb .contm:nth-child(4) {left: 330%}
#crackship2 #eve2:checked+label ~ .contb .contm:nth-child(1) {left: -110%}
#crackship2 #eve2:checked+label ~ .contb .contm:nth-child(2) {left: 0}
#crackship2 #eve2:checked+label ~ .contb .contm:nth-child(3) {left: 110%}
#crackship2 #eve2:checked+label ~ .contb .contm:nth-child(4) {left: 220%}
#crackship2 #eve3:checked+label ~ .contb .contm:nth-child(1) {left: -220%}
#crackship2 #eve3:checked+label ~ .contb .contm:nth-child(2) {left: -110%}
#crackship2 #eve3:checked+label ~ .contb .contm:nth-child(3) {left: 0}
#crackship2 #eve3:checked+label ~ .contb .contm:nth-child(4) {left: 110%}
#crackship2 #eve4:checked+label ~ .contb .contm:nth-child(1) {left: -330%}
#crackship2 #eve4:checked+label ~ .contb .contm:nth-child(2) {left: -220%}
#crackship2 #eve4:checked+label ~ .contb .contm:nth-child(3) {left: -110%}
#crackship2 #eve4:checked+label ~ .contb .contm:nth-child(4) {left: 0}
#crackship2 .contb .contm h2 {'Cormorant Garamond', serif; color: var(--accent); text-transform: uppercase; font-size: 15px; letter-spacing: 2px; font-weight:700; }
#crackship2 .contb .contm b {color: var(--accent); text-transform: uppercase; font-family: poppins; font-weight: 700; font-style: italic; }
#crackship2 ::-webkit-scrollbar {width: 10px}
#crackship2 ::-webkit-scrollbar-track {border: 1px solid var(--accent); background: transparent}
#crackship2 ::-webkit-scrollbar-thumb {border: 1px solid  var(--accent);background: var(--accent) }

</style>

<div id="crackship2">
 <div class="pt1">
   <img src="https://k.nickpic.host/bEe3q1.png">
   <scr></scr>
   <div class="nmm"><span></span>
     <eveb></eveb>
   </div>
 </div>
 <bxx></bxx>
 <input type="radio" id="eve1" name="evet"checked>
 <label for="eve1">001</label>
 <input type="radio" id="eve2" name="evet">
 <label for="eve2">002</label>
 <input type="radio" id="eve3" name="evet">
 <label for="eve3">003</label>
   <input type="radio" id="eve4" name="evet">
 <label for="eve4">004</label>
 <div class="contb">
   <div class="contm">
   <h1>about</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eros erat, egestas vel libero et, lobortis blandit enim. Proin eget posuere ipsum. Etiam non ipsum sed arcu molestie porttitor euismod non magna. Curabitur consequat euismod odio quis fringilla. Cras vel pharetra urna. Pellentesque fermentum, ligula sed dictum tristique, ex nunc aliquet tellus, id cursus sem orci vel dolor. Donec sed massa quis odio dignissim ultricies quis non nunc. Integer lobortis aliquet augue, a ornare neque sollicitudin nec.


   </div>
     <div class="contm">
   <h1>overview</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eros erat, egestas vel libero et, lobortis blandit enim. Proin eget posuere ipsum. Etiam non ipsum sed arcu molestie porttitor euismod non magna. Curabitur consequat euismod odio quis fringilla. Cras vel pharetra urna. Pellentesque fermentum, ligula sed dictum tristique, ex nunc aliquet tellus, id cursus sem orci vel dolor. Donec sed massa quis odio dignissim ultricies quis non nunc. Integer lobortis aliquet augue, a ornare neque sollicitudin nec.

   </div>
         <div class="contm">
<h1>note</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eros erat, egestas vel libero et, lobortis blandit enim. Proin eget posuere ipsum. Etiam non ipsum sed arcu molestie porttitor euismod non magna. Curabitur consequat euismod odio quis fringilla. Cras vel pharetra urna. Pellentesque fermentum, ligula sed dictum tristique, ex nunc aliquet tellus, id cursus sem orci vel dolor. Donec sed massa quis odio dignissim ultricies quis non nunc. Integer lobortis aliquet augue, a ornare neque sollicitudin nec. Cras auctor dolor nunc, ac feugiat purus tempus id. Maecenas convallis placerat nisi at dictum. Mauris blandit metus eget felis facilisis, nec sollicitudin orci semper. Quisque accumsan eu tellus ac vestibulum. Duis suscipit, ligula eu ullamcorper dignissim, risus dui viverra mi, sit amet condimentum justo nisl quis elit. Nullam a felis fringilla, varius risus nec, suscipit urna. Praesent sit amet augue sed sem elementum commodo. Integer viverra tortor ligula, sit amet tempor metus consectetur quis.
   </div>

             <div class="contm">
<h1>links</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eros erat, egestas vel libero et, lobortis blandit enim. Proin eget posuere ipsum. Etiam non ipsum sed arcu molestie porttitor euismod non magna. Curabitur consequat euismod odio quis fringilla. Cras vel pharetra urna. Pellentesque fermentum, ligula sed dictum tristique, ex nunc aliquet tellus, id cursus sem orci vel dolor. Donec sed massa quis odio dignissim ultricies quis non nunc. Integer lobortis aliquet augue, a ornare neque sollicitudin nec. Cras auctor dolor nunc, ac feugiat purus tempus id. Maecenas convallis placerat nisi at dictum. Mauris blandit metus eget felis facilisis, nec sollicitudin orci semper. Quisque accumsan eu tellus ac vestibulum. Duis suscipit, ligula eu ullamcorper dignissim, risus dui viverra mi, sit amet condimentum justo nisl quis elit. Nullam a felis fringilla, varius risus nec, suscipit urna. Praesent sit amet augue sed sem elementum commodo. Integer viverra tortor ligula, sit amet tempor metus consectetur quis.

   </div>

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