Stor8

<!-----------------------------------------------------------------
      NOTEBOOK - Character 
      Profile by HTMLobster (noll)
      
      
      TOS:
      Do not remove my credit. It may be edited or moved, but must be accessible on the page.
      You may edit code/frankenstein with others as long as their TOS/Rules allows.
      Turn off WYSIWYG and turn on Code Editor in settings. WYSIWYG will break the code. DO NOT USE IT AT ALL.
      Do not redistribute (reupload, reshare, etc.). Do not redistribute edits.
      By using this code you agree to these rules.
------------------------------------------------------------------>
<div class="container p-0" style="max-width:500px;">
  <div class="row no-gutters">
    <!-- notebook spirals -->
    <div class="col-auto align-items-center hidden-xs-down" style="font-size:4.5em; line-height:0; z-index:2;">
      <div>
        <div>
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
        <div style="margin-top:-25px;">
          <i class="fas fa-minus"></i>
        </div>
      </div>
    </div>
    <div class="col-12 hidden-sm-up" style="font-size:4.5em; line-height:0; z-index:2;">
      <div class="d-flex justify-content-between mx-4">
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
        <i class="fas fa-minus fa-rotate-90" style="width:0;"></i>
      </div>
    </div>
    <!-- notebook spirals end -->
    <!-- content -->
    <div class="col bg-faded ml-sm-n4 mt-n1 mt-sm-0">
      <div class="p-3 pl-sm-5 pt-4 pt-sm-3">
        <!-- Heading -->
        <h1 class="text-center" style="font-family:'Brush Script MT'; font-size:3em;">Character Name</h1>
        <!-- row 1 -->
        <div class="row no-gutters">
          <!-- photo -->
          <div class="col-auto mx-auto bg-white p-1 text-center" style="transform:rotate(-1deg);">
            <!-- tape -->
            <div class="p-2 mx-auto bg-secondary" style="width:50%; margin-top:-10px; opacity:.7; z-index:2; position:relative;"></div>
            <!-- photo image - square or portrait size work best -->
            <img style="height:150px; margin-top:-5px;" alt="Describe photo." src="IMG_URL">
            <!-- date -->
            <p class="text-dark" style="font-family:'Brush Script MT', 'Brush Script Std', cursive; font-size:1.2em;">
              1.20.21
            </p>
          </div>
          <!-- photo end -->
          <!-- basics -->
          <div class="col-sm ml-3 mr-3 mr-sm-1">
            <div class="row no-gutters">
              <div class="col">Name</div>
              <div class="col text-right">name</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Age</div>
              <div class="col text-right">XX years</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Gender</div>
              <div class="col text-right">gender</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Pronouns</div>
              <div class="col text-right">pronouns</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Sexuality</div>
              <div class="col text-right">sexuality</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Species</div>
              <div class="col text-right">species</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Height</div>
              <div class="col text-right">XX cm/XX in</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Weight</div>
              <div class="col text-right">XX lbs/XX kg</div>
            </div>
            <div class="row no-gutters">
              <div class="col">Occupation</div>
              <div class="col text-right">job</div>
            </div>
          </div>
          <!-- basics end -->
        </div>
        <!-- row 1 end -->
        <!-- heading -->
        <h1 class="text-center mt-2 mb-0" style="font-family:'Brush Script MT', 'Brush Script Std', cursive; font-size:3em;">Notes</h1>
        <!-- notes -->
        <ul class="fa-ul mb-0 mr-3 mr-sm-0">
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis sem in imperdiet ultricies.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Ut velit velit, imperdiet nec imperdiet non, placerat eget est. Quisque non aliquam mauris, nec porta tortor.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Etiam vitae metus tellus. Donec eu imperdiet justo.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Sed et porta augue, quis volutpat sapien. Praesent vulputate, enim ut scelerisque consectetur, ipsum lectus lobortis sapien, sit amet lacinia magna odio in quam.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Nullam tincidunt, nibh vel fringilla suscipit, ex lacus aliquam augue, et pellentesque libero lacus eu orci.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Nunc quis finibus leo, vel cursus erat. Quisque rhoncus viverra tempor.
          </li>
          <li>
            <!-- symbol -->
            <span class="fa-li"><i class="fas fa-star"></i></span>
            <!-- note -->
            Morbi metus augue, placerat et nunc ac, ultricies aliquet elit. Sed nec nulla in ex sollicitudin cursus.
          </li>
        </ul>
        <!-- notes end -->
      </div>
    </div>
    <!-- content end -->
  </div>
  <div class="text-center mt-3">
    <a href="https://toyhou.se/HTMLobster">
      <i class="fas fa-lobster"></i>
    </a>
  </div>
</div>