Profile
NAME
Name
CONTENT
Former Names
CONTENT
CONTENT
CONTENT
Gender
CONTENT [pro/nouns]
Orientation
CONTENT
Age
CONTENT Moons
Affinity
CONTENT
Rank
CONTENT
Apprentice
CONTENT
Page
CONTENT
APPEARANCE
- DESCRIPTION: CONTENT
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.
Design notes
- EDITS
- [nr] EDIT
- [c] EDIT
- [uc] EDIT
- [r] EDIT
- note
Personality
ADJ • ADJ • ADJ • ADJ
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.
Likes
- like
- like
- like
Dislikes
- dislike
- dislike
- dislike
Attributes
Charisma
Confidence
Intelligence
Kindness
Empathy
Battle
Fighting
Hunting
Speed
Swimming
Herb Knowledge
Traits
Openness
Optimism
Patience
Loyalty
Faith
History
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.
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.
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.
Trivia
- NOMENCLATURE
- PREFIX — explanation
- SUFFIX — explanations
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
Relationships
Relation
Your character's thoughts of this character. Can be in character or not.
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Relation
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.
Relation
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.
Relation
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.
code by jiko
<!-- ------------------------------
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 : #aaaaaa
→ 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; color:#aaaaaa;">
<i class="fas fa-moon fa-fw my-auto"></i>
NAME
</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://i.imgur.com/Bw3I4d6.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-3">
<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-3 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">
CONTENT<br>
CONTENT<br></span>
</div><hr class="mt-2 mb-3 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
<span>CONTENT [pro/nouns]</span>
</div><hr class="mt-2 mb-3 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-3 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Age</span>
<span>CONTENT Moons</span>
</div><hr class="mt-2 mb-3 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Affinity</span>
<span>CONTENT</span>
</div><hr class="mt-2 mb-3 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-3 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Apprentice</span>
<span>CONTENT</span>
</div><hr class="mt-2 mb-3 w-100">
<div class="col-lg-12 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Page</span>
<span><a href="link" style="color:#aaaaaa">CONTENT</a></span>
</div><hr class="mt-2 mb-3 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: 690px; overflow:auto">
<!-- ------------------------------------
APPEARANCE
------------------------------------- -->
<div class="mb-4">
<!-- ------ HEADER ------------------------------ -->
<div class="p-1 text-uppercase" style="font-size:120%; letter-spacing:2px">
<i class="far fa-eye fa-fw" style="color:#aaaaaa"></i>
APPEARANCE
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<ul><li><b>DESCRIPTION:</b> CONTENT</li></ul>
<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:#aaaaaa"></i>
Design notes
</div>
<!-- ------ CONTENT ------------------------------ -->
<ul class="text-muted">
<li><b>EDITS</b></li>
<li class="ml-3"><i>[nr]</i> EDIT</li>
<li class="ml-3"><i>[c]</i> EDIT</li>
<li class="ml-3"><i>[uc]</i> EDIT</li>
<li class="ml-3"><i>[r]</i> EDIT</li>
<br>
<li>note</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:#aaaaaa"></i>
Personality
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<p class="text-center text-uppercase text-muted mb-0" style="letter-spacing:1px;">
ADJ • ADJ • ADJ • ADJ</p><br>
<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:#aaaaaa"></i>
Likes
</div>
<ul class="text-muted">
<li>like</li>
<li>like</li>
<li>like</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:#aaaaaa"></i>
Dislikes
</div>
<ul class="text-muted">
<li>dislike</li>
<li>dislike</li>
<li>dislike</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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></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:#aaaaaa"></i>
Trivia
</div>
<hr class="my-1 mb-2 w-100">
<!-- ------ CONTENT ------------------------------ -->
<ul class="text-muted">
<li><b>NOMENCLATURE</b></li>
<li class="ml-3"><i>PREFIX</i> — explanation</li>
<li class="ml-3 mb-1"><i>SUFFIX</i> — explanations</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:#aaaaaa"></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="link" style="color:#aaaaaa">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="fas fa-heart"></i>
<i class="fas fa-heart"></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="LINK" style="color:#aaaaaa">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="LINK" style="color:#aaaaaa">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="LINK" style="color:#aaaaaa">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:#aaaaaa; text-decoration: none">jiko</a>
</div>
</div>
</div>