<!--base code-->
<p>texty</p>
<div class="container px-0 py-lg-5 py-0">
   <div class="col-xl-8 col-md-9 p-0 mx-auto row no-gutters" style="background:#000;">
      <div class="col-12 p-1">
         <div class="display-4 text-white text-center text-uppercase p-3" style="letter-spacing:1px;background: url(https://www.w3schools.com/w3css/img_lights.jpg) center; background-size: 100%;">
            <div class="col-lg-7">texty</div>
            <div class="d-lg-none d-block" style="height:50px"></div>
         </div>
      </div>
      <div class="col-lg-5 push-lg-7 p-1">
         <div class="bg-faded p-3 h-100 text-center">
            <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5531c3a3-77f3-4c4f-b770-ba6f5d7883ca/04-square-nearestneighbour-opt.png" class="fr-rounded p-2 bg-faded" style="height:200px;margin-top:-75px;">
            <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222;">Profile</div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Age</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Height</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Species</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Sexuality</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Gender</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Pronouns</span><span>texty</span></div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Source</span><span>
               <a href="texty"><strong><u>texty</u></strong></a></span>
            </div>
            <div class="d-flex justify-content-between p-1"><span class="text-uppercase text-muted">Value</span><span>texty</span></div>
         </div>
      </div>
      <div class="col-lg-7 pull-lg-5 row no-gutters">
         <div class="col-12 p-1">
            <div class="bg-faded p-2">
               <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222;">About</div>
               <div class="table-responsive text-muted mt-2" style="height:155px;font-size:.8rem">
                  <p>texty</p>
               </div>
            </div>
         </div>
      <div class="col-12 p-1">
         <div class="bg-faded p-2">
            <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222;">Background</div>
            <div class="table-responsive text-muted mt-2" style="height:155px;font-size:.8rem;">
               <p>texty</p>
            </div>
         </div>
      </div>
   </div>
      <div class="col-lg-6 p-1">
         <div class="bg-faded p-2">
            <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222;">Details</div>
            <div class="table-responsive text-muted mt-2" style="height:155px;font-size:.8rem">
               <ul class="pl-4 m-0">
                  <li>texty</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-lg-6 p-1">
         <div class="bg-faded p-2">
            <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222;">Personality</div>
            <div class="table-responsive text-muted mt-2" style="height:155px;font-size:.8rem">
               <ul class="pl-4 m-0">
                  <li>texty</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="col-lg-12 p-1">
         <div class="bg-faded p-2">
            <div class="card border-0 p-2 text-center text-uppercase" style="letter-spacing:1px;color:#fff;background:#222
               ;">Relations</div>
            <div class="table-responsive mt-2" style="height:250px;">
               <div class="row" style="width: 100%;">
                  <div class="col-md-3 mb-2 text-center">
                     <img src="" class="rounded d-block mx-auto mb-2">
                     <h2><a href="" style="letter-spacing:1px;color:#222;">texty</a></h2>
                     <p class="mb-2">[ <i></i> ]		</p>
                     <p></p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-lg-12 p-1">
      <div class="bg-faded p-2">
         <div class="table-responsive mt-2" style="height:200px;">
            <div class="row" style="width: 100%;">
               <div class="col-md-3 mb-2 text-center">
                  <img src="https://orig00.deviantart.net/8b52/f/2017/021/d/d/main_character_by_kittenkinq-dawaegh.png" style="height:70px"><a href="https://sta.sh/0khdbvqd3uq" class="btn btn-block mx-auto my-2 w-75" style="letter-spacing:1px;color:#fff;background:#222;">Heart Ribbon</a>
                  <p><i>A main character! They're treated above the rest because they're super special to you.</i></p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>