<!---------------------------------------------
Basics Extended - TH Theme Version
by LeafJelly
Font Awesome Decorations
---------------------------------------------->
<div class="container-fluid p-0 mx-auto" style="max-width:700px; font-weight:300; font-family:calibri"><div class="row no-gutters">
<!-----Left------->
<div class="col-12 col-md-4 p-1"><div class="card bg-faded rounded-0 border-0 p-2 text-center h-100">
<!-------------------------------
Decorations
You can change the icons using https://fontawesome.com/
by changing the icon names like fa-custard and fa-sun
-------------------------------->
<div class="text-left">
<i class="fa-solid fa-sun-cloud fa-3x" style="position:absolute; margin:-20px;"></i>
</div>
<div class="my-auto">
<!-------------------------------
ICON
Replace the URL with a image url/address
-------------------------------->
<div style="background-image:url(
https://via.placeholder.com/100
); background-size:cover;background-position:center; height:100px;width:100px;" class="rounded-circle mx-auto"></div><div>
<!-------------------------------
Basic Character Info
-------------------------------->
<p class="text-primary" style="font-size:1.3em; font-weight:400; font-variant:small-caps;">
Character Name
</p><hr class="m-0">
<div class="row no-gutters">
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Age
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
Content
</div>
<!---------->
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Gender
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
Content
</div>
<!---------->
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Pronouns
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
Content
</div>
<!---------->
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Orientation
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
Content
</div>
<!---------->
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Occupation
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
Content
</div>
<!-----Delete the Link Line if you don't want a link----->
<div class="col-6 text-right pr-1 my-auto" style="font-weight:400">
Species
<i class="far fa-hyphen"></i></div><div class="col-6 text-left">
<a href="URL_HERE">Link</a>
Not a Link Content Here
</div>
<!----- Copy and paste Above here for More ------>
</div></div></div></div></div>
<!-------------------------------
Text Box
It does NOT scroll
-------------------------------->
<div class="col-12 col-md-8 p-1" ><div class="card bg-faded rounded-0 border-0 p-0 text-center h-100"><div class="my-auto p-3">
<!-------------------------------
Pride Flags or Character Ribbns
Mini Pride Flags : https://toyhou.se/6899962.mini-pride-flags
Large Pride Flags: https://toyhou.se/11507691.pride-flags-
character Ribbons: https://toyhou.se/4739396.-ribbons
-------------------------------->
<div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/22459146_fQbRQXya1W8MgDL.png?1623251736">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/22461205_3l1VKp5w0kcyqZ2.png?1623251708">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/22462732_oIAZdtNmsvjgmwL.png?1623251728">
<!---Copy and Paste Above here for More--->
</div>
<!---- Adjectives ----->
<span style="font-size:1.2em; font-variant:small-caps;font-weight:400">
adj · adj · adj · adj
</span>
<!------------- Divider Start ---------------
You can change the symbol using https://fontawesome.com/
by changing the icon names like fa-custard and fa-sun
--------------------------------------------->
<div class="col p-0 mb-2 text-muted"><div class="row no-gutters">
<hr class="col my-1 mr-3" >
<!--------- Symbol -------->
<i class="fas fa-sun mx-1"></i>
<!---- Copy and Paste above here for more Symbols ---->
<hr class="col p-0 my-1 ml-3"></div></div>
<!------------- Divider End --------------->
<!----- Text -------->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<!---Copy and paste above here for more paragrpahs--->
</div>
<!-------------------------------
Mood Board
Replace the URLS with a image url/address
-------------------------------->
<div class="col-0 row no-gutters p-0" style="height:90px">
<!---------- Image 1 --------------->
<div class="col-4"><div style="background-image:url(
https://via.placeholder.com/200x90
);background-position:center; background-size:cover" class="h-100">
</div></div>
<!-------------------------------
Top Left Decoration on the Mood Board
-------------------------------->
<i class="fas fa-clouds fa-xl" style="position:absolute; margin:0px -10px;"></i>
<!---------- Image 2 --------------->
<div class="col-4 px-1"><div style="background-image:url(
https://via.placeholder.com/200x90
);background-position:center; background-size:cover" class="h-100">
</div></div>
<!---------- Image 3 --------------->
<div class="col-4"><div style="background-image:url(
https://via.placeholder.com/200x90
);background-position:center; background-size:cover" class="h-100">
</div></div>
<!-------------------------------
Top Left Decoration on the Mood Board
-------------------------------->
<i class="fas fa-clouds fa-xl" style="position:absolute; margin:0px -10px;"></i>
</div>
<!-------------------------------
Likes and Dislikes
-------------------------------->
<div class="card bg-faded rounded-0 border-0 p-0 text-left">
<div class="row no-gutters">
<!---------- Likes Section--------------->
<div class="col-12 col-md-6 p-2">
<span style="font-size:1.2em; font-variant:small-caps;">
<center>Likes</center>
</span>
<hr class="m-0">
<!-- Bulletin Points --
Copy and paste a line of code for more bulletins
It must be surounded by <li> text </li>
---------------------->
<ul class="m-0 pl-4">
<li>Lorem ipsum dolor sit amet.</li>
<li> Duis sollicitudin elit sed tellus </li>
<li>Donec accumsan tempor lacus</li>
<li>Content</li>
</ul>
</div>
<!---------- Dislikes Section--------------->
<div class="col-12 col-md-6 p-2">
<span style="font-size:1.2em; font-variant:small-caps;">
<center>Dislikes</center>
</span>
<hr class="m-0">
<!-- Bulletin Points --
Copy and paste a line of code for more bulletins
It must be surounded by <li> text </li>
---------------------->
<ul class="m-0 pl-4">
<li>Lorem ipsum dolor sit amet.</li>
<li> Duis sollicitudin elit sed tellus </li>
<li>Donec accumsan tempor lacus</li>
<li>Content</li>
</ul>
</div>
</div></div>
<!-------------------------------
Bottom Right Decoration
-------------------------------->
<div class="text-right"><i class="fas fa-sun fa-3x" style="position:absolute; margin:-30px -20px;"></i></div>
</div></div>
<!------------- CREDIT DO NOT REMOVE ------------------------------>
<div class="col-12 text-center px-1">
<a href="/LeafJelly" title="HTML by LeafJelly"><i class="fal fa-code text-muted mx-1 tooltipster"></i></a>
</div></div></div>
