Stor8

<!-----------------------------------------------------------------
      MOONSET - Character Profile
      Profile by HTMLobster (noll)
      
      
      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<div class="container p-0 p-sm-4" style="max-width:600px;">
  <div class="row no-gutters">
    <div class="col-sm-auto justify-content-center mb-2 mb-sm-0">
      <div style="width:200px">
        <!-- icon background -->
        <div class="rounded-circle p-2" style="height:200px; width:200px; background:linear-gradient(#B9A9E3,#D380E4,#ED80CB,#EE8278,#F7D662); overflow:hidden; border:1px solid #B2DFE3; position:relative; z-index:1;">
          <!-- icon image - blend mode can be changed but overlay, screen, and luminosity work best - square shape is best -->
          <img style="mix-blend-mode:overlay; max-width:200px; margin-top:-8px; margin-left:-8px;" src="IMG_URL">
        </div>
        <!-- animated stars - delete "fa-pulse" to remove animation -->
        <i class="fas fa-star float-right fa-3x fa-pulse" style="color:#B2DFE3; margin-left:-50px; margin-top:-200px; animation-direction:reverse; animation-duration:2.4s; position:relative; z-index:2;"></i>
        <i class="fas fa-star float-left fa-2x ml-2 fa-pulse" style="margin-top:-40px; color:#B2DFE3; animation-duration:2.5s;  position:relative; z-index:2;"></i>
        <i class="fas fa-star float-left fa-pulse" style="margin-top:-12px; margin-left:35px; color:#B2DFE3; animation-direction:reverse; animation-duration:2.3s;  position:relative; z-index:2;"></i>
      </div>
    </div>
    <!-- right column -->
    <div class="col-sm rounded bg-faded ml-sm-3" style="overflow:hidden; border:1px solid #B2DFE3;">
      <div class="p-2" style="clip-path:polygon(0% 0%, 0% 100%, 100% 0%); background:#B2DFE3; width:50px; height:50px; position:absolute;">
        <div class="bg-faded rounded-circle" style="height:100px; width:100px; margin-top:-8px; margin-left:-8px;"></div>
      </div>
      <!-- text -->
      <div class="px-4 py-3" style="position:relative;">
        <!-- heading -->
        <h1 class="display-4">
          <!-- name -->
          Character Name
          <!-- icon -->
          <span class="float-right"><i class="fas fa-cloud" style="color:#B9A9E3;"></i></span>
        </h1>
        <!-- description - use <br> for line breaks -->
        <div class="text-justify" style="height:125px; overflow:auto;">
          <p>
            <i class="fas fa-leaf" style="color:#B9A9E3;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ipsum sed arcu porta condimentum. Nullam ut volutpat odio, non consequat eros. 
            <br>
            <i class="fas fa-flower" style="color:#B9A9E3;"></i> Morbi a lorem fringilla diam convallis interdum ut sed felis.
          </p>
        </div>
      </div>
      <!-- end text -->
      <div style="clip-path:polygon(0% 100%, 100% 0%, 100% 100%); background:#B2DFE3; width:50px; height:50px; position:absolute; bottom:0; right:0;">
        <div class="bg-faded rounded-circle" style="height:100px; width:100px; margin-left:-50px; margin-top:-50px;"></div>
        <div style="position:absolute; bottom:0; right:3px; font-size:12px;">
          <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by noll" style="color:#000;"><i class="far fa-code"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>