layout: unlisted

<div class="container">
  <div class="col">
    <div class="card bg-faded border-0">

      <!-- header section; your name, pronouns + other quick info goes here -->
      <div class="card-header">
        <!-- username -->
        <h1 class="display-2 text-primary text-center" style="margin: 4px;">username</h1>
        <!-- quick info, eg. pronouns, age, etc -->
        <ul class="text-secondary text-center" style="margin: auto;">
          <li style="display: inline-block; margin-right: 14px;">quick info</li>
          <li style="display: inline-block; margin-right: 14px;">quick info</li>
          <li style="display: inline-block; margin-right: 14px;">quick info</li>
          <li style="display: inline-block;">quick info</li>
        </ul>
      </div>

      <!-- main body text- put some info about yourself here!! -->
      <div class="container" style="padding: 1.5em 3em;">
        <!-- short bio/about me section -->
        <div class="row">
          <div class="col">
            <!-- pfp, not visible on mobile -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="rounded-circle d-none d-sm-block" style="width: 12em; float: left; margin-right: 1.5em;">
            <!-- about me -->
            <h1 class="text-secondary"><i class="fas fa-heart"></i> about me</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>

          <!-- extra links -->
          <div class="col-sm-3">
          <hr class="d-sm-none" style="width: 50%;"> <!-- this only shows on mobile!! -->
            <ul>
              <li style="list-style-type: none; margin: 0.5em;"><a href="#" class="btn btn-primary"><i class="fad fa-code"></i> link</a></li>
              <li style="list-style-type: none; margin: 0.5em;"><a href="#" class="btn btn-primary"><i class="fas fa-user"></i> link</a></li>
              <li style="list-style-type: none; margin: 0.5em;"><a href="#" class="btn btn-primary"><i class="fad fa-link"></i> link</a></li>
            </ul>
          </div>
        </div>
        <hr style="width: 50%;">

        <!-- art status and comics/self-promo/other info -->
        <div class="row">

          <!-- art status -->
          <div class="col-sm-6">
            <h1 class="text-secondary"><i class="fad fa-pencil-paintbrush"></i> art status</h1>
            <table class="table table-bordered table-hover table-sm">
              <tbody>
                <tr>
                  <th scope="row">commissions:</th>
                  <td><a href="#">open/closed/ask</a></td>
                </tr>
                <tr>
                  <th scope="row">art trades:</th>
                  <td><a href="#">open/closed/ask</a></td>
                </tr>
                <tr>
                  <th scope="row">requests:</th>
                  <td><a href="#">open/closed/ask</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr class="d-sm-none" style="width: 50%;"> <!-- this only shows on mobile!! -->

          <!-- comics/self-promo/other info section,, I used this for info on my comics but you can use it however you'd like <3 -->
          <div class="col-sm-6">
            <h1 class="text-secondary"><i class="fad fa-books"></i> comics/self-promo/other info</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
        </div>
        <hr style="width: 50%;">

        <!-- social media links!  delete/change them as you feel is needed -->
        <div class="row" style="margin: auto; text-align: center; width: 60%;">
          <!-- instagram -->
          <div class="col"><a href="#" class="text-secondary"><i class="fab fa-instagram fa-2x"></i></a></div>
          <!-- twitch -->
          <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitch fa-2x"></i></a></div>
          <!-- twitter -->
          <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitter fa-2x"></i></a></div>
          <!-- tumblr -->
          <div class="col"><a href="#" class="text-secondary"><i class="fab fa-tumblr fa-2x"></i></a></div>
          <!-- youtube -->
          <div class="col"><a href="#" class="text-secondary"><i class="fab fa-youtube fa-2x"></i></a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-block" style="width: 99%; margin: auto;">
    <!-- this is the code credit! feel free to move or re-style it, but please keep it in here somewhere -->
    <p style="text-align: right; line-height: 0px;">profile code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
</div>
</div>