[F2U] Simple Card

<!--
  Simple Card

    Free to use & free to edit
    Ripping and "Frankenstein-ing" code is allowed
    Credit not necessary but appreciated
    Feel free to message me for any help/ questions

  Code by @CanineKing
-->
<div class="containter">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <!--top section-->
      <ul class="list-unstyled mb-1">
        <li class="d-flex justify-content-between align-items-center display-1" style="font-size:26px;">
          <span>Name<span class="mx-2">.</span>Age<span class="mx-2">.</span>Gender (pronouns/ pronouns)</span>
          <span class="text-muted">@/Username</span> <!-- add the / before your username to not show up as a ping-->
        </li>
      </ul>
      <!--top section END-->
      <div class="card bg-faded p-3">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-md-6 p-1">
              <!--icon image-->
              <img class="d-block mx-auto rounded-circle" style="width:240px;" src="IMGURL">
            </div>
            <div class="col-md-6 p-1">
              <!--social media links-->
              <ul class="list-unstyled mb-0">
                <li class="d-flex justify-content-between align-items-center" style="font-size:18px;">
                  <span><a href="#"><i class="fab fa-tumblr"></i></a></span>
                  <span><a href="#"><i class="fab fa-twitter"></i></a></span>
                  <span><a href="#"><i class="fab fa-deviantart"></i></a></span>
                  <span><a href="#"><i class="fab fa-instagram"></i></a></span>
                </li>
              </ul>
              <!--social media links END-->
              <hr class="my-1">
              <!--art status-->
              <ul class="list-unstyled mb-0">
                <!--i usually mean like, "Active", "On Hiatus", "Semi-Hiatus"-->
                <li class="d-flex justify-content-between align-items-center" style="font-size:18px;">
                  <span class="text-muted"><i class="fas fa-user mr-2"></i>Status</span>
                  <span>On hiatus</span>
                </li>
              </ul>
              <hr class="my-1">
              <!--art status open/closed-->
              <!--
                i'm using bootstrap colours, and i use the dark theme, but here was what the colours are
                "text-success" = green coloured
                "text-warning" = yellow/ orange colour
                "text-danger" = red colour
              -->
              <ul class="list-unstyled mb-1">
                <li class="d-flex justify-content-between align-items-center">
                  <span class="text-muted">Commissions</span>
                  <span class="text-success">Open</span>
                </li>
                <li class="d-flex justify-content-between align-items-center">
                  <span class="text-muted">Trades</span>
                  <span class="text-warning">On hold</span>
                </li>
                <li class="d-flex justify-content-between align-items-center">
                  <span class="text-muted">Requests</span>
                  <span class="text-danger">Closed</span>
                </li>
              </ul>
              <!--art status END-->
              <!--button links-->
              <a class="btn btn-outline-primary btn-block btn-sm" href="#"><i class="fas fa-dollar-sign mr-2"></i>Commissions</a>
              <a class="btn btn-outline-primary btn-block btn-sm my-1" href="#"><i class="fas fa-exchange-alt mr-2"></i>Trades</a>
              <a class="btn btn-outline-primary btn-block btn-sm" href="#"><i class="fas fa-folder mr-2"></i>UFT/ UFS Folder</a>
              <!-- button links end-->
            </div>
          </div>
        </div>
      </div>
      <!--credit-->
      <p class="small text-right"><a href="https://toyhou.se/6919639.-f2u-simple-card" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>
    </div>
  </div>
</div>