Small Character [Bootstrap]

<div class="container-fluid my-1" style="color:#ffffff;width:1150px;">
<!-- main card -->
 <div class="card bg-faded rounded-0 border-0 p-1" style="border-top-left-radius:25px; border-bottom-left-radius:25px; border-top-right-radius:25px; border-bottom-right-radius:25px;">
   <div class="row no-gutters">
	  <div class="col-4">
<!-- left card -->
	   <div class="card bg-dark rounded-0 border-0 p-1" style="border-top-left-radius:20px; border-bottom-left-radius:20px; height:550px">
<!-- trivia card (translucent) -->
	    <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(247,219,210,0.15); border-top-left-radius:15px; height:220px; overflow:auto">
 <!-- header -->
	    <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Trivia</p>
 <!-- list -->
	    <ul class="mt-3 text-white" style="font-size: 16px;">
       <li>trivia about</li>
       <li>the character</li>
       <li>that you think</li>
       <li>might be important</li>
       <li>to note</li>
      </ul>
     </div>
<!-- personality card (translucent) -->
     <div class="card bg-faded rounded-0 border-0 p-1 mt-1" style="background-color:rgba(247,219,210,0.15); border-bottom-left-radius:15px; height:320px; overflow:auto">
 <!-- header -->
     <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Personality</p>
 <!-- text -->
     <p class="text-white" style="text-align: left; font-size: 15px;">Basic character description. Yknow, personality. What are they like, what would they do in certain situations. Blah blah yes</p>
     <a class="text-white" style="text-align: left; font-size: 15px;">I'm gonna let you in on a little secret. I need you to promise you won't tell anyone... alright. I'll tell you. The box scrolls. I know I know it's surprising, but it's true. Please don't tell anyone about this</p>
      </div>
     </div>
    </div>
    <div class="col-4">
<!-- middle card -->
     <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:550px">
<!-- circle pfp picture -->
      <div class="card mx-auto rounded-circle mb-2 mt-2 card-outline-primary" style="background-image:url( IMGLINK ); background-size:cover; background-position: center; height:190px; width:190px;
      border-width:2px">
      </div>
<!-- icons besides the pfp -->
 <!-- (left icon) -->
     <a style="position:absolute; top:75px; left:20px; font-size:50px;"><i class="fas fa-square text-primary"></i> </a>
 <!-- (right icon) -->
     <a style="position:absolute; top:75px; right:20px; font-size:50px;"><i class="fas fa-square text-primary"></i> </a>
 <!-- character name -->
     <p class="text-secondary my-1" style="font-size: 25px; text-align: center; letter-spacing: 1px;">NAME</p>
      <div class="card bg-faded rounded-0 border-0 p-1 mt-2" style="background-color:rgba(0,0,0,0); height:283px; overflow:auto">
 <!-- text -->
      <p class="text-secondary" style="text-align: justify; font-size: 15px;">Summary of character. Basically explain their role to a story and stuff in here. If they don't have a story, then I guess describe whatever doesn't fit in the other boxes</p>
      <a class="text-secondary" style="text-align: justify; font-size: 15px;">You remember our secret, right? Yknow the one about... the box scrolling. You remember that, right? Yeah uh, keep remembering that. It'll prove useful</p>
      </div>
     </div>
    </div>
    <div class="col-4">
<!-- right card -->
     <div class="card bg-dark rounded-0 border-0 p-1" style="border-top-right-radius:20px; border-bottom-right-radius:20px; height:550px">
<!-- history card (translucent) -->
      <div class="card bg-faded rounded-0 border-0 p-1 mb-1" style="background-color:rgba(247,219,210,0.15); border-top-right-radius:15px; height:320px; overflow:auto">
 <!-- header -->
      <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">History</p>
 <!-- text -->
      <p class="text-white" style="text-align: left; font-size: 15px;">Or story. Or some other thing you want to replace this header with. You can change it or keep it. If you keep it, then write about the character's backstory and/or what they do in the story they're in. If you do change it, then you should already know what to write</p>
      <a class="text-white" style="text-align: left; font-size: 15px;">Alright. I need you to repeat the secret to me again. Go ahead. Yes, brilliant. The box scrolls. I'm glad you remembered that</p>
      </div>
<!-- hobbies card (translucent) -->
      <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:rgba(247,219,210,0.15); border-bottom-right-radius:15px; height:220px; overflow:auto">
 <!-- header -->
	    <p class="text-white" style="font-size: 18px; text-align: center; letter-spacing: 1px;">Hobbies</p>
 <!-- list -->
	    <ul class="mt-3 text-white" style="font-size: 16px;">
       <li>things that</li>
       <li>the character</li>
       <li>likes to do</li>
       <li>but you can change</li>
       <li>this if you want</li>
      </ul>
      </div>
     </div>
    </div>
   </div>
<!-- icon at the top left corner -->
  <a style="position:absolute; top:-30px; left:-20px; font-size:65px"><i class="fas fa-square text-white"></i> </a>
 <!-- credit (DO NOT REMOVE/ALTER) -->
  <p style="text-align: right; position:absolute; bottom:-25px; right:-5px; font-size:65px"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  </div>
 </div>