wikia
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!--- colors (ctrl f and replace all)
#ffffff - main background
#3a3a3a - text color
#00b9b6 - link color
#cecece - border
#f4b054 - box title background
#fbf9af - box title color
--->
<div class="container m-0 p-4" style="background: #ffffff; color: #3a3a3a;">
<!--- title --->
<h1 class="display-3">Character Name</h1>
<!--- top info --->
<div class="row no-gutters">
<div class="col-md-7 p-3 order-md-1 order-2">
<!--- brief about paragraph --->
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<!-- table of contents --->
<div class="card mt-3" style="border-color: #cecece; background: #ffffff;">
<div class="card-header p-3" style="border-color: #cecece; background: #ffffff;">
<h2 class="justify-content-between" style="font-size: 15px;">
<span><i class="fas fa-list mr-2"></i> Contents</span>
<span>[<a href="#toc-collapse" data-toggle="collapse" style="color: #00b9b6;">collapse</a>]</span>
</h2>
</div>
<!--- table of contents --->
<div class="collapse p-2 show" id="toc-collapse">
<ol class="list-unstyled">
<!--- example section, copy and paste if you need to add another section, make sure that SECTION_NAME matches the SECTION_NAME in the section's id.
<li><a href="#SECTION_NAME" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">SECTION_NUMBER.</span> SECTION NAME
</a></li>
--->
<li><a href="#development-and-design" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">1.</span> Development and design
</a></li>
<ol class="list-unstyled ml-3">
<li><a href="#name" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">1.1.</span> Name
</a></li>
</ol>
<li><a href="#depiction-in-series" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.</span> Depiction in the series
</a></li>
<!--- subsection --->
<ol class="list-unstyled ml-3">
<li><a href="#diligence" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.1.</span> Diligence
</a></li>
<li><a href="#mannerisms" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.2.</span> Mannerisms
</a></li>
<li><a href="#skills" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.3.</span> Skills
</a></li>
<!--- sub subsection --->
<ol class="list-unstyled ml-3">
<li><a href="#strength" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.3.1.</span> Strength
</a></li>
<li><a href="#athleticism" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.3.2.</span> Athleticism
</a></li>
</ol>
</ol>
<!--- end subsection --->
<li><a href="#other-depictions" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">3.</span> Other depictions
</a></li>
<li><a href="#quotes" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">4.</span> Quotes
</a></li>
<li><a href="#gallery" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">5.</span> Gallery
</a></li>
<li><a href="#notes" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">6.</span> Notes
</a></li>
</ol>
</div>
</div>
</div>
<!--- side card --->
<div class="col-md-5 p-3 order-md-1 order-2">
<div class="card p-2" style="background: #ffffff; color: #3a3a3a; border-color: #cecece;">
<div class="card border-0 p-3" style="background: #f4b054; color: #fbf9af; border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
<h1 class="text-center" style="font-weight: bold;">Character Name</h1>
</div>
<!--- nav for different forms --->
<ul class="nav mt-3">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#ONE" style="color: #00b9b6; font-weight: bold;">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#TWO" style="color: #00b9b6; font-weight: bold;">Future</a>
</li>
</ul>
<hr class="w-100 mt-n2" style="border-top: 1px solid #cecece;">
<!--- refs for different forms --->
<div class="tab-content">
<!--- main --->
<div class="tab-pane active text-center" id="ONE">
<!--- nav for different forms --->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#EARTH" style="color: #00b9b6; font-weight: bold;">Earth</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#YOUNGER" style="color: #00b9b6; font-weight: bold;">Younger</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#FILLY" style="color: #00b9b6; font-weight: bold;">Filly</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#INFANT" style="color: #00b9b6; font-weight: bold;">Infant</a>
</li>
</ul>
<hr class="w-100 mt-n2" style="border-top: 1px solid #cecece;">
<div class="tab-content">
<!--- form --->
<div class="tab-pane active text-center" id="EARTH">
<img src="IMGURL"><br><br>
<span class="font-italic">Caption with <a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a></span>
</div>
<!--- form --->
<div class="tab-pane text-center" id="YOUNGER">
<img src="IMGURL"><br><br>
<span class="font-italic">Caption with <a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a></span>
</div>
<!--- form --->
<div class="tab-pane text-center" id="FILLY">
<img src="IMGURL"><br><br>
<span class="font-italic">Caption with <a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a></span>
</div>
<!--- form --->
<div class="tab-pane text-center" id="INFANT">
<img src="IMGURL"><br><br>
<span class="font-italic">Caption with <a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a></span>
</div>
</div>
<!--- the inner nav for different forms ends here --->
</div>
<!--- future --->
<div class="tab-pane text-center" id="TWO">
<img src="IMGURL"><br><br>
<span class="font-italic">Caption with <a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a></span>
</div>
</div>
<!--- info --->
<div class="row no-gutters mt-3">
<div class="col-4 p-1"><strong>Kind</strong></div>
<div class="col-8 p-1">
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Unicorn/Pegasus/Earth/Alicorn</a>
</div>
<div class="col-4 p-1"><strong>Sex</strong></div>
<div class="col-8 p-1">
Sex
</div>
<div class="col-4 p-1"><strong>Residence</strong></div>
<div class="col-8 p-1">
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Residence</a>
</div>
<div class="col-4 p-1"><strong>Occupation</strong></div>
<div class="col-8 p-1">
<ul class="list-unstyled mb-0">
<li>Occupation</li>
</ul>
</div>
<div class="col-4 p-1"><strong>Other Links</strong></div>
<div class="col-8 p-1">
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Link</a>
</div>
</div>
<!--- more info --->
<div class="card border-0 rounded-0 p-1" style="background: #f4b054; color: #fbf9af;">
<span class="justify-content-between">
<span></span>
<span><strong>More info</strong></span>
<span>[<a href="#card-more-info" data-toggle="collapse" style="color: #fbf9af;">collapse</a>]</span>
</span>
</div>
<div class="collapse" id="card-more-info">
<div class="row no-gutters">
<div class="col-4 p-1"><strong>Eyes</strong></div>
<div class="col-8 p-1">
<span style="display: inline;">
<!--- change color here --->
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</div>
<div class="col-4 p-1"><strong>Mane</strong></div>
<div class="col-8 p-1">
<ul class="list-unstyled mb-0">
<li>
<span style="display: inline;">
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</li>
<li>
<span style="display: inline;">
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</li>
<li>
<span style="display: inline;">
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</li>
<li>
<span style="display: inline;">
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</li>
</ul>
</div>
<div class="col-4 p-1"><strong>Coat</strong></div>
<div class="col-8 p-1">
<span style="display: inline;">
<span class="px-2 mr-2" style="background: #000000;"></span>
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Color description</a>
</span>
</div>
<div class="col-4 p-1"><strong>Nicknames</strong></div>
<div class="col-8 p-1"> List, of, nicknames</div>
<div class="col-4 p-1"><strong>Relatives</strong></div>
<div class="col-8 p-1">
<ul class="list-unstyled mb-0">
<li><a href="LINK" style="color: #00b9b6; font-weight: bold;">Name</a> (relation)</li>
<li><a href="LINK" style="color: #00b9b6; font-weight: bold;">Name</a> (relation)</li>
<li><a href="LINK" style="color: #00b9b6; font-weight: bold;">Name</a> (relation)</li>
</ul>
</div>
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-1 text-center" style="background: #f4b054; color: #fbf9af;">
<strong>Cutie mark</strong><br>
<!--- cutie mark --->
<img class="mx-auto" src="IMGURL" style="height: 100px; width: 100px;">
</div>
</div>
<div class="col-4 p-1"><strong>Voice</strong></div>
<div class="col-8 p-1">
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Voiceclaim</a>
</div>
<div class="col-4 p-1"><strong>Singing voice</strong></div>
<div class="col-8 p-1">
<a href="LINK" style="color: #00b9b6; font-weight: bold;">Voiceclaim</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- development and design --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="development-and-design">Development and design</h2>
<div class="d-flex flex-row">
<!--- images --->
<div class="order-2 ml-2" style="min-width: 255px;">
<img src="IMGURL">
<p style="font-size: 12px;">Image caption</p>
<img src="IMGURL">
<p style="font-size: 12px;">Image caption</p>
</div>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
</div>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<h3 class="ml-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="name">Name</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<!--- depiction in series --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="depiction-in-series">Depiction in the series</h2>
<!--- subsection --->
<h3 class="ml-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="diligence">Diligence</h3>
<!--- quote --->
<p class="ml-3">
<span class="font-italic">"Quote"</span><br>
<span>— context for the quote</span>
</p>
<!--- image on right --->
<div class="pull-right ml-2" style="width: 250px;">
<img src="IMGURL">
</div>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<!--- subsection --->
<h3 class="ml-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="mannerisms">Mannerisms</h3>
<!--- image on left --->
<div class="pull-left ml-2" style="width: 250px;">
<img src="IMGURL"><br>
<span>Image caption</span>
</div>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<!--- subsection --->
<h3 class="ml-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="skills">Skills</h3>
<h4 class="ml-5" style="font-weight: 500; line-height: 1.25; font-size: 16px;" id="strength">Strength</h4>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<ul>
<li>More about the skill</li>
<li>More about the skill</li>
<li>More about the skill</li>
</ul>
<h4 class="ml-5" style="font-weight: 500; line-height: 1.25; font-size: 16px;" id="athleticism">Athleticism</h4>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<ul>
<li>More about the skill</li>
<li>More about the skill</li>
<li>More about the skill</li>
</ul>
<!--- other depictions --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="other-depictions">Other depictions</h2>
<!--- subsection --->
<h3 class="ml-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="hasbro-description">Hasbro.com description</h3>
<p class="font-italic">
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #00b9b6; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout.
</p>
<!--- quotes --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="quotes">Quotes</h2>
<!--- quote --->
<p class="ml-3 my-4">
<span class="font-italic">"Quote"</span><br>
<span>— context around quote</span>
</p>
<!--- quote --->
<p class="ml-3 my-4">
<span class="font-italic">"Quote"</span><br>
<span>— context around quote</span>
</p>
<!--- quote --->
<p class="ml-3 my-4">
<span class="font-italic">"Quote"</span><br>
<span>— context around quote</span>
</p>
<!--- quote --->
<p class="ml-3 my-4">
<span class="font-italic">"Quote"</span><br>
<span>— context around quote</span>
</p>
<!--- quote --->
<p class="ml-3 my-4">
<span class="font-italic">"Quote"</span><br>
<span>— context around quote</span>
</p>
<!--- gallery --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="gallery">Gallery</h2>
<div class="row no-gutters">
<!--- image --->
<div class="col-md-3 col-6 p-1">
<div style="background: url(IMGURL); background-size: cover; height: 150px; border: 1px solid #f4b054;"></div>
</div>
<!--- image --->
<div class="col-md-3 col-6 p-1">
<div style="background: url(IMGURL); background-size: cover; height: 150px; border: 1px solid #f4b054;"></div>
</div>
<!--- image --->
<div class="col-md-3 col-6 p-1">
<div style="background: url(IMGURL); background-size: cover; height: 150px; border: 1px solid #f4b054;"></div>
</div>
<!--- image --->
<div class="col-md-3 col-6 p-1">
<div style="background: url(IMGURL); background-size: cover; height: 150px; border: 1px solid #f4b054;"></div>
</div>
<!--- copy/paste more images below this line --->
</div>
<!--- notes --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="notes">Notes</h2>
<ul>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
</ul>
</div>
<div class="pull-right"><a href="https://toyhou.se/8byte" class="tooltipster" data-placement="bottom" title="code credits"><i class="fas fa-crow"></i></a></div>Copy
<!--- colors (ctrl f and replace all)
#2b2239 - background
#e1e0e1 - main font (white)
#010101 - secondary font (black)
#00cdd0 - links
#5a5364 - dividers
#ebf6f9 - quotes bubble
#d2effa - ceremonies bubble
#01267d - ceremonies font
#3d3152 - info card background
#1f103d - info card headers
warnings:
#ccffff - teal
#0e70ff - font and border
#f57f7f - red
#ba5252 - border
#f2e6ff - purple
#9060bf - font and border
--->
<div class="container m-0 p-4" style="background: #2b2239; color: #e1e0e1;">
<!--- title --->
<h1 class="display-3">Bramblestar</h1>
<!--- warning --->
<div class="card my-4 mx-auto p-2" style="background: #f57f7f; color: #010101; border: 2px dashed #ba5252; max-width: 550px; border-radius: 20px;">
<div class="d-flex flex-row">
<i class="fas fa-exclamation-triangle fa-4x"></i>
<div class="ml-4">
<span style="font-weight: bold;">Content Warnings</span>
<ul>
<li>Warning</li>
<li>Warning</li>
<li>Warning</li>
</ul>
</div>
</div>
</div>
<!--- warning --->
<div class="card my-4 mx-auto p-2 font-italic" style="background: #f2e6ff; color: #9060bf; border: 2px dashed #9060bf; max-width: 340px; border-radius: 20px;">
<span><strong>Warning:</strong> Another warning here.</span>
</div>
<!--- quote --->
<div class="card border-0 my-4 mx-auto p-2" style="background: #ebf6f9; color: #010101; max-width: 520px;">
<p class="font-italic">
"Quote from the character."
</p>
<p class="text-right" style="font-weight: 500;">— Character to <a href="LINK" style="color: #00cdd0;">Character</a></p>
</div>
<!--- content --->
<div class="row no-gutters mt-5">
<!--- about the character paragraph --->
<div class="col-md-7 p-3 order-md-1 order-2">
<p>This is a paragraph. To bold a word, use <strong>around the word</strong>.</p>
<p>This is a paragraph with <a href="LINK" style="color: #00cdd0;">links</a>. Make sure you copy paste the link code so the colors show up correctly!</p>
</div>
<!--- quick info box --->
<div class="col-md-5 p-3 order-md-2 order-1">
<div class="card p-1 border-0" style="background: #3d3152; border-radius: 20px;">
<div class="card text-center" style="background: #1f103d; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
<strong>Name</strong>
</div>
<!--- navigation for different forms --->
<ul class="nav mt-3">
<!--- form 1 --->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#ONE" style="color: #00cdd0;">Pixel</a>
</li>
<!--- form 2 --->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#TWO" style="color: #00cdd0;">Official Art</a>
</li>
</ul>
<!--- refs for different forms --->
<div class="tab-content p-3">
<!--- form 1 --->
<div class="tab-pane active text-center" id="ONE">
<img src="https://static.wikia.nocookie.net/warriors/images/5/54/Bramblestar.leader.alt.png">
</div>
<!--- form 2 --->
<div class="tab-pane text-center" id="TWO">
<img src="https://static.wikia.nocookie.net/warriors/images/e/e1/Bramblestar.FG-6.png">
</div>
</div>
<!--- affiliations --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Affiliations</strong>
</div>
<div class="row no-gutters">
<div class="col-5 text-right p-1"><strong>Current:</strong></div>
<div class="col-7 p-1">
<ul class="list-unstyled mb-0">
<!--- affiliation, you can change the image that appears next to it if needed --->
<li><img src="https://static.wikia.nocookie.net/warriors/images/2/2b/Logo-thunderclan-textless.png" style="width: 20px; height: 20px;"> <a href="LINK" style="color: #00cdd0;">Affiliation</a></li>
</ul>
</div>
<div class="col-5 text-right p-1"><strong>Past:</strong></div>
<div class="col-7 p-1">
<ul class="list-unstyled mb-0">
<!--- affiliation --->
<li><img src="https://static.wikia.nocookie.net/warriors/images/e/e2/Noimage-textless.png" style="width: 20px; height: 20px;"> <a href="LINK" style="color: #00cdd0;">Affiliation</a></li>
<!--- affiliation --->
<li><img src="https://static.wikia.nocookie.net/warriors/images/e/e2/Noimage-textless.png" style="width: 20px; height: 20px;"> <a href="LINK" style="color: #00cdd0;">Affiliation</a></li>
<!--- affiliation --->
<ul class="list-unstyled">
<li class="font-italic" style="font-size: 12px;">(You can write in notes)</li>
</ul>
<!--- affiliation --->
<li><img src="https://static.wikia.nocookie.net/warriors/images/e/e2/Noimage-textless.png" style="width: 20px; height: 20px;"> <a href="LINK" style="color: #00cdd0;">Affiliation</a></li>
</ul>
</div>
</div>
<!--- names --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Names</strong>
</div>
<div class="row no-gutters">
<!--- these can be added/deleted as needed --->
<div class="col-5 text-right p-1"><strong>Kit:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Apprentice:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Warrior:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Senior warrior:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Deputy:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Leader:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Ghost:</strong></div>
<div class="col-7 p-1">Name</div>
<div class="col-5 text-right p-1"><strong>Dark Forest resident:</strong></div>
<div class="col-7 p-1">Name</div>
</div>
<!--- kin --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Kin</strong>
</div>
<div class="row no-gutters">
<!--- these can be added/deleted as needed --->
<div class="col-5 text-right p-1"><strong>Mother:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Father:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Sister:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Foster brother:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Foster sister:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Half-sister:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Half-brothers:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a>, <a href="LINK" style="color: #00cdd0;">Tadpole</a>, <a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Half-sibling:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Mate:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Daughters:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a>, <a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Sons:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a>, <a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Adopted daughter:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Adopted sons:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a>, <a href="LINK" style="color: #00cdd0;">Name</a></div>
</div>
<!--- education --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Education</strong>
</div>
<div class="row no-gutters">
<!--- these can be added/deleted as needed --->
<div class="col-5 text-right p-1"><strong>Mentor:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Dark Forest mentor:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Apprentice:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
</div>
<!--- deputy position --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Deputy Position</strong>
</div>
<div class="row no-gutters">
<!--- these can be added/deleted as needed --->
<div class="col-5 text-right p-1"><strong>Preceded by:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Succeeded by:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
</div>
<!--- leader position --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Leader Position</strong>
</div>
<div class="row no-gutters">
<!--- these can be added/deleted as needed --->
<div class="col-5 text-right p-1"><strong>Preceded by:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
<div class="col-5 text-right p-1"><strong>Succeeded by:</strong></div>
<div class="col-7 p-1"><a href="LINK" style="color: #00cdd0;">Name</a></div>
</div>
<!--- book appearances --->
<div class="card text-center" style="background: #1f103d; border-radius: 15px;">
<strong>Book Appearances</strong>
</div>
<h3 class="text-center mb-3 mt-2" style="font-weight: 500; line-height: 1.25; font-size: 18px;">Living</h3>
<span class="text-center">
<!--- these can be added/deleted as needed --->
<a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>
</span>
<h3 class="text-center mb-3 mt-2" style="font-weight: 500; line-height: 1.25; font-size: 18px;">Dead</h3>
<span class="text-center">
<!--- these can be added/deleted as needed --->
<a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>, <a href="LINK" style="color: #00cdd0;">Book title</a>
</span>
</div>
</div>
</div>
<!--- history --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">History</h2>
<!--- subheader --->
<h3 class="font-italic mt-3" style="font-weight: 500; line-height: 1.25; font-size: 18px; color: #00cdd0;">The Prophecies Begin</h3>
<!--- top quote --->
<span class="font-italic ml-4">"Quote"</span>
<p class="ml-4">―Character to Character</p>
<!--- text --->
<p class="ml-4">This is a paragraph with <a href="LINK" style="color: #00cdd0;">links</a>. Make sure to copy paste the links so the colors show up correctly!</p>
<!--- subheader --->
<h3 class="font-italic mt-3" style="font-weight: 500; line-height: 1.25; font-size: 18px; color: #00cdd0;">The New Prophecy</h3>
<!--- top quote --->
<span class="font-italic ml-4">"Quote"</span>
<p class="ml-4">―Character to Character</p>
<!--- text --->
<p class="ml-4">This is a paragraph with <a href="LINK" style="color: #00cdd0;">links</a>. Make sure to copy paste the links so the colors show up correctly!</p>
<!--- another paragraph --->
<p class="ml-4">This is another paragraph below the previous paragraph. Make sure to copy paste exactly so that the paragraph breaks work!</p>
<!--- detailed description --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Detailed description</h2>
<p class="ml-4">
This is a paragraph.
</p>
<p class="ml-4">
This is another paragraph below the previous paragraph.
</p>
<!--- character pixels --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Character pixels</h2>
<div class="container p-5" style="background: #3d3152;">
<div class="row no-gutters">
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Kit Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Apprentice Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Warrior Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Deputy Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Leader Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Ghost Residence Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Dark Forest Resident Version</p>
</div>
<div class="col-md-3 col-6 p-1 text-center align-items-center d-flex flex-column">
<img src="IMGURL" style="width: 120px;">
<p class="mt-auto" style="font-size: 12px;">Alternate Leader Version</p>
</div>
</div>
</div>
<!--- killed victims --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Killed victims</h2>
<p class="font-italic" style="font-size: 12px;">This list shows the victims Character has killed:</p>
<ul class="mt-2">
<li><a href="LINK" style="color: #00cdd0;">Character</a><span class="font-italic"> (Note about the deceased)</span></li>
<li><a href="LINK" style="color: #00cdd0;">Character</a><span class="font-italic"> (Note about the deceased)</span></li>
</ul>
<!--- ceremonies --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Ceremonies</h2>
<!--- bubble section --->
<!--- these can be copy/pasted as needed, make sure to change ceremony-one to ceremony-two etc when copy/pasting --->
<div class="card mb-4 p-2" style="background: #d2effa; color: #01267d; border: 3px solid #0e70ff; border-radius: 20px;">
<span class="justify-content-between">
<strong> </strong>
<strong>Character's apprentice ceremony</strong>
<strong>[<a href="#ceremony-one" data-toggle="collapse" style="color: #00cdd0;">Collapse</a>]</strong>
</span>
<div class="collapse mt-3" id="ceremony-one">
<div class="row no-gutters">
<!--- character line --->
<!--- this can be added/deleted as needed --->
<div class="col-md-4 col-6 px-4 text-right"><strong>Character:</strong></div>
<div class="col-md-8 col-6 px-4 font-italic">
<p>Script-like format of what the character said.</p>
<p>You can add paragraph breaks too.</p>
</div>
<!--- end character line --->
</div>
</div>
</div>
<!--- end bubble section --->
<!--- leader info --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Leader info</h2>
<div class="card mb-4 p-2" style="background: #3d3152; border: 1px solid #1f103d; border-radius: 20px;">
<div class="card p-1" style="background: #1f103d;">
<span class="justify-content-between">
<strong> </strong>
<strong>Leader info</strong>
<strong>[<a href="#leader-main" data-toggle="collapse" style="color: #00cdd0;">Collapse</a>]</strong>
</span>
</div>
<div class="collapse mt-3" id="leader-main">
<!--- these can be copy/pasted as needed, make sure to change deputies to a different tag when copy/pasting --->
<!--- deputies --->
<div class="card mb-4 p-2" style="background: #3d3152; border: 1px solid #1f103d; border-radius: 20px;">
<div class="card p-1" style="background: #1f103d;">
<span class="justify-content-between">
<strong> </strong>
<strong>Deputies</strong>
<strong>[<a href="#deputies" data-toggle="collapse" style="color: #00cdd0;">Collapse</a>]</strong>
</span>
</div>
<div class="collapse mt-3" id="deputies">
<div class="row no-gutters">
<div class="col-3 p-1">
<div class="container p-1 font-italic text-center" style="background: #1f103d; font-weight: bold;">
Name
</div>
<div class="ml-2">
<a href="LINK" style="color: #00cdd0;">Name</a>
</div>
</div>
<div class="col p-1">
<div class="container p-1 font-italic text-center" style="background: #1f103d; font-weight: bold;">
From
</div>
<div class="ml-2">
<a href="LINK" style="color: #00cdd0;">Name</a>
</div>
</div>
<div class="col p-1">
<div class="container p-1 font-italic text-center" style="background: #1f103d; font-weight: bold;">
To
</div>
<div class="ml-2">
<a href="LINK" style="color: #00cdd0;">Name</a>
</div>
</div>
</div>
</div>
</div>
<!--- end --->
</div>
</div>
<!--- personality + relationships --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Personality and Relationships</h2>
<p class="ml-4">
Bramblestar is determined to prove himself free of his father's shadow. While he and his mate experienced some tensions, they are devout parents to their children.
</p>
<!--- family --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Kin</h2>
<h3 class="mt-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;">Members</h3>
<!--- section --->
<!--- this can be copy/pasted --->
<p><strong>Mate:</strong></p>
<p class="ml-4">
<a href="LINK" style="color: #00cdd0;">Character</a>: Character Status
</p>
<!--- trivia --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Trivia</h2>
<h3 class="mt-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;">Interesting facts</h3>
<ul>
<!--- these can be added/deleted as needed --->
<li>Trivia</li>
<li>Trivia</li>
<li>Trivia</li>
<li>Trivia</li>
</ul>
<h3 class="mt-3" style="font-weight: 500; line-height: 1.25; font-size: 18px;">Author statements</h3>
<ul>
<!--- these can be added/deleted as needed --->
<li>Trivia</li>
<li>Trivia</li>
<!--- sub-bullet point --->
<ul>
<li>Elaborate</li>
<li>Elaborate</li>
</ul>
<li>Trivia</li>
<li>Trivia</li>
</ul>
<!--- notes --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #5a5364;">Notes</h2>
<ul class="list-unstyled ml-4">
<!--- these can be added/deleted as needed --->
<li><i class="fas fa-long-arrow-up mr-2" style="color: #00cdd0;"></i>Character note</li>
<li><i class="fas fa-long-arrow-up mr-2" style="color: #00cdd0;"></i>Character note</li>
<li><i class="fas fa-long-arrow-up mr-2" style="color: #00cdd0;"></i>Character note</li>
</ul>
</div>
<div class="pull-right"><a href="https://toyhou.se/8byte" class="tooltipster" data-placement="bottom" title="code credits"><i class="fas fa-crow"></i></a></div>Copy
<!--- colors (ctrl f and replace all)
#ffffff - main background
#3a3a3a - text color
#0148c2 - link color
#cecece - border
#3e404c - box title background
#fffb9a - box title color
#ffffff - box title shadow
#fbfafa - spoiler content
--->
<div class="container m-0 p-4" style="background: #ffffff; color: #3a3a3a;">
<!--- title --->
<h1 class="display-3">Character Name</h1>
<!--- quote --->
<div class="container">
<span style="font-family: Times New Roman; font-size: 30px;">“</span>
<span class="font-italic">Quote</span>
<span style="font-family: Times New Roman; font-size: 30px;">”</span>
<div class="text-right">
– Quote context
</div>
</div>
<!--- top info --->
<div class="row no-gutters">
<div class="col-md-7 p-3 order-md-1 order-2">
<!--- brief about paragraphs --->
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<p>
This is another paragraph.
</p>
<!-- table of contents --->
<div class="card mt-3" style="border-color: #cecece; background: #ffffff;">
<div class="card-header p-3" style="border-color: #cecece; background: #ffffff;">
<h2 class="justify-content-between" style="font-size: 15px;">
<span><i class="fas fa-list mr-2"></i> Contents</span>
<span>[<a href="#toc-collapse" data-toggle="collapse" style="color: #0148c2;">collapse</a>]</span>
</h2>
</div>
<!--- table of contents --->
<div class="collapse p-2 show" id="toc-collapse">
<ol class="list-unstyled">
<!--- example section, copy and paste if you need to add another section, make sure that SECTION_NAME matches the SECTION_NAME in the section's id.
<li><a href="#SECTION_NAME" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">SECTION_NUMBER.</span> SECTION NAME
</a></li>
--->
<li><a href="#background" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">1.</span> Background
</a></li>
<ol class="list-unstyled ml-3">
<li><a href="#background-subsection-one" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">1.1.</span> Subsection One
</a></li>
<li><a href="#background-subsection-two" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">1.2.</span> Subsection Two
</a></li>
</ol>
<li><a href="#traits" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.</span> Traits
</a></li>
<!--- subsections --->
<ol class="list-unstyled ml-3">
<li><a href="#personality" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.1.</span> Personality
</a></li>
<li><a href="#appearance" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.2.</span> Appearance
</a></li>
<li><a href="#skills" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.3.</span> Skills
</a></li>
<li><a href="#spells" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">2.4.</span> Spells
</a></li>
</ol>
<li><a href="#example-section" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">3.</span> Example Section
</a></li>
<li><a href="#other-appearances" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">4.</span> Other appearances
</a></li>
<ol class="list-unstyled ml-3">
<li><a href="#appearances-subsection-one" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">4.1.</span> Subsection One
</a></li>
<li><a href="#appearances-subsection-two" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">4.2.</span> Subsection Two
</a></li>
</ol>
<li><a href="#relationships" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">5.</span> Relationships
</a></li>
<li><a href="#notes" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">6.</span> Notes
</a></li>
<li><a href="#gallery" style="color: #3a3a3a;">
<span style="color: #cecece; font-weight: bold;">7.</span> Gallery
</a></li>
</ol>
</div>
</div>
</div>
<!--- side card --->
<div class="col-md-5 p-3 order-md-1 order-2">
<div class="card p-2" style="background: #ffffff; color: #3a3a3a; border-color: #cecece;">
<div class="card border-0 p-3" style="background: #3e404c; color: #fffb9a; border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
<h1 class="text-center" style="font-weight: bold; text-shadow: 0 0 2px #ffffff;">Character Name</h1>
</div>
<hr class="w-100 mt-n2" style="border-top: 1px solid #cecece;">
<div class="container text-center">
<img src="IMGURL"><br><br>
<span class="font-italic">Image Credit <a href="LINK" class="font-italic" style="color: #0148c2; font-weight: bold;">Artist Name</a></span>
</div>
<div class="card border-0 rounded-0 p-1" style="background: #3e404c; color: #fffb9a;">
<span style="text-shadow: 0 0 2px #ffffff;"><strong>Profile</strong></span>
</div>
<!--- info --->
<div class="row no-gutters mt-3">
<div class="col-4 p-1"><strong>Full Name</strong></div>
<div class="col-8 p-1">
Character Name
</div>
<div class="col-4 p-1"><strong>Race</strong></div>
<div class="col-8 p-1">
Unicorn/Pegasus/Earth pony/Alicorn
</div>
<div class="col-4 p-1"><strong>Sex</strong></div>
<div class="col-8 p-1">
Sex
</div>
<div class="col-4 p-1"><strong>Faction/Role</strong></div>
<div class="col-8 p-1">
Faction/Role
</div>
<div class="col-4 p-1"><strong>Family</strong></div>
<div class="col-8 p-1">
<ul class="list-unstyled mb-0">
<li><a href="LINK" style="color: #0148c2; font-weight: bold;">Family member</a> (relationship)</li>
<li><a href="LINK" style="color: #0148c2; font-weight: bold;">Family member</a> (relationship)</li>
<!--- example spoiler tag --->
<li>
<span style="border-top: 1px dotted gray; border-bottom: 1px dotted gray; background: #fbfafa; color: #fbfafa;">
<a href="LINK" style="color: #fbfafa; font-weight: bold;">Family member</a> (relationship)
</span>
</li>
</ul>
</div>
<div class="col-4 p-1"><strong>Status</strong></div>
<div class="col-8 p-1">
<ul class="list-unstyled mb-0">
<li>Alive</li>
<li>
<!--- example spoiler tag --->
<span style="border-top: 1px dotted gray; border-bottom: 1px dotted gray; background: #fbfafa; color: #fbfafa;">Alive</span>
<!--- example superscript --->
<sup class="font-italic">(c.28)</sup></li>
</ul>
</div>
</div>
<!--- more info --->
<div class="card border-0 rounded-0 p-1" style="background: #3e404c; color: #fffb9a;">
<span class="justify-content-between">
<span style="text-shadow: 0 0 2px #ffffff;"><strong>Appearance</strong></span>
<span>[<a href="#card-more-info" data-toggle="collapse" style="color: #fffb9a;">collapse</a>]</span>
</span>
</div>
<div class="collapse" id="card-more-info">
<div class="row no-gutters">
<div class="col-4 p-1"><strong>Mane</strong></div>
<div class="col-8 p-1">
Description
</div>
<div class="col-4 p-1"><strong>Coat</strong></div>
<div class="col-8 p-1">
Description
</div>
<div class="col-4 p-1"><strong>Accessories</strong></div>
<div class="col-8 p-1">
List, of, accessories
</div>
<div class="col-12 p-1">
<div class="card border-0 rounded-0 p-1 text-center" style="background: #3e404c; color: #fffb9a;">
<strong style="text-shadow: 0 0 2px #ffffff;">Cutie mark</strong>
<span>Description of cutie mark</span><br>
<!--- cutie mark --->
<img class="mx-auto" src="IMGURL" style="height: 100px; width: 100px;">
<span>- <a href="LINK" style="color: #0148c2; font-weight: bold;">Image Credits</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- background --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="background">Background</h2>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="background-subsection-one">Background Subsection</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="background-subsection-two">Background Subsection</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- traits --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="traits">Traits</h2>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="personality">Personality</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="appearance">Appearance</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="skills">Skills</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="spells">Spells</h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- example section --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="example-section">Example Section</h2>
<!--- image --->
<div class="pull-right" style="width: 240px;">
<img src="IMGURL">
<p>Image caption</p>
<span>- <a class="font-italic" href="LINK" style="color: #0148c2; font-weight: bold;">Remnantic</a></span>
</div>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- other appearances --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="other-appearances">Other Appearances</h2>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="appearances-subsection-one"><a href="LINK" style="color: #0148c2;">Appearances Subsection One (example of linked subheader)</a></h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- subsection --->
<h3 style="font-weight: 500; line-height: 1.25; font-size: 18px;" id="appearances-subsection-two"><a href="LINK" style="color: #0148c2;">Appearances Subsection Two</a></h3>
<p>
This is a paragraph. This is <strong>bolded content</strong>. This is a <a href="LINK" style="color: #0148c2; font-weight: bold;">link</a>. Make sure to copy the entire link tag (i.e. from <a href... to </a>) so that the colors and formatting are consistent throughout..
</p>
<!--- relationships --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="relationships">Relationships</h2>
<!--- relationship --->
<a href="LINK" style="color: #0148c2; font-weight: bold;">Character Name</a>
<p class="ml-3">
Description of their relationship
</p>
<!--- relationship --->
<a href="LINK" style="color: #0148c2; font-weight: bold;">Character Name</a>
<p class="ml-3">
Description of their relationship
</p>
<!--- notes --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="notes">Notes</h2>
<ul>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
<li>Can be used for trivia or miscellaneous notes</li>
</ul>
<!--- gallery --->
<h2 class="py-2" style="font-weight: 500; line-height: 1.25; font-size: 24px; border-bottom: 1px solid #cecece;" id="gallery">Gallery</h2>
<div class="container p-4">
<div class="row no-gutters">
<!--- image --->
<div class="col-md-4 col-6 p-md-3 p-1 text-center" style="height: 200px;">
<!--- change image here --->
<img class="h-100" src="IMGURL" style="border: 1px solid #cecece;"><br>
<span>Caption</span>
</div>
<!--- image --->
<div class="col-md-4 col-6 p-md-3 p-1 text-center" style="height: 200px;">
<!--- change image here --->
<img class="h-100" src="IMGURL" style="border: 1px solid #cecece;"><br>
</div>
<!--- image --->
<div class="col-md-4 col-6 p-md-3 p-1 text-center" style="height: 200px;">
<!--- change image here --->
<img class="h-100" src="IMGURL" style="border: 1px solid #cecece;"><br>
<span>Caption</span>
</div>
<!--- paste more images below --->
</div>
</div>
</div>
<div class="pull-right"><a href="https://toyhou.se/8byte" class="tooltipster" data-placement="bottom" title="code credits"><i class="fas fa-crow"></i></a></div>Copy
<!---
==== torajira wikia
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#353646 - background color
#ffffff - text
#8ca0cf - links/accent
#faa61a - warning
rgba(140,160,207,0.5) - borders
--->
<div class="mx-auto" style="max-width: 900px;">
<div class="px-4 py-3" style="background: #353646; border: 1px solid #4d4d52; color: #ffffff;">
<!--- tags section --->
<span>
<strong>in:</strong>
<!--- tags --->
<a href="LINK" style="color: #8ca0cf;">tag</a>,
<a href="LINK" style="color: #8ca0cf;">tag</a>,
<a href="LINK" style="color: #8ca0cf;">tag</a>,
<a href="LINK" style="color: #8ca0cf;">tag</a>,
<a href="LINK" style="color: #8ca0cf;">tag</a>
</span>
<!--- character name --->
<h1 class="font-weight-bold my-2" style="font-size: 3rem; letter-spacing: 1px;">Character Name</h1>
<div class="d-flex flex-md-row flex-column">
<!--- right section --->
<div class="order-md-2 order-1 ml-md-3 mx-auto" style="min-width: 250px;">
<div style="box-shadow: 0 3px 6px 0 rgba(0,0,0,.15); border-radius: 0 0 .25rem .25rem; overflow: hidden;" id="INFO-BOX">
<div class="px-2 py-1" style="border-top: 3px solid #8ca0cf; position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 15px; height: 10px; border-top: 7.5px solid #8ca0cf; border-left: 7.5px solid #8ca0cf; border-bottom: 7.5px solid transparent; border-right: 7.5px solid transparent;"></div>
<!--- character name --->
<h2 class="mb-0" style="font-size: 20px;">Character Name</h2>
<!--- translated name ---><hr class="my-0 w-100 mx-n2" style="border-top: 1px solid rgba(0,0,0,.15);" />
<h2 class="mb-0" style="font-size: 16px; opacity: .6;">subtitle</h2>
</div>
<!--- image tabs --->
<ul class="nav">
<li class="nav-item p-0"><a href="#IMG-ONE" data-toggle="tab" class="nav-link active px-2 py-1 d-block" style="color: #ffffff;">Image One</a></li>
<li class="nav-item p-0"><a href="#IMG-TWO" data-toggle="tab" class="nav-link px-2 py-1 d-block" style="color: #ffffff;">Image Two</a></li>
</ul>
<div class="tab-content">
<!--- first image --->
<div class="tab-pane active" id="IMG-ONE">
<div class="overflow-hidden" style="height: 150px;">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; height: 150px; position: relative;" class="bg-dark">
<!--- image credit --->
<a href="LINK" class="justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background: rgba(0,0,0,.15); position: absolute; bottom: .25rem; right: .25rem; text-decoration: none;"><i class="fas fa-images" style="color: #ffffff;"></i></a>
</div>
</div>
</div>
<!--- second image --->
<div class="tab-pane" id="IMG-TWO">
<div class="overflow-hidden" style="height: 150px;">
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; height: 150px; position: relative;" class="bg-dark">
<!--- image credit --->
<a href="LINK" class="justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background: rgba(0,0,0,.15); position: absolute; bottom: .25rem; right: .25rem; text-decoration: none;"><i class="fas fa-images" style="color: #ffffff;"></i></a>
</div>
</div>
</div>
<!--- end of images --->
</div>
<div class="justify-content-center align-items-center text-center">
<strong>Overview</strong>
<i class="fas fa-circle mx-2 mt-1" style="font-size: .3rem;"></i>
<!--- link to image gallery --->
<a href="LINK" style="color: #8ca0cf; font-weight: 600;">Gallery</a>
</div>
<!--- aliases collapse --->
<a href="#NAV-ONE" data-toggle="collapse" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Also Known As</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse" id="NAV-ONE">
<div class="px-2 py-1">
<span style="opacity: .6;">Other Names</span>
<ul class="list-unstyled pl-3 mb-0">
<!--- list of other names --->
<li><small>Alias</small></li>
<li><small>Alias</small></li>
</ul>
</div>
</div>
<!--- biographical collapse --->
<a href="#NAV-TWO" data-toggle="collapse" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Biographical</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse" id="NAV-TWO">
<div class="px-2 py-1">
<!--- age --->
<span style="opacity: .6;">Age</span>
<ul class="mb-0">
<!--- list of ages --->
<li><small>00 (<a href="LINK" style="color: #8ca0cf;">Chapter</a>)</small></li>
<li><small>00 (<a href="LINK" style="color: #8ca0cf;">Chapter</a>)</small></li>
<li><small>00 (<a href="LINK" style="color: #8ca0cf;">Chapter</a>)</small></li>
</ul>
<!--- year of birth --->
<span style="opacity: .6;">Year of Birth</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>0000</small></li></ul>
<!--- nationality --->
<span style="opacity: .6;">Nationality</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>Nationality</small></li></ul>
</div>
</div>
<!--- physical collapse --->
<a href="#NAV-THREE" data-toggle="collapse" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Physical</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse" id="NAV-THREE">
<div class="px-2 py-1">
<!--- hair color --->
<span style="opacity: .6;">Hair Color</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>content</small></li></ul>
<!--- eye color --->
<span style="opacity: .6;">Eye Color</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>content</small></li></ul>
<!--- height --->
<span style="opacity: .6;">Height</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>00'00"</small></li></ul>
</div>
</div>
<!--- associations collapse --->
<a href="#NAV-FOUR" data-toggle="collapse" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Associations</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse" id="NAV-FOUR">
<div class="px-2 py-1">
<!--- relationships --->
<span style="opacity: .6;">Relationships</span>
<ul class="mb-0">
<!--- list of relationships --->
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a> (relationship)</small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a> (relationship)</small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a> (relationship)</small></li>
</ul>
<!--- occupations --->
<span style="opacity: .6;">Occupation</span>
<ul class="mb-0">
<!--- list of occupations --->
<li><small>Member of <a href="LINK" style="color: #8ca0cf;">content</a></small></li>
<li><small>Member of <a href="LINK" style="color: #8ca0cf;">content</a></small></li>
<li><small>Member of <a href="LINK" style="color: #8ca0cf;">content</a></small></li>
</ul>
<!--- affiliations --->
<span style="opacity: .6;">Affiliation</span>
<ul class="mb-0">
<!--- list of affiliations --->
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a></small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a> (formerly)</small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a> (formerly)</small></li>
</ul>
</div>
</div>
<!--- other collapse --->
<a href="#NAV-FIVE" data-toggle="collapse" aria-expanded="true" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Other</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse show" id="NAV-FIVE">
<div class="px-2 py-1">
<!--- fighting style --->
<span style="opacity: .6;">Fighting Style</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>content</small></li></ul>
<!--- appearances --->
<span style="opacity: .6;">Appears In</span>
<ul class="mb-0">
<!--- list of appearances --->
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a></small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a></small></li>
<li><small><a href="LINK" style="color: #8ca0cf;">Content</a></small></li>
</ul>
<!--- counterpart --->
<span style="opacity: .6;">Counterpart</span>
<ul class="list-unstyled pl-3 mb-0"><li><small><a href="LINK" style="color: #8ca0cf;">Firstname Lastname</a></small></li></ul>
</div>
</div>
<!--- actors collapse --->
<a href="#NAV-SIX" data-toggle="collapse" aria-expanded="true" class="justify-content-between align-items-center font-weight-bold px-2 py-1" style="color: #ffffff; font-size: 16px; text-decoration: none;">
<span>Actors</span>
<i class="fas fa-chevron-down fa-fw" style="color: #8ca0cf;"></i>
</a>
<div class="collapse show" id="NAV-SIX">
<div class="px-2 py-1">
<!--- single actor --->
<span style="opacity: .6;">Language</span>
<ul class="list-unstyled pl-3 mb-0"><li><small>Firstname Lastname</small></li></ul>
<!--- multiple actors --->
<span style="opacity: .6;">Language</span>
<ul class="mb-0">
<!--- list of actors --->
<li><small>Firstname Lastname</small></li>
<li><small>Firstname Lastname</small></li>
</ul>
</div>
</div>
<!--- bottom decoration --->
<div class="px-2 py-1" style="border-bottom: 3px solid #8ca0cf; position: relative;">
<div style="position: absolute; bottom: 0; right: 0; width: 15px; height: 10px; border-bottom: 7.5px solid #8ca0cf; border-right: 7.5px solid #8ca0cf; border-top: 7.5px solid transparent; border-left: 7.5px solid transparent;"></div>
</div>
</div>
</div>
<div class="order-md-1 order-2">
<!--- brief summary --->
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
<!--- table of contents --->
<div class="d-md-flex d-block">
<div class="p-2 mt-3" style="border: 1px solid rgba(140,160,207,0.5); border-radius: .25rem; min-width: 200px;">
<div class="justify-content-between align-items-center">
<strong><i class="fas fa-list mr-2"></i>Contents</strong>
<span>
[<a href="#TOC-COLLAPSE" data-toggle="collapse" style="color: #8ca0cf;">show/hide</a>]
</span>
</div>
<div class="collapse show" id="TOC-COLLAPSE">
<hr class="mx-n2 my-2" style="border-top-color: rgba(140,160,207,0.5);" />
<ul class="list-unstyled font-weight-bold mb-0">
<li class="p-0"><a href="#PROFILE" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">1.</span> Profile</a></li>
<ul class="list-unstyled mb-0 pl-3">
<!--- submenu --->
<li class="p-0"><a href="#APPEARANCE" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">1.1.</span> Appearance</a></li>
<ul class="list-unstyled mb-0 pl-3">
<!--- submenu --->
<li class="p-0"><a href="#APP-ONE" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">1.1.1.</span> Appearance Subsection</a></li>
</ul>
<li class="p-0"><a href="#PERSONALITY" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">1.2.</span> Personality</a></li>
</ul>
<li class="p-0"><a href="#BACKGROUND" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">2.</span> Background</a></li>
<li class="p-0"><a href="#INVOLVEMENT" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">3.</span> Involvement</a></li>
<ul class="list-unstyled mb-0 pl-3">
<!--- submenu --->
<li class="p-0"><a href="#INV-ONE" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">3.1.</span> Subsection 1</a></li>
</ul>
<li class="p-0"><a href="#OTHER-MEDIA" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">4.</span> Other Media</a></li>
<li class="p-0"><a href="#FIGHTING-STYLE" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">5.</span> Fighting Style</a></li>
<li class="p-0"><a href="#TRIVIA" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">6.</span> Trivia</a></li>
<li class="p-0"><a href="#NOTES" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">7.</span> Notes</a></li>
<li class="p-0"><a href="#REFERENCES" class="px-2 py-1 d-block" style="color: #ffffff;"><span style="opacity: .6;">8.</span> References</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="p-2"></div>
<!--- profile section --->
<div id="PROFILE">
<h1 class="mb-0" style="font-size: 2.5rem;">Profile</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<!--- appearance section --->
<h2 class="mb-2" style="font-size: 1.9rem;" id="APPEARANCE">Appearance</h2>
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
<!--- subsection --->
<h3 class="mb-2" style="font-size: 1.5rem; opacity: .6;" id="APP-ONE">Subsection</h3>
<!--- section with image --->
<div class="d-flex d-md-block flex-column">
<!--- image box --->
<div class="pull-right ml-md-3 mx-auto" style="width: 200px;">
<div class="overflow-hidden p-2" style="height: 175px; position: relative;">
<div style="width: 25px; height: 25px; border-top: 1px solid #8ca0cf; border-left: 1px solid #8ca0cf; top: 0; left: 0; position: absolute;"></div>
<div style="width: 25px; height: 25px; border-top: 1px solid #8ca0cf; border-right: 1px solid #8ca0cf; top: 0; right: 0; position: absolute;"></div>
<div style="width: 25px; height: 25px; border-bottom: 1px solid #8ca0cf; border-left: 1px solid #8ca0cf; bottom: 0; left: 0; position: absolute;"></div>
<div style="width: 25px; height: 25px; border-bottom: 1px solid #8ca0cf; border-right: 1px solid #8ca0cf; bottom: 0; right: 0; position: absolute;"></div>
<!--- image --->
<div style="background-image: url('IMGURL'); background-size: cover; background-position: center; position: relative;" class="bg-dark h-100 w-100">
<!--- image credit --->
<a href="LINK" class="justify-content-center align-items-center rounded-circle" style="width: 30px; height: 30px; background: rgba(0,0,0,.15); position: absolute; bottom: .25rem; right: .25rem; text-decoration: none;"><i class="fas fa-images" style="color: #ffffff;"></i></a>
</div>
</div>
</div>
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
<p>In rutrum eleifend eros ut scelerisque. Curabitur id interdum odio. Sed velit nunc, lobortis id leo eu, condimentum convallis dolor. Suspendisse tincidunt sed ligula et semper. Praesent malesuada vel odio sit amet tristique. Etiam sed massa aliquet, volutpat ex sed, molestie mauris. Curabitur pretium mollis lorem id consequat. Nunc in odio nisl. Quisque porta felis eget neque hendrerit, condimentum viverra purus laoreet. Integer tempus enim a ornare facilisis. Mauris ullamcorper, lorem sed viverra fringilla, sapien nunc vestibulum sem, a dapibus risus mauris a ligula. Ut congue massa sed auctor sagittis. In hac habitasse platea dictumst. In feugiat ullamcorper purus, eget aliquet eros ornare eget. Vivamus nec vestibulum urna, id interdum tortor. Cras gravida nibh eu sem sagittis efficitur.</p>
</div>
<!--- personality section --->
<h2 class="mb-2" style="font-size: 1.9rem;" id="PERSONALITY">Personality</h2>
<!--- quote box --->
<div class="pl-md-4">
<div class="px-2 py-1 my-2" style="border-left: 3px solid #8ca0cf; box-shadow: 0 2px 4px rgba(0,0,0,.15); position: relative; overflow: hidden;">
<div style="background: #8ca0cf; opacity: .05; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<div class="d-flex align-items-center">
<i class="fas fa-quote-left fa-fw ml-2 mr-3" style="color: #8ca0cf; font-size: 1.2rem;"></i>
<!--- original language quote --->
<span>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</span>
</div>
<!--- translated box --->
<div class="d-flex align-items-center">
<i class="fas fa-quote-left fa-fw mx-3" style="opacity: 0; font-size: 1.2rem;"></i>
<div class="px-2 py-1 my-2" style="border-left: 3px solid #8ca0cf; box-shadow: 0 2px 4px rgba(0,0,0,.15); position: relative; overflow: hidden;">
<div style="background: #8ca0cf; opacity: .05; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<div class="d-flex align-items-center">
<i class="fas fa-globe fa-fw ml-2 mr-3" style="color: #8ca0cf; font-size: 1.2rem;"></i>
<!--- translated quote --->
<small>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</small>
</div>
</div>
</div>
</div>
<!--- end of translation box --->
</div>
</div>
</div>
<!--- end of quote box --->
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
</div>
<!--- background section --->
<div id="BACKGROUND">
<h1 class="mb-0" style="font-size: 2.5rem;">Background</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
</div>
<!--- involvement section --->
<div id="INVOLVEMENT">
<h1 class="mb-0" style="font-size: 2.5rem;">Involvement</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<!--- spoiler warning --->
<div class="px-2 py-1 my-2" style="border-left: 3px solid #faa61a; box-shadow: 0 2px 4px rgba(0,0,0,.15); border-radius: .25rem; position: relative; overflow: hidden;">
<div style="background: #faa61a; opacity: .05; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<i class="fas fa-triangle-exclamation mr-2" style="color: #faa61a;"></i>
<span style="font-variant: small-caps;">Spoiler Warning:</span>
<!--- spoiler warning text --->
<span>Plot details follow.</span>
</div>
</div>
<!--- end of spoiler warning box --->
<h2 class="mb-2" style="font-size: 1.9rem;" id="INV-ONE">Subsection 1</h2>
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
<p>In rutrum eleifend eros ut scelerisque. Curabitur id interdum odio. Sed velit nunc, lobortis id leo eu, condimentum convallis dolor. Suspendisse tincidunt sed ligula et semper. Praesent malesuada vel odio sit amet tristique. Etiam sed massa aliquet, volutpat ex sed, molestie mauris. Curabitur pretium mollis lorem id consequat. Nunc in odio nisl. Quisque porta felis eget neque hendrerit, condimentum viverra purus laoreet. Integer tempus enim a ornare facilisis. Mauris ullamcorper, lorem sed viverra fringilla, sapien nunc vestibulum sem, a dapibus risus mauris a ligula. Ut congue massa sed auctor sagittis. In hac habitasse platea dictumst. In feugiat ullamcorper purus, eget aliquet eros ornare eget. Vivamus nec vestibulum urna, id interdum tortor. Cras gravida nibh eu sem sagittis efficitur.</p>
<!--- spoilers done --->
<div class="px-2 py-1 my-2" style="border-left: 3px solid #faa61a; box-shadow: 0 2px 4px rgba(0,0,0,.15); border-radius: .25rem; position: relative; overflow: hidden;">
<div style="background: #faa61a; opacity: .05; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<i class="fas fa-triangle-exclamation mr-2" style="color: #faa61a;"></i>
<span style="font-variant: small-caps;">Spoilers End Here</span>
</div>
</div>
<!--- end of spoilers done box --->
</div>
<!--- other media section --->
<div id="OTHER-MEDIA">
<h1 class="mb-0" style="font-size: 2.5rem;">Other Media</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<!--- under construction banner --->
<div class="px-2 py-1 my-2" style="border-left: 3px solid #8ca0cf; box-shadow: 0 2px 4px rgba(0,0,0,.15); border-radius: .25rem; position: relative; overflow: hidden;">
<div style="background: #8ca0cf; opacity: .05; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<i class="fas fa-circle-exclamation mr-2" style="color: #8ca0cf;"></i>
<span style="font-variant: small-caps;">Construction is at Work!</span>
<span>This section is under construction.</span>
</div>
</div>
<!--- end of under construction banner --->
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
</div>
<!--- fighting style section --->
<div id="FIGHTING-STYLE">
<h1 class="mb-0" style="font-size: 2.5rem;">Fighting Style</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<p>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed. Ut eget est purus. Sed ut est sit amet enim tincidunt malesuada. Ut a pretium mi. Duis malesuada efficitur justo, efficitur porta arcu rhoncus ut. Sed eleifend sapien non sodales imperdiet. Nam ac tristique ante.</p>
</div>
<!--- trivia section --->
<div id="TRIVIA">
<h1 class="mb-0" style="font-size: 2.5rem;">Trivia</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<ul>
<!--- trivia --->
<li>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
</ul>
</div>
<!--- notes section --->
<div id="NOTES">
<h1 class="mb-0" style="font-size: 2.5rem;">Notes</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<ol style="list-style-type: lower-alpha;">
<!--- notes --->
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
</ol>
</div>
<!--- references section --->
<div id="REFERENCES">
<h1 class="mb-0" style="font-size: 2.5rem;">References</h1>
<hr class="mt-2 mb-3" style="border-top: 1px solid rgba(140,160,207,0.5);" />
<ol>
<!--- references --->
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
<li><a href="#" style="color: #8ca0cf;"><i class="fal fa-arrow-up mr-2"></i></a>Proin ac sagittis mi. Quisque pharetra varius lacus, et vehicula elit rutrum sed.</li>
</ol>
</div>
<!--- end of sections --->
</div>
<div class="text-center"><small>code by @8byte</small></div>
</div>Copy
#TOC-COLLAPSE ul li a {
border-radius: 0.25rem;
}
#TOC-COLLAPSE ul li a:hover {
text-decoration: none;
background: rgba(140, 160, 207, 0.3);
}
.nav .nav-link.active {
border-bottom: 3px solid #8ca0cf;
}
a.font-weight-bold[aria-expanded=true] .fa-chevron-down:before {
content: "";
}