Basic Character Custom

<div class="container-fluid my-1" style="color:#ffffff;max-width:1800px;">
  <div class="container">
<!--Background image-->
<div class="card rounded-0 border-0 p-2 mt-3" style="background-image:url(IMG URL); background-attachment:fixed; background-size:cover; background-position: center;">
<div class="row no-gutters">
  </div>

<!--Main box-->
<div class="container-fluid p-3" style="color:#ffffff;max-width:1500px;">
    <div class="container">
    <div class="card card-block bg-faded" style="background-color:#0D052A;">
<!--Side image on left-->
      <div class="row">
<div class="col-4">
  <div style="background: url(IMG URL); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:650px; max-width:400px;" class="card-block h-0" >
    </div>
   </div>

<div class="col-8">
<div class="container-fluid my-1" style="color:#ffffff;max-width:500px;">
<!--Title card (use https://fontawesome.com/icons?d=gallery for icons)-->
      <div class="card card-block bg-faded p-2" style="background-color:#351C56;">
        <p style="text-align: center;"><span style="font-size: 25px;"><i class="fad fa-grip-lines"></i>&nbsp;<strong>TITLE</strong>&nbsp;<i class="fad fa-grip-lines"></i></span></p>
        </div>
        </div>
<!--Basic info-->
        <div class="row">
  <div class="col-7">
        <div class="card bg-faded p-2" style="background-color:#351C56;max-width:800px;">
             <div class="col-12 justify-content-between" style="text-align: center;"><strong>Name</strong> info</div>
             <div class="col-12 justify-content-between" style="text-align: center;"><strong>Age</strong> info</div>
             <div class="col-12 justify-content-between" style="text-align: center;"><strong>Gender</strong> info</div>
             <div class="col-12 justify-content-between" style="text-align: center;"><strong>Species</strong> info</div>
             <div class="col-12 justify-content-between" style="text-align: center;"><strong>Orientation</strong> info</div>
          </div>
          </div>
<!--Interests/Likes/Hobbies-->
           <div class="col-5">
        <div class="card bg-faded p-2" style="background-color:#351C56;max-width:800px;">
          <p style="text-align: left;"><strong><u>Interests</u></strong></p>
          <a style="text-align: left;"><strong>- </strong>something they like</p>
          <a style="text-align: left;"><strong>- </strong>something they do</p>
          <a style="text-align: left;"><strong>- </strong>something they appreciate</p>
          <a style="text-align: left;"><strong>- </strong>etc</p>
          </div>
          </div>
          </div>
<!--Color palette-->
          <div class="container-fluid my-1" style="color:#ffffff;max-width:700px;">
                    <div class="row">
            <div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
           	<div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
           	<div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
           	<div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
           	<div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
           	<div class="col-2">
           	<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
           	</div>
          </div>
         </div>

<!--Paragraph, write a bunch of stuff about stuff-->
        <div class="card bg-faded p-2" style="background-color:#351C56;max-width:800px;min-height:255px;overflow:auto;">
           <p style="text-align: left;"><span style="font-size: 20px;"><strong>HEADER</strong></span></p>
  <p style="text-align: left;"><span style="font-size: 13px;">A short summary of the character or a brief personality description. and uh yeah just type a bunch of stuff- box scrolls</span></p>
  <a style="text-align: left;"><span style="font-size: 13px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </span></p>
          </div>
  <!--Stats, adjust the progress bar- the higher it is the higher the stat (obviously)-->
          <div class="card bg-faded my-1 p-2" style="background-color:#351C56;max-width:800px;min-height:100px;">
     <div class="row p-1">
       <div class="col-md-6">
        <span>Intelligence</span>
        <div class="progress bg-dark rounded mt-1">
        <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
        <div class="col-md-6">
         <span>Confidence</span>
         <div class="progress bg-dark rounded mt-1">
         <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
       <div class="col-md-6">
        <span>Temper</span>
        <div class="progress bg-dark rounded mt-1">
        <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
        <div class="col-md-6">
         <span>Humor</span>
         <div class="progress bg-dark rounded mt-1">
         <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
                <div class="col-md-6">
        <span>Empathy</span>
        <div class="progress bg-dark rounded mt-1">
        <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
        <div class="col-md-6">
         <span>Creativity</span>
         <div class="progress bg-dark rounded mt-1">
         <div class="progress-bar" style="width: 50%;height: 12px; background-color: #F02B59"></div>
         </div></div>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!--This part can be removed if the bg belong to you-->
 <div class="col-12 justify-content-between" style="text-align: center;">
 <strong><a href="https://sta.sh/01qruqlrt6nx" class="text-white" data-toggle="tooltip" title="bg image"><i class="fas fa-image"></i> </a></strong>
<!--stop removing here (please keep credit thanks yw)-->
 <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogWarrior" id="">MCDogWarrior</a></span></p>
</div>