excuse me

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Monda" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">


<div id="excuse">
 <bgimg></bgimg><mixb></mixb><tri></tri>
 <img src="IMG HERE WILL RESIZE TO FIT">
<mixc></mixc>
 <input type="checkbox" id="compli">

<label for="compli">
 <togbut title="toggle"><i class="fas fa-arrow-down"></i></togbut>
</label>

 <h1>FIRST LAST</h1>
 <h2>age</h2>
 <h3>membergroup</h3>
 <h4>occupation</h4>

 <h5>about NAME</h6>
 <h6>NAME'S shipper</h5>


<txt1>
<ttl>header</ttl>
POST HERE
</txt1>


<txt2>

<ttl>friends</ttl>
HERE

<ttl>enemies</ttl>
HERE

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

<style>
#excuse {height: 650px; width: 400px; background: #111; margin: auto; position: relative; overflow: hidden}
#excuse bgimg {height: 300px; width: 400px; background-image: url(https://s-media-cache-ak0.pinimg.com/originals/05/78/6e/05786ee1a296d697e817a408b4f74239.jpg); background-attachment: fixed; background-repeat: no-repeat; position: absolute; -webkit-filter: grayscale(100%) brightness(40%); filter: grayscale(100%) brightness(40%); -moz-filter: grayscale(100%) brightness(40%); -ms-filter: grayscale(100%) brightness(40%); -o-filter: grayscale(100%) brightness(40%); background-position: center; z-index: 2;}
#excuse mixb {height: 300px; width: 400px; position: absolute; mix-blend-mode: multiply; background: #593D81; z-index: 2;}
#excuse tri {width: 0;
height: 0;
border-style: solid;
border-width: 0 0 60px 400px;
border-color: transparent transparent #111 transparent;
position: absolute; top: 240px; z-index: 2;}
#excuse img {height: 170px!important; width: 100px; object-fit: cover; box-sizing: border-box; border: 1px solid #000; position: absolute; right: 50px; top: 150px; -webkit-filter: grayscale(100%) brightness(20%); filter: grayscale(100%) brightness(30%); -moz-filter: grayscale(100%) brightness(30%); -ms-filter: grayscale(100%) brightness(30%); -o-filter: grayscale(100%) brightness(30%); box-sizing: border-box; z-index: 2;}
#excuse h1 {width: 300px; text-align: right; position: absolute; color: rgba(255, 197, 0, 0.6); text-transform: uppercase; font-family: monda; font-size: 10px; letter-spacing: 3px; top: 100px; right: 50px; background: none; z-index: 2;}
#excuse mixc {height: 170px; width: 100px; position: absolute; background-color: rgba(255, 197, 0, 1); mix-blend-mode: multiply; right: 50px; top: 150px; z-index: 2;}
#excuse h2, #excuse h3, #excuse h4 {height: 20px; width: 170px; position: absolute; background: none; text-align: right; font-family: monda; text-transform: uppercase; font-size: 10px; left: 60px; color: rgba(200,200,200,0.5); line-height: 20px; letter-spacing: 2px; opacity: 0; z-index: 2;; -webkit-transition: 0.5s ease}
#excuse:hover h2, #excuse:hover h3, #excuse:hover h4 {opacity: 1}
#excuse h2 {top: 136px}
#excuse h3 {top: 161px}
#excuse h4 {top: 186px}
#excuse:hover h3 {-webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s}
#excuse:hover h4 {-webkit-transition-delay: 0.6s}
#excuse txt1, #excuse txt2 {position: absolute;  background: none; height: 248px; width: 300px; bottom: 51px; left: 50px; -webkit-transition: 0.7s; -moz-transition: 0.7s; -ms-transition: 0.7s; -o-transition: 0.7s; background: rgba(100,100,100,0.05); box-sizing: border-box; box-shadow: 1px 1px rgba(255, 197, 0, 0.3), -1px -1px 0  rgba(255, 197, 0, 0.3), 1px -1px 0  rgba(255, 197, 0, 0.3), -1px 1px 0  rgba(255, 197, 0, 0.3); border: 20px solid transparent; border-right: 13px solid transparent; padding-right:7px; opacity: 1; font-family: monda; color:rgba(238,238,238,0.5); font-size: 10px; font-weight: 400; letter-spacing: 1px; line-height: 15px; text-align: justify; overflow: auto;}
#excuse txt2 {bottom: 300px; opacity: 0;  box-shadow: 1px 1px rgba(89, 61, 129, 0.6), -1px -1px 0  rgba(89, 61, 129, 0.6), 1px -1px 0  rgba(89, 61, 129, 0.6), -1px 1px 0  rgba(89, 61, 129, 0.6);}
#excuse input[type=checkbox] {
display: none;
}
#excuse togbut {height: 30px; width: 30px; background: #111; border: 1px solid #593D81; box-sizing: border-box; position: absolute; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; text-align: center; color: rgba(255, 197, 0, 0.3); font-size: 12px}
#excuse i {line-height: 30px;}
#excuse input[type=checkbox]:checked ~ label {transform: rotate(180deg)}
#excuse label {height: 30px; width: 30px; background: none; position: absolute; top: 250px; left: 235px; border-radius: 100%; z-index: 10; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s;}
#excuse input[type=checkbox]:checked ~ txt1 {bottom: -200px; opacity: 0}
#excuse input[type=checkbox]:checked ~ txt2 {bottom: 51px; opacity: 1}

#excuse blc1, #excuse blc2 {height: 50px; width: 400px; background: #111; position: absolute; bottom: 0; z-index: 100}
#excuse blc2 {background: #111; top: 250px; height: 100px; z-index: 1}
#excuse h5, #excuse h6 {font-family: monda; text-transform: uppercase; position: absolute; color: #eee; z-index: 5; letter-spacing: 2px;font-size: 10px; left: 50px; top: 290px; height: 30px; line-height: 30px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s;}
#excuse h5 {color: rgba(89, 61, 129, 0.6); opacity: 1}
#excuse h6 {top: 284px; color: rgba(255, 197, 0, 0.4); opacity: 0}
#excuse input[type=checkbox]:checked ~ h6 {opacity: 1}
#excuse input[type=checkbox]:checked ~ h5 {opacity: 0}
#excuse ttl {font-family: monda; display: block; text-align: right; text-transform: uppercase; padding: 15px 0px}
txt2 ttl {color: rgba(255, 197, 0, 0.4)}
txt1 ttl {color: rgba(89, 61, 129, 0.6)}
#excuse txt1::-webkit-scrollbar, #excuse txt2::-webkit-scrollbar {width: 7px;}
#excuse txt1::-webkit-scrollbar-thumb {background: #111!important; border: 1px solid rgba(89, 61, 129, 0.6)!important;}
#excuse txt2::-webkit-scrollbar-thumb {background: #111!important; border: 1px solid rgba(255, 197, 0, 0.4)!important;}
#excuse txt1::-webkit-scrollbar-track, #excuse txt2::-webkit-scrollbar-track {background: transparent!important; border: none!important}

</style>

[/dohtml]