[F2U] Simple Ref 2

<!--
  Simple Reference 2

    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="container">
  <!--image, any size will work but horizontal based images are recommended, max height is 550 but it shouldn't warp the image anyways-->
  <div class="h-100 d-flex" style="min-height:550px; background:url(https://via.placeholder.com/1500x550) center no-repeat;background-size: contain"></div>
  <!--button to show full res image-->
  <a class="btn btn-primary rounded-0" data-toggle="tooltip" title="CLICK TO SEE FULL RESOLUTION" style="position:absolute; top:15px; right:15px;" href="#" target="_blank"><i class="fas fa-search-plus" style="font-size:large;"></i></a>
</div>
<div class="container-fluid mt-2">
  <!--palette start-->
  <div class="row align-items-center p-1 my-1" style="height:50px;">
      <div style="background-color: #000;" class="col h-100 w-100"></div>
      <div style="background-color: #111;" class="col h-100 w-100"></div>
      <div style="background-color: #222;" class="col h-100 w-100"></div>
      <div style="background-color: #333;" class="col h-100 w-100"></div>
      <div style="background-color: #444;" class="col h-100 w-100"></div>
      <div style="background-color: #555;" class="col h-100 w-100"></div>
      <div style="background-color: #666;" class="col h-100 w-100"></div>
      <div style="background-color: #777;" class="col h-100 w-100"></div>
      <div style="background-color: #888;" class="col h-100 w-100"></div>
      <div style="background-color: #999;" class="col h-100 w-100"></div>
      <!--paste more palette blocks above this line-->
  </div>
  <!--palette end-->
  <div class="row align-items-center">
    <!--notes start, this box WILL scroll-->
    <div class="col-lg-4 p-1">
      <div class="card bg-faded border-0 rounded-0 p-1" style="height:300px; overflow:auto;">
        <h1 class="display-4 text-center text-primary my-2"><i class="fas fa-edit mr-2"></i>Design Notes</h1>
        <ul class="pl-4">
          <li class="mb-1">Write about what's important/ should be remembered when drawing the character</li>
          <li class="mb-1">Ex. notes about their scars, tattoos, piercings, etc.</li>
          <li class="mb-1">Lorem ipsum dolor sit amet</li>
          <li class="mb-1">Consectetur adipiscing elit</li>
          <li class="mb-1">Cras mattis enim in fermentum</li>
        </ul>
      </div>
    </div>
    <!--notes end -->
    <!--personality start, this box WILL scroll-->
    <div class="col-lg-4 p-1">
      <div class="card bg-faded border-0 rounded-0 p-1" style="height:300px; overflow:auto;">
        <h1 class="display-4 text-center text-primary my-2"><i class="fas fa-user mr-2"></i>Personality</h1>
        <ul class="pl-4">
          <li class="mb-1">Write about your character's personality/ how they carry themselves</li>
          <li class="mb-1">Ex. they usually have an angry look on their face, they always look sleepy, they're usually very curious, etc.</li>
          <li class="mb-1">Duis posuere blandit dui vel posuere</li>
          <li class="mb-1">Curabitur iaculis eleifend diam</li>
          <li class="mb-1">Luctus suscipit</li>
        </ul>
      </div>
    </div>
    <!--personality end-->
    <!--drawing idea start, this box WILL scroll-->
    <div class="col-lg-4 p-1">
      <div class="card bg-faded border-0 rounded-0 p-1" style="height:300px; overflow:auto;">
        <h1 class="display-4 text-center text-primary my-2"><i class="fas fa-lightbulb mr-2"></i>To Draw/ Ideas</h1>
        <ul class="pl-4">
          <li class="mb-1">Write about any drawing ideas you plan to draw and/ or ideas to give to the artist drawing them</li>
          <li class="mb-1">Ex. Draw them going out for a walk, draw them being surrounded by kittens, draw them watching a horror movie</li>
          <li class="mb-1">Eros vulputate id</li>
          <li class="mb-1">Vivamus vulputate elit quis urna bibendum</li>
          <li class="mb-1">Suspendisse et nulla vel ligula vulputate cursus</li>
          <li class="mb-1">Curabitur lobortis ligula</li>
        </ul>
      </div>
    </div>
    <!--drawing idea end-->
  </div>
  <!--credits start-->
  <div class="row align-items-center p-1">
    <div class="card bg-faded rounded-0 border-0 p-1 w-100">
      <!--credits about the design here-->
      <p class="text-muted">Credits <span class="mx-2">.</span>
      Owned by @/User <span class="mx-2">.</span>
      Designed by @/User <span class="mx-2">.</span>
      Image by @/User <span class="mx-2">.</span>
      Worth $000</p>
    </div>
  </div>
  <!--credits end-->
</div>
<!-- Code credit -->
<p class="small text-right"><a href="https://toyhou.se/8367499.-f2u-simple-ref-2" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>