20. loose-leaf

<!-- sample text from: http://www.perseus.tufts.edu/hopper/text?doc=Perseus%3Atext%3A1999.02.0028%3Abook%3D10%3Acard%3D519 -->
<!-- placeholder images from unsplash.com -->

<div class="card m-auto text-dark" style="max-width: 600px; border: 2px solid #cfc490; border-radius: 0; background-color: #EFE5D6; box-shadow: 25px 25px #cfc490;">

  <!-- header / character name -->
  <div class="card-header border-0 pb-3" style="background-color: #EFE5D6;">
    <!-- character name -->
    <div style="position: relative;">
      <i class="fas fa-flask-potion fa-5x" style="color: #E4D5C4; position: absolute; z-index: 0;"></i>
      <h1 class="display-3 pt-3 ml-4" style="font-weight: bold; position: relative;">character name</h1>
    </div>
  </div>


  <!-- main content -->
  <div class="card-block pt-0 pb-0" style="overflow: auto; height: 625px; ">

    <!-- the basics -->
    <h3 class="pt-1" style="border-bottom: 2px dotted #9f76a1;"><b>the basics</b></h3>
    <table class="table table-sm border-0 m-1" style="background-color: #E4D5C4; border-radius: 5px;">

      <!-- first field -->
      <tr style="border-bottom: 1px dotted #9f76a1;">
        <td class="p-1 pl-2" style="color: #9f76a1;"><b>name</b></td>
        <td class="p-1 pl-2">character name</td>
      </tr>

      <!-- second field -->
      <tr style="border-bottom: 1px dotted #9f76a1;">
        <td class="p-1 pl-2 pl-2" style="color: #9f76a1;"><b>age</b></td>
        <td class="p-1 pl-2">age</td>
      </tr>

      <!-- third field -->
      <tr style="border-bottom: 1px dotted #9f76a1;">
        <td class="p-1 pl-2 pl-2" style="color: #9f76a1;"><b>pronouns</b></td>
        <td class="p-1 pl-2">pronouns</td>
      </tr>

      <!-- last field -->
      <!-- this *needs* to be the last one, so if you want more of these, copy & paste one of the fields above, not this one! -->
      <tr>
        <td class="p-1 pl-2" style="color: #9f76a1;"><b>theme song</b></td>
        <td class="p-1 pl-2"><a href="#" style="color: #9f76a1;"><i class="fas fa-music-alt"></i><i class="fas fa-music"></i><i class="fas fa-music-alt"></i></a></td>
      </tr>
    </table>
    <hr class="border-0">

    <!-- summary / other simple text-based field -->
    <h3 style="border-bottom: 2px dotted #9f76a1;"><b>summary</b></h3>
    <p>
      Time gliding by without our knowledge cheats us, and nothing can be swifter than the years.  That son of sister and grandfather, who was lately hidden in his parent tree, just lately born, a lovely baby-boy is now a youth, now man more beautiful than during growth. He wins the love of Venus and so avenges his own mother's passion.<br><br>
      For while the goddess' son with quiver held on shoulder, once was kissing his loved mother, it chanced unwittingly he grazed her breast with a projecting arrow.
    </p>

    <!-- moodboard -->
    <h3 style="border-bottom: 2px dotted #9f76a1;"><b>moodboard</b></h3>
    <div class="container p-1">
      <div class="row no-gutters">

        <!-- image 1 -->
        <div class="col-3">
          <div class="card" style="background-image: url(https://images.unsplash.com/photo-1607851673372-d3a481942bf6); background-size: cover; background-position; center; border-radius: 0; transform: rotate(3deg); border: 2px solid #EFE5D6;">
            <div style="padding-top: 100%;"></div>
            <!-- image credit -->
            <a href="https://unsplash.com/photos/cBkHr5RuooA" data-toggle="tooltip" title="image from unsplash"><i class="far fa-square text-light m-1"></i></a>
          </div>
        </div>

        <!-- image 2 -->
        <div class="col-3">
          <div class="card" style="background-image: url(https://images.unsplash.com/photo-1453224475513-988475ec1e59); background-size: cover; background-position; center; border-radius: 0; transform: rotate(-3deg); border: 2px solid #EFE5D6;">
            <div style="padding-top: 100%;"></div>
            <!-- image credit -->
            <a href="https://unsplash.com/photos/D6sF071Cmds" data-toggle="tooltip" title="image from unsplash"><i class="far fa-square text-light m-1"></i></a>
          </div>
        </div>

        <!-- image 3 -->
        <div class="col-3">
          <div class="card" style="background-image: url(https://images.unsplash.com/photo-1533801956226-12d07083ca61); background-size: cover; background-position; center; border-radius: 0; transform: rotate(5deg); border: 2px solid #EFE5D6;">
            <div style="padding-top: 100%;"></div>
            <!-- image credit -->
            <a href="https://unsplash.com/photos/AITIEgEp9Cs" data-toggle="tooltip" title="image from unsplash"><i class="far fa-square text-light m-1"></i></a>
          </div>
        </div>

        <!-- image 4 -->
        <div class="col-3">
          <div class="card" style="background-image: url(https://images.unsplash.com/photo-1532348333249-1d0a7f01a0c5); background-size: cover; background-position; center; border-radius: 0; transform: rotate(-5deg); border: 2px solid #EFE5D6;">
            <div style="padding-top: 100%;"></div>
            <!-- image credit -->
            <a href="https://unsplash.com/photos/iLEwA5UH8mE" data-toggle="tooltip" title="image from unsplash"><i class="far fa-square text-light m-1"></i></a>
          </div>
        </div>

      </div>
    </div>
    <hr class="border-0">

    <!-- skills and abilities -->
    <h3 style="border-bottom: 2px dotted #9f76a1;"><b>skills & abilities</b></h3>

    <!-- skill 1 -->
    <p class="p-2 m-1" style="background-color: #E4D5C4; border-radius: 5px;">
      <b>skill name</b>

      <!-- skill proficiency rating (stars) : "fas fa-star" will give you a full star, while "far fa-star" will give you an empty one -->
      <span style="color: #9f76a1; float: right;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
      <br>

      <!-- skill description -->
      Instantly the wounded goddess pushed her son away; but the scratch had pierced her deeper than she thought and even Venus was at first deceived.
    </p>

    <!-- skill 2 -->
    <p class="p-2 m-1" style="background-color: #E4D5C4; border-radius: 5px;">
      <b>skill name</b>

      <!-- skill proficiency rating (stars) : "fas fa-star" will give you a full star, while "far fa-star" will give you an empty one -->
      <span style="color: #9f76a1; float: right;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></span>
      <br>

      <!-- skill description -->
      Delighted with the beauty of the youth, she does not think of her Cytherian shores and does not care for Paphos, which is girt by the deep sea, nor Cnidos, haunts of fish, nor Amathus far-famed for precious ores.
    </p>

    <!-- skill 3 -->
    <p class="p-2 m-1" style="background-color: #E4D5C4; border-radius: 5px;">
      <b>skill name</b>

      <!-- skill proficiency rating (stars) : "fas fa-star" will give you a full star, while "far fa-star" will give you an empty one -->
      <span style="color: #9f76a1; float: right;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i></span>
      <br>

      <!-- skill description -->
      Venus, neglecting heaven, prefers Adonis to heaven, and so she holds close to his ways as his companion, and forgets to rest at noon-day in the shade, neglecting care of her sweet beauty.
    </p>
  </div>


  <!-- code credit / footer -->
  <div class="card-footer border-0 pt-2" style="background-color: #EFE5D6;">
    <p class="text-center" style="color: #9f76a1;"><i>code by <a href="https://toyhou.se/snail-legs" style="color: #9f76a1; text-decoration: underline;">snail-legs</a></i></p>
  </div>
</div>
<hr class="border-0 p-1">