Index card

<!-- Hey this is a very simple code, mainly made to just show off a story or maybe an au! if you want to only have one of the cards then you can just delete the part from the beginning of a character, to the end :D! Also there is a part of this code "text-align-end:justify" this currently does not work, but maybe it will in the future, if it does then you can delete the part that says "border-bottom: 1px solid;"
            Card bg: #ebecf2 -->

    <div class="container p-0" style="max-width:700px;">

<!--- begin character 1 --->

      <div class="container p-1 mb-lg-1 justify-content" style="border-radius: 10px; background-color:#ebecf2; text-align: center; color:#000000">

              <div class="container p-1 mb-lg-1" style="border-radius: 15px; text-align: center; color:#000000">

        <p class="mt-0 mb-0" style="font-size: 40px; text-align:left; font-family: Baskerville Old Face, serif;"> Character name </p>

        <i class="fal fa-heart fa-5x" style="position: absolute; top: 1px; right: 1px; opacity: .2; transform: rotate(50deg);"></i>

         <hr class="mt-0 mb-0" style="height:1px; border-width:0;background-color:#ef679a">

  <img class="float-right align-self-center mb-3 mb-lg-0" style="width: 200px; border-radius: 10px; transform: rotate(-15deg); display: block;"

    src="IMG SRC">

        <i class="fas fa-paperclip fa-4x" style="position:absolute; left:520px; top:45px; transform: rotate(-95deg); color:#c0c0c0"></i>

        <p class="mb-0" style="text-decoration: underline; text-decoration-color: #50a2cb;  text-align: justify;  text-align-last:justify; border-bottom: 1px solid;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed. Dictum fusce ut placerat orci nulla pellentesque dignissim. Id nibh tortor id aliquet lectus proin nibh nisl. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Faucibus et molestie ac feugiat. Vitae ultricies leo integer malesuada. Aliquam eleifend mi in nulla.
    </p>

        <p class="mb-0"  style="text-decoration-color: #50a2cb;  text-align: justify; text-align-last:justify; border-bottom: 1px solid">.</p>

        <p class="mb-0" style="text-decoration: underline; text-decoration-color: #50a2cb;  text-align: justify;  text-align-last:justify; border-bottom: 1px solid;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Vestibulum lorem sed risus ultricies. Id ornare arcu odio ut sem nulla pharetra. Blandit massa enim nec dui. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Odio euismod lacinia at quis risus sed vulputate.
    </p>
    </div>
      </div>

<!--- end character 1, begin character 2 --->

         <div class="container p-1 mb-lg-1 justify-content" style="border-radius: 15px; background-color:#ebecf2; text-align: center; color:#000000">
          <div class="container p-1 mb-lg-1" style="border-radius: 10px; background-color:#ebecf2; text-align: center; color:#000000">

        <p class="mt-0 mb-0" style="font-size: 40px; text-align:right; font-family: Baskerville Old Face, serif;"> Character name </p>

        <i class="fal fa-heart fa-5x" style="position: absolute; top: 1px; left: 1px; opacity: .2; transform: rotate(-50deg);"></i>

         <hr class="mt-0 mb-0" style="height:1px; border-width:0;background-color:#ef679a">

  <img class="float-left align-self-center mb-3 mb-lg-0" style="width: 200px; border-radius: 10px; transform: rotate(15deg); display: block;"

    src="IMG SRC">

        <i class="fas fa-paperclip fa-4x" style="position:absolute; right:520px; top:45px; transform: rotate(15deg); color:#c0c0c0"></i>

        <p class="mb-0" style="text-decoration: underline; text-decoration-color: #50a2cb;  text-align: justify;  text-align-last:justify; border-bottom: 1px solid;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed. Dictum fusce ut placerat orci nulla pellentesque dignissim. Id nibh tortor id aliquet lectus proin nibh nisl. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Faucibus et molestie ac feugiat. Vitae ultricies leo integer malesuada. Aliquam eleifend mi in nulla.
    </p>

        <p class="mb-0"  style="text-decoration-color: #50a2cb;  text-align: justify; text-align-last:justify; border-bottom: 1px solid">.</p>

        <p class="mb-0" style="text-decoration: underline; text-decoration-color: #50a2cb;  text-align: justify;  text-align-last:justify; border-bottom: 1px solid;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Vestibulum lorem sed risus ultricies. Id ornare arcu odio ut sem nulla pharetra. Blandit massa enim nec dui. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Odio euismod lacinia at quis risus sed vulputate.
    </p>

    </div>
      </div>

      <!--- end character 2, add more after this line --->

        </div>
        <!--- credit, please don't delete, feel free to move if you'd like--->

    <a class="tooltipster pull-right mr-2" href="https://toyhou.se/Crowzii"><i class="fas fa-lemon fa-fw text-center my-auto" style="color: #F8DDB0;"></i></a>