jungle love

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">

<div id="never">
 <input type="checkbox" id="nevertog">
 <label for="nevertog">FIRST LAST</label>

 <bg1 style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></bg1>
 <sc1></sc1>
 <gif1 style="background-image: url(GIF HERE WILL RESIZE TO FIT)"></gif1>
 <div id="never-info">
   <span>ONE LINE DESCRIPTION</span>
   <p><span>ONE LINE DESCRIPTION</span>
   <p><span>ONE LINE DESCRIPTION</span>
   <p><span>ONE LINE DESCRIPTION</span>
 </div>
 <div id="never-main">
   <h1>about</h1>
   <p>TEXT HERE
   <h1>friends</h1>
   <p>TEXT HERE
       <h1>enemies</h1>
   <p>TEXT HERE
   <h1>lovers</h1>
   <p>TEXT HERE

</p>
 </div>
 <gif2 style="background-image: url(GIF HERE WILL RESIZE TO FIT)"></gif2>
<linkb><span>request</span><span>development</span><span>insta</span><span>tracker</span></linkb>
</div>
<a href="oliviacodes.tumblr.com"><div style="width: 450px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>


<style>
#never {height: 420px; width: 450px; margin: auto; position: relative; background: #C9EAE6; overflow: hidden; outline: 1px solid #F1D9D1}
#never bg1 {height: 300px; width: 450px; background-size: cover; position: absolute; background-position: center; filter: grayscale(100%);}
#never sc1 {height: 300px; width: 450px; background-color: #A5CFC3; mix-blend-mode: screen; position: absolute}
#never bg1, #never sc1 {transition: 0.7s ease  0.6s; top: 0}
#nevertog+label {height: 30px; padding: 0 10px; line-height: 30px; background: #F1D9D1; position: absolute; cursor: crosshair; color: #fff; font-family: roboto mono; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; font-weight: 700; top: 250px; left: 25px; transition: background 0.4s ease, top 0.7s ease 0.6s; z-index: 10}
#never input {display: none}
#nevertog:hover+label {background: #A5CFC3}
#never gif1 {height: 70px; width: 70px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background-size: cover; position: absolute; display: block; border: 10px solid #C9EAE6; box-shadow: 1px 1px 0 #F1D9D1, -1px -1px 0 #F1D9D1, 1px -1px 0 #F1D9D1, -1px 1px 0 #F1D9D1; bottom: 15px; left: 20px}
#never-info {position: absolute; left: 125px; height: 120px; bottom: 0; border: 15px solid transparent; box-sizing: border-box; line-height: 13px}
#never-info span {background: #F1D9D1; margin-top: 0; padding: 2px 7px; font-family: roboto mono; text-transform: uppercase; color: #fff; font-weight: 700; font-style: italic; font-size: 10px; letter-spacing: 2px; height: 15px; line-height: 15px; }
#never-info p {margin-top: 10px; margin-bottom: 0}
#nevertog:checked+label {top: 20px}
#nevertog:checked+label ~ bg1, #nevertog:checked+label ~ sc1 {top: -230px; transition-delay: 0s}
#nevertog:checked+label ~ gif1, #nevertog:checked+label ~ #never-info {bottom: -120px}
#never gif1, #never-info {transition: 0.7s ease  0.6s; z-index: 2}
#never-main {height: 230px; width: 400px; background: #fcfcfc; position: absolute; top: 100px; left: 25px; box-sizing: border-box; border: 15px solid transparent; outline: 1px solid #F1D9D1; font-family: inconsolata; color: #555; font-size: 10px; text-align: justify; line-height: 14px; overflow: auto; border-right: 10px solid transparent; padding-right: 5px; opacity: 0; transition: 1s ease}
#never-main h1 {display: inline-block; background: #B6DBD2; color: #fff; font-family: roboto mono; text-transform: uppercase; padding: 4px 12px; font-size: 10px; margin-top: 0; letter-spacing: 2px; font-weight: 700; font-style: italic; margin-bottom: 0px}
#never-main b {background: #F1D9D1; font-weight: 700}
#never gif2 {height: 50px; width: 50px; position: absolute; bottom: 25px; right: 25px; box-sizing: border-box; border: 1px solid #F1D9D1;  -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background-size: cover; opacity: 0}
#never linkb {height: 25px; width: 325px; position: absolute; background: none; bottom: 37.5px; right: 90px; text-align: right; line-height: 25px; opacity: 0}
#never linkb > span, #never linkb > a > span { padding: 4px 10px; background: #F1D9D1; color: #fff; font-family: roboto mono; text-transform: uppercase; font-size: 9px; font-weight: 700; cursor: crosshair; margin-left: 7px; letter-spacing: 1px; font-style: italic}
#never-main::-webkit-scrollbar {width: 5px; }
#never-main::-webkit-scrollbar-thumb {background: #A5CFC3; border: none}
#never-main::-webkit-scrollbar-track {background-color: #F1D9D1!important; border: none!important}
#never linkb > span:hover, #never linkb > a > span:hover {background: #A5CFC3}
#nevertog:checked+label ~ #never-main {opacity: 1; transition-delay: 0.7s}
#never gif2, #never linkb {transition: 1s ease}
#nevertog:checked+label ~ linkb, #nevertog:checked+label ~ gif2 {opacity: 1; transition-delay: 1.1s}
#nevertog:checked+label ~ gif1, #nevertog:checked+label, #nevertog:checked+label ~ #never-info {transition-delay: 0s}
</style>

[/dohtml]