Collage Character [Custom]

<div class="container-fluid text-white" style="max-width:1100px;">
<!--Main/background image-->
 <div class="card rounded-0 border-0 p-1 mx-auto my-5" style="background-image:url( imglink ); background-size:cover; background-position: center; width:600px; height:600px">
 </div>

<!--Character name card-->
  <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:-35px; left:180px; height:100px; width:270px;">
 <!--Character name-->
  <p class="my-auto" style="font-size: 35px; text-align: center; letter-spacing: 1px;">Character name</p>
 <!--Translucent icon hidden in back-->
  <i class="fas fa-clouds-moon" style="position:absolute; top:15px; left:40px; font-size:70px; opacity:0.1"></i>
<!--top trapezoid over card-->
   <div class="card border-0 mx-auto rounded-0" style="height:20px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23; position:absolute; top:-5px; left:5px;">
   </div>
<!--bottom trapezoid-->
   <div class="card border-0 mx-auto rounded-0" style="height:20px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; top:85px; left:125px;">
   </div>
  </div>

<!--Basics card (top right)-->
  <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:-20px; right:100px; height:340px; width:250px;">
<!--Basics trapezoid + header-->
  <p class="card border-0 mx-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23"><span class="ml-5">Basics</span></p>
 <!--large icon over trapezoid-->
  <i class="fas fa-moon" style="position:absolute; top:-40px; left:35px; font-size:70px; transform:rotate(70deg); color:#f8c65e"></i>
 <!--small icon-->
  <i class="fas fa-stars" style="position:absolute; top:15px; right:85px; font-size:25px; color:#f8c65e"></i>
<!--Age card-->
  <p class="card border-0 rounded-0 mt-1" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Age
 <!--translucent icon in back-->
  <i class="fas fa-birthday-cake" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Gender card-->
  <p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Gender
 <!--translucent icon in back-->
  <i class="fas fa-venus-mars" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Species card-->
  <p class="card border-0 rounded-0" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Species
 <!--translucent icon in back-->
  <i class="fas fa-paw" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Orientation card-->
  <p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Orientation
 <!--translucent icon in back-->
  <i class="fas fa-flame" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Role card-->
  <p class="card border-0 rounded-0" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Role
 <!--translucent icon in back-->
  <i class="fas fa-user" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Height card-->
  <p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Height
 <!--translucent icon in back-->
  <i class="fas fa-ruler" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i>
  </p>
<!--trapezoid at bottom-->
   <div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-2px; right:-2px;">
   </div>
  </div>

<!--Stats card (bottom right)-->
  <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; bottom:-20px; right:130px; height:270px; width:400px;">
<!--Stats trapezoid + header-->
  <p class="card border-0 ml-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#4a2a23; text-align:right"><span class="mr-5">Stats</span></p>
 <!--icon over trapezoid-->
  <i class="fas fa-stars fa-flip-horizontal" style="position:absolute; top:-20px; right:5px; font-size:50px; color:#f8c65e"></i>
<!--Intelligence card-->
   <div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
 <!--Intelligence label-->
   <p class="mb-1" style="font-size: 16px; text-align: center;">Intelligence</p>
 <!--lesser icon on far left-->
   <i class="far fa-brain" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
 <!--greater icon on far right-->
   <i class="fas fa-brain" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
 <!--percent bar-->
    <div class="progress bg-faded rounded-0">
     <div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
     </div>
    </div>
   </div>
<!--Compassion card-->
   <div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
 <!--Compassion laebel-->
   <p class="mb-1" style="font-size: 16px; text-align: center;">Compassion</p>
 <!--lesser icon on far left-->
   <i class="far fa-heart" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
 <!--greater icon on far right-->
   <i class="fas fa-heart" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
 <!--percent bar-->
    <div class="progress bg-faded rounded-0">
     <div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
     </div>
    </div>
   </div>
<!--Creativity card-->
   <div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
 <!--Creativity label-->
   <p class="mb-1" style="font-size: 16px; text-align: center;">Creativity</p>
 <!--lesser icon on far left-->
   <i class="far fa-brush" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
 <!--greater icon on far right-->
   <i class="fas fa-brush" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
 <!--percent bar-->
    <div class="progress bg-faded rounded-0">
     <div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
     </div>
    </div>
   </div>
<!--Courage card-->
   <div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
 <!--Courage label-->
   <p class="mb-1" style="font-size: 16px; text-align: center;">Courage</p>
 <!--lesser icon on far left-->
   <i class="far fa-shield" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
 <!--greater icon on far right-->
   <i class="fas fa-shield" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
 <!--percent bar-->
    <div class="progress bg-faded rounded-0">
     <div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
     </div>
    </div>
   </div>
<!--bottom trapezoid-->
   <div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-7px; right:-5px;">
 <!--code credit (do not remove/alter)-->
   <p class="mr-1" style="text-align: right; font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" style="color:#df7529">MCDogWarrior</a></span></p>
   </div>
  </div>

<!--Trivia card (bottom left)-->
  <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; bottom:-25px; left:145px; height:240px; width:400px;">
<!--Trivia trapezoid + header-->
  <p class="card border-0 ml-3 rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23"><span class="ml-5">Trivia</span></p>
 <!--slightly larger icon-->
  <i class="fas fa-star" style="position:absolute; top:-10px; left:15px; font-size:20px; color:#f8c65e"></i>
 <!--slightly smaller icon-->
  <i class="fas fa-star" style="position:absolute; top:15px; left:10px; font-size:14px; color:#f8c65e"></i>
 <!--fact card 1-->
  <p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> Just a whole lotta fun facts about the character. Actually try to keep it concise if possible</p>
 <!--fact card 2-->
  <p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> if you can't then oh well</p>
 <!--fact card 3-->
  <p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> I suppose if you know how to you can adjust this or something idk how you'd do that</p>
 <!--add more if needed under here-->

<!---->
  </div>
<!--bottom trapezoid-->
  <div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 100%,90% 0%,50% 0%,0% 0%,0% 50%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-33px; left:148px;">
  </div>

<!--Info card (top left)-->
  <div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:90px; left:130px; height:270px; width:400px;">
<!--Info trapezoid + header-->
 <p class="card border-0 ml-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#4a2a23; text-align:right"><span class="mr-5">Info</span></p>
 <!--biggest icon-->
 <i class="fas fa-star" style="position:absolute; top:-10px; left:15px; font-size:30px; color:#f8c65e; transform:rotate(10deg)"></i>
 <!--smaller icon-->
 <i class="fas fa-star" style="position:absolute; top:-10px; left:-5px; font-size:15px; color:#f8c65e; transform:rotate(20deg)"></i>
 <!--smallest icon-->
 <i class="fas fa-star" style="position:absolute; top:10px; left:-5px; font-size:8px; color:#f8c65e; transform:rotate(15deg)"></i>
 <!--Info text card-->
 <p class="card border-0 rounded-0 p-1" style="height:200px; min-width:1px; font-size:15px; margin-right:-10px; background-color:#692921; overflow-y:auto"> Alright so here's the part where you write about the character and stuff. Take up as much as you need because- and maybe you won't believe this- but the box scrolls.</p>
 </div>
<!--bottom trapezoid-->
  <div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 100%,90% 0%,50% 0%,0% 0%,0% 50%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; top:355px; left:135px;">
  </div>

<!--small rotated square in middle, behind circle icons-->
  <div class="card border-0 mx-auto rounded-0" style="height:50px; width:50px; transform:rotate(45deg); background-color:#df7529; position:absolute; top:240px; right:470px;">
  </div>
<!--small circle image behind larger circle-->
  <div class="card p-1 mx-auto my-5 rounded-circle" style="background-image:url( imglink ); background-size:cover; background-position: center; width:130px; height:130px; position:absolute; top:98px; right:380px; border:3px dotted #f8c65e;">
  </div>
<!--large circle image-->
  <div class="card p-1 mx-auto my-5 rounded-circle" style="background-image:url( imglink ); background-size:cover; background-position: center; width:200px; height:200px; position:absolute; top:-80px; right:400px; border:5px dotted #f8c65e;">
  </div>
<!--largest icon over large circle image-->
 <i class="fas fa-circle" style="position:absolute; top:10px; right:580px; font-size:30px; color:#f8c65e"></i>
<!--smaller icon over small circle image-->
 <i class="fas fa-circle" style="position:absolute; top:260px; right:400px; font-size:15px; color:#f8c65e"></i>
<!--less small icon over small circle image-->
 <i class="fas fa-circle" style="position:absolute; top:180px; right:500px; font-size:17px; color:#f8c65e"></i>
<!--larger icon over large circle image-->
 <i class="fas fa-circle" style="position:absolute; top:30px; right:390px; font-size:20px; color:#f8c65e"></i>
<!--smallest icon next to rotated square-->
 <i class="fas fa-circle" style="position:absolute; top:300px; right:500px; font-size:13px; color:#f8c65e"></i>
</div>