[dohtml]<link href="https://fonts.googleapis.com/css?family=Kumar+One|Patua+One|Source+Sans+Pro:400,700|Roboto+Mono" rel="stylesheet">
<style>

.sierra {
 position: relative;
 margin: 10px auto 0px;
 background: #494949;
 width: 550px;
 height: 550px;
 overflow: hidden;
}

.sierra img {
 height: 550px;
 width: 200px;
 object-fit: cover;
 filter: grayscale(70%) contrast(120%);
 -webkit-fitler: grayscale(70%) contrast(120%);
 position: absolute;
 right: 0px;
 top: 0px;
}

.s-fade {
 position: absolute;
 height: 550px;
 width: 200px;
 background: #FF5D73;
 top: 0px;
 mix-blend-mode: darken;
 right: 0px;
}

.slin {
 height: 550px;
 width: 1px;
 background: #FF5D73;
 position: absolute;
 right: 210px;
 top: 0px;
}

.slin:after {
 position: absolute;
 height: 1px;
 width: 150px;
 background: #7c7a7a;
 content:"";
 transform: rotate(-30deg);
 top: 50px;
 left: -20px;
}

.stitle {
 width: 250px;
 height: 450px;
 color: #FF5D73;
 font-family: kumar one;
 font-size: 70px;
 word-break: break-word;
 line-height: 100%;
 text-transform: uppercase;
 background: black;
 position: absolute;
 left: 50px;
 top: 50px;
 text-align: left;
 transition: 0.5s linear;
 -webkit-transition: 0.5s linear;
 transition-delay: 0.7s;
 -webkit-transition-delay: 0.7s;
 opacity: 1;
 z-index: 2;
}


.stitle:before {
 height: 450px;
 width: 250px;
 position: absolute;
 content:"";
 border: 1px solid white;
 top: -10px;
 left: -10px;
}

.sierra:hover .stitle {
 opacity: 0;
 transition: 0.5s;
 -webkit-transition:0.5s;
 transition-delay: 0s;
 -webkit-transition-delay: 0s;
 z-index: 0;
}

.sierra input {
 display: none
}

.stitle2 {
 position: absolute;
 width: 100px;
 font-family: source sans pro;
 font-weight: 700;
 text-transform: uppercase;
 color: white;
 font-size: 11px;
 letter-spacing: 4px;
 top: 50px;
 right: 70px;
}

.sdots {
 position: absolute;
 height: 100px;
 width: 100px;
 bottom: 0px;
 right: 135px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
}

.sdots d {
 height: 5px;
 width: 5px;
 background: white;
 display: block;
 border-radius: 100%;
 margin: 5px;
}

.sierra label {
 position: absolute;
 font-family: source sans pro;
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 4px;
 font-size: 11px;
 color: #7c7a7a;
 background: black;
 border: 1px solid #7c7a7a;
 top: 30px;
 left: 50px;
 padding: 2px;
 padding-left: 5px;
 cursor: pointer;
 z-index: 2;
 opacity: 0;
   transition: 0.5s;
 -webkit-transition: 0.5s;
 transition-delay: 0;
 -webkit-transition-delay: 0;
 transition-property: opacity, top;
 -webkit-transition-property: opacity, top;
}

#sone+label:before {
 content: "001";
 font-family: roboto mono;
 position: absolute;
 color: white;
 font-size: 6px;
 bottom: -4px;
 left: -3px;
}

#stwo+label:before {
 content: "002";
 font-family: roboto mono;
 position: absolute;
 color: white;
 font-size: 6px;
 bottom: -4px;
 left: -3px;
}

#sthree+label:before {
 content: "003";
 font-family: roboto mono;
 position: absolute;
 color: white;
 font-size: 6px;
 bottom: -4px;
 left: -3px;
}

#sfour+label:before {
 content: "004";
 font-family: roboto mono;
 position: absolute;
 color: white;
 font-size: 6px;
 bottom: -4px;
 left: -3px;
}

#stwo+label {
 left: 110px;
}

#sthree+label {
 left: 171px;
}

#sfour+label {
 left: 249px;
}


.sierra:hover #sone+label {
 opacity: 1;
 transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 top: 50px;
}

.sierra:hover #stwo+label {
 opacity: 1;
 transition-delay: 0.7s;
 -webkit-transition-delay: 0.7s;
 top: 50px;
}

.sierra:hover #sthree+label {
 opacity: 1;
 transition-delay: 0.9s;
 -webkit-transition-delay: 0.9s;
 top: 50px;
}

.sierra:hover #sfour+label {
 opacity: 1;
 transition-delay: 1.1s;
 -webkit-transition-delay: 1.1s;
 top: 50px;
}

#sone:checked+label, #stwo:checked+label, #sthree:checked+label, #sfour:checked+label {
 color: #FF5D73;
 border: 1px solid #FF5D73;
}

.s-mainin {
 position: absolute;
 background: black;
 width: 249px;
 top: 80px;
 height: 430px;
 left: 50px;
 border: 1px solid #7c7a7a;
 transition: 0.7s;
 -webkit-transition: 0.7s;
 opacity: 0;
 transition-delay: 0s;
 -webkit-transition-delay: 0s;
}

.s-first {
 position: absolute;
 color: #FF5D73;
 font-family: kumar one;
 text-transform: uppercase;
 width: 415px;
 transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 top: 202px;
 left: -197px;
 border-bottom: 1px solid #7c7a7a;
 line-height: 100%;
 padding: 5px;
 letter-spacing: 5px;
 font-size: 16px;
 padding-left: 10px;
}

.s-second {
 position: absolute;
 font-family: source sans pro;
 text-transform: uppercase;
 font-weight: 700;
 color: #eee;
 width: 410px;
 transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 top: 200px;
 left: 15px;
 border-bottom: 1px solid #7c7a7a;
 line-height: 90%;
 padding: 10px;
 letter-spacing: 3px;
 font-size: 11px;
 height: 10px;
 overflow: hidden;
}

.s-scroll1, .s-scroll2, .s-scroll3, .s-scroll4 {
 position: absolute;
 width: 154px;
 height: 410px;
 top: 90px;
 z-index: 0;
 left: 92px;
 padding-right: 10px;
 text-align: justify;
 font-family: source sans pro;
 font-size: 12px;
 color: #ddd;
 overflow: auto;
 line-height: 150%;
 opacity: 0;
 transition: 0.7s;
 -webkit-transition: 0.7s;
 transition-delay: 0s;
 -webkit-transition-delay: 0s;
 transform: scale(0);
 -webkit-transform: scale(0);
}

.s-scroll1 h1, .s-scroll2 h1, .s-scroll3 h1, .s-scroll4 h1 {
 font-family: kumar one;
 font-size: 15px;
 text-transform: uppercase;
 color: #FF5D73;
 letter-spacing: 5px;
 word-break: break-word
}

.s-scroll1 b, .s-scroll2 b, .s-scroll3 b, .s-scroll4 b {
 color: #FF5D73;
 border-bottom: 1px solid #7c7a7a;
}


.s-scroll1::-webkit-scrollbar{width:3px}
.s-scroll1::-webkit-scrollbar-track{background:#FF5D73!important;border:1px solid #FF5D73!important}
.s-scroll1::-webkit-scrollbar-thumb{background: #FF5D73;border: 1px solid black;}
.s-scroll2::-webkit-scrollbar{width:3px}
.s-scroll2::-webkit-scrollbar-track{background:#FF5D73!important;border:1px solid #FF5D73!important}
.s-scroll2::-webkit-scrollbar-thumb{background: #FF5D73;border: 1px solid black;}
.s-scroll3::-webkit-scrollbar{width:3px}
.s-scroll3::-webkit-scrollbar-track{background:#FF5D73!important;border:1px solid #FF5D73!important}
.s-scroll3::-webkit-scrollbar-thumb{background: #FF5D73;border: 1px solid black;}
.s-scroll4::-webkit-scrollbar{width:3px}
.s-scroll4::-webkit-scrollbar-track{background:#FF5D73!important;border:1px solid #FF5D73!important}
.s-scroll4::-webkit-scrollbar-thumb{background: #FF5D73;border: 1px solid black;}

#sone:checked ~ .s-scroll1, #stwo:checked ~ .s-scroll2, #sthree:checked ~ .s-scroll3, #sfour:checked ~ .s-scroll4 {
 z-index: 2;
 transform: scale(1);
 -webkit-transform: scale(1);
}


.sierra:hover .s-scroll1, .sierra:hover .s-scroll2, .sierra:hover .s-scroll3, .sierra:hover .s-scroll4 {
 opacity: 1;
}

.sierra:hover .s-mainin {
 opacity: 1;
}

</style>
<div class="sierra">
<input type="radio" id="sone" name="sierra" checked>
<label for="sone">one</label>
<input type="radio" id="stwo" name="sierra">
<label for="stwo">two</label>
<input type="radio" id="sthree" name="sierra">
<label for="sthree">three</label>
<input type="radio" id="sfour" name="sierra">
<label for="sfour">four</label>

 <img src="VERTICAL IMAGE">

 <div class="s-fade"></div><div class="slin"></div>

 <div class="stitle">LINE OF LYRICS</div>
 <div class="stitle2">LINE OF LYRICS</div>

 <div class="sdots"><d></d> <d></d> <d></d><d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d> <d></d></div>

<div class="s-mainin">


 <div class="s-first">first last</div>
 <div class="s-second">detail - detail - detail - detail</div>


</div>

<div class="s-scroll1"><h1>introduction</h1>

INTRODUCTION HERE

</div>

<div class="s-scroll2"><h1>friends</h1>

FRIENDS HERE

</div>

<div class="s-scroll3"><h1>enemies</h1>

ENEMIES HERE

</div>

<div class="s-scroll4"><h1>lovers</h1>

LOVERS HERE

</div>
 
</div><center><a href="http://cttw.jcink.net/index.php?showuser=18033" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/dohtml]