<!--
PhotoSphere
A F2U Code by EeveePotter
Rules
~ Don't claim as your own
~ No reselling
~ Feel free to edit or Frankenstein as much as you want!
Other:
~ Mobile Friendly
~ Bootstrap Colors
~ WYSIWYG off please
~ Let me know if you have any questions, I'll be happy to answer!
~ If you want me to fill it out for you, feel free to message me and we can work something out
Resources:
~ Code Editor: https://th.circlejourney.net/
Colors:
This uses Bootstrap colors, feel free to message me if you'd like custom colors and we can work something out
-->
<!-- Code -->
<div class="row no-gutters">
<div class="col-md-3 px-3 mb-3">
<!-- Navigation Buttons -->
<ul class="nav nav-tabs row card-header-tabs">
<!-- Image Tab. Replace 'ImageURLHEre' with Image URL -->
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-primary rounded-circle active" data-toggle="tab" href="#tab0"><img src= "ImageURLHere" class="rounded-circle"></a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab1">Details</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab2">Personality</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab3">Lore</a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab4">Extended</a></li>
</ul>
<!-- /Navigation Buttons -->
</div>
<div class="col-md-9">
<div class="tab-content">
<!-- Profile -->
<div class="tab-pane fade active show" id="tab0">
<div class="card p-3">
<div class="p-3" style="max-height:356px;overflow:auto;">
<!-- Side Image. Replace 'ImageURLHEre' with Image URL -->
<img src="ImageURLHere" height=200 width=200 class="float-right">
<!-- /Side Image. Detele everything above to delete side image -->
<font size="+3" class="text-uppercase">Character Name</font>
<p>Write a little about your character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<br><hr><br>
<center>
<!-- Image Carousel -->
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- Images, Replace 'ImageURLHEre' with Image URL -->
<div class="carousel-item active" height=300 width=300>
<img class="d-block w-50" src="ImageURLHEre" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="ImageURLHEre" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="ImageURLHEre" alt="Third slide">
</div>
<!-- /Images -->
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev" style="background-color:#d9d9d9;">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next" style="background-color:#d9d9d9;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</center>
<!-- /Image Carousel -->
</div>
</div>
</div>
<!-- /Profile -->
<!-- Details -->
<div class="tab-pane fade" id="tab1">
<div class="card p-3">
<div class="p-3" style="max-height:356px;overflow:auto;">
<!-- Basic Info -->
<div class="row">
<div class="card col-md-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">NAME</font><font size="+2">Name LastName</font>
</div>
</div>
<div class="card col-md-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">NICKNAME</font><font size="+2">Nickname, Nickname</font>
</div>
</div>
<div class="card col-md-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">SEXUALITY</font><font size="+2">Sexuality</font>
</div>
</div>
<div class="card col-md-6 col-xs-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">GENDER</font><font size="+2">Gender</font>
</div>
</div>
<div class="card col-md-6 col-xs-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">PRONOUNS</font><font size="+2">Prn / Prn</font>
</div>
</div>
<div class="card col-md-12">
<div class="d-flex justify-content-between">
<font size="+2" class="text-uppercase">AGE</font><font size="+2">Age</font>
</div>
</div>
<!-- /Basic Info -->
<!-- Likes -->
<div class="row no-gutters card col-md-6 col-xs-12" style="border:0px solid black;padding:10px;">
<font size="+2">Likes</font>
<ul>
<li>Name a few likes here. Add or remove as many as you'd like.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
</ul>
</div>
<!-- /Likes -->
<!-- Dislikes -->
<div class="row no-gutters card col-md-6 col-xs-12" style="border:0px solid black;padding:10px;">
<font size="+2">Dislikes</font>
<ul>
<li>Name a few likes here. Add or remove as many as you'd like.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
<!-- /Dislikes -->
</div>
</div>
</div>
<!-- /Details -->
<!-- Personality -->
<div class="tab-pane fade" id="tab2">
<div class="card p-3">
<div class="p-3" style="max-height:356px;overflow:auto;">
<div class="row">
<!-- Personality Trait1 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait1">
<font size="+3" class="text-uppercase" style="color:#1ae413;">Trait</font>
</a>
<div class="collapse" id="trait1">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait1 -->
<!-- Personality Trait2 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait2">
<font size="+3" class="text-uppercase" style="color:#1ae413;">Trait</font>
</a>
<div class="collapse" id="trait2">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait2 -->
<!-- Personality Trait3 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait3">
<font size="+3" class="text-uppercase" style="color:#1ae413;">Trait</font>
</a>
<div class="collapse" id="trait3">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait3 -->
<hr><br><br><br><br>
<!-- Personality Trait4 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait4">
<font size="+3" class="text-uppercase" style="color:#393939;">Trait</font>
</a>
<div class="collapse" id="trait4">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait4 -->
<!-- Personality Trait5 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait5">
<font size="+3" class="text-uppercase" style="color:#393939;">Trait</font>
</a>
<div class="collapse" id="trait5">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait5 -->
<!-- Personality Trait6 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait6">
<font size="+3" class="text-uppercase" style="color:#393939;">Trait</font>
</a>
<div class="collapse" id="trait6">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait6 -->
<hr><br><br><br><br>
<!-- Personality Trait7 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait7">
<font size="+3" class="text-uppercase" style="color:#f42626;">Trait</font>
</a>
<div class="collapse" id="trait7">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait7 -->
<!-- Personality Trait8 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait8">
<font size="+3" class="text-uppercase" style="color:#f42626;">Trait</font>
</a>
<div class="collapse" id="trait8">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait8 -->
<!-- Personality Trait9 -->
<div class="card col-md-4 col-xs-12 border-0">
<a class="btn btn-primary collapsed" data-toggle="collapse" data-target="#trait9">
<font size="+3" class="text-uppercase" style="color:#f42626;">Trait</font>
</a>
<div class="collapse" id="trait9">
<div class="card card-body border-0">
<p style="text-align:center;"> About this personality Trait. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Personality Trait9 -->
<br><br><br><br>
<!-- Personality Blurb -->
<p>Write a little about your character's personality here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- /Personality Blurb -->
</div>
</div>
</div>
</div>
<!-- /Personality -->
<!-- Lore -->
<div class="tab-pane fade" id="tab3">
<div class="card p-3">
<div class="p-3" style="max-height:356px;overflow:auto;">
<!-- Quick Backstory -->
<center>
<font size="+3">Header</font>
<p>A quick summary of your characters backstory. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</center>
<!-- /Quick Backstory -->
<br><hr style="border:solid;border-width:1px;">
<!-- Backstory Tab Names -->
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary active" data-toggle="tab" href="#bs1">Birth and Childhood</a></li>
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#bs2">Teen Life</a></li>
<li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#bs3">Adulthood and Death</a></li>
</ul>
<!-- /Backstory Tab Names -->
<!-- BackStory Tabs -->
<div class="tab-content">
<!-- Birth and Childhood -->
<div class="tab-pane fade active show" id="bs1">
<div class="card p-3">
<div class="p-3" style="max-height:200px;overflow:auto;">
<font size="+3">Header</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Birth and Childhood -->
<!-- Teen Life -->
<div class="tab-pane fade" id="bs2">
<div class="card p-3">
<div class="p-3" style="max-height:200px;overflow:auto;">
<font size="+3">Header</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Teen Life -->
<!-- Adulthood and Death -->
<div class="tab-pane fade" id="bs3">
<div class="card p-3">
<div class="p-3" style="max-height:200px;overflow:auto;">
<font size="+3">Header</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<font size="+2">SubHeader</font>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- /Adulthood and Death -->
</div>
<!-- /Backstory Tabs -->
</div>
</div>
</div>
<!-- /Lore -->
<!-- Extended -->
<div class="tab-pane fade" id="tab4">
<div class="card p-3">
<div class="p-3" style="max-height:356px;overflow:auto;">
<table style="border:solid;border-width:0px;">
<tr>
<!-- Trivia -->
<td>
<font size="+2">Trivia</font><br>
<ul>
<li>Trivia about your character here. Add or delete as many as you'd like.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
</ul>
<li>Duis porta eros et velit blandit dapibus. </li>
</ul>
</td>
<!-- /Trivia -->
<!-- Design -->
<td>
<font size="+2">Design</font><br>
<ul>
<li>Design notes for people drawing your character. Add or delete as many as you'd like.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<ul>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
</ul>
<li>Duis porta eros et velit blandit dapibus. </li>
</ul>
</td>
<!-- /Design -->
</tr>
</table>
<!-- Aesthetic. Replace 'URL' witht he image URL -->
<center>
<h1>Aesthetic</h1>
<div class="card col-md-4 col-sx-12" style="max-height:200px;overflow:auto;">
<center>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100><br><br>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100><br><br>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100>
<img src="URL" height=100 width=100>
</center>
</div>
</center>
<!-- /Aesthetic. Delete everything inside these to delete Aesthetic -->
<br><br>
<!-- Creation Info -->
<div class="row col-md-12">
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Creator: </font><font size="+1"><a href="" target="blank">Name</a></font></p>
</div>
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Designer: </font><font size="+1"><a href="" target="blank">Name</a></font></p>
</div>
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Universe: </font><font size="+1"><a href="" target="blank">Verse</a></font></p>
</div>
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Role: </font><font size="+1">Role</font></p>
</div>
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Theme: </font><font size="+1"><a href="" target="blank">Song Name - Artist</a></font></p>
</div>
<div class="card col-md-6 col-sx-6" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+2">Voice Claim: </font><font size="+1"><a href="" target="blank">Name</a></font></p>
</div>
<div class="card col-md-12 col-sx-12" style="border:solid;border-width:1px;">
<p style="text-align:center;"><font size="+3">Worth: $Amount</font></p>
</div>
</div>
<!-- /Creation Info -->
</div>
</div>
</div>
<!-- /Extended -->
</div>
</div>
</div>
<!-- /Code -->
<!-- Credit, delete below to delete -->
<p class="float-right">
<a href="https://toyhou.se/EeveePotter" target="blank" alt="Code by EeveePotter" title="Code by EeveePotter">
<i class="fas fa-code"></i>
</a>
<a href="https://toyhou.se/13203545.f2u-photosphere" target="blank" alt="Code by EeveePotter" title="Code Here">
<i class="fas fa-laptop-code"></i>
</a>
</p>
<!-- /Credit, delete above to delete -->