Bounty Board

<div class="container">
<div class="d-flex justify-content-center">
  <div class="card bg-faded text-center rounded-0 p-3" style="width:800px;">

      <!----------WANTED TITLE---------->
      <div class="row no-gutters">
        <div class="col-12"><h1 class="text-uppercase" style="letter-spacing:3px;font-size:3rem;"><i class="fad fa-exclamation-triangle fa-sm"></i> wanted <i class="fad fa-exclamation-triangle fa-sm"></i></h1>
        <hr width="75%">
        </div>
      </div>

      <div class="row no-gutters">

        <!----------BG IMAGE GOES HERE! it'll shrink to fit in the square so don't worry so much about img proportions---------->
        <div class="col-6 p-1">
          <div class="d-flex justify-content-center">
          <div class="card rounded-0" style="height:475px; width:325px; background-image:url('https://via.placeholder.com/350x500'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
        </div></div>

        <div class="col-6 p-1">
          <div class="row no-gutters">

          <!----------NAME GOES HERE---------->
          <div class="col-12">
          <h1 class="text-uppercase" style="letter-spacing:2px;font-size:1.5rem;">"NAME"</h1>
          </div>

          <hr width="75%">

          <!----------DESIGN CREDIT BIT---------->
          <div class="col-12 px-3">
            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">designer</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">ufs/ufo/uft</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">worth</b> content
            </div>
          </div>

          <hr width="75%">

          <!----------(billy mays voice) THAT'S A LOT OF INFO---------->
          <div class="col-12 px-3">
            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">full name</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">age</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">gender & pronouns</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">height</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">weight</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">build</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">species/race/ethnicity</b> content
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">alignment</b> content
            </div>
          </div>

          <hr width="75%">

          <!----------CREDIT BITS (DO NOT REMOVE!! please)---------->
          <div class="col-12 px-3">
            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">layout by</b> @teratoma
            </div>

            <div class="d-flex justify-content-between mb-2" style="letter-spacing:1px;font-size:.75rem;">
            <b class="text-uppercase">img by</b> content
            </div>

          </div>

          </div>
        </div>

        <!----------APPEARANCE GOES HERE---------->
        <div class="col-12">
          <hr width="75%">
          <h1 class="text-uppercase" style="letter-spacing:2px;font-size:1.5rem;">appearance</h1>
          <hr width="50%">
        </div>
        <div class="col-12 px-2 pb-2">
        <div class="table-responsive p-2" style="height:150px;">
          <p style="text-align:justify">
             What should the local authorities be looking for? Give them a thorough description here! Gravida rutrum quisque non tellus. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Non enim praesent elementum facilisis leo vel. Lobortis elementum nibh tellus molestie. Mi proin sed libero enim sed faucibus turpis in. Non odio euismod lacinia at quis. Ullamcorper malesuada proin libero nunc. Massa sed elementum tempus egestas. Euismod nisi porta lorem mollis. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Congue eu consequat ac felis donec et. Sed nisi lacus sed viverra. Mauris ultrices eros in cursus. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Fames ac turpis egestas integer. Convallis posuere morbi leo urna molestie at elementum. Tortor vitae purus faucibus ornare suspendisse.
          </p>
        </div>
        </div>

        <!----------FREEBIE BOX! I recommend a backstory or something fun but go BANANAS---------->
        <div class="col-12">
          <hr width="75%">
          <h1 class="text-uppercase" style="letter-spacing:2px;font-size:1.5rem;">wanted for</h1>
          <hr width="50%">
        </div>
        <div class="col-12 px-2 pb-2">
        <div class="table-responsive p-2" style="height:150px;">
          <p style="text-align:justify">
             A free block! Backstory, other information, or anything else can go here! By copying the entirety of this code block you can even add another section! Gravida rutrum quisque non tellus. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Non enim praesent elementum facilisis leo vel. Lobortis elementum nibh tellus molestie. Mi proin sed libero enim sed faucibus turpis in. Non odio euismod lacinia at quis. Ullamcorper malesuada proin libero nunc. Massa sed elementum tempus egestas. Euismod nisi porta lorem mollis. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Congue eu consequat ac felis donec et. Sed nisi lacus sed viverra. Mauris ultrices eros in cursus. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Fames ac turpis egestas integer. Convallis posuere morbi leo urna molestie at elementum. Tortor vitae purus faucibus ornare suspendisse.
          </p>
        </div>
        </div>

        <div class="col-12">
          <hr width="75%">
          <h1 class="text-uppercase" style="letter-spacing:3px;font-size:2.5rem;"><i class="fad fa-sack-dollar"></i> reward: lotsa money <i class="fad fa-sack-dollar"></i></h1>
        </div>

      </div>

  </div>
</div>
</div>