Split character (custom)

<div class="container text-white my-3" style="max-width:800px;">
<!-- background box (hides split line) -->
 <div class="card border-0 rounded-0" style="height:400px; font-size:24px; background-color:#Ce528f">
<!-- main box (upper left half)
note: messing with the clip-path will mess with the appearance of the code, so only mess with it if you know what you're doing (I certainly don't) -->
  <div class="card border-0 rounded-0" style="height:400px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 100%,0% 100%); background-color:#248356">
  </div>
<!-- main box (lower right half) -->
  <div class="card border-0 rounded-0" style="margin-top:-400px; height:400px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,100% 0%,0% 100%,100% 100%); background-color:#1f7756;">
  </div>
 </div>
<!-- quote box -->
 <p class="card border-0 rounded-0" style="height:40px; width:610px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,85% 100%); background-color:#1f7756; position:absolute; top:0px; right:50px;">
   <span class="ml-3">"SMALL QUOTE"</span></p>
 <!-- name box -->
 <p class="card border-0 rounded-0" style="height:40px; width:230px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,70% 100%); background-color:#1f7756; position:absolute; top:100px; left:140px;">
   <span class="mx-auto">NAME</span></p>
 <!-- gender box -->
 <p class="card border-0 rounded-0" style="height:40px; width:230px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,70% 100%); background-color:#1f7756; position:absolute; top:170px; left:10px;">
   <span class="ml-1">GENDER</span></p>
 <!-- age box -->
 <p class="card border-0 rounded-0" style="height:40px; width:160px; font-size:24px; background-color:#1f7756; position:absolute; top:215px; left:10px;">
   <span class="ml-1">AGE</span></p>
 <!-- species box -->
 <p class="card border-0 rounded-0" style="height:40px; width:160px; font-size:24px; background-color:#1f7756; position:absolute; top:260px; left:10px;">
   <span class="ml-1">SPECIES</span></p>
<!-- character icon -->
 <div class="card p-1 rounded-circle"
 style="background-image:url( IMGLINK );
 background-size:cover; background-position: center; width:200px; height:200px; position:absolute; top:-35px; right:630px; border:5px solid #248356;">
 </div>
<!-- text box -->
 <p class="card border-0 rounded-0" style="height:235px; width:300px; font-size:15px; background-color:#1f7756; position:absolute; top:160px; right:20px; overflow:auto;">
   <span class="ml-1">text box here for like information and stuff I mean yknow you can change the header to whatever and write whatever here hey maybe I should start using punctuation eh too lazy just try to comprehend this also box scrolls</span></p>
 <!-- header for text box -->
 <p class="card border-0 rounded-0" style="height:40px; width:270px; font-size:24px; text-align:right; background-color:#248356; position:absolute; top:120px; right:10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,25% 0%,0% 100%,100% 100%)">
   <span class="mr-1">HEADER</span></p>
 <!-- song title (& artist name) box -->
 <p class="card border-0 rounded-0" style="height:40px; width:320px; text-align:right; background-color:#248356; position:absolute; top:350px; right:420px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,25% 0%,0% 100%,100% 100%)">
   <span style="font-size:17px;" class="mr-1">SONG TITLE<br></span>
   <span class="mr-1" style="font-size:9px;">ARTIST NAME</span></p>
<!-- box with music player -->
 <p class="card border-0 rounded-0" style="height:40px; width:34px; font-size:26px; text-align:right; background-color:#248356; position:absolute; top:350px; right:380px;"><span><i class="fas fa-compact-disc fa-spin mr-1"></i></span></p>
 <!-- music player (replace (ID) with the letter spam at the end of YouTube links) -->
 <iframe src="https://www.youtube-nocookie.com/embed/(ID)" class="border-0" style="position: absolute; top:350px; right:380px; height: 40px; width: 34px; z-index: 9; opacity: 0;"></iframe>
<!-- icon bunch (largest, small, last 2 smallest)-->
 <p style="position:absolute; top:150px; right:400px; font-size:140px;"><i class="fas fa-circle"></i></p>
 <p style="position:absolute; top:100px; right:380px; font-size:70px;"><i class="fas fa-circle"></i></p>
 <p style="position:absolute; top:50px; right:300px; font-size:50px;"><i class="fas fa-circle"></i></p>
 <p style="position:absolute; top:150px; right:360px; font-size:50px;"><i class="fas fa-circle"></i></p>
<!-- code credit (don't remove/alter!) -->
 <p class="card border-0 rounded-0" style="height:40px; width:95px; font-size:12px; background-color:#1f7756; position:absolute; top:310px; left:10px;">
   <span class="ml-1"><a style="color:#F9E9CD;" href="https://toyhou.se/MCDogResource">Code by MCDogWarrior</a></span></p>
</div>