TIght Spaces HTML Only

<!-- Code by Dama @damedanbo, do not remove credit -->


<div class="container card card-outline-secondary">

<!-- main box -->
<div class="p-0 col-sm-12">

<!-- name or title -->

<div class="m1-2 mt-0 text-uppercase">
<span class="text-primary mr-3" style="font-size:32px;"><i class="fas fa-gem"></i></span>
<span class="mr-3" style="font-size:32px">
<strong>TITLE OR NAME</strong></span>

<hr class="my-1 mx-5 bg-primary">

<!-- keywords lyric quote etc. -->

<div class="d-flex justify-content-center my-2" font size="14px"> <center>song lyric, subtitle, etc.</center></div></div>

<div class="row no-gutters d-flex justify-content-center p-0">

<!-- info box -->
<div class="row  col-sm-4 d-inline-block m-1 p-2 " style="height:300px;">

General about section. I look good with a paragraph of text. Whatever doesn't fit in this box will become hidden by CSS, or overflow if you use HTML only.
<br>This section can be used for whatever you want. Story basics, character trivia, etc.
<hr>You can add line breaks like this!
<ul><li>or make trivia bulletpoints</li></ul>
The image to the right (below in the HTML) works great as a focal point--a character reference, a gif or aesthetic, whatever you like.</div>

<!-- focal image and box two -->
 <div class="col-sm-4 table responsive" style="height:300px; background:url(https://static.vecteezy.com/system/resources/previews/000/401/970/non_2x/vector-background-wallpaper-with-polygons-in-gradient-colors.jpg) no-repeat top center; background-size:cover;border-radius:25px;">
</div>


<!-- profile box three -->
 <div class="col "><div class="mini-box ">
<div class="m-1 d-inline-block flex p-2 position-relative" style="height:150px;">
<strong>name:</strong> answer answer answer answer
<br><strong>nickname:</strong> answer
<br><strong>gender:</strong> answer  answer answer answer answer
<br><strong>pronouns:</strong> answer
<br><strong>misc:</strong> answer text text text text
<br><strong>theme song:</strong><a href="/"> <u>answer text</u></a>


<!-- come back to this  -->
</div></div>
<!-- box  four -->
<div class="overflow-auto ">
<!--- likes dislikes  -->
  <div class="col d-inline-block table-responsive ">
        <div class="row no-gutters text-center">
      <!-- likes & dislikes -->
          <div class="col-6 d-inline-block">
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like yes yes yes yes yes yes </p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart text-success mr-2"></i>like</p>
            </div>
          <div class="bg-secondary m-0 d-inline-block" style="width:1px;"></div>
          <div class="col-5 d-inline-block">
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike no no no no no no no</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>
            <p class="mb-1 mt-0"><i class="fas fa-heart-broken text-danger mr-2"></i>dislike</p>


          </div>

      </div>


</div></div></div></div>
<span class="small"><center><a href="https://toyhou.se/damedanbo">code by dama</a>@damedanbo</center></span>