Mitty code

<style>

@import url('https://fonts.googleapis.com/css?family=Muli:400,800|Playfair+Display:400,700');

body{
background-coior:#fff;
overflow-y: auto;
overflow-x:hidden;
}



::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}


#box1{
width:100%;
height:100%;
position:absolute;
top:0%;
left:0%;
}

#backgroundimage{
background-image:url(https://cdnb.artstation.com/p/assets/images/images/009/693/071/large/vishwadeep-jadeja-abyss.jpg?1520366389);
filter:blur(1px);
background-size:120vw;
background-position:0px 0px;
width:100%;
height:100%;
z-index:1;
position:absolute;
}


#right{
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
background-image:url(https://i.imgur.com/td0mDvE.png);
background-size:130vw;
background-position:55.6vw -5vh;
position:absolute;
right:0vw;
bottom:0vh;
background-color:#fff;
width:25vw;
height:25vh;
z-index:10;
opacity:0.2
}

#rightbackground{
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
position:absolute;
right:0vw;
bottom:0vh;
background-color:#fff;
width:25vw;
height:25vh;
z-index:9;
}


#left{
clip-path: polygon(0 0, 0% 100%, 100% 100%);
position:absolute;
background-image:url(https://i.imgur.com/td0mDvE.png);
background-size:130vw;
background-position:0vw -5vh;
left:0vw;
bottom:0vh;
background-color:#fff;
width:25vw;
height:25vh;
z-index:10;
opacity:0.2
}


#leftbackground{
clip-path: polygon(0 0, 0% 100%, 100% 100%);
position:absolute;
left:0vw;
bottom:0vh;
background-color:#fff;
width:25vw;
height:25vh;
z-index:9;
}

.text{

 font-size:15vh;
 color:#fff;
 position:absolute;
 position:absolute;
 z-index:99;
 font-family: 'Playfair Display', serif;
font-weight:700;
top:30vh;
left:19vw;
 text-shadow: 1px 1px 10px #000;
   letter-spacing: 2vw;
animation:abyss 3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes abyss{
 0%{
    left:19vw;
     letter-spacing: 2vw;
     opacity:0;
  }



  100%{
    left:30vw;
     letter-spacing:normal;
     opacity:1;
  }

}

#box2{
width:100%;
height:100%;
background-color:#fff;
position:absolute;
top:100%;
left:0%;
}

#backgroundimage15{
background-image:url(https://cdnb.artstation.com/p/assets/images/images/009/693/071/large/vishwadeep-jadeja-abyss.jpg?1520366389);
filter:blur(1px);
background-size:120vw;
clip-path: polygon(25% 0, 50% 20%, 75% 0);

background-position:0vw 30.5vh;
width:100%;
height:100%;
z-index:2;
position:absolute;
}



#backgroundimage2{
background-image:url(https://i.imgur.com/td0mDvE.png
);
background-size:130vw;
background-position:0vw -30vh;
width:100vw;
height:100vh;
z-index:1;
position:absolute;
opacity:0.2
}

#mitty1{
 background-image:url(https://i.imgur.com/ldfYtlm.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:30vw;
 height:100vh;
 position:absolute;
 right:10vw;
 z-index:99;
 filter:drop-shadow(1px 1px 10px #000);
}

.text2{
  font-family: 'Muli', sans-serif;
  color:#666;
  font-size:30pt;
  font-weight:800;
  position:absolute;
  z-index:99;
  top:30vh;
  left:10vw;
}

#info1{
   font-family: 'Muli', sans-serif;
  color:#666;
  font-size:10pt;
  z-index:99;
  position:absolute;
  top:40vh;
  width:25vw;
  height:contain;
  left:10vw;
  overflow:hidden;

}

#info2{
    font-family: 'Muli', sans-serif;
  color:#666;
  font-size:10pt;
  z-index:99;
  position:absolute;
  top:40vh;
  width:15vw;
  height:contain;
  left:36vw;
  overflow:hidden;

}

#box3{
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:200%;
left:0%;

}

#backgroundimage25{
clip-path: polygon(0 0, 0 30%, 100% 0);
background-image:url(https://i.imgur.com/td0mDvE.png
);
background-size:130vw;
background-position:0vw 30vh;
width:100vw;
height:100vh;
z-index:6;
position:absolute;
opacity:0.2
}

#backgroundimage25background{
clip-path: polygon(0 0, 0 30%, 100% 0);
background-color:#fff;
background-size:130vw;
background-position:0vw 30vh;
width:100vw;
height:100vh;
z-index:5;
position:absolute;
opacity:1;
}

#backgroundimage3{
background-image:url(https://i.imgur.com/nLmjp2C.png
);
background-size:100vw;
background-position:0vw 10vh;
width:100vw;
height:100vh;
z-index:1;
position:absolute;
opacity:0.8;
filter:blur(2px);
}

#mitty2{
 background-image:url(https://i.imgur.com/64ySx6r.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:35vw;
 height:100vh;
 position:absolute;
 top:0vh;
 left:0vw;
 z-index:99;
 transform:scalex(-1);
}

.text3{
  font-family: 'Muli', sans-serif;
  color:#fff;
  font-size:30pt;
  font-weight:800;
  position:absolute;
  z-index:99;
  top:30vh;
  right:20vw;
}

#info3{
   font-family: 'Muli', sans-serif;
  color:#fff;
  font-size:10pt;
  z-index:99;
  position:absolute;
  top:40vh;
  width:35vw;
  height:20vh;
  right:17vw;
  overflow:auto;

}

.text4{
  font-family: 'Muli', sans-serif;
  color:#fff;
  font-size:30pt;
  font-weight:800;
  position:absolute;
  z-index:99;
  top:64vh;
  right:38vw;
}

#info4{
   font-family: 'Muli', sans-serif;
  color:#fff;
  font-size:10pt;
  z-index:99;
  position:absolute;
  top:75vh;
  width:35vw;
  height:20vh;
  height:contain;
  right:16.5vw;
  overflow:auto;
}

#friends{
 width:100vw;
 height:20vh;
overflow:auto;
 float:left;
}

#friends a{
 width:8vw;
 height:16vh;
 background-color:#fff;
 border-radius:50%;
 display:block;
 float:left;
 top:0vh;
 margin-top:2vh;
 margin-left:1vw;
}

#info4::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

#info4::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

#info4::-webkit-scrollbar-thumb
{
	background-color: #fff;
	border: 2px solid #555555;
}

a{
 color:#fff;
 text-decoration:none;
 transition:.5s;

}

a:hover{
 color:gold;
}

</style>
<div id="box1">
<div class="text"> Made In Abyss</div>
<div id="backgroundimage"></div>
<div id="right"></div>
<div id="left"></div>
<div id="rightbackground"></div>
<div id="leftbackground"></div>
</div>
<div id="box2">
<div id="backgroundimage15">
</div>
<div id="backgroundimage2">
</div>
<div id="mitty1"></div>
<div class="text2">MEET MITTY</div>
<div id="info1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit quam, viverra in tellus vel, convallis egestas velit. Quisque fermentum posuere ex. Nunc tincidunt ex a ipsum convallis tempor. Aliquam consectetur eros eget augue varius lacinia. Cras posuere, ex eu commodo euismod, dolor nisi gravida orci, et vehicula nisi arcu id orci. Suspendisse ac semper ipsum. Suspendisse id eros pretium, feugiat elit eget, tristique diam. Donec fringilla sapien ultricies mauris consectetur accumsan.

In hac habitasse platea dictumst. Duis consectetur facilisis dolor, ac condimentum purus fringilla ac. Morbi ut imperdiet lorem. Morbi varius neque sit amet risus ullamcorper volutpat. Aliquam erat volutpat. In tincidunt sagittis dui at interdum. Aenean vitae libero arcu. In consectetur, est nec scelerisque egestas, nibh nibh commodo felis, sed placerat diam ex eget orci. Nunc sagittis posuere ornare. Sed eu nulla at urna aliquet mattis. Aliquam volutpat lacinia libero pulvinar dignissim. Proin rutrum faucibus feugiat. Nulla eu aliquam turpis.</div>
<div id="info2"   <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 id="box3">
  <div id="backgroundimage25"></div>
  <div id="backgroundimage25background"></div>
  <div id="backgroundimage3"></div>
  <div id="mitty2"></div>
  <div class="text3">OUT OF CHARACTER</div>
    <div id="info3">This profile was made by <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">The Hound of Tindalos</a> PM him or send him a RPC mail for paid comissions!</div>
  <div class="text4">FRIENDS</div>
    <div id="info4">
    <div id="friends">
      <a href=""></a>
        <a href=""></a>  <a href=""></a>  <a href=""></a>  <a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
      </div>
    </div>

</div>