The Arcana
created by:HTMLobster
HTMLBootstrapCharacter
Copy
<div class="container px-2">
<!-- info -->
<div class="row no-gutters">
<!-- navigation -->
<div class="col-lg-3 my-lg-3 mr-lg-4 mx-lg-0 mx-3">
<div class="bg-faded p-3 text-center">
<!-- heading -->
<h1 style="font-variant:small-caps;">
Major Arcana
</h1>
<ul class="nav row" style="font-variant:small-caps;">
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate active" data-toggle="tab" href="#fool">
<!-- card -->
0. The Fool
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#magician">
<!-- button -->
I. The Magician
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#priestess">
<!-- button -->
II. The High Priestess
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#empress">
<!-- button -->
III. The Empress
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#emporer">
<!-- button -->
IV. The Emporer
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#hierophant">
<!-- button -->
V. The Hierophant
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#lovers">
<!-- button -->
VI. The Lovers
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#chariot">
<!-- button -->
VII. The Chariot
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#strength">
<!-- button -->
VIII. Strength
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#hermit">
<!-- button -->
IX. The Hermit
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#fortune">
<!-- button -->
X. Wheel of Fortune
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#justice">
<!-- button -->
XI. Justice
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#hangedman">
<!-- button -->
XII. The Hanged Man
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#death">
<!-- button -->
XIII. Death
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#temperance">
<!-- button -->
XIV. Temperance
</a>
</li>
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#devil">
<!-- button -->
XV. The Devil
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#tower">
<!-- button -->
XVI. The Tower
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#star">
<!-- button -->
XVII. The Star
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#moon">
<!-- button -->
XVIII The Moon
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#sun">
<!-- button -->
XIX. The Sun
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#judgement">
<!-- button -->
XX. Judgement
</a>
</li>
<!-- button -->
<li class="nav-item col-lg-12 col-sm-4 col-6">
<a class="btn btn-outline-primary border-0 nav-link p-1 text-truncate" data-toggle="tab" href="#universe">
<!-- button -->
XXI. The Universe
</a>
</li>
</ul>
</div>
</div>
<!-- navigation end -->
<!-- dotted border -->
<div class="col-auto mr-n5 pl-2 hidden-md-down">
<div class="h-100" style="border:4px dashed var(--color-info); position:relative; z-index:2;"></div>
</div>
<!-- dotted border end -->
<!-- main content -->
<div class="col-lg text-justify">
<div class="bg-faded pt-4 ml-lg-2 h-100" style="border-left:1rem solid var(--color-light);">
<!-- tab content -->
<div class="tab-content">
<!-- the fool -->
<div class="tab-pane fade active show" id="fool">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-masks-theater"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-masks-theater mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
0
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-masks-theater"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-masks-theater mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the fool end -->
<!-- the magician -->
<div class="tab-pane fade" id="magician">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-flask-potion"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flask-potion mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
I
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-flask-potion"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flask-potion mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the magician end -->
<!-- the priestess -->
<div class="tab-pane fade" id="priestess">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-crown"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-moon" style="transform:rotate(-162deg);"></i>
<i class="fa-solid fa-circle-half fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-crown mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle-half" style="font-size:1.25em;"></i>
<i class="fa-solid fa-moon" style="transform:rotate(12deg);"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
II
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-crown"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-moon" style="transform:rotate(-162deg);"></i>
<i class="fa-solid fa-circle-half fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-crown mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle-half" style="font-size:1.25em;"></i>
<i class="fa-solid fa-moon" style="transform:rotate(12deg);"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the priestess end -->
<!-- the empress -->
<div class="tab-pane fade" id="empress">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-queen"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-queen mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
III
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-queen"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-queen mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the empress end -->
<!-- the emporer -->
<div class="tab-pane fade" id="emporer">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-king"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-king mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
IV
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-king"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-king mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the emporer end -->
<!-- the hierophant -->
<div class="tab-pane fade" id="hierophant">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-book-open-lines"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-book-open-lines mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
V
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-book-open-lines"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-book-open-lines mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the hierophant end -->
<!-- the lovers -->
<div class="tab-pane fade" id="lovers">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-hearts"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-heart" style="font-size:1.25em;"></i>
<i class="fa-solid fa-hearts mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-heart" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
VI
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-hearts"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-heart" style="font-size:1.25em;"></i>
<i class="fa-solid fa-hearts mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-heart" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the lovers end -->
<!-- the chariot -->
<div class="tab-pane fade" id="chariot">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-knight"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-knight mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
VII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-chess-knight"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-chess-knight mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the chariot end -->
<!-- strength -->
<div class="tab-pane fade" id="strength">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-paw-claws"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-flower mx-1"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-paw-claws mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flower mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
VIII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-paw-claws"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-flower mx-1"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-paw-claws mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flower mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- strength end -->
<!-- the hermit -->
<div class="tab-pane fade" id="hermit">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-fire"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
<i class="fa-solid fa-fire-flame-curved" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire-flame-curved fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
IX
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-fire"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
<i class="fa-solid fa-fire-flame-curved" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire-flame-curved fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the hermit end -->
<!-- wheel of fortune -->
<div class="tab-pane fade" id="fortune">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-angel"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-feather mx-1 fa-flip-horizontal"></i>
<i class="fa-solid fa-feather" style="font-size:1.25em;"></i>
<i class="fa-solid fa-angel mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-feather fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-feather mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
X
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-angel"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-feather mx-1 fa-flip-horizontal"></i>
<i class="fa-solid fa-feather" style="font-size:1.25em;"></i>
<i class="fa-solid fa-angel mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-feather fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-feather mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- wheel of fortune end -->
<!-- justice -->
<div class="tab-pane fade" id="justice">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-scale-balanced"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-swords" style="font-size:1.25em;"></i>
<i class="fa-solid fa-scale-balanced mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-swords" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XI
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-scale-balanced"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-swords" style="font-size:1.25em;"></i>
<i class="fa-solid fa-scale-balanced mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-swords" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- justice end -->
<!-- the hanged man -->
<div class="tab-pane fade" id="hangedman">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-leaf"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-leaf" style="font-size:1.25em;"></i>
<i class="fa-solid fa-cross mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-leaf fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-leaf"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-circle mx-1"></i>
<i class="fa-solid fa-leaf" style="font-size:1.25em;"></i>
<i class="fa-solid fa-cross mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-leaf fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the hanged man end -->
<!-- death -->
<div class="tab-pane fade" id="death">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-coffin-cross"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-skull" style="font-size:1.25em;"></i>
<i class="fa-solid fa-coffin-cross mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-skull" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XIII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-coffin-cross"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-skull" style="font-size:1.25em;"></i>
<i class="fa-solid fa-coffin-cross mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-skull" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- death end -->
<!-- temperance -->
<div class="tab-pane fade" id="temperance">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-wine-glass"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-triangle mx-1"></i>
<i class="fa-solid fa-droplet" style="font-size:1.25em;"></i>
<i class="fa-solid fa-wine-glass mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-droplet" style="font-size:1.25em;"></i>
<i class="fa-solid fa-triangle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XIV
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-wine-glass"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-triangle mx-1"></i>
<i class="fa-solid fa-droplet" style="font-size:1.25em;"></i>
<i class="fa-solid fa-wine-glass mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-droplet" style="font-size:1.25em;"></i>
<i class="fa-solid fa-triangle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- temperance end -->
<!-- the devil -->
<div class="tab-pane fade" id="devil">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-bat"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-fire fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-bat mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XV
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-bat"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-heart mx-1"></i>
<i class="fa-solid fa-fire fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-bat mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire" style="font-size:1.25em;"></i>
<i class="fa-solid fa-heart mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the devil end -->
<!-- the tower -->
<div class="tab-pane fade" id="tower">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-bolt-lightning"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
<i class="fa-solid fa-fire fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-bolt-lightning mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XVI
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-bolt-lightning"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
<i class="fa-solid fa-fire fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-bolt-lightning mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-fire" style="font-size:1.25em;"></i>
<i class="fa-solid fa-fire-flame-simple mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the tower end -->
<!-- the star -->
<div class="tab-pane fade" id="star">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-star"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-star-christmas mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XVII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-star"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-sparkle mx-1"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-star-christmas mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-star" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sparkle mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the star end -->
<!-- the moon -->
<div class="tab-pane fade" id="moon">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-moon"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-moon" style="transform:rotate(-162deg);"></i>
<i class="fa-solid fa-circle-half fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle-half" style="font-size:1.25em;"></i>
<i class="fa-solid fa-moon" style="transform:rotate(12deg);"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XVIII
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-moon"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-moon" style="transform:rotate(-162deg);"></i>
<i class="fa-solid fa-circle-half fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-circle mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-circle-half" style="font-size:1.25em;"></i>
<i class="fa-solid fa-moon" style="transform:rotate(12deg);"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the moon end -->
<!-- the sun -->
<div class="tab-pane fade" id="sun">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-sun"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-flower mx-1"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sun mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flower mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XIX
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-sun"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-flower mx-1"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-sun mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-flower-tulip" style="font-size:1.25em;"></i>
<i class="fa-solid fa-flower mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the sun end -->
<!-- judgement -->
<div class="tab-pane fade" id="judgement">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-clouds"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-music-note mx-1"></i>
<i class="fa-solid fa-clouds" style="font-size:1.25em;"></i>
<i class="fa-solid fa-trumpet fa-rotate-270 mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-clouds fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-music-note fa-flip-horizontal mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XX
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-clouds"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-music-note mx-1"></i>
<i class="fa-solid fa-clouds" style="font-size:1.25em;"></i>
<i class="fa-solid fa-trumpet fa-rotate-270 mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-clouds fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-music-note fa-flip-horizontal mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- judgement end -->
<!-- the universe -->
<div class="tab-pane fade" id="universe">
<!-- character name -->
<h1 class="display-3 mb-0 bg-primary text-white pl-3 py-3 pr-5 mr-n4 ml-n3" style="clip-path: polygon(100% 0, calc(100% - 50px) 50%, 100% 100%, 0 100%, 0 0); position:relative; z-index:3; font-variant:small-caps;">
<!-- name -->
Character Name
</h1>
<!-- info -->
<div class="row">
<!-- summary -->
<div class="col-lg">
<div class="p-3 ml-lg-5">
<!-- first -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-comet"></i>
Summary
</span>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta ac urna at efficitur. Ut hendrerit eros eu tellus molestie, id sollicitudin lorem imperdiet. Fusce eu vestibulum orci. Cras et consectetur ex. Integer semper dapibus porttitor. Donec eu dui vulputate, ullamcorper nisl vitae, laoreet diam. Pellentesque nunc erat, sagittis quis laoreet ac, facilisis id purus. Pellentesque venenatis condimentum nisi nec scelerisque.
</p>
<!-- quote -->
<p class="text-muted text-center">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- second -->
<p>
<!-- content -->
Curabitur pretium posuere placerat. Fusce molestie imperdiet nibh, ut dignissim risus accumsan a. Sed eleifend eleifend iaculis. Nunc nec ligula consectetur, pretium sem eget, dapibus nisi. Fusce pretium justo nunc, id scelerisque turpis auctor nec. Sed vestibulum feugiat consectetur. Pellentesque vulputate magna nec eros fringilla.
</p>
</div>
</div>
<!-- tarot card -->
<div class="col-lg-4 col-md-6 mt-lg-n5 mr-lg-3 mr-sm-auto mr-3 ml-auto">
<div style="transform:rotate(5deg); position:relative; z-index:4;">
<!-- symbols -->
<div class="text-secondary align-items-center justify-content-center" style="font-size:1.75em; position:relative; z-index:2;">
<i class="fa-solid fa-comet mx-1"></i>
<i class="fa-solid fa-planet-ringed" style="font-size:1.25em;"></i>
<i class="fa-solid fa-wreath-laurel mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-planet-ringed fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-comet fa-flip-horizontal mx-1"></i>
</div>
<!-- card -->
<div class="card card-outline-secondary p-2" style="background:var(--color-background); border-width:2px; margin-top:-25px;">
<div class="card card-outline-secondary" style="border-width:2px;">
<!-- image - must be a 2:3 ratio -->
<img src="image_url" alt="describe_image" class="rounded">
</div>
</div>
<!-- number -->
<div class="d-flex justify-content-center">
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-right:-3px;"></div>
<div style="height:75px; width:75px; background:var(--color-background); position:relative; z-index:9; margin-top:-44px; border-width:2px;" class="card card-outline-secondary rounded-circle align-items-center justify-content-center">
<h1 class="mb-0" style="border-top:2px solid var(--text-color); border-bottom:2px solid var(--text-color); line-height:13px;font-family:'Sans Serif'; padding:0 2px;">
<!-- content -->
XXI
</h1>
</div>
<div style="background:var(--color-background); height:.5rem; width:4px; position:relative; z-index:999; margin-top:-10px; margin-left:-3px;"></div>
</div>
</div>
</div>
<!-- personality + relationships -->
<div class="col-12 mt-n3">
<div class="p-3 ml-lg-5">
<!-- personality -->
<p>
<span class="text-secondary" style="font-variant:small-caps;">
<i class="fa-solid fa-comet"></i>
Personality
</span>
<!-- content -->
Maecenas sollicitudin mi in ipsum sollicitudin auctor. Duis pharetra posuere sem at ullamcorper. Proin mattis pretium nisi, vitae suscipit ligula elementum ac. Duis ut suscipit orci. Nunc vulputate consectetur diam ac vehicula. Maecenas placerat libero vel lectus congue mollis. Praesent posuere maximus lobortis. Nullam sollicitudin sagittis felis nec interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<!-- relationships -->
<div class="row justify-content-center">
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
<!-- relation -->
<div class="col-lg-3 col-sm-6 mt-3">
<div class="card card-outline-secondary text-center p-2" style="background:var(--color-light); border-radius:205px 205px .25rem .25rem; border-width:2px; overflow:hidden;">
<!-- image -->
<div class="rounded-circle" style="padding:50%; background:var(--color-background) url(image_url) center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
<h2 class="mb-0" style="font-variant:small-caps;">
<!-- name & link -->
<a href="char_url">
Name
</a>
</h2>
<!-- rating -->
<div class="text-muted">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<!-- relation end -->
</div>
<!-- divider -->
<div class="text-primary align-items-center justify-content-center mt-3" style="font-size:1.5em; position:relative; z-index:2;">
<i class="fa-solid fa-comet mx-1"></i>
<i class="fa-solid fa-planet-ringed" style="font-size:1.25em;"></i>
<i class="fa-solid fa-wreath-laurel mx-1" style="font-size:1.5em;"></i>
<i class="fa-solid fa-planet-ringed fa-flip-horizontal" style="font-size:1.25em;"></i>
<i class="fa-solid fa-comet fa-flip-horizontal mx-1"></i>
</div>
</div>
</div>
</div>
</div>
<!-- the universe end -->
</div>
<!-- tab content end -->
</div>
</div>
<!-- main content end -->
</div>
<!-- info end -->
<!-- credit -->
<div class="mt-3 text-right">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster">
<i class="fa-light fa-duotone fa-lobster"></i>
</a>
</div>
</div>