<!-- -----------------------------
Warrior Biography 2 - Code by jiko
RULES
– Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
[ https://toyhou.se/~bulletins/127417.code-rules ]
TIPPY TIPS
– insert your img links INSIDE the brackets or quotation marks!!
– for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
------------------------------ -->
<!-- -----------------------------
ICON
------------------------------ -->
<!-------- [ feel free to delete the margin-top if the code is too high for your liking ] -------->
<div class="mx-auto" align="center" style="margin-top:-50px; position: relative; top: 75px;">
<img src="https://via.placeholder.com/200"
class="fr-rounded bg-faded p-2" style="max-width:150px; max-height:150px; z-index:100">
</div>
<div class="mx-auto col-lg-12 rounded-0 text-justify" style="max-width:600px; font-size:12px; letter-spacing:0.2px">
<!-- -----------------------------
SIDE IMAGES
------------------------------ -->
<div class="row" style="
background-image: url(IMG URL LINK);
background-size: cover;
background-position: bottom;
background-attachment: scroll;
background-repeat: no-repeat;
box-shadow: 0 0 15px rgba(0,0,0, 0.2);">
<!-- -----------------------------
CONTENT
------------------------------ -->
<div class="mx-auto col-lg-9 col-10" style="margin-right:30px">
<div class="card bg-faded rounded-0 border-0" style="max-height: 500px; overflow:auto">
<div class="p-3" style="margin-top:50px">
<!-- -----------------------------
PROFILE
------------------------------ -->
<div class="profile pb-5">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">Profile</span>
<span class="text-uppercase"><i class="fas fa-paw"></i></span>
</div><hr class="my-0">
<div class="py-3">
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Name :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1 pl-3"><i>
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">PREFIX ––</span>
<span class="w-50 text-right">explanation for their prefix</span>
</i></div>
<div class="p-1 pl-3"><i>
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">SUFFIX ––</span>
<span class="w-50 text-right">explanation for their suffix</span>
</i></div>
<div class="p-1 pb-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Pastnames :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Age :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1 pl-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Birthseason :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1 pb-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Gender :</span>
<span class="w-50 text-right">content (prn/prn)</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Rank :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1 pb-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Residence :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Mentor :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Apprentice :</span>
<span class="w-50 text-right">content</span>
</div>
</div>
<!-- -----------------------------
COLLASPE TAB,
– delete to line 162 if unwanted!
------------------------------ -->
<div class="card p-2 text-center text-uppercase rounded-0">
<a href="#para" data-toggle="collapse" style="letter-spacing:1px">
Click and Scroll for more
</a></div></div>
<div class="collapse" id="para">
<!-- -----------------------------
APPEARANCE
------------------------------ -->
<div class="appearance pb-5">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">Appearance</span>
<span class="text-uppercase"><i class="fas fa-star"></i></span>
</div><hr class="my-0">
<div class="py-3">
<div class="p-1 pb-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Summary :</span>
<span class="w-50 text-right">Donec in augue commodo, varius felis sed, viverra libero. Phasellus sed ornare nibh.</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Breed :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Eye Colour :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Height :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Body Type :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Tail :</span>
<span class="w-50 text-right">content</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Scars :</span>
<span class="w-50 text-right">content</span>
</div>
</div>
</div>
<!-- -----------------------------
PERSONALITY
------------------------------ -->
<div class="appearance pb-5">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">Personality</span>
<span class="text-uppercase"><i class="fas fa-heart"></i></span>
</div><hr class="my-0">
<div class="p-1 text-right text-muted" style="letter-spacing:0.5px"><i>good . neutral . bad</i></div>
<div class="py-3">
<!-------- [ summary of personality ] -------->
<div class="p-1 pb-3">
<span class="w-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices eleifend nibh vitae aliquam. Nam urna nisi, imperdiet eget purus quis, tempus aliquet. Pellentesque et odio vitae dolor varius placerat.</p>
<p>In non imperdiet quam. Etiam eu iaculis arcu, et feugiat nulla. Suspendisse id pulvinar erat. Sed dignissim libero in lacus commodo, a elementum libero pretium.</p>
</span>
</div>
<div class="row px-2 pb-3">
<div class="col-6">
<span class="text-uppercase text-muted">Likes</span>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-6">
<span class="text-uppercase text-muted">Dislikes</span>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Fears :</span>
<span class="w-50 text-right">Donec consequat massa sit amet urna laoreet imperdiet.</span>
</div>
<div class="p-1 pb-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Habits :</span>
<span class="w-50 text-right">Praesent eleifend non nibh id gravida.</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Trivia</span>
<span class="w-50">
<ul>
<li>Duis in orci a massa aliquet ultricies.</li>
<li>Vestibulum id enim non est accumsan blandit vel id nunc.</li>
<li>Donec pulvinar mauris nec nunc finibus, sit amet posuere nibh consectetur.</li>
</ul>
</span>
</div>
</div>
</div>
<!-- -----------------------------
SKILLS
------------------------------ -->
<div class="bloodline pb-5">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">Skills</span>
<span class="text-uppercase"><i class="fas fa-swords"></i></span>
</div><hr class="my-0">
<div class="py-3">
<div class="row no-gutters">
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Hunting</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Fighting</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Agility</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Swimming</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Herbial Knowledge</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Leadership</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<!-------- [ add/remove more kin above THIS line! ] -------->
</div>
</div>
</div>
<!-- -----------------------------
BLOODLINE
------------------------------ -->
<div class="bloodline pb-5">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">Bloodline</span>
<span class="text-uppercase"><i class="fas fa-trees"></i></span>
</div><hr class="my-0">
<div class="py-3">
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Father :</span>
<span class="w-50 text-right">Morbi urna neque, rhoncus quis iaculis at, mollis ut augue.</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Mother :</span>
<span class="w-50 text-right">Aliquam malesuada diam sit amet risus bibendum, at blandit nibh aliquam.</span>
</div>
<div class="p-1 pt-3">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Mate :</span>
<span class="w-50 text-right">Phasellus rutrum elit nunc, eu hendrerit metus scelerisque mollis.</span>
</div>
<div class="p-1">
<span class="w-50 pr-2 text-truncate text-uppercase text-muted">Kits :</span>
<span class="w-50 text-right">Integer et nisi id neque consectetur pellentesque</span>
</div>
<!-------- [ add/remove more kin above THIS line! ] -------->
</div>
</div>
<!-- -----------------------------
HISTORY
------------------------------ -->
<div class="history">
<div class="justify-content-between px-2" style="font-size:15px; letter-spacing:2px;">
<span class="text-uppercase">History</span>
<span class="text-uppercase"><i class="fas fa-books"></i></span>
</div><hr class="my-0">
<div class="py-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt velit ac tincidunt commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt velit ac tincidunt commodo. Nam nec ligula sit amet neque tincidunt efficitur et dapibus justo. Aliquam erat volutpat. Morbi at massa egestas, dignissim elit ut, fringilla tellus.</p>
<p>Curabitur maximus sit amet neque pellentesque consequat. Curabitur dapibus dui ac fermentum fringilla. Aenean varius ornare urna, non luctus augue tristique a. Donec tortor ex, fringilla sit amet dignissim et, lobortis sed sem. Integer rhoncus lectus erat, in rhoncus ligula rhoncus sed. Nunc pellentesque massa nec orci vehicula malesuada.</p>
</div>
</div>
<!-------- [ don't touch the below thank!! ] -------->
</div></div></div></div>
<!-- -----------------------------
Credits
------------------------------ -->
</div><div class="p-1 text-right text-muted"><small>
code by <a href="https://toyhou.se/7583723.-f2u-warrior-biography-2" class="text-muted">jiko</a>
</small></div></div>