Interactable moodboard [Custom]

<div class="container-fluid" style="width:780px;">
 <div class="row no-gutters">
  <div class="col-4">
<!--Image 1 (top left)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px; border-top-left-radius:15px;">
 <!--Transition from image to card-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab1"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab1">
 <!--Card-->
      <div class="card bg-faded p-1 border-0 rounded-0" style="background-color:#02000b; height:250px; width:250px; position:absolute; bottom:0px; left:0px; border-top-left-radius:15px;">
 <!--Character name-->
      <p class="text-light" style="font-size: 50px; text-align: center; letter-spacing: 2px;"><strong>CHARA- CTER NAME</strong></p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 2 (top middle)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab2"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab2">
 <!--Card-->
      <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#080812; height:250px; width:250px; position:absolute; bottom:0px; left:0px;">
 <!--Central icon-->
       <div class="card rounded-0 border-0" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; min-height:235px; min-width:235px">
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 3 (top right)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px; border-top-right-radius:15px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab3"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab3">
 <!--Card-->
      <div class="card bg-faded p-1 border-0 rounded-0" style="background-color:#02000b; height:250px; width:250px; position:absolute; bottom:0px; left:0px; border-top-right-radius:15px;">
 <!--Icon 1-->
      <p class="text-light" style="font-size: 200px; text-align: center; position:absolute; bottom:-15px; left:25px;"><i class="fas fa-circle"></i></p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>

 <div class="row no-gutters">
  <div class="col-4">
<!--Image 4 (middle left)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab4"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab4">
 <!--Card-->
      <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#080812; height:250px; width:250px; position:absolute; bottom:0px; left:0px; overflow:auto;">
 <!--Likes header-->
      <p style="font-size: 23px; text-align: center; letter-spacing: 2px; color:#6a43df" class="mt-1">Likes</p>
 <!--Likes list-->
      <ul class="text-light" style="list-style-type: circle; font-size: 16px;">
       <li>thing they like</li>
       <li>another thing they like</li>
       <li>or something like that</li>
       <li>yknow the deal</li>
      </ul>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 5 (middle)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab5"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab5">
 <!--Card-->
      <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#02000b; height:250px; width:250px; position:absolute; bottom:0px; left:0px; overflow:auto;">
 <!--Trivia header-->
      <p style="font-size: 23px; text-align: center; letter-spacing: 2px; color:#b358f2" class="mt-1">Trivia</p>
 <!--Trivia list-->
      <ul class="text-light" style="list-style-type: circle; font-size: 16px;">
       <li>information about them</li>
       <li>or fun facts</li>
       <li>you can replace this with interests instead if you prefer</li>
      </ul>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 6 (middle right)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab6"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab6">
 <!--Card-->
      <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#080812; height:250px; width:250px; position:absolute; bottom:0px; left:0px; overflow:auto;">
 <!--Dislikes header-->
      <p style="font-size: 23px; text-align: center; letter-spacing: 2px; color:#6a43df" class="mt-1">Dislikes</p>
 <!--Dislikes list-->
      <ul class="text-light" style="list-style-type: circle; font-size: 16px;">
       <li>thing they dislike</li>
       <li>basically just repeating what I</li>
       <li>said but replacing "like" with</li>
       <li>"dislike" instead</li>
      </ul>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>

 <div class="row no-gutters">
  <div class="col-4">
<!--Image 7 (bottom left)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px; border-bottom-left-radius:15px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab7"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab7">
 <!--Card-->
      <div class="card bg-faded p-1 border-0 rounded-0" style="background-color:#02000b; height:250px; width:250px; position:absolute; bottom:0px; left:0px; border-bottom-left-radius:15px;">
 <!--Icon 2-->
      <p class="text-light" style="font-size: 200px; text-align: center; position:absolute; bottom:-30px; left:25px;"><i class="fas fa-circle"></i></p>
<!--Code credit (DO NOT REMOVE/ALTER)-->
      <p style="text-align: right; position:absolute; bottom:0px; left:5px;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 8 (bottom middle)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px;">
 <!--Transition-->
   <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab8"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab8">
 <!--Card-->
      <div class="card bg-faded p-1 border-0 rounded-0" style="background-color:#080812; height:250px; width:250px; position:absolute; bottom:0px; left:0px;">
 <!--About text-->
      <p style="font-size: 17px; text-align: justify; letter-spacing: 1px;"><span style="color:#6a43df">Small </span>tidbit about the ch- aracter. Here is basically the "about" section, where you explain the character's role and/or what they do. The box scrolls btw</p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="col-4">
<!--Image 9 (bottom right)-->
   <div class="card rounded-0 border-0" style="background-image:url( https://f2.toyhou.se/file/f2-toyhou-se/images/39876125_u6MMc1pkjzFbWaU.png ); background-size:cover; background-position: center; height:250px; width:250px; border-bottom-right-radius:15px;">
 <!--Transition-->
    <a class="btn bg-faded btn-block rounded-0" style="height:250px; background-color:rgba(214,84,15,0);" data-toggle="tab" href="#tab9"></a>
    <div class="tab-content">
     <div class="tab-pane fade" id="tab9">
 <!--Card-->
      <div class="card bg-faded p-1 border-0 rounded-0" style="background-color:#02000b; height:250px; width:250px; position:absolute; bottom:0px; left:0px; border-bottom-right-radius:15px;">
 <!--Other text-->
      <p style="font-size: 17px; text-align: justify; letter-spacing: 1px;"><span style="color:#b358f2">This </span>part you can write whatever you want in. Personality, history, relati- onship summary, whatever. Also just want to note the 3 boxes above this one also scroll (and so does this box)</p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>