<!------------==============================//////
HTML CODE/CHARACTER PROFILE
before editing PLEASE READ!!!
-Turn off WYSIWYG
-Turn on editor Mode (optional)
FontAwesomeIcons:
https://www.w3schools.com/icons/fontawesome5_icons_spring.asp
(all "fa-icon" icons)
TY <3
\\\\\\==============================------------>
<div class="contianer-fluid col-md-8 p-1" style="margin: 0 auto">
<div class="card p-3 mb-1" style="border-width: 4px;border-style: double;border-radius: 0px"></div>
<!------------==============================////// TABS \\\\\\==============================------------>
<div class="card p-3 " style="border-width: 1px;border-radius: 0px">
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-md-3"> <a class="btn p-3 mb-3 border-0 bg-faded btn-block btn-outline-secondary" style="font-size: 20px;letter-spacing: 5px;font-family: times;overflow-x: auto" data-toggle="tab" href="#basic"> BASICS </a></li>
<li class="col-md-3"> <a class="btn p-3 mb-3 border-0 bg-faded btn-block btn-outline-secondary" style="font-size: 20px;letter-spacing: 5px;font-family: times;overflow-x: auto" data-toggle="tab" href="#stat"> STATS </a></li>
<li class="col-md-3"> <a class="btn p-3 mb-3 border-0 bg-faded btn-block btn-outline-secondary" style="font-size: 20px;letter-spacing: 5px;font-family: times;overflow-x: auto" data-toggle="tab" href="#triv"> TRIVIA </a></li>
<li class="col-md-3"> <a class="btn p-3 mb-3 border-0 bg-faded btn-block btn-outline-secondary" style="font-size: 20px;letter-spacing: 5px;font-family: times;overflow-x: auto" data-toggle="tab" href="#des"> DESIGN </a></li>
</ul>
<!------------==============================////// TABS END \\\\\\==============================------------>
<div class="tab-content">
<!------------==============================////// BASIS TAB \\\\\\==============================------------>
<div class="tab-pane fade active show" id="basic">
<div class="card p-3" style="border-radius: 0px">
<div class="row no-gutters">
<div class="p-3 col-md-6" style="font-size: 20px;font-family: times;overflow: auto" >
<!------------=== Header ===------------>
<h1 style="font-size:32px">CHARACTER NAME</h1>
<hr style="border-width: 20px">
<!------------=== Basics ===------------>
<div class="d-flex justify-content-between mb-1">
<span><i class="fa fa-pencil"></i><b>Name</b></span>
<hr class="w-50">
<<span>Content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span><i class="fa fa-comment"></i><b>Aliases</b></span>
<hr class="w-50">
<span>Content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span><i class="fa fa-paw</i><b>Species</b></span>
<hr class="w-50">
<span>Content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span><i class="fa fa-calendar"></i><b>Age</b></span>
<hr class="w-50">
<span>Content</span>
</div>
<div class="d-flex justify-content-between mb-3">
<span><i class="fa fa-question"></i><b>Other</b></span>
<hr class="w-50">
<span><a href="LINKHERE">Link</a> or Content</span>
</div>
<!------------=== Moodboard Image ===------------>
<div class="p-3 bg-transparent" style="
background-image: url(IMGLINK);
background-position: center center;height: 100px;background-repeat: no-repeat;border-radius: 10px">
</div>
</div>
<!------------=== Focal Image ===------------>
<div class="p-3 col-md-6 bg-transparent mx-auto" style="
background-image: url(IMGLINK);
background-position: center center;height: 400px;background-repeat: no-repeat;border-radius: 10px">
</div>
</div>
</div>
</div>
<!------------==============================////// BASICS TAB END \\\\\\==============================------------>
<!------------==============================////// STATS TAB \\\\\\==============================------------>
<div class="tab-pane fade" id="stat">
<div class="card p-3" style="border-radius: 0px">
<div class="p-3" style="font-size: 20px; font-family: times;overflow: auto">
<!------------=== Header ===------------>
<h1 style="font-size:32px">STATS</h1>
<hr style="border-width: 20px">
<div class="row no-gutters">
<div class="col-md-6 p-2" >
<!------------=== Stat Bars ===------------>
<!------------
To change the progress bar's progress
change the "width:50%"
to any value between 1-100
------------>
<div class="d-flex justify-content-between mb-1">
<span>Social</span>
<span>Introverted</span>
</div>
<div class="progress my-2 rounded-0">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
style="width:50%;
height:16px">
</div>
</div>
<div class="d-flex justify-content-between mb-1">
<span>Lazy</span>
<span>Dilligent</span>
</div>
<div class="progress my-2 rounded-0">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
style="width:50%;
height:16px">
</div>
</div>
<div class="d-flex justify-content-between mb-1">
<span>Confident</span>
<span>Insecure</span>
</div>
<div class="progress my-2 rounded-0">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
style="width:50%;
height:16px">
</div>
</div>
<div class="d-flex justify-content-between mb-1">
<span>Content</span>
<span>Content</span>
</div>
<div class="progress my-2 rounded-0">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
style="width:50%;
height:16px">
</div>
</div>
<!------------=== ADD & REMOVE above this line ===------------>
</div>
<!------------=== Stat Icons ===------------>
<!------------
To change the the icons
replace THESE properties
FA fa-circle
FAL fa-circle
fa...full
fal..empty
------------>
<div class="card col-md-2 p-2" style="border-style: none solid none solid;border-radius: 0px">
<p class="mb-0">Content</p>
<span>
<ul class="row mb-1" style=" list-style-type: none; padding: 0; margin: 0;">
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
</ul>
</span>
<p class="mb-0">Content</p>
<span>
<ul class="row mb-1" style=" list-style-type: none; padding: 0; margin: 0;">
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
</ul>
</span>
<p class="mb-0">Content</p>
<span>
<ul class="row mb-1" style=" list-style-type: none; padding: 0; margin: 0;">
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
</ul>
</span>
<p class="mb-0">Content</p>
<span>
<ul class="row mb-1" style=" list-style-type: none; padding: 0; margin: 0;">
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fa fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
<li><i class="fal fa-circle fa-lg"></i></li>
</ul>
</span>
<!------------=== ADD & REMOVE above this line ===------------>
</div>
<!------------=== Moodboard Image ===------------>
<div class="p-2 col-md-4">
<div class="p-3 bg-transparent mx-auto" style="
background-image: url(IMGLINK);
background-position: center center;height: 250px;background-repeat: no-repeat;border-radius: 10px">
</div>
</div>
</div>
</div>
</div>
</div>
<!------------==============================////// STATS TAB END \\\\\\==============================------------>
<!------------==============================////// TRIVIA TAB \\\\\\==============================------------>
<div class="tab-pane fade" id="triv">
<div class="card p-3" style="border-radius: 0px">
<div class="p-3" style="font-size: 15px;font-family: times">
<!------------=== Header ===------------>
<h1 style="font-size:32px">TRIVIA</h1>
<hr style="border-width: 20px">
<div class="row no-gutters">
<!------------=== Likes ===------------>
<!------------
Use the
<li></li>
tags to add more however you wish!
------------>
<div class="col-md-6">
<h1>LIKES</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<!------------=== Dislikes ===------------>
<div class="col-md-6">
<h1>DISLIKES</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
<hr>
<!------------=== Trivia ===------------>
<div style="margin:0 auto">
<h1>TRIVIA</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!------------==============================////// TRIVIA TAB END \\\\\\==============================------------>
<!------------==============================////// DESIGN TAB \\\\\\==============================------------>
<div class="tab-pane fade" id="des">
<div class="card p-3" style="border-radius: 0px">
<div class="p-3" style="font-size: 15px;font-family: times">
<!------------=== Header ===------------>
<h1 style="font-size:32px">DESIGN</h1>
<hr style="border-width: 20px">
<!------------=== Reference Image ===------------>
<img src="IMGLINK" class="center" style="display: block;margin-left: auto;margin-right: auto;">
<hr>
<!------------=== Design Notes ===------------>
<!------------
Use the
<li></li>
tags to add more however you wish!
------------>
<div style="margin: 0 auto">
<h1>DESIGN NOTES</h1>
<ul>
<li><a href="LINKHERE">Reference Image</a></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
</div>
</div>
<!------------==============================////// DESIGN TAB END \\\\\\==============================------------>
</div>
</div>
<div class="card p-3 mt-1" style="border-width: 4px;border-style: double;border-radius: 0px"></div>
</div>
<!------------==============================////// END EVERYTHING \\\\\\==============================------------>
<!------------=== Credits; DO NOT REMOVE ===------------>
<div class="p-0 text-center">
<a href="https://toyhou.se/BlipiTheDog/characters/folder:3554211"><i class="fal fa-arrow-up</i></a>
</div>