<!-----------------------------------------------------------------
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>