Flash Thompson code

<style>
@import url('https://fonts.googleapis.com/css?family=Staatliches');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body{
background-color:#fff;
overflow:hidden;
}

::-webkit-scrollbar
{
	width:0px;
	background-color: transparent;
}

#background{
width:100%;
height:100%;
background-color:#fff;
position:absolute;
z-index:1;
}




#blanket:target #overlay{
animation:animation1 2s;
animation-fill-mode:forwards;
}

@keyframes animation1{
0%{
background-color:#000;
clip-path: polygon(100% 0, 25% 100%, 100% 100%);
}

50%{
background-color:#000;

clip-path: polygon(100% 100%, 25% 100%, 100% 100%);
}
55%{
background-color:#fff;
clip-path: polygon(0 100%, 0 100%, 75% 100%);

}
100%{
clip-path: polygon(0 0, 0 100%, 75% 100%);
background-color:#fff;

}
}

#blanket:target #background{
background-color:#000;
transition:1s;
}

#blanket:target #antivenom{
opacity:0;
z-index:0;
transition:1s;
}

#blanket:target #agentvenom{
opacity:1;
z-index:5;
transition:1s;
transition-delay:1s;
}

#blanket:target #box1{
opacity:0;
z-index:0;
transition:1s;
}



#blanket:target #box2{
opacity:1;
z-index:10;
transition:1s;
transition-delay:1s;
}

#blanket:target #line1{
opacity:0;
z-index:0;
transition:1s;
transform:scalex(0)
}

#blanket:target h1{
opacity:0;
z-index:0;
transition:.2s;
}

#blanket:target .text1{
opacity:0;
z-index:0;
transition:.2;
}

#blanket:target #line2{
opacity:1;
z-index:10;
transition:1s;
transition-delay:1s;
transform:scalex(1)
}

#blanket:target h2{
opacity:1;
z-index:10;
transition:1s;
transition-delay:2s;
}

#blanket:target .text2{
opacity:1;
z-index:10;
transition:1s;
transition-delay:2s;
}

#blanket2:target #overlay{
animation:animation2 2s;
animation-fill-mode:forwards;
}

@keyframes animation2{
0%{
clip-path: polygon(0 0, 0 100%, 75% 100%);
background-color:#fff;
}

50%{
background-color:#fff;
clip-path: polygon(0 100%, 0 100%, 75% 100%);
}
55%{


background-color:#000;

clip-path: polygon(100% 100%, 25% 100%, 100% 100%);
}
100%{


background-color:#000;
clip-path: polygon(100% 0, 25% 100%, 100% 100%);
}
}

#blanket2:target #background{
background-color:#fff;
transition:1s;
}

#blanket2:target #antivenom{
opacity:1;
z-index:5;
transition:1s;
transition-delay:1s;
}

#blanket2:target #agentvenom{
opacity:0;
z-index:0;
transition:1s;
}

#blanket2:target #box1{
opacity:1;
transition:1s;
z-index:10;
transition-delay:1s;
}

#blanket2:target #box2{
opacity:0;
transition:1s;
z-index:0;
}

#blanket2:target #line2{
opacity:0;
z-index:0;
transition:1s;
transform:scalex(0)
}

#blanket2:target h2{
opacity:0;
z-index:0;
transition:.2s;
}

#blanket2:target .text2{
opacity:0;
z-index:0;
transition:.2s;
}

#blanket2:target #line1{
opacity:1;
z-index:10;
transition:1s;
transition-delay:1s;
transform:scalex(1)
}

#blanket2:target h1{
opacity:1;
z-index:10;
transition:1s;
transition-delay:2s;
}

#blanket2:target .text1{
opacity:1;
z-index:10;
transition:1s;
transition-delay:2s;
}

#overlay{
clip-path: polygon(100% 0, 25% 100%, 100% 100%);
width:100%;
height:135%;
position:fixed;
right:0%;
bottom:0%;
background-color:#000;
z-index:7;
}

#antivenom{
width:400px;
height:800px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-250px;
z-index:5;
opacity:1;
}

#antivenom a{
background-image:url(https://i.imgur.com/dyBrcJH.png);
background-size:contain;
background-repeat:no-repeat;
width:350px;
height:700px;
display:block;
transition:.2s;
}

#antivenom a:hover{
transform:scale(1.05, 1.05);
}

#flash1{
background-image:url(https://i.imgur.com/caV5o8D.png);
background-size:contain;
background-repeat:no-repeat;
width:300px;
height:450px;
position:absolute;
bottom:0px;
right:0%;
z-index:5;
transform: scaleX(-1);
}

#box1{
width:800px;
height:200px;
background-color:#000;
position:absolute;
top:50%;
left:50%;
margin-top:50px;
margin-left:-350px;
z-index:10;
opacity:1;
}

.info1{
width:240px;
height:180px;
position:absolute;
z-index:10;
margin-top:5px;
margin-left:5px;
padding:5px;

}

.infotext{
width:220px;
height:150px;
color:#fff;
font-family: 'Montserrat', sans-serif;
font-size:6pt;
margin-top:-10px;
overflow:auto;
text-align:justify;
}

.infotext2{
width:220px;
height:150px;
color:#000;
font-family: 'Montserrat', sans-serif;
font-size:6pt;
margin-top:-15px;
overflow:auto;
text-align:justify;
}

.info2{
width:240px;
height:180px;
position:absolute;
z-index:10;
margin-top:5px;
margin-left:260px;
padding:5px;
}

h3{
font-size:15pt;
font-family: 'Staatliches', cursive;
color:#fff;
margin-top:0px;
}

h4{
font-size:15pt;
font-family: 'Staatliches', cursive;
color:#000;
margin-top:0px;
}

.linetext{
position:absolute;
width:20px;
height:2px;
background-color:#fff;
margin-top:-20px;
}

.linetext2{
position:absolute;
width:20px;
height:2px;
background-color:#000;
margin-top:-25px;
}

#imagebackground{
background-image:url(https://pre00.deviantart.net/a40b/th/pre/i/2016/238/b/0/anti_venom_by_eko999-dafcjbf.jpg);
background-size:100%;
background-repeat:no-repeat;
background-position:0px -300px ;
width:800px;
height:200px;
opacity:.19;
filter:grayscale(100%) saturate(800%);
position:absolute;
}

#line1{
width:300px;
height:5px;
background-color:#000;
position:absolute;
z-index:99;
top:50%;
left:50%;
margin-left:-500px;
margin-top:-150px;
color:#000;
}

h1{
font-family: 'Staatliches', cursive;
margin-top:-65px;
font-size:50pt;
opacity:1;
position:absolute;

}

.text1{
font-size:15pt;
margin-top:5px;
font-family: 'Staatliches', cursive;
width:300px;
position:absolute;

}


#agentvenom {
width:300px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-300px;
opacity:0;
z-index:0;
}

#agentvenom a{
background-image:url(https://i.imgur.com/dVIYYem.png);
background-size:contain;
background-repeat:no-repeat;
width:300px;
height:600px;
display:block;
transition:.2s;
}

#agentvenom a:hover{
transform:scale(1.05, 1.05);
}


#box2{
width:750px;
height:200px;
background-color:#fff;
position:absolute;
top:50%;
left:50%;
margin-left:-450px;
margin-top:50px;
z-index:0;
opacity:0;
}

.info4{
width:240px;
height:180px;
position:absolute;
z-index:10;
right:0px;
margin-top:5px;
margin-right:5px;

}

.info3{
width:240px;
height:180px;
position:absolute;
z-index:10;
right:0px;
margin-top:5px;
margin-right:260px;
}

.info3 a{
width:215px;
height:50px;
display:block;
float:left;
background-color:transparent;
margin-top:2px;
}

#flash2{
background-image:url(https://cdn.discordapp.com/attachments/463161092529455125/531599714374647838/Venom_agent.png);
background-size:contain;
background-repeat:no-repeat;
width:300px;
height:500px;
position:absolute;
bottom:0px;
left:0%;
z-index:5;

}

#imagebackground2{
background-image:url(https://cdna.artstation.com/p/assets/images/images/013/800/374/large/pablo-ruiz-venom-mcu-prx.jpg?1541137312);
background-size:100%;
background-repeat:no-repeat;
background-position:0px -350px ;
width:800px;
height:200px;
opacity:.19;
filter:grayscale(100%) saturate(500%);
transform:scalex(-1);
position:absolute;
}

#line2{
width:325px;
height:5px;
background-color:#fff;
position:absolute;
z-index:0;
top:50%;
right:50%;
margin-right:-500px;
margin-top:-150px;
color:#fff;
opacity:0;
transform:scalex(0)
}

h2{
font-family: 'Staatliches', cursive;
margin-top:-65px;
font-size:50pt;
opacity:1;
position:absolute;
}

.text2{
font-size:15pt;
margin-top:5px;
font-family: 'Staatliches', cursive;
width:350px;
position:absolute;
}

.info4 a{
color:#000;
text-decoration:none;
transition:.5s;
}

.info4 a:hover{
color:purple;
}
</style>

<div id="blanket">
<div id="blanket2">
<div id="background"></div>

<div id="antivenom"><a href="#blanket"></a></div>
<div id="agentvenom"><a href="#blanket2"></a></div>

<div id="overlay"></div>

<div id="line1">
<h1> ANTI-VENOM </h1>
<div class="text1">
Lorem ipsum
</div>
</div>

<div id="line2">
<h2> AGENT VENOM </h2>
<div class="text2">
Lorem ipsum
</div>
</div>

<div id="box1">
<div id="imagebackground"></div>
<div id="flash1"></div>
<div class="info1">
<h3>Thing</h3>
<div class="linetext"></div>
<div class="infotext">
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>

</div>
</div>
<div class="info2">
<h3>Thing</h3>
<div class="linetext"></div>
<div class="infotext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum molestie lobortis. Aenean suscipit sollicitudin ante, ut tincidunt orci varius non. Etiam porta, augue vel hendrerit iaculis, arcu mauris placerat velit, ut facilisis odio justo vitae ex. Proin vel felis eget eros lacinia egestas eget id tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in turpis a elit dapibus imperdiet vitae eget eros. Pellentesque maximus metus sed leo ultrices, sed egestas enim vestibulum.<br><br>

Cras posuere venenatis porta. Fusce id venenatis tortor. Nulla dui est, dignissim non tincidunt sed, bibendum consequat metus. Sed placerat vulputate vestibulum. Donec et lacus congue, posuere eros et, semper mi. Pellentesque id purus finibus, egestas sapien eu, pellentesque nibh. Nunc tempus dui ac semper dignissim. In sed malesuada mi, quis accumsan dolor. Donec varius metus ac luctus maximus. Pellentesque mattis viverra nunc sed feugiat. Mauris leo metus, dignissim ut turpis eget, ornare ultricies nisi. Sed ut ipsum lacinia elit vehicula porttitor elementum sed tellus.
</div>
</div>
</div>

<div id="box2">
<div id="imagebackground2"></div>
<div id="flash2"></div>
<div class="info3">
<h4>Thing</h4>
<div class="linetext2"></div>
<div class="infotext2">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Supernova" style="background-image:url(https://cdn.discordapp.com/attachments/507071689692151808/531688326097534976/image.png); border:1px solid #000; border-radius:10px;"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Supernova" style="background-image:url(https://cdn.discordapp.com/attachments/507071689692151808/531688326097534976/image.png); border:1px solid #000; border-radius:10px;"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Supernova" style="background-image:url(https://cdn.discordapp.com/attachments/507071689692151808/531688326097534976/image.png); border:1px solid #000; border-radius:10px;"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Supernova" style="background-image:url(https://cdn.discordapp.com/attachments/507071689692151808/531688326097534976/image.png); border:1px solid #000; border-radius:10px;"></a>


</div>
</div>
<div class="info4">
<h4>Thing</h4>
<div class="linetext2"></div>
<div class="infotext2">
<b>00</b> Code credit @ <a target="_blank" href="https://roleplay.chat/profile.php?user=Hound%20of%20Tindalos">hound of tindalos</a>
</div>
</div>
</div>