John Tyree (shipper)

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Montseratt:800|Homemade+Apple|Muli:800" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#dear-john {
width: 600px;
height: 400px;
background: url(https://i.imgur.com/TQECtz2.jpg);
background-size: 600px;
position: relative;
margin 0px auto;
overflow: hidden;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

#dear-john ::-webkit-scrollbar {
width: 1px;
}

#dear-john ::-webkit-scrollbar-track {
background: #fff;
border: 0.5px solid #ddd;
}

#dear-john ::-webkit-scrollbar-thumb {
background: #000;
border: 0.5px solid #000;
}

#dear-john input[type=checkbox] {
display: none;
}

#dear-john .click{
position: absolute;
font-family: 'Homemade Apple', cursive;
font-size: 70px;
top: 170px;
left: 0px;
color: #fff;
height: 100px;
width: 600px;
background: transparent;
transform: rotate(-25deg);
transition: all 1s ease-in-out 0s;
letter-spacing: 0px;
line-height: 50px;
text-shadow: 1px 3px #000;
}

#dear-john  input[type=checkbox]:checked ~ .click{
height: 100px;
width: 200px;
font-size: 25px;
top: 55px;
left: 40px;
color: #fff;
transform: rotate(0deg);
transition: all 1s ease-in-out 0s;
text-align: center;
text-shadow: none;
}

#dear-john label {
width: 10px;
height: 10px;
}
#dear-john label:hover {
cursor: crosshair;
}

#dear-john .sub{
text-transform: uppercase;
position: absolute;
font-family: 'Muli', sans-serif;
font-weight: 800;
font-size: 10px;
letter-spacing: 7px;
top: 230px;
left: 270px;
padding: 0px 13px 7px 20px;
color: #fff;
background: transparent;
border-bottom: 1px solid #fff;
opacity: 1;
transition: all 0.7s ease-in-out 1s;
}

#dear-john  input[type=checkbox]:checked ~ .sub{
opacity: 0;
transition: all 0s ease-in-out 0s;
}

#dear-john .base{
position: absolute;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
background: #000;
transition: all 1s ease-in-out 0s;
opacity: 0.75;
}

#dear-john  input[type=checkbox]:checked ~ .base{
opacity: 0.85;
transition: all 1s ease-in-out 0s;
}

#dear-john .container{
position: absolute;
top: 30px;
left: 30px;
width: 190px;
height: 320px;
background: #000;
border: 10px solid #fff;
transition: all 1s ease-in-out 0s;
opacity: 0;
}

#dear-john  input[type=checkbox]:checked ~ .container{
opacity: 1;
transition: all 1s ease-in-out 0s;
}

#dear-john .container2{
font-family: 'Times', sans-serif;
font-size: 11px;
font-weight: 400;
color: #000;
overflow: auto;
position: absolute;
top: 30px;
right: -320px;
width: 240px;
height: 280px;
border: 30px solid #fff;
background: #fff;
letter-spacing: 0px;
text-align: justify;
line-height: 12.5px;
padding-right: 12px;
transition: all 1s ease-in-out 0s;
}

#dear-john  input[type=checkbox]:checked ~ .container2{
right: 28px;
transition: all 1s ease-in-out 0s;
}

#dear-john .avatar{
position: absolute;
top: 63px;
left: 40px;
width: 90px;
height: 90px;
border: 1px solid #ccc;
border-radius: 100px;
padding: 10px;
}

#dear-john img{
width: 90px;
height: 90px;
border-radius: 100px;
}

#dear-john .t1{
font-family: 'Montseratt', sans-serif;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: #000;
width: 240px;
height: 38px;
line-height: 25px;
letter-spacing: 0px;
border-bottom: 4px solid #000;
margin-bottom: 6px;
text-align: right;
}
#dear-john t2{
font-family: 'Montseratt', sans-serif;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
background: #000;
padding: 5px 15px;
width: 10px;
line-height: 30px;
float: left;
letter-spacing: 0px;
margin-right: 12px;
margin-bottom: 5px;
text-transform: uppercase;
}
#dear-john .text{
position: absolute;
top: 195px;
left: 15px;
width: 162px;
height: 38px;
line-height: 25px;
letter-spacing: 0px;
}

#dear-john t3{
font-family: 'Montseratt', sans-serif;
font-size: 12px;
font-weight: 800;
background: #eee;
text-transform: uppercase;
color: #000;
letter-spacing: 0px;
padding: 3px 10px;
}

#dear-john .lyrics{
font-family: Times;
font-size: 9px;
color: #eee;
letter-spacing: 1px;
padding: 0px 10px;
line-height: 12px;
background: transparent;
margin-top: 10px;
width: 120px;
text-align: justify;
}

#dear-john .polygon{
position: absolute;
bottom: 75px;
right: 110px;
width: 400px;
height: 200px;
background: #000;
border-bottom: 0.5px solid #fff;
border-right: 0.5px solid #fff;
transition: all 1s ease-in-out 0s;
opacity: 0.7;
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
transition: all 0.7s ease-in-out 1s;
}

#dear-john  input[type=checkbox]:checked ~ .polygon{
bottom: 0px;
right: -1px;
background: #fff;
transition: all 1s ease-in-out 0s;
}

#dear-john .cred a{
position: absolute;
top: 95px;
left: 80px;
font-family: calibri;
text-decoration: none;
font-size: 7px;
color: #aaa;
line-height: 10px;
transform: rotate(15deg);
opacity: 1;
}

</style>

<center>
<div id="dear-john">

<input type="checkbox" id="dj-toggle">

<div class="base"></div>

<div class="polygon"></div>

<div class="container">

 <div class="avatar"><img src="https://i.imgur.com/thic4Ba.gif"></div>

 <div class="text">
     <t3>First m. last</t3><br>

     <div class="lyrics">
       — Dear <i>John</i>, this is where you can put your short lyrics.
     </div>

     <div class='cred'><a href="http://shadowplayers.jcink.net/index.php?showuser=95" title='hanie ©'>
     <i class="fa fa-chain"></i></a></div>

 </div>

</div>

<div class="container2">
 <div class="t1">About</div><br>
 <t2>L</t2>orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut aliquet eros. Fusce vestibulum ut ipsum nec pretium. Proin pulvinar rhoncus nisi non vehicula. Suspendisse erat orci, elementum et dictum a, maximus in magna. Curabitur non commodo tortor. Praesent in iaculis nulla, et rhoncus lectus. Etiam odio augue, efficitur sit amet nisi a, congue maximus eros. Sed nec commodo diam.
 <br><br>
 <div class="t1">Enemies</div><br>
 <t2>M</t2>auris suscipit orci quis ipsum egestas placerat. Sed eu dolor sapien. Nam aliquet nunc est, porttitor maximus purus aliquet in. Aliquam condimentum enim at tortor tincidunt tincidunt. Ut tempus dolor non bibendum euismod. Nulla pellentesque, ante et accumsan lobortis, enim sem egestas ante, et tempus nibh eros eu sem. Duis id fringilla neque. Nam eu urna vitae dolor dignissim tincidunt ut vel est. Pellentesque malesuada id orci in tincidunt. Nam in neque risus. Mauris velit mauris, volutpat et nisl id, dictum dictum mauris. Maecenas nibh nibh, volutpat eget urna et, ultricies vehicula urna.
 <br><br>
 <div class="t1">Lovers</div><br>
 <t2>V</t2>ivamus tincidunt ut mauris sit amet vulputate. Praesent eu ante consequat nunc malesuada ullamcorper. Nunc a justo vitae leo varius condimentum. Maecenas sit amet facilisis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vitae metus vehicula justo aliquet viverra ac vel arcu. Curabitur scelerisque sem felis, a maximus quam vestibulum quis. Duis volutpat, velit vitae tincidunt bibendum, diam metus imperdiet orci, ac euismod sem metus non est. Sed lacinia blandit laoreet.
 <br><br>
 <div class="t1">Friends</div><br>
 <t2>N</t2>unc quam orci, volutpat nec augue in, fringilla dictum sapien. Phasellus auctor, dui sit amet condimentum pretium, sem leo pulvinar urna, eget rhoncus nunc urna at odio. Duis pharetra ut magna nec blandit. Donec augue orci, interdum ut aliquam a, vestibulum eget nisl. Nullam fringilla posuere nibh vel imperdiet. Quisque pretium mi id rhoncus vehicula. Suspendisse at tincidunt tellus. Donec auctor lectus a facilisis convallis. In a orci metus. Morbi in imperdiet odio.
</div>

<div class="sub">tyree</div>
<div class="click">
   <label for="dj-toggle">John</label>
</div>

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