<!--
[ FROSTBITE ] - F2U, CHARACTER PROFILE CODE
#001 CUSTOM PALETTE
accent : #fff
light : #8faebf
mute : #bbd1ed
text : #7b9aab
background : #d0e1f5
#002 TERMS
do not redistribute
do not remove credit
you may frankenstein for personal use with credit
you may edit however you'd like for personal use
#003 TIPS
turn off WYSIWYG and turn on Code Editor
{ ctrl + F, *search*, +, *Replace with*, All } to change colors
> find 'snowflake' to change the icons !!
ask questions in 'https://toyhou.se/~forums/16.htmlcss-graphics'
-->
<div class="card border-0 my-4 mx-auto p-2" style="max-width:800px; background-color:#d0e1f5; border-radius:20px; color:#7b9aab">
<div class="row no-gutters">
<!-- SIDE BAR -->
<div class="col-lg-4 order-lg-2 order-sm-2 p-2 sticky-top">
<div class="sticky-top" style="height:500px">
<span style="position:absolute; top:25px; left:5px; font-size:58px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
<span style="position:absolute; top:100px; left:30px; font-size:30px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:20s"></i></span>
<span class="hidden-md-down" style="position:absolute; bottom:70px; right:80px; font-size:30px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:20s"></i></span>
<span class="hidden-md-down" style="position:absolute; bottom:20px; right:5px; font-size:80px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
<!-- MUSIC PLAYER -->
<div class="card bg-transparent border-0 align-items-center justify-content-center overflow-hidden" style="height:80px; color:#fff; font-size:30px">
<i class="fa-duotone fa-compact-disc fa-spin"></i>
</div>
<div class="w-100" style="position:relative; margin-top:-65px; margin-bottom:-25px; right:0px; height:80px; overflow:hidden">
<!-- INSERT YOUTUBE
> do not remove 'https://www.youtube.com/embed/' and '?controls=0'
> change 'w0FkoVriWCg' with your url behind 'https://www.youtube.com/watch?v='
-->
<iframe src="
https://www.youtube.com/embed/w0FkoVriWCg?controls=0
" class="w-100" style="position:absolute; top:-155px; left:0; min-height:400px; opacity:.0001" frameborder="0">
</iframe>
</div>
<!-- FOCAL IMAGE -->
<div class="card p-2 bg-transparent" style="border: 3px solid #fff; min-height:400px; border-radius:20px">
<img class="d-block" style="min-height:380px; border-radius:17px; object-fit: cover" src="
IMAGE_URL
">
</div>
<!-- CREDITS : DO NOT REMOVE -->
<div class="card border-0 bg-transparent justify-content-center align-items-center pt-3" style="height:5%">
<a class="text-center tooltipster" title="code by shimmerica" href="https://toyhou.se/19293838." style="color:#fff"><i class="fa-light fa-martini-glass-citrus"></i></a></div>
</div>
</div>
<!-- MAIN CONTAINER -->
<div class="col-lg-8 order-lg-1 order-sm-2">
<!-- NAME -->
<div class="p-2 text-center">
<hr class="my-1" style="border-top: 2px solid #fff; width:70%">
<p class="text-uppercase font-weight-bold mb-0" style="font-family:georgia; font-size:35px; letter-spacing:3px">
name
<span style="position:absolute; top:0px; left:10px; font-size:45px; color:#fff"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:20s"></i></span>
<span style="position:absolute; top:35px; left:55px; font-size:25px; color:#fff"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
<span style="position:absolute; top:30px; right:5px; font-size:50px; color:#fff"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:15s"></i></span>
<span style="position:absolute; top:15px; right:50px; font-size:20px; color:#fff"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:10s"></i></span>
</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:70%">
<!-- QUOTE -->
<p class="px-5 mb-0 mt-3 font-italic" style="color:#8faebf; font-family:courier new">
quote
<span class="pull-left" style="color:#fff"><i class="fa-duotone fa-quote-left"></i></span>
<span class="pull-right" style="color:#fff"><i class="fa-duotone fa-quote-right"></i></span>
</p>
</div>
<!-- BASIC INFO -->
<div class="card bg-transparent p-1 mx-4 my-2" style="border: 2px solid #bbd1ed; border-radius:30px; color:#fff; letter-spacing:1px">
<div class="card border-0 text-center p-1" style="background-color:#bbd1ed; border-radius:30px">
name
|
pro/nouns
|
age
|
race/species
</div>
</div>
<div class="p-3">
<span class="float-left justify-content-center align-items-center mr-2" style="font-family:georgia; font-size:25px; color:#fff; height:50px; width:50px; background-color:#8faebf">
<span class="float-left p-1 justify-content-center align-items-center text-uppercase" style="font-family:georgia; font-size:25px; color:#fff; height:40px; width:40px; background-color:#8faebf; border: 2px solid #fff">
<!-- first letter of the text goes here -->
L
</span>
</span>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam donec adipiscing tristique risus nec feugiat in. Facilisi cras fermentum odio eu feugiat pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vitae turpis massa sed elementum tempus. Proin sed libero enim sed. Lectus sit amet est placerat in egestas erat imperdiet sed. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Nulla porttitor massa id neque aliquam vestibulum. Sed libero enim sed faucibus turpis in eu mi bibendum.
</p>
<p>
this will expand with content !! this is where basic info or summary of your character goes. feel free to fill it however you'd like. i recommend keeping this concise as a 'tl;dr' section.
</p>
</div>
<!-- TYPE -->
<div class="card bg-transparent p-1 mx-4 my-2" style="border: 2px solid #bbd1ed; border-radius:30px; color:#fff; letter-spacing:1px">
<div class="card border-0 text-center p-1" style="background-color:#bbd1ed; border-radius:30px">
mbti
|
alignment
|
zodiac
|
blood type
</div>
</div>
<!-- STATS -->
<div class="row no-gutters">
<div class="col-lg-6 p-3">
<p class="my-0 text-left" style="font-variant:small-caps">reserved</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">outgoing</p>
<p class="my-0 text-left" style="font-variant:small-caps">deceitful</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">sincere</p>
<p class="my-0 text-left" style="font-variant:small-caps">cowardly</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">courageous</p>
</div>
<div class="col-lg-6 p-3">
<p class="my-0 text-left" style="font-variant:small-caps">ignorant</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">intelligent </p>
<p class="my-0 text-left" style="font-variant:small-caps">lazy</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">diligent</p>
<p class="my-0 text-left" style="font-variant:small-caps">cooperative</p>
<div class="progress" style="height:3px; overflow:visible; background:#bbd1ed; font-size:15px">
<div class="progress-bar" style="background:#7b9aab; height:3px; width:
50%
">
<i class="fa-solid fa-snowflake pull-right" style="color:#fff; margin-top:-4px"></i>
</div>
</div>
<p class="my-0 text-right" style="font-variant:small-caps">lone wolf</p>
</div>
</div>
<!-- ELABORATIVE PERSONALITY -->
<div class="p-3">
<span class="float-left justify-content-center align-items-center mr-2" style="font-family:georgia; font-size:25px; color:#fff; height:50px; width:50px; background-color:#8faebf">
<span class="float-left p-1 justify-content-center align-items-center text-uppercase" style="font-family:georgia; font-size:25px; color:#fff; height:40px; width:40px; background-color:#8faebf; border: 2px solid #fff">
<!-- first letter of the text goes here -->
e
</span>
</span>
<p>
xplain in one or few paragraphs about your character's personality. some suggestions are how they treat others, what they think of themselves, how they react to certain things, and stuff like that. this is a good way to describe and elaborate a character's personality. container will grow, so go wild !!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam donec adipiscing tristique risus nec feugiat in. Facilisi cras fermentum odio eu feugiat pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vitae turpis massa sed elementum tempus. Proin sed libero enim sed. Lectus sit amet est placerat in egestas erat imperdiet sed. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Nulla porttitor massa id neque aliquam vestibulum. Sed libero enim sed faucibus turpis in eu mi bibendum.
</p>
</div>
<!-- TRAITS & PREFERENCE -->
<div class="row no-gutters">
<div class="col-lg-4">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">positive</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
</ul>
</div>
<div class="col-lg-4">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">neutral</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
</ul>
</div>
<div class="col-lg-4">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">negative</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
trait
</span></li>
</ul>
</div>
<div class="col-lg-6">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">likes</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
likes
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
likes
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
likes
</span></li>
</ul>
</div>
<div class="col-lg-6">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">dislikes</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
dislikes
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
dislikes
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
dislikes
</span></li>
</ul>
</div>
</div>
<!-- DESIGN -->
<div class="card bg-transparent p-1 mx-4 my-2" style="border: 2px solid #bbd1ed; border-radius:30px; color:#fff; letter-spacing:1px">
<div class="card border-0 text-center p-1" style="background-color:#bbd1ed; border-radius:30px">
<p class="my-0"><a style="color:#fff" href="
DESIGNER_LINK
">
designer :
</a> |
<a style="color:#fff" href="
ARTIST_LINK
">
artist :
</a> |
$worth
</p></div>
</div>
<!-- REFERENCE -->
<div class="card p-3 bg-transparent border-0">
<div class="card border-0 mb-2" style="border-radius:20px; min-height:300px; background-image:url(
IMAGE_URL
); background-size:cover; background-repeat:no-repeat; background-position:center"></div>
<!-- PALETTE -->
<div class="row no-gutters overflow-hidden" style="border-radius:30px; height:25px">
<div class="col card border-0 rounded-0 h-100" style="background-color:
#e8f2ff
"></div>
<div class="col card border-0 rounded-0 h-100" style="background-color:
#c1d8f5
"></div>
<div class="col card border-0 rounded-0 h-100" style="background-color:
#bccee6
"></div>
<div class="col card border-0 rounded-0 h-100" style="background-color:
#abc0db
"></div>
<div class="col card border-0 rounded-0 h-100" style="background-color:
#8faacc
"></div>
</div>
</div>
<!-- DESIGN NOTES -->
<div class="row no-gutters p-1">
<div class="col-lg-8">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">design notes</p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<ul class="fa-ul">
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
note
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
note
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
note
</span></li>
<li class="my-1"><span class="fa-li" style="color:#fff"><i class="fa-light fa-snowflake"></i></span>
<span>
note
</span></li>
</ul>
</div>
<!-- APPEARANCE -->
<div class="col-lg-4 p-2">
<p class="text-right my-1"><span class="pull-left text-uppercase" style="font-family:courier new; color:#fff">build</span>
build
</p>
<p class="text-right my-1"><span class="pull-left text-uppercase" style="font-family:courier new; color:#fff">height</span>
height
</p>
<p class="text-right my-1"><span class="pull-left text-uppercase" style="font-family:courier new; color:#fff">weight</span>
weight
</p>
<p class="text-right my-1"><span class="pull-left text-uppercase" style="font-family:courier new; color:#fff">demeanor</span>
demeanor
</p>
<p class="text-right my-1"><span class="pull-left text-uppercase" style="font-family:courier new; color:#fff">aesthetic</span>
aes
</p>
</div>
</div>
<!-- TRIGGER WARNING -->
<div class="card bg-transparent p-1 mx-4 my-2" style="border: 2px solid #bbd1ed; border-radius:30px; color:#fff; letter-spacing:1px">
<div class="card border-0 text-center p-1" style="background-color:#bbd1ed; border-radius:30px">
tw : trigger , trigger , trigger
</div>
</div>
<!-- BACKSTORY -->
<div class="p-3">
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">
i. childhood
</p>
<hr class="mt-1 mb-2" style="border-top: 2px solid #fff; width:70%">
<span class="float-left text-uppercase justify-content-center align-items-center mr-2" style="font-family:georgia; font-size:25px; color:#fff; height:50px; width:50px; background-color:#8faebf">
<span class="float-left p-1 justify-content-center align-items-center" style="font-family:georgia; font-size:25px; color:#fff; height:40px; width:40px; background-color:#8faebf; border: 2px solid #fff">
<!-- first letter of the text goes here -->
t
</span>
</span>
<p>
his is where you write about your character's past !! feel free to add more subheadings if you need. this will expand with text, so go wild with it. the subheadings are originally separated by different stages of growth, such as childhood, adulthood, etc. but you're welcome to change them based on different events, or anything you'd like.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam donec adipiscing tristique risus nec feugiat in. Facilisi cras fermentum odio eu feugiat pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Vitae turpis massa sed elementum tempus. Proin sed libero enim sed. Lectus sit amet est placerat in egestas erat imperdiet sed. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Nulla porttitor massa id neque aliquam vestibulum. Sed libero enim sed faucibus turpis in eu mi bibendum. .
</p>
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">
ii. adolescence
</p>
<hr class="mt-1 mb-2" style="border-top: 2px solid #fff; width:70%">
<span class="float-left text-uppercase justify-content-center align-items-center mr-2" style="font-family:georgia; font-size:25px; color:#fff; height:50px; width:50px; background-color:#8faebf">
<span class="float-left p-1 justify-content-center align-items-center" style="font-family:georgia; font-size:25px; color:#fff; height:40px; width:40px; background-color:#8faebf; border: 2px solid #fff">
<!-- first letter of the text goes here -->
L
</span>
</span>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra pharetra massa massa ultricies. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nisi vitae suscipit tellus mauris a diam. Risus nullam eget felis eget nunc lobortis mattis aliquam. At volutpat diam ut venenatis tellus in. Purus non enim praesent elementum facilisis leo.
</p>
<p>
Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Vitae aliquet nec ullamcorper sit. Porta lorem mollis aliquam ut porttitor leo. Viverra orci sagittis eu volutpat. Aliquet eget sit amet tellus. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Morbi tincidunt augue interdum velit. Suspendisse sed nisi lacus sed viverra tellus in.
</p>
<p class="my-0 text-uppercase text-center font-weight-bold" style="font-family:georgia; font-size:20px; letter-spacing:2px">
iii. adulthood
</p>
<hr class="mt-1 mb-2" style="border-top: 2px solid #fff; width:70%">
<span class="float-left text-uppercase justify-content-center align-items-center mr-2" style="font-family:georgia; font-size:25px; color:#fff; height:50px; width:50px; background-color:#8faebf">
<span class="float-left p-1 justify-content-center align-items-center" style="font-family:georgia; font-size:25px; color:#fff; height:40px; width:40px; background-color:#8faebf; border: 2px solid #fff">
<!-- first letter of the text goes here -->
L
</span>
</span>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra pharetra massa massa ultricies. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nisi vitae suscipit tellus mauris a diam. Risus nullam eget felis eget nunc lobortis mattis aliquam. At volutpat diam ut venenatis tellus in. Purus non enim praesent elementum facilisis leo.
</p>
<p>
Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Vitae aliquet nec ullamcorper sit. Porta lorem mollis aliquam ut porttitor leo. Viverra orci sagittis eu volutpat. Aliquet eget sit amet tellus. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Morbi tincidunt augue interdum velit. Suspendisse sed nisi lacus sed viverra tellus in.
</p>
</div>
<!-- SOCIAL TYPE
ex. lonewolf, social butterfly, etc. -->
<div class="card bg-transparent p-1 mx-4 my-2" style="border: 2px solid #bbd1ed; border-radius:30px; color:#fff; letter-spacing:1px">
<div class="card border-0 text-center p-1" style="background-color:#bbd1ed; border-radius:30px">
social_type
</div>
</div>
<!-- RELATIONSHIPS -->
<div class="row no-gutters p-1">
<div class="col-lg-6 p-3">
<!-- square images recommended -->
<div class="card rounded-circle align-items-center p-2 bg-transparent" style="border: 3px solid #fff">
<img class="rounded-circle" src="
IMAGE_URL
" class="rounded-circle">
<span style="position:absolute; top:0px; left:5px; font-size:30px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
<span style="position:absolute; bottom:0px; right:0px; font-size:50px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
</div>
<p class="text-center text-uppercase font-weight-bold my-0">
<a style="color:#7b9aab; font-family:georgia; font-size:20px; letter-spacing:2px" href="
CHARACTER_LINK
">
name
</a></p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<p class="my-0 text-center" style="font-family:courier new; color:#8faebf">
relation
</p>
<p class="my-0 text-right p-2">
<span class="pull-left" style="font-variant:small-caps; color:#fff">respect</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<br><span class="pull-left" style="font-variant:small-caps; color:#fff">trust</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<br><span class="pull-left" style="font-variant:small-caps; color:#fff">comfort</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
</p>
</div>
<div class="col-lg-6 p-3">
<!-- square images recommended -->
<div class="card rounded-circle align-items-center p-2 bg-transparent" style="border: 3px solid #fff">
<img class="rounded-circle" src="
IMAGE_URL
" class="rounded-circle">
<span style="position:absolute; top:0px; left:5px; font-size:30px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
<span style="position:absolute; bottom:0px; right:0px; font-size:50px; color:#fff; z-index:2"><i class="fa-thin fa-snowflake fa-spin" style="--fa-animation-duration:25s"></i></span>
</div>
<p class="text-center text-uppercase font-weight-bold my-0">
<a style="color:#7b9aab; font-family:georgia; font-size:20px; letter-spacing:2px" href="
CHARACTER_LINK
">
name
</a></p>
<hr class="my-1" style="border-top: 2px solid #fff; width:50%">
<p class="my-0 text-center" style="font-family:courier new; color:#8faebf">
relation
</p>
<p class="my-0 text-right p-2">
<span class="pull-left" style="font-variant:small-caps; color:#fff">respect</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<br><span class="pull-left" style="font-variant:small-caps; color:#fff">trust</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<br><span class="pull-left" style="font-variant:small-caps; color:#fff">comfort</span>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-solid fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
<i class="fa-light fa-circle-small mx-1"></i>
</p>
</div>
</div>
</div>
</div>
</div>