<!-- -----------------------------
Warrior Biography 1 - 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!!
– for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
------------------------------ -->
<div class="mx-auto col-lg-12 card rounded-0 bg-faded p-2"
style="max-width:850px; margin-top:40px; font-size:12px;">
<div class="row no-gutters">
<!-- -----------------------------
IMAGE
------------------------------ -->
<div class="col-lg-4 p-1">
<div class="rounded card bg-faded h-100">
<div style="min-height:400px;
background: url(IMG LINK);
background-position: center;
background-size:cover;
background-repeat: no-repeat;">
</div>
</div>
</div>
<!-- -----------------------------
CONTENT
------------------------------ -->
<div class="col-lg-8 p-1">
<!-- -----------------------------
TABS
------------------------------ -->
<ul class="nav nav-tabs card-header-tabs text-center row mb-2">
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block active" data-toggle="tab" href="#demeanour" style="text-decoration: none!important;">
<i class="fas fa-user p-1"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block" data-toggle="tab" href="#appearance" style="text-decoration: none!important;">
<i class="fas fa-star p-1"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block" data-toggle="tab" href="#personality" style="text-decoration: none!important;">
<i class="fas fa-heart p-1"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block" data-toggle="tab" href="#history" style="text-decoration: none!important;">
<i class="fas fa-book p-1"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block" data-toggle="tab" href="#stats" style="text-decoration: none!important;">
<i class="fas fa-chart-bar p-1"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-1 card btn-block" data-toggle="tab" href="#trivia" style="text-decoration: none!important;">
<i class="fas fa-question p-1"></i>
</a>
</li>
</ul>
<!-- -----------------------------
CONTENT
------------------------------ -->
<div class="tab-content">
<!-- -----------------------------
BASICS
------------------------------ -->
<div class="tab-pane fade card rounded-0 active show" id="demeanour" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
demeanour
</div>
<!-- -----------------------------
INFO
------------------------------ -->
<div class="pt-2"><div class="row no-gutters">
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-comment-dots"></i></span>
<span class="text-right">name</span>
</div>
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-venus-mars"></i></span>
<span class="text-right">gender/sex</span>
</div>
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-calendar-alt"></i></span>
<span class="text-right">age</span>
</div>
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-heart"></i></span>
<span class="text-right">orientation</span>
</div>
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-paperclip"></i></span>
<span class="text-right">ranking</span>
</div>
<div class="col-lg-6 justify-content-between p-2">
<span class="text-muted text-uppercase" style="letter-spacing:1px;">
<i class="far fa-paw"></i></span>
<span class="text-right">residence</span>
</div>
<!-- ---- [ add/delete from above THIS line! ] ---- -->
</div></div><hr>
<!-- -----------------------------
QUOTE
------------------------------ -->
<div class="text-center">
<i class="pull-left mr-3 fas fa-quote-left"></i>
<i class="pull-right ml-3 fas fa-quote-right"></i>
<i class="text-muted">Very epic quote or lyric.</i>
</div>
<hr>
<!-- -----------------------------
MOODBOARD
------------------------------ -->
<div class="row no-gutters" style="margin:-.5rem;">
<!-- first image -->
<div class="col-4 p-2">
<div class="rounded" style="padding-top:65%;
background-image: url(IMG LINK);
background-size:cover;
background-position: center;">
</div>
</div>
<!-- second image -->
<div class="col-4 p-2">
<div class="rounded" style="padding-top:65%;
background-image: url(IMG LINK);
background-size:cover;
background-position: center;">
</div>
</div>
<!-- third image -->
<div class="col-4 p-2">
<div class="rounded" style="padding-top:65%;
background-image: url(IMG LINK);
background-size:cover;
background-position: center;">
</div>
</div>
</div>
</div>
</div>
<!-- -----------------------------
APPEARANCE
------------------------------ -->
<div class="tab-pane fade card rounded-0" id="appearance" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
exterior
</div><div class="pt-3">
<!-- ----
if you want to be simple, follow the first segment notes to
remove the extra description :)
repeat whenever necessary
---- -->
<div class="row no-gutters bg-faded p-3">
<div class="col-6 text-center text-uppercase text-muted" style="letter-spacing:1px">Breed</div>
<div class="col-6 text-center">content</div>
<!-- DELETE FROM THIS LINE -->
<hr class="w-100 mt-2"><div class="col-12 text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim mauris, varius commodo dui quis, gravida malesuada felis. Sed dignissim ipsum in nisi tincidunt vehicula sed a ligula. Nullam cursus est nisl, vitae dictum eros tempor at.
</div>
<!-- TO THIS LINE -->
</div>
<div class="row no-gutters p-3">
<div class="col-6 text-center text-uppercase text-muted" style="letter-spacing:1px">Fur Colour</div>
<div class="col-6 text-center">content</div>
<hr class="w-100 mt-2"><div class="col-12 text-muted">
Donec efficitur feugiat volutpat. Maecenas pellentesque vehicula sem, id malesuada lectus lobortis at. Maecenas pharetra velit id ante sollicitudin sagittis. Integer placerat velit in tempor lacinia. Vivamus nibh ante, finibus non lacinia vel, vestibulum et felis. Phasellus leo purus, ultricies nec justo eget, pharetra tempus lectus.
</div>
</div>
<div class="row no-gutters bg-faded p-3">
<div class="col-6 text-center text-uppercase text-muted" style="letter-spacing:1px">Body Shape</div>
<div class="col-6 text-center">content</div>
<hr class="w-100 mt-2"><div class="col-12 text-muted">
Vestibulum consequat porta nulla, nec finibus dolor pretium non. Quisque lorem turpis, faucibus vel aliquam ut, facilisis sed velit.
</div>
</div>
<div class="row no-gutters p-3">
<div class="col-6 text-center text-uppercase text-muted" style="letter-spacing:1px">Eyes</div>
<div class="col-6 text-center">content</div>
<hr class="w-100 mt-2"><div class="col-12 text-muted">
Quisque nibh metus, semper quis risus eu, pulvinar dictum ipsum. Quisque venenatis euismod mi, sed auctor metus interdum ac. Donec et sem lectus. Donec ut quam at mi interdum porta quis eget justo. Mauris laoreet turpis a nisl tempus, tempor sodales lectus varius.
</div>
</div>
<div class="row no-gutters bg-faded p-3">
<div class="col-6 text-center text-uppercase text-muted" style="letter-spacing:1px">Scars/Disabilities</div>
<div class="col-6 text-center">content</div>
<hr class="w-100 mt-2"><div class="col-12 text-muted">
Etiam sed turpis porttitor, gravida urna vitae, malesuada risus.
</div>
</div>
<!-- ---- [ add/delete from above THIS line! ] ---- -->
</div>
</div>
</div>
<!-- -----------------------------
PERSONALITY
------------------------------ -->
<div class="tab-pane fade card rounded-0" id="personality" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
innards
</div><div class="text-muted pt-3">
<!-- ------------- [ positive traits ] ------------ -->
<div class="row mb-2">
<div class="col hidden-sm-down"><hr class="my-2"></div>
<div class="col-auto mx-auto">
<h1 class="text-uppercase display-4 text-success" style="font-size:13px; letter-spacing:2px">
trait . trait . trait</h1></div>
<div class="col hidden-sm-down"><hr class="my-2"></div>
</div><div class="bg-faded p-3 mb-4">
<p><i class="fas fa-plus text-success mr-3"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
<p>Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>
</p></div>
<!-- ------------- [ neutral traits ] ------------- -->
<div class="row mb-2">
<div class="col hidden-sm-down"><hr class="my-2"></div>
<div class="col-auto mx-auto">
<h1 class="text-uppercase display-4 text-warning" style="font-size:13px; letter-spacing:2px">
trait . trait . trait</h1></div>
<div class="col hidden-sm-down"><hr class="my-2"></div>
</div><div class="bg-faded p-3 mb-4">
<p><i class="fas fa-equals text-warning mr-3"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
<p>Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>
</p></div>
<!-- ------------- [ negative traits ] ------------- -->
<div class="row mb-2">
<div class="col hidden-sm-down"><hr class="my-2"></div>
<div class="col-auto mx-auto">
<h1 class="text-uppercase display-4 text-danger" style="font-size:13px; letter-spacing:2px">
trait . trait . trait</h1></div>
<div class="col hidden-sm-down"><hr class="my-2"></div>
</div><div class="bg-faded p-3">
<p><i class="fas fa-minus text-danger mr-3"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
<p>Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>
</p></div>
</div></div></div>
<!-- -----------------------------
HISTORY
------------------------------ -->
<div class="tab-pane fade card rounded-0" id="history" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
the lore
</div><div class="pt-3">
<div class="mb-4">
<h1 class="text-uppercase display-4" style="font-size:15px; letter-spacing:2px">
The Beginning. . .
<i class="far fa-bookmark pull-right"></i></h1>
<div class="bg-faded text-muted p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat aliquet nunc in tincidunt. Sed id risus sapien. Maecenas in ex dui. Aenean luctus aliquet malesuada. Nulla facilisi. Nulla sed fringilla turpis. Donec eu risus tellus. Donec in dignissim lacus, sit amet pellentesque augue.</p>
<p>Cras rhoncus non felis sed dignissim. Quisque condimentum vestibulum felis, non elementum magna posuere sit amet. Nullam id consequat justo. Nullam facilisis dolor tellus, ac dapibus nibh condimentum congue. Maecenas et nunc dui.</p>
<p>Aliquam in leo eget augue tempus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis neque maximus tellus tincidunt egestas nec quis auguea.</p>
</div>
</div>
<div class="mb-4">
<h1 class="text-uppercase display-4" style="font-size:15px; letter-spacing:2px">
The Middle. . .
<i class="far fa-bookmark pull-right"></i></h1>
<div class="bg-faded text-muted p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat aliquet nunc in tincidunt. Sed id risus sapien. Maecenas in ex dui. Aenean luctus aliquet malesuada. Nulla facilisi. Nulla sed fringilla turpis. Donec eu risus tellus. Donec in dignissim lacus, sit amet pellentesque augue.</p>
<p>Cras rhoncus non felis sed dignissim. Quisque condimentum vestibulum felis, non elementum magna posuere sit amet. Nullam id consequat justo. Nullam facilisis dolor tellus, ac dapibus nibh condimentum congue. Maecenas et nunc dui.</p>
<p>Aliquam in leo eget augue tempus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis neque maximus tellus tincidunt egestas nec quis auguea.</p>
</div>
</div>
<div class="mb-3">
<h1 class="text-uppercase display-4" style="font-size:15px; letter-spacing:2px">
The End. . .
<i class="far fa-bookmark pull-right"></i></h1>
<div class="bg-faded text-muted p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat aliquet nunc in tincidunt. Sed id risus sapien. Maecenas in ex dui. Aenean luctus aliquet malesuada. Nulla facilisi. Nulla sed fringilla turpis. Donec eu risus tellus. Donec in dignissim lacus, sit amet pellentesque augue.</p>
<p>Cras rhoncus non felis sed dignissim. Quisque condimentum vestibulum felis, non elementum magna posuere sit amet. Nullam id consequat justo. Nullam facilisis dolor tellus, ac dapibus nibh condimentum congue. Maecenas et nunc dui.</p>
<p>Aliquam in leo eget augue tempus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis neque maximus tellus tincidunt egestas nec quis auguea.</p>
</div>
</div>
<!-- ---- [ add/delete from above THIS line! ] ---- -->
</div></div></div>
<!-- -----------------------------
STATS
------------------------------ -->
<div class="tab-pane fade card rounded-0" id="stats" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
stats
</div><div class="pt-3">
<div class="row no-gutters">
<div class="col-6">
<div class="text-uppercase text-center" style="letter-spacing:1px">Likes</div>
<hr class="mx-2 mt-1"><ul class="text-muted">
<li>thing</li>
<li>thing</li>
<li>thing</li>
</ul>
</div>
<div class="col-6 ">
<div class="text-uppercase text-center" style="letter-spacing:1px">Dislikes</div>
<hr class="mx-2 mt-1"><ul class="text-muted">
<li>thing</li>
<li>thing</li>
<li>thing</li>
</ul>
</div>
</div>
<div class="row no-gutters pt-4">
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Offence</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">Defence</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">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">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">Medical</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>
</div>
</div>
</div>
</div>
<!-- -----------------------------
TRIVIA
------------------------------ -->
<div class="tab-pane fade card rounded-0" id="trivia" style="height:364px; overflow:auto">
<div class="p-3 px-4">
<div class="text-center card rounded-0 bg-faded" style="font-size:18px; letter-spacing:3mm; font-variant: small-caps;">
misc.
</div><div class="pt-4">
<div class="text-uppercase text-center" style="letter-spacing:1px">Design Notes</div>
<hr class="mx-2 mt-1"><ul class="text-muted">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>In consequat aliquet nunc in tincidunt. Sed id risus sapien. Maecenas in ex dui.</li>
<li>Donec eu risus tellus. Donec in dignissim lacus, sit amet pellentesque augue.</li>
</ul>
</div><div class="pt-4">
<div class="text-uppercase text-center" style="letter-spacing:1px">Trivia</div>
<hr class="mx-2 mt-1"><ul class="text-muted">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>In consequat aliquet nunc in tincidunt. Sed id risus sapien. Maecenas in ex dui.</li>
<li>Donec eu risus tellus. Donec in dignissim lacus, sit amet pellentesque augue.</li>
</ul>
</div>
</div></div>
<!-- ----------- DO NOT TOUCH THE </div>'s BELOW TY!! ---------------- -->
</div></div></div>
<!-- -----------------------------
Credits
------------------------------ -->
<div class="mx-auto col-12 p-1" style="max-width:850px">
<div class="text-muted text-right p-1" style="font-size:10px">
code by <a href="https://toyhou.se/7014090.-f2u-warrior-biography-1" class="text-muted">jiko</a> |
front image by <a href="LINK TO ARTIST" class="text-muted">artist</a> |
moodboard images from <a href="LINK TO WEBSITE" class="text-muted">website</a>
</div>
</div>
</div>