Freebie - BS Carrd

<!-- main background image here --- use a very big/high res image -->
<div style="background-image: url('IMG_URL');
background-size: cover; background-position: center; max-width: 1250px; border-radius: 1em;" class="container-fluid py-5 px-md-5 px-4 my-5">
<div class="container-fluid py-md-5 py-4 px-0" style="max-width: 600px;">
<div style="font-size: 10.5pt; letter-spacing: .25px; border-radius: 1em;" class="card d-block p-md-5 p-4 text-center">
<div class="row no-gutters justify-content-center">
  <div class="col-md-auto px-lg-2 mb-md-0 mb-3">

    <!-- avatar icon here -->
    <img src="IMG_URL"
    class="rounded" style="max-height: 150px;">

  </div>
  <div class="col-md-auto"><div class="h-100 w-100 flex-column justify-content-center align-items-center">
    <div class="mb-2"><h1 style="font-size: 2em; letter-spacing: 1px;" class="text-primary text-uppercase">

      <!-- name/title here -->
      Your Name Here

    </h1></div>
    <div><h4 style="font-weight:400; letter-spacing: 1px;" class="text-uppercase mb-0">

      <!-- subtitle adjectives here --->
      Age | Gender | Adj

    </h4></div>
  </div></div>
</div>
<hr class="w-50 bg-primary my-4">
<div class="text-uppercase mb-4" style="letter-spacing: 1px;">

  <!-- page links -- i put in some random examples for demo but you can customize these links to be whatever you want -->
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    About
  </a>
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    FAQ
  </a>
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    Commissions
  </a>
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    Queue
  </a>
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    Trades
  </a>
  <a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
    RP Info
  </a>
</div>

  <!-- small about blurb here --------------->
  <p>Write a SMALL blurb here. This box grows with content, it does not scroll. The buttons above are all links. This layout is inspired by carrd, it's meant to serve a quick & easy hub for creators with lots of pages/social media sites!</p>

<hr class="w-50 mt-4 mb-md-5 mb-4 bg-primary">
  <!-- SOCIAL MEDIA LINKS -- use "font awesome" icons -- erase or add icons & links based on what you need -->
  <a href="TWITTER_LINK" target="_BLANK">
    <i class="fab fa-twitter fa-fw fa-2x "/>
  </a>
  <a href="DEVIANTART_LINK" target="_BLANK">
    <i class="fab fa-deviantart fa-fw fa-2x "/>
  </a>
  <a href="FA_LINK" target="_BLANK">
    <i class="fas fa-paw fa-fw fa-2x "/>
  </a>
  <a href="YOUTUBE_LINK" target="_BLANK">
    <i class="fab fa-youtube fa-fw fa-2x "/>
  </a>
  <a href="TWITCH_LINK" target="_BLANK">
    <i class="fab fa-twitch fa-fw fa-2x "/>
  </a>
  <a href="CURIOUSCAT_LINK" target="_BLANK">
    <i class="fas fa-cat fa-fw fa-2x "/>
  </a>

  <!-- background image credit ---->
  <a href="CREDIT_LINK" target="_BLANK">
    <i class="fas fa-image fa-fw fa-2x "/>
  </a>

  <!-- coding credit -- please leave this link -->
  <a href="/Pinky"  target="_BLANK">
    <i class="fas fa-code fa-fw fa-2x "/>
  </a>

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