Freebie - Custom Carrd

<!------ Default focal color is: #999
-------- use find & replace to quickly swap out color
-------->

<!-- 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;">

<!-- content body color + font color here --------------------------->
<div style="background-color: rgba(255,255,255,.875); color: #343a40;
font-size: 10.5pt; letter-spacing: .25px; border-radius: 1em;" class="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="AVATAR_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="color: #999; font-size: 2em; letter-spacing: 1px;" class="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 style="border-color: #999;" class="w-50 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="background: #999; border-radius: .5em;" class="btn text-white d-inline-block m-1">
    About
  </a>
  <a href="LINK_HERE" style="background: #999; border-radius: .5em;" class="btn text-white d-inline-block m-1">
    FAQ
  </a>
  <a href="LINK_HERE" style="background: #999; border-radius: .5em;" class="btn text-white d-inline-block m-1">
    Commissions
  </a>
  <a href="LINK_HERE" style="background: #999; border-radius: .5em;" class="btn text-white d-inline-block m-1">
    Queue
  </a>
  <a href="LINK_HERE" style="background: #999; border-radius: .5em;" class="btn text-white d-inline-block m-1">
    Trades
  </a>
  <a href="LINK_HERE" style="background: #999; border-radius: .5em;" class="btn text-white 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 style="border-color: #999;" class="w-50 mt-4 mb-md-5 mb-4">
  <!-- SOCIAL MEDIA LINKS -- use "font awesome" icons -- erase or add icons & links based on what you need -->
  <a href="TWITTER_LINK" style="color: #999;" target="_BLANK">
    <i class="fab fa-twitter fa-fw fa-2x "/>
  </a>
  <a href="DEVIANTART_LINK" style="color: #999;" target="_BLANK">
    <i class="fab fa-deviantart fa-fw fa-2x "/>
  </a>
  <a href="FA_LINK" style="color: #999;" target="_BLANK">
    <i class="fas fa-paw fa-fw fa-2x "/>
  </a>
  <a href="YOUTUBE_LINK" style="color: #999;" target="_BLANK">
    <i class="fab fa-youtube fa-fw fa-2x "/>
  </a>
  <a href="TWITCH_LINK" style="color: #999;" target="_BLANK">
    <i class="fab fa-twitch fa-fw fa-2x "/>
  </a>
  <a href="CURIOUSCAT_LINK" style="color: #999;" target="_BLANK">
    <i class="fas fa-cat fa-fw fa-2x "/>
  </a>

  <!-- background image credit ---->
  <a href="CREDIT_LINK" style="color: #999;" target="_BLANK">
    <i class="fas fa-image fa-fw fa-2x "/>
  </a>

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

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