Aesthetic Character [C] HTML (Revamped code)

<div class="container-fluid" style="width:950px; color:#fff">

<!-- Main card -->

 <div class="card p-1 border-0" style="background-color:#0c0021; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;">

  <div class="row no-gutters">

   <div class="col-3 p-1">

 <!-- Left image 1 -->

    <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-top-left-radius:15px;">

    </div>

 <!-- Left image 2 -->

    <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px;" class="mt-2" >

    </div>

 <!-- Left image 3 -->

    <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-bottom-left-radius:15px;" class="mt-2" >

    </div>

   </div>

   <div class="col-6 p-1">

<!--Top card (top header/char name) -->

    <div class="card p-3 border-0 rounded-0" style="background-color:#110c52;">

 <!-- Top header/Char name -->

    <p class="col-12 justify-content-between" style="text-align: center; font-size: 25px;"><i class="fas fa-sun my-auto"></i> <b>CHARACTER NAME</b> <i class="fas fa-sun my-auto"></p>

    </div>

<!-- Quote card -->

    <div class="card p-2 border-0 rounded-0 mt-1" style="background-color:#130941;">

 <!-- Quote -->

    <p style="text-align: center; font-size:16px; color:#02a1f5">"random, probably aesthetic quote goes here"</p>

    </div>

<!-- Small divider -->

    <div class="card border-0 rounded-0 my-1" style="background-color:#0f2367; height:1px">

    </div>

<!-- Details card -->

    <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#110c52;">

     <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Age</b>

 <!-- Age -->

     <i style="color:#02a1f5">info</i></span></div>

     <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Gender</b> 

 <!-- Gender -->

     <i style="color:#02a1f5">info</i></div>

     <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Species</b> 

 <!-- Species -->

     <i style="color:#02a1f5">info</i></div>

     <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Occupation</b> 

 <!-- Occupation -->

     <i style="color:#02a1f5">info</i></div>

     <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Role</b> 

 <!-- Role -->

     <i style="color:#02a1f5">info</i></div>

     </div>

<!-- Pallette card (background) -->

     <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:60px; max-width:500px; border-top:2px solid #0f2367; border-bottom:2px solid #0f2367;" class="card my-1 p-1 rounded-0" >

 <!-- Top divider -->

      <div class="card border-0 rounded-0 my-1" style="background-color:#e90fbc; height:3px">

      </div>

      <div class="row no-gutters">

       <div class="col-2">

 <!-- Color 1 (change hex code) -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#340177; max-height:100px;">

        </div>

       </div> 

       <div class="col-2">

 <!-- Color 2 -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#5303c6; max-height:100px;">

        </div>

       </div> 

       <div class="col-2">

 <!-- Color 3 -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#7303ff; max-height:100px;">

        </div>

       </div> 

       <div class="col-2">

 <!-- Color 4 -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#9805ff; max-height:100px;">

        </div>

       </div> 

       <div class="col-2">

 <!-- Color 5 -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#b906ff; max-height:100px;">

        </div>

       </div> 

       <div class="col-2">

 <!-- Color 6 -->

        <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#fd50fd; max-height:100px;"></div>

        </div> 

       </div>

 <!-- Bottom divider -->

       <div class="card border-0 rounded-0 my-1" style="background-color:#e90fbc; height:3px">

       </div>

      </div>

<!-- Text box -->

      <div class="card mt-2 p-3 rounded-0 border-0" style="background-color:#110c52; height:280px; overflow:auto;">

 <!-- Header -->

      <a style="text-align: left; font-size: 18px;">

  <!-- Icon -->

       <i class="far fa-sun"></i>

  <!-- Header -->

       <b>Header</b></a>

 <!-- Text -->

       <div class="ml-2 my-1" style="border-top:1px solid #02a1f5; width:350px"></div>

       <p>basically text goes here and stuff. it's basically exactly like the old one but it looks a lot better I think. box scrolls and all that. also if you need to add another header, then you can. I wouldn't see the need for another header personally, since this code is really small. you can choose to if you want- you're using it not me. well I could use it if I wanted to but I might not honestly. it's like reading a book you wrote. you know how it goes so there's no point in using it. okay terrible analogy. I have no use for the code myself but maybe you do. </p>

       </div>

<!-- Small divider -->

       <div class="card border-0 rounded-0 my-1" style="background-color:#0f2367; height:1px">

       </div>

<!-- Music player -->

      <p>

       <div align="center"><audio controls="" style="background-color:#02a1f5; padding:3px; border-radius:40px; width:445px; height:35px; border-top-right-radius:15px; border-top-left-radius:15px;">

         <source src=" AUDIOLINK "><br></audio></p>

 <!-- Song details -->

       <p style="font-size:10px; margin-top:-5px; color:#02a1f5">Song title - Arist name</p>

       </div>

      </div>

      <div class="col-3 p-1">

 <!-- Right image 1 -->

       <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-top-right-radius:15px;">

       </div>

 <!-- Right image 2 -->

       <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px;" class="mt-2" >

       </div>

 <!-- Right image 3 -->

       <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-bottom-right-radius:15px;" class="mt-2" >

       </div>

      </div>

     </div>

    </div>

    <div class="col-12 justify-content-between" style="text-align: center; font-size: 10px; margin-top:-2px;"> 

<!-- Image credit -->

    <a style="color:#02a1f5;" href=" LINK ">Image credit</a> 

<!-- Code credit (do not remove/alter) -->

    <a style="color:#02a1f5;" href="https://toyhou.se/MCDogResource">Code by MCDogWarrior</a></span>

    </div>

   </div>