Agol code

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Federo');

body{
background-color:#fa8072;
overflow:hidden;

}

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



/*you can change the image on these two boxes, you can use the same image for both boxes and they will look exactly how they do in this trial version*/
#boxleft{
background-image:url(https://78.media.tumblr.com/f24505c9102771e4b03e4e708ef61abf/tumblr_p4tuan9QVg1wko284o1_1280.jpg);
background-size:100%;
width:300px;
height:300px;
background-color:#fff;
clip-path: polygon(0 0, 0% 100%, 100% 0);
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
animation:left 3s 1s;
animation-fill-mode:forwards;
filter:drop-shadow(0px 0px 10px #000);

}



#boxright{
width:300px;
height:300px;
background-color:#fff;
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
animation:right 3s 1s;
animation-fill-mode:forwards;
background-image:url(https://78.media.tumblr.com/f24505c9102771e4b03e4e708ef61abf/tumblr_p4tuan9QVg1wko284o1_1280.jpg);
background-size:100%;
}

/*you can also change the texture and make it an image if you like*/
#boxbackground{
width:800px;
height:600px;
background-color:#333;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-400px;
clip-path: polygon(41% 0, 100% 0, 100% 45%, 59% 100%, 0 100%, 0 55%);
opacity:0;
background-image:url(https://www.transparenttextures.com/patterns/3px-tile.png);
animation:appear 1s 4s;
animation-fill-mode:forwards;
}

#box1{
width:450px;
height:250px;
background-color:#111;
position:absolute;
right:0px;
top:0px;
margin-right:15px;
margin-top:15px;
}

#box2{
width:450px;
height:250px;
background-color:#111;
position:absolute;
left:0px;
bottom:0px;
margin-left:15px;
margin-bottom:15px;
}

#info1{
background-color:#111;
box-shadow:0px 0px 10px 0px #000;
position:absolute;
margin-left:10px;
margin-top:10px;
border:solid 1px #333;
width:200px;
height:215px;
padding:5px;
overflow:auto;
font-family: 'Inconsolata', monospace;
color:#fff;
font-size:10pt;
}

#info2{
width:200px;
height:215px;
padding:5px;
background-color:#111;
box-shadow:0px 0px 10px 0px #000;
position:absolute;
right:0px;
margin-right:10px;
margin-top:10px;
border:solid 1px #333;
overflow:auto;
font-family: 'Inconsolata', monospace;
color:#fff;
font-size:10pt;
}

#info3{
width:200px;
height:215px;
padding:5px;
background-color:#111;
box-shadow:0px 0px 10px 0px #000;
position:absolute;
margin-left:10px;
margin-top:10px;
border:solid 1px #333;
overflow:auto;
font-family: 'Inconsolata', monospace;
color:#fff;
font-size:10pt;
}

#info4{
width:200px;
height:215px;
padding:5px;
background-color:#111;
box-shadow:0px 0px 10px 0px #000;
position:absolute;
right:0px;
margin-right:10px;
margin-top:10px;
border:solid 1px #333;
overflow:auto;
font-family: 'Inconsolata', monospace;
color:#fff;
font-size:10pt;

}

h1{
margin-top:5px;
margin-bottom:5px;
color:#fff;
font-family: 'Federo', sans-serif;
font-size:15pt;
text-align:center;
}

#triangle1{
width:250px;
height:250px;
background-color:#111;
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
position:absolute;
margin-left:75px;
margin-top:15px;
float:right;
overflow:auto;

}

#triangle1 a{
width:230px;
height:40px;
background-color:#fff;
margin-top:10px;
margin-left:10px;
display:block;
filter:brightness(50%) contrast(100%);
transition:1s;
background-size:100%;
}

#triangle1 a:hover{
filter:brightness(100%) contrast(150%);
}

#triangle2{
width:250px;
height:250px;
background-color:#111;
clip-path: polygon(0 0, 0% 100%, 100% 0);
position:absolute;
bottom:0px;
right:0px;
margin-right:75px;
margin-bottom:15px;
float:left;
overflow:auto;

}

#triangle2 a{
width:230px;
height:40px;
background-color:#fff;
margin-top:10px;
margin-left:10px;
display:block;
filter:brightness(50%) contrast(100%);
transition:1s;
}

#triangle2 a:hover{
filter:brightness(100%) contrast(150%);
}




@keyframes appear{
from{
opacity:0;
}
to{
opacity:1;
}
}

@keyframes left{
0%{
margin-top:-150px;
margin-left:-150px;
}
50%{
margin-top:-300px;
margin-left:0px;
}
100%{
margin-top:-300px;
margin-left:-400px;
}
}

@keyframes right{
0%{
margin-top:-150px;
margin-left:-150px;
}
50%{
margin-top:0px;
margin-left:-300px;
}
100%{
margin-top:0px;
margin-left:100px;
}
}

a{
text-decoration:none;
color:#dadada;
transition:1s;
}

a:hover{
color:gold;
}


<div id="boxleft"></div>
<div id="boxright"></div>

<div id="boxleft"></div>
<div id="boxright"></div>
<div id="boxbackground">
<div id="triangle1">
<br>
<br>
<br>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/ZbEjh79.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/Jj4yB9Z.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/3dxJd57.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/jDoGQpE.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/iOHQG1d.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
<a target="_blank" href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>




</div>
<div id="triangle2">
<a target="_blank" href="https://78.media.tumblr.com/3e677526c4f137672b92e888a92648f7/tumblr_oia5hlH0gF1r4f9b7o1_1280.jpg" ><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/ZbEjh79.png"></a>
<a target="_blank" href="https://78.media.tumblr.com/e1ea24d74ac5ba8dc5aa78790db88f91/tumblr_o5flj8UiCT1ugfzjbo1_640.jpg" ><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/Jj4yB9Z.png"></a>
<a target="_blank" href="https://78.media.tumblr.com/367517b1e1b8e272c92651bbd0752823/tumblr_o2n2sm4vGO1ugfzjbo1_640.jpg" ><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/3dxJd57.png"></a>
<a target="_blank" href="https://78.media.tumblr.com/bfe705628dc1c2bdbaed68e9f6273961/tumblr_oqisxo3Lrm1shcacyo1_1280.jpg" ><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/jDoGQpE.png"></a>
<a target="_blank" href="https://78.media.tumblr.com/769399f785d197b4667a6928fb1c6824/tumblr_o7kochWDln1rqat58o1_1280.jpg" ><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/iOHQG1d.png"></a>
<a target="_blank" href="#"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
<a target="_blank" href="#"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
<a target="_blank" href="#"><img style="background-size:100%; width230px; height:40px;"src="https://i.imgur.com/w9P2MzO.png"></a>
</div>
<div id="box1">
<div id="info1">
<h1>Information</h1>
<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>
<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 id="info2">
<h1>Information</h1>

Meme
</div>
</div>
<div id="box2">
<div id="info3">
<h1>Information</h1>

Meme
</div>

<div id="info4">
<h1>Information</h1>
<b>00</b>Code credit @ <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">Hound of Tindalos</a>
</div>
</div>
</div>