Freebie - User Around

<!--
---- default focal color is  #f2819f
---- use find & replace to quickly replace the hex code
---->

<div class="container my-5 card pt-3 px-3" style="border-radius: 16px; border-width: 2px; border-color: #f2819f;">
  <div class="row no-gutters">
    <div class="col-lg-5 col-md-6 mb-3">
      <!-- FOCAL IMAGE -- will scale/crop with screen -- focus in the center of the image ------------->
      <div style="background-image: url('IMG_URL');
      background-size:cover; background-position:center; background-repeat: no-repeat; border-radius: 16px; min-height: 500px;"
      class="rounded h-100"></div>
    </div>
    <div class="col-lg-5 col-md-6 pl-md-3 pr-lg-3">
      <!-- TITLE BLOCK -- names and detail here ------------------>
      <div class="px-2 py-3 text-white text-center mb-3" style="background: #f2819f; border-radius: 16px;">
        <h1 class="text-uppercase mb-1 text-white" style="letter-spacing: 2.5px; font-size: 2.5em;">
          Name here
        </h1><p class="small" style="letter-spacing: 1px;">
          age • gender • adjective
        </p>
      </div>
      <!-- ABOUT BLOCK -- write about yourself here ------------>
      <div class="p-3 bg-faded mb-3" style="height: 295px; overflow:auto; border-radius: 16px; line-height:1.4;">
        <p>Write whatever you want here! this box will scroll when filled.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis eget risus eu fermentum. Sed leo mi, luctus vitae porttitor et, viverra ut lacus. Mauris bibendum, risus in efficitur dignissim, sapien enim pulvinar dui, a gravida elit lorem sit amet velit. Suspendisse et malesuada magna, mollis fringilla mauris. Cras sollicitudin eleifend tortor, et congue nulla finibus a. Suspendisse ullamcorper suscipit nulla at mattis. Vivamus commodo, magna ac pulvinar iaculis, lectus dui posuere elit, in finibus urna turpis eget arcu. Morbi auctor sapien non nulla vestibulum, eget malesuada leo condimentum. Integer blandit augue neque.</p>
      </div>
      <!-- COMM BLOCK -- put comm info here ------------------->
      <div class="px-3 pt-3 pb-2 bg-faded mb-3" style="height: 140px; overflow:auto; border-radius: 16px; line-height:1.4;">
        <div class="justify-content-between">
            <span class="text-uppercase text-muted" style="letter-spacing:1px;">
            commissions</span>
            <i>closed</i>
        </div>
        <hr class="my-1" />
        <div class="justify-content-between">
            <span class="text-uppercase text-muted" style="letter-spacing:1px;">
            trades</span>
            <i>closed</i>
        </div>
        <hr class="my-1" />
        <div class="justify-content-between">
            <span class="text-uppercase text-muted" style="letter-spacing:1px;">
            requests</span>
            <i>closed</i>
        </div>
        <hr class="my-1" />
        <div class="justify-content-around">
          <a href="LINK_HERE" class="text-uppercase" style="color:#f2819f; letter-spacing:1px; font-weight: 600;" target="_BLANK">
            Prices</a>
          <a href="LINK_HERE" class="text-uppercase" style="color:#f2819f; letter-spacing:1px; font-weight: 600;" target="_BLANK">
            T.o.S.</a>
          <a href="LINK_HERE" class="text-uppercase" style="color:#f2819f; letter-spacing:1px; font-weight: 600;" target="_BLANK">
            Examples</a>
        </div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="h-100 d-flex flex-lg-column justify-content-between mx-lg-0 mx-n1">
        <!-- DECO IMAGES -- can be any size, will resize/scale to fit -- focus in the center of the image ----->
        <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png');
        background-size: cover; background-position:center; min-height: 175px; border-radius: 16px;" class="mx-lg-0 mx-1 col-lg-auto col mb-3"></div>

        <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/17787301_jsP3mNTAOubMBpC.png');
        background-size: cover; background-position:center; min-height: 175px; border-radius: 16px;" class="mx-lg-0 mx-1 col-lg-auto col mb-3"></div>

        <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/15630132_YmHZEO0ihSpSAHx.png');
        background-size: cover; background-position:center; min-height: 175px; border-radius: 16px;" class="mx-lg-0 mx-1 col-lg-auto col mb-3"></div>

      </div>
    </div>
    <div class="col-12">
      <div class="row no-gutters mx-n2">
        <!-- LINKS HERE --- can be social media links or links to whatever you want -- you can add/remove links they will space themselves -->
        <div class="col px-2 mb-3 text-uppercase" style="letter-spacing: 1px;">
          <a href="LINK_HERE" class="btn btn-block text-white" style="background: #f2819f; border-radius: 16px;">
            link</a>
        </div>
        <div class="col px-2 mb-3 text-uppercase" style="letter-spacing: 1px;">
          <a href="LINK_HERE" class="btn btn-block text-white" style="background: #f2819f; border-radius: 16px;">
            link</a>
        </div>
        <div class="col px-2 mb-3 text-uppercase" style="letter-spacing: 1px;">
          <a href="LINK_HERE" class="btn btn-block text-white" style="background: #f2819f; border-radius: 16px;">
            link</a>
        </div>
        <div class="col px-2 mb-3 text-uppercase" style="letter-spacing: 1px;">
          <a href="LINK_HERE" class="btn btn-block text-white" style="background: #f2819f; border-radius: 16px;">
            link</a>
        </div>
        <!-- CODING CREDIT ------ leave this --------------->
        <div class="col px-2 mb-3 text-uppercase" style="letter-spacing: 1px;">
          <a href="/pinky" class="btn btn-block text-white" style="background: #f2819f; border-radius: 16px;">
            HTML</a>
        </div>
      </div>
    </div>
  </div>
</div>