<!-- ------------------------------
HEAVY — Custom Colours version.
(code by jiko)
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
ACCENT : #feda75
→ use ctrl + f in the editor to easily replace all!
------------------------------- -->
<div class="row no-gutters mx-auto text-justify" style="font-size:90%; max-width:1000px">
<!-- ------------------------------
HEADER
→ can actually be name, lyric or quote!
→ the icon could represent your character's clan!
------------------------------- -->
<div class="col-lg-12 p-1">
<div class="bg-faded justify-content-between text-uppercase text-right p-3" style="font-size:150%; letter-spacing:0.2em;">
<i class="fas fa-seedling fa-fw my-auto"></i>
Title
</div>
</div>
<!-- ------------------------------
FIRST SECTION
→ sidebar
------------------------------- -->
<div class="col-lg-4 p-1">
<div class="bg-faded p-3 px-4 h-100">
<!-- ------------------------------------
AVATAR
------------------------------------- -->
<!--
→ i'd recommand a square image — 200x200 is best!
→ paste [fr-rounded] in the img class if you want a circle icon!
-->
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail rounded-0 p-2 my-2 mx-auto" style="height: 200px; width: 200px;">
</div>
<!-- ------------------------------------
BASIC INFO
------------------------------------- -->
<div class="row no-gutters mt-4">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Name</span>
<span>content</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Former Names</span>
<span class="text-right">
kit name <br>
apprentice name <br>
etc.
</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
<span>content (prn/prn)</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Orientation</span>
<span>content</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Mentor</span>
<span>or apprentice</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Rank</span>
<span>content</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Residence</span>
<span>clan, kittypet, rogue, etc.</span>
</div><hr class="mt-2 mb-4 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Theme</span>
<span><a href="URL HERE" style="color:#feda75">content</a></span>
</div><hr class="mt-2 mb-4 w-100">
</div>
</div>
</div>
<!-- ------------------------------
SECOND SECTION
→ profile content
------------------------------- -->
<div class="col-lg-8 p-1">
<!--
don't want the scrolling feature?
delete [style="height: 710px; overflow:auto"] below!
-->
<div class="p-3" style="height: 710px; overflow:auto">
<!-- ------------------------------------
APPEARANCE
------------------------------------- -->
<div class="mb-3">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-eye fa-fw" style="color:#feda75"></i>
APPEARANCE
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget velit aliquet sagittis id. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Non nisi est sit amet facilisis magna etiam tempor orci. Nullam eget felis eget nunc lobortis mattis aliquam.</p>
</div>
</div>
<!-- ------------------------------------
DESIGN NOTES
------------------------------------- -->
<div class="pl-3 mb-4">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-thumbtack fa-fw" style="color:#feda75"></i>
Design notes
</div>
<!-- ------ CONTENT ------------------------------ -->
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li class="ml-3">this is a sub plot for the content above!</li>
<li class="ml-3">this is a sub plot for the content above but with a link (to show any hidden or specific stuff)! (<a href="URL HERE" style="color:#feda75">see/click here</a>)</li>
<li>content</li>
<li>content</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
<!-- ------------------------------------
PERSONALITY
------------------------------------- -->
<div class="mb-3">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-heart fa-fw" style="color:#feda75"></i>
Personality
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris augue neque gravida in fermentum et. Consectetur adipiscing elit ut aliquam purus. Ac auctor augue mauris augue neque gravida in fermentum. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Felis imperdiet proin fermentum leo..</p>
<p>Feugiat pretium nibh ipsum consequat. Orci porta non pulvinar neque laoreet. Amet luctus venenatis lectus magna fringilla. Enim praesent elementum facilisis leo. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Sociis natoque penatibus et magnis dis parturient montes. Nulla porttitor massa id neque aliquam vestibulum. In egestas erat imperdiet sed euismod nisi porta lorem.</p>
</div>
</div>
<!-- ------------------------------------
PREFERENCES
------------------------------------- -->
<div class="row no-gutters ml-lg-3 mb-4">
<!-- ------ LIKES ------------------------------ -->
<div class="col-6">
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-check fa-fw" style="color:#feda75"></i>
Likes
</div>
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
<!-- ------ DISLIKES ------------------------------ -->
<div class="col-6">
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-check fa-fw" style="color:#feda75"></i>
Dislikes
</div>
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
<!-- add / delete above THIS line! -->
</ul>
</div>
</div>
<!-- ------------------------------------
STATS
------------------------------------- -->
<div class="row no-gutters mb-4">
<!-- ------ ATTRIBUTES ------------------------------ -->
<div class="col-lg-4 mb-2 p-1">
<!-- --- HEADER --- -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-stars fa-fw" style="color:#feda75"></i>
Attributes
</div>
<hr class="my-1 mb-2 w-100">
<!-- --- STATS --- -->
<div class="row no-gutters ml-lg-3">
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Charisma</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Confidence</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Intelligence</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Kindness</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Empathy</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
</div>
</div>
<!-- ------ BATTLE ------------------------------ -->
<div class="col-lg-4 mb-2 p-1">
<!-- --- HEADER --- -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-swords fa-fw" style="color:#feda75"></i>
Battle
</div>
<hr class="my-1 mb-2 w-100">
<!-- --- STATS --- -->
<div class="row no-gutters ml-lg-3">
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Fighting</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Hunting</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Speed</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Swimming</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Herb Knowledge</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
</div>
</div>
<!-- ------ TRAITS ------------------------------ -->
<div class="col-lg-4 mb-2 p-1">
<!-- --- HEADER --- -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-leaf-heart fa-fw" style="color:#feda75"></i>
Traits
</div>
<hr class="my-1 mb-2 w-100">
<!-- --- STATS --- -->
<div class="row no-gutters ml-lg-3">
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Openness</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Optimism</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Patience</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Loyalty</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
<div class="col-12 p-1 py-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Faith in StarClan</span>
<div class="progress rounded-0 mt-1">
<div class="progress-bar" style="width:50%; height:4px; background:#feda75"></div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
HISTORY
------------------------------------- -->
<div class="mb-4">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-books fa-fw" style="color:#feda75"></i>
History
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. At augue eget arcu dictum varius duis at. Aliquet bibendum enim facilisis gravida neque convallis a. Consectetur libero id faucibus nisl tincidunt eget nullam non. Elit at imperdiet dui accumsan sit amet nulla facilisi. Eget mauris pharetra et ultrices neque. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Pharetra diam sit amet nisl suscipit adipiscing. Urna neque viverra justo nec ultrices dui sapien eget mi.</p>
<p>Nunc scelerisque viverra mauris in. In mollis nunc sed id semper risus in hendrerit gravida. Semper quis lectus nulla at volutpat. Arcu dui vivamus arcu felis bibendum ut tristique. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Egestas tellus rutrum tellus pellentesque eu tincidunt. Amet tellus cras adipiscing enim eu. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Non sodales neque sodales ut. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.</p>
</div>
</div>
<!-- ------------------------------------
TRIVIA
------------------------------------- -->
<div class="mb-4">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-book-open fa-fw" style="color:#feda75"></i>
Trivia
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<ul class="text-muted">
<li>NOMENCLATURE</li>
<li class="ml-3"><i>Prefix</i> — insert explanation for their prefix</li>
<li class="ml-3 mb-1"><i>Suffix</i> — insert explanation for their suffix.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Scelerisque viverra mauris in aliquam sem fringilla ut morbi.</li>
<!-- add/delete more plots above this line! -->
</ul>
</div>
<!-- ------------------------------------
RELATIONSHIPS
------------------------------------- -->
<div class="mb-0">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-link fa-fw" style="color:#feda75"></i>
Relationships
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<!--
optional but feel free to add [†] after [Relation] to show that the character is dead!
-->
<div class="row no-gutters">
<!-- --- RELATIONSHIP ONE --- -->
<div class="col-lg-6 p-3">
<!-- GENERAL INFO -->
<div class="text-uppercase">
<a href="CHARA LINK" style="color:#feda75">Name</a>
</div>
<hr class="my-1 w-100">
<div class="mb-1 justify-content-between">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation, †</span>
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!--
→ i'd recommand a square image
→ delete [fr-rounded] in the img class if you want a square icon!
-->
<div class="mr-2 float-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<!-- CONTENT -->
<div class="pt-2 text-muted">
<p>Your character's thoughts of this character. Can be in character or not.</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<!-- --- RELATIONSHIP TWO --- -->
<div class="col-lg-6 p-3">
<!-- GENERAL INFO -->
<div class="text-uppercase">
<a href="CHARA LINK" style="color:#feda75">Name</a>
</div>
<hr class="my-1 w-100">
<div class="mb-1 justify-content-between">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!--
→ i'd recommand a square image
→ delete [fr-rounded] in the img class if you want a square icon!
-->
<div class="mr-2 float-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<!-- CONTENT -->
<div class="pt-2 text-muted">
<p>One paragraph would fit nicely! Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Ut venenatis tellus in metus vulputate. Elit at imperdiet dui accumsan sit amet nulla facilisi. Dignissim suspendisse in est ante in nibh.</p>
</div>
</div>
<!-- --- RELATIONSHIP THREE --- -->
<div class="col-lg-6 p-3">
<!-- GENERAL INFO -->
<div class="text-uppercase">
<a href="CHARA LINK" style="color:#feda75">Name</a>
</div>
<hr class="my-1 w-100">
<div class="mb-1 justify-content-between">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!--
→ i'd recommand a square image
→ delete [fr-rounded] in the img class if you want a square icon!
-->
<div class="mr-2 float-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<!-- CONTENT -->
<div class="pt-2 text-muted">
<p>Egestas tellus rutrum tellus pellentesque eu tincidunt. Amet tellus cras adipiscing enim eu. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Non sodales neque sodales ut. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.</p>
</div>
</div>
<!-- --- RELATIONSHIP FOUR --- -->
<div class="col-lg-6 p-3">
<!-- GENERAL INFO -->
<div class="text-uppercase">
<a href="CHARA LINK" style="color:#feda75">Name</a>
</div>
<hr class="my-1 w-100">
<div class="mb-1 justify-content-between">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart text-muted"></i>
<i class="far fa-heart text-muted"></i>
</span>
</div>
<!-- IMAGE -->
<!--
→ i'd recommand a square image
→ delete [fr-rounded] in the img class if you want a square icon!
-->
<div class="mr-2 float-left justify-content-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="fr-rounded p-1 mr-lg-1" style="height:90px; width:90px;">
</div>
<!-- CONTENT -->
<div class="pt-2 text-muted">
<p>Nunc scelerisque viverra mauris in. In mollis nunc sed id semper risus in hendrerit gravida. Semper quis lectus nulla at volutpat. Arcu dui vivamus arcu felis bibendum ut tristique. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
<!-- add/delete more relationship boxes ABOVE this line! -->
</div>
</div>
<!-- don't touch the below thanks! -->
</div>
</div>
<!-- ------------------------------
CREDITS
→ please keep credits on the profile
if you decide to move it!
------------------------------- -->
<div class="col-lg-12 p-1">
<div class="bg-faded text-right p-2" style="font-size:90%; letter-spacing:0.05em;">
code by <a href="https://toyhou.se/5634482.-f2u-heavy-warrior-cats-" style="color:#feda75; text-decoration: none">jiko</a>
</div>
</div>
</div>
