Toyhouse Code - Halo

<!-----------------------------------------
-------------------------------------------

'||'  '||'     |     '||'       ..|''||
 ||    ||     |||     ||       .|'    ||
 ||''''||    |  ||    ||       ||      ||
 ||    ||   .''''|.   ||       '|.     ||
.||.  .||. .|.  .||. .||.....|  ''|...|'

 a free character profile code by DUSTCHOMPS

  https://pastebin.com/ZaCD1H4K

-------------------------------------------
-------------------------------------------

<!--CONTAINER-->
<div class="card rounded mx-auto" style="max-width:500px; border:3px solid; overflow:hidden;">

  <!--HEADER-->
  <div class="card-header text-light bg-secondary" style="text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px;">
    NAME
  </div>
  <!--HEADER END-->

  <!--BASICS-->
  <div class="text-light bg-dark" style="width:100%; padding:10px 0; font-size:18px; text-align:center; border-bottom:1px solid;">
    gender | species | sexuality
  </div>
  <!--BASICS END-->

  <!--IMAGE-->
  <div class="card-img w-100 bg-light" style="border-bottom:1px solid;">
    <!--Image URL goes here. Looks best with images 500px wide or larger.-->
    <img src="https://i.imgur.com/k8d2f0w.jpg">
  </div>
  <!--IMAGE END-->

  <!--REFERENCE (copy and paste more of these if needed)-->
    <a href="" class="subheader w-100 text-light bg-dark btn" style="font-size:16px; padding:10px; text-align:center; border-bottom:1px solid;">
      <i class="fas fa-image" style="margin-right:5px;"></i> REFERENCE
    </a>
  <!--REFERENCE END-->

  <!--THEME SONGS BUTTON-->
  <a class="subheader w-100 text-light bg-dark btn" data-toggle="collapse" href="#songs" role="button" style="font-size:16px; text-align:center; padding:10px; border-bottom:1px solid;">
    <i class="fas fa-music" style="margin-right:5px;"></i> THEME SONGS <i class="fas fa-caret-down" style="margin-left:5px;"></i>
  </a>
  <!--THEME SONGS BUTTON END-->

  <!--THEME SONGS CONTENT-->
  <div class="collapse bg-secondary text-light" id="songs" style="">

    <!--Copy or delete as many of these as you need below this line-->

    <!--SONG-->
    <a href="" class="bg-light text-dark w-100 btn" style="display:block; padding:10px; border-bottom:1px solid;">
        <b>Song</b> by Artist <i class="fas fa-caret-right" style="margin-left:5px;"></i>
    </a>
    <!--SONG END-->

    <!--SONG-->
    <a href="" class="bg-light text-dark w-100 btn" style="display:block; padding:10px; border-bottom:1px solid;">
        <b>Song</b> by Artist <i class="fas fa-caret-right" style="margin-left:5px;"></i>
    </a>
    <!--SONG END-->

  </div>
  <!--THEME SONGS CONTENT END-->

  <!--RELATIONSHIPS BUTTON-->
  <a class="subheader w-100 text-light bg-dark btn" data-toggle="collapse" href="#relationships" role="button" style="font-size:16px; padding:10px; text-align:center;">
    <i class="fas fa-heart" style="margin-right:5px;"></i> RELATIONSHIPS <i class="fas fa-caret-down" style="margin-left:5px;"></i>
  </a>
  <!--RELATIONSHIPS BUTTON END-->

  <!--RELATIONSHIPS CONTENT-->
  <div class="collapse bg-light" id="relationships" style="padding:10px 10px 0 10px;">
    <div class="row w-100 mx-auto justify-content-center">

      <!-- Delete or copy as many of these as you need below this line -->

      <!-- Relationship -->
      <div class="col-xs-6 col-sm-4" style="margin-bottom:10px;">
        <!--Link goes here-->
        <a href="" class="card mx-auto bg-dark text-light" style="display:block; text-align:center; width:100%; max-width:150px; border:none; overflow:hidden;">
          <span class="card-header bg-dark text-light" style="text-transform:uppercase; font-size:14px; font-weight:bold; border-radius:5px 5px 0 0;">
            NAME
          </span>
          <!--Image goes here. Looks best with a square image 150x150px or larger-->
          <img src="https://i.imgur.com/CJoRWjO.png" class="card-img rounded-0"><br>
          relationship
        </a>
      </div>
      <!---->

      <!-- Relationship -->
      <div class="col-xs-6 col-sm-4" style="margin-bottom:10px;">
        <!--Link goes here-->
        <a href="" class="card mx-auto bg-dark text-light" style="display:block; text-align:center; width:100%; max-width:150px; border:none; overflow:hidden;">
          <span class="card-header bg-dark text-light" style="text-transform:uppercase; font-size:14px; font-weight:bold; border-radius:5px 5px 0 0;">
            NAME
          </span>
          <!--Image goes here. Looks best with a square image 150x150px or larger-->
          <img src="https://i.imgur.com/CJoRWjO.png" class="card-img rounded-0"><br>
          relationship
        </a>
      </div>
      <!---->

    </div>
  </div>
  <!--RELATIONSHIPS CONTENT END-->

</div>
<!--CONTAINER END-->

<!-- CREDIT (DO NOT REMOVE) --><div style="width:100%; max-width:490px; margin-top:5px; margin-left:auto; margin-right:auto; text-align:right; font-size:11px; margin-bottom:-10px;">code by @dustchomps</div>