Interactable Moodboard [C]HTML (Custom code)

<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>