<!--Please use this with WYSIWYG mode OFF, it will not work if it's on!-->
<!-- Another code from me! Thank you so much for looking into this code, it's been a real labour of love but I hope you enjoy it! It may seem a bit wordy with the instructions, but if you're just using the base code/not altering it, it should be fairly simple!-->
<div class="container p-2 px-2" style="max-width:1150px; margin:auto;">
<div class="row">
<div class="col-sm-2">
<div class="card border-0 rounded-5 p-2" style="background: url(https://via.placeholder.com/1500); background-size: cover;background-position: center; min-height:400px; min-width:200px;"></div>
</div>
<div class="col-sm-auto"></div>
<div class="col-lg-8">
<div class="card border-0 rounded-5 p-2" div style="background: #F7F5F1; height:400px;">
<div class="p-2">
<div style="letter-spacing:.7mm; font-size:40px; font-weight:lighter; color: #23232C; font-family:georgia;">
<center><b>NAME</b></center>
</div>
<div class="mt-2"></div>
<hr style="border-color:#827E7A; margin-bottom:0; margin-top:0; max-width:500px;">
</div>
<div class="mt-2" style="line-height: 1.75em; overflow-x: hidden; height:330px; color:#000;">
<div class="mt-1"></div>
<!---Start First section.-->
<center>
<span style="letter-spacing:1mm; color: #827E7A;"><i class="fas fa-quote-left fa-xs"></i></span>
<span style="letter-spacing:.7mm; font-size:21px; font-weight:lighter; color: #827E7A; font-family:georgia;">
<em>I'm a quote! I can be pretty long, if you so please, but for the sake of everyone, try to keep it short enough!</em></span>
<span style="letter-spacing:2mm; color: #827E7A;"><i class="fas fa-quote-right fa-xs"></i></span>
</center>
<br><a id="basics" /></a>
<div style="letter-spacing:.7mm; font-size:20px; color: #23232C; font-family:georgia;">
<center>PRONOUN/PRONOUNS</center>
</div>
<div class="mt-2"></div>
<div style="letter-spacing:.7mm; font-size:13px; color: #23232C; font-family:georgia;">
<center>
<i class="fas fa-hourglass fa-xs"></i> AGE<br>
<i class="fas fa-cat fa-xs"></i> SPECIES<br>
<i class="fas fa-pen fa-xs"></i> ALIASES
</center>
</div>
<br>
<!---- Text scrolls- feel free to write as much as you want.----->
<span style="color: #080A1E;">
<p>This is your initial character blurb! Write whatever you want here. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.
</p>
<br>
<!---End First section.-->
<!---Start Design section.-->
<a id="design" />
<div style="letter-spacing:.7mm; font-size:25px; color: #23232C; font-family:georgia;"><span class="pull-left"><i class="fas fa-pen"></i> DESIGN NOTES</span></div>
</a>
<hr style="border-color:#E0D5BD; margin-bottom:0; margin-top:0;">
<div class="mt-3"></div>
<div class="row">
<div class="col-sm-auto"></div>
<div class="col-lg-4 col-sm-3">
<center>
<span style="letter-spacing:3mm; font-size:13px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>PALETTE</strong></span>
<!---PALETTE SECTION! You can add or remove additional colours to fit your character;-->
<!---If you're adding a dark colour, copy from here-->
<div class="card border-0 rounded-0 bg-muted p-3" style="background-color:#1e1e24;"><span style="letter-spacing:3mm; font-size:12px; font-weight:lighter; color: #E0D5BD; font-family:georgia;"> #1e1e24</span></div>
<!---To here, then paste it where you want. Ctr + F #1e1e24 and replace it with the hex code of the colour you need.-->
<div class="card border-0 rounded-0 bg-muted p-3" style="background-color:#HEXCODE;"><span style="letter-spacing:3mm; font-size:12px; font-weight:lighter; color: #E0D5BD; font-family:georgia;"> #HEXCODE</span></div>
<!---If you're adding a light colour, copy from here-->
<div class="card border-0 rounded-0 bg-muted p-3" style="background-color:#c98e04;"><span style="letter-spacing:3mm; font-size:12px; font-weight:lighter; color: #091820; font-family:georgia;"> #c98e04</span></div>
<!---To here, then paste it where you want. Ctr + F #1e1e24 and replace it with the hex code of the colour you need.-->
<div class="card border-0 rounded-0 bg-muted p-3" style="background-color:#HEXCODE;"><span style="letter-spacing:3mm; font-size:12px; font-weight:lighter; color: #091820; font-family:georgia;"> #HEXCODE</span></div>
<!---End of Palette section.-->
</span>
</center>
<div class="mt-1"></div>
</div>
<div class="col-lg-7">
<span style="letter-spacing:3mm; font-size:13px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>ESSENTIAL DESIGN NOTES:</strong></span><div class="mt-1"></div>
<p>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Put an essential design note here.
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Another one can go here.
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> You can have as many as you need/want here, and they can be as long as you need. The design notes section itself will stretch with more lines.
</p>
<div class="mt-3"></div>
<span style="letter-spacing:3mm; font-size:13px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>ADDITIONAL NOTES:</strong></span>
<p>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> And here's addition design notes.
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Same thing here!
</p>
</div>
</div>
<br>
<!---End Design section.-->
<!---Start Story section.-->
<a id="story" />
<div style="letter-spacing:.7mm; font-size:25px; color: #23232C; font-family:georgia;"><span class="pull-left"><i class="fas fa-book"></i> STORY</span></div>
</a>
<hr style="border-color:#E0D5BD; margin-bottom:0; margin-top:0;">
<div class="mt-3"></div>
<!---If you want to add more sections, copy from here-->
<center><span style="letter-spacing:3mm; font-size:18px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>HEADER</strong></span></center>
<p>And here's where you'd put a story. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided.</p>
<!---To here and paste it where you'd like it to be. Vice versa for removing sections.-->
<center><span style="letter-spacing:3mm; font-size:18px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>HEADER II</strong></span></center>
<p>But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</p>
<div class="mt-2"></div>
<!---End Story section.-->
<!---Start Trivia section.-->
<a id="trivia" />
<div style="letter-spacing:.7mm; font-size:25px; color: #23232C; font-family:georgia;"><span class="pull-left"><i class="fas fa-question-circle"></i> TRIVIA</span></div>
</a>
<hr style="border-color:#E0D5BD; margin-bottom:0; margin-top:0;">
<div class="mt-3"></div>
<center><span style="letter-spacing:.7mm; font-size:18px; font-weight:lighter; color: #827E7A; font-family:georgia;"><em> Character Trait <i class="fas fa-circle fa-xs"></i> Character Trait <i class="fas fa-circle fa-xs"></i> Character Trait
</em></span>
</center>
<div class="mt-3"></div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-lg-5 col-sm-3">
<center><span style="letter-spacing:3mm; font-size:13px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>TRIVIA:</strong></span></center>
<!---If you'd like to add more bullet points, copy from here-->
<p>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Trivia!
<br>
<!---To here, and paste it after the fourth one. Erase the same section(s) to remove bullet points.-->
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Trivia, again.
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> And a third!
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> And a fourth. You can keep adding more, too.
<br>
</p>
</div>
<div class="col-lg-5">
<center><span style="letter-spacing:3mm; font-size:13px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>MISC. NOTES:</strong></span></center>
<p>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> For things that couldn't be said anywhere else.
<br>
<i class="fas fa-chevron-right fa-sm" style="color: #23232C;"></i> Another bulletpoint for this section.
</p>
</div>
</div>
<br>
<!---End Trivia section.-->
<!---Relationship section.-->
<a id="relationships" />
<div style="letter-spacing:.7mm; font-size:25px; color: #23232C; font-family:georgia;"><span class="pull-left"><i class="fas fa-address-book"></i> RELATIONSHIPS</span></div>
</a>
<hr style="border-color:#E0D5BD; margin-bottom:0; margin-top:0;">
<div class="mt-3"></div>
<!---If you want to add any new relationships, just copy and paste from the beginning to end of any relationship and paste it after relationship three. Add <div class="mt-3"></div> onto the end of Relationship Three, and any new ones you make after that except the last relationship.-->
<!---Relationship One-->
<div class="row">
<div class="col-lg-8">
<a href="URL TO OTHER CHARACTER HERE"><span style="letter-spacing:1mm; font-size:30px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>NAME</a></strong></span>
<br>
<span style="font-size:25px; letter-spacing:1.5mm; font-weight:lighter; color: #827E7A; font-family:georgia;"><em>RELATIONSHIP</em></span><br>
This is where a relationship goes! You can write a lot here if you're inclined to. It will get longer than the image card though, so keep that in mind if you're writing more than just a paragraph here!
</div>
<div class="col-lg-3">
<div class="card border-0 rounded-5 p-2" style="background: url(Relationship One picture URL here); background-size: cover;background-position: center; min-height:180px; width:180px;"></div>
</div>
</div>
<div class="mt-3"></div>
<!---Relationship One End-->
<!---Relationship Two-->
<div class="row">
<div class="col-lg-8">
<a href="URL TO OTHER CHARACTER HERE"><span style="letter-spacing:1mm; font-size:30px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>NAME</a></strong></span>
<br>
<span style="font-size:25px; letter-spacing:1.5mm; font-weight:lighter; color: #827E7A; font-family:georgia;"><em>RELATIONSHIP</em></span><br>
This is where a relationship goes! You can write a lot here if you're inclined to.
</div>
<div class="col-lg-3">
<div class="card border-0 rounded-5 p-2" style="background: url(Relationship Two picture URL here); background-size: cover;background-posittion: center; height:180px; width:180px;"></div>
</div>
</div>
<div class="mt-3"></div>
<!---Relationship Two End-->
<!---Relationship Three-->
<div class="row">
<div class="col-lg-8">
<a href="URL TO OTHER CHARACTER HERE"><span style="letter-spacing:1mm; font-size:30px; font-weight:lighter; color: #23232C; font-family:georgia;"><strong>NAME</a></strong></span>
<br>
<span style="font-size:25px; letter-spacing:1.5mm; font-weight:lighter; color: #827E7A; font-family:georgia;"><em>RELATIONSHIP</em></span><br>
This is where a relationship goes! You can write a lot here if you're inclined to.
</div>
<div class="col-lg-3">
<div class="card border-0 rounded-5 p-2" style="background: url(Relationship Three picture URL here); background-size: cover;background-position: center; height:180px; width:180px;"></div>
</div>
</div>
<!---End Relationship Three-->
<!---End Relationship section.-->
<div class="mt-1"></div>
<!---Bottom buttons.-->
<!---Artist credit for the art on the left panel.-->
</div>
</div>
<div class="mt-1"></div>
<span class="pull-left">
<a href="ARTIST URL HERE"><i class="fas fa-pen-nib fa-lg tooltipster" style="color: #827E7A;" title="Art by NAME"></i></a></span>
<!---Buttons in the middle; if you removed any of these sections, you can remove any of the below- just make sure you start the selection at <a href and end at </a>. If there's an even number, you can also remove the diamonds. Be CAREFUL before doing this, though! Make sure you're erasing the right part, which section goes to which button can usually be found right next to each a href and will have a pound sign (#).-->
<center>
<a href="#basics"><i class="fas fa-feather-alt fa-lg tooltipster" style="color: #827E7A;" title="Basic Details"></i></a>
⬦
<a href="#design"><i class="fas fa-palette fa-lg tooltipster" style="color: #827E7A;" title="Design Details"></i></a>
⬦
<a href="#story"><i class="fas fa-book fa-lg tooltipster" style="color: #827E7A;" title="Story"></i></a>
⬦
<a href="#trivia"><i class="fas fa-question-circle fa-lg tooltipster" style="color: #827E7A;" title="Trivia"></i></a>
⬦
<a href="#relationships"><i class="fas fa-address-book fa-lg tooltipster" style="color: #827E7A;" title="Relationships"></i></a></span>
<!---My credit, please do NOT remove.-->
<span class="pull-right"><a href="https://toyhou.se/Coturnix"><i class="fas fa-moon-stars tooltipster" style="color: #ffd633;" title="Code cooked up by Quail"></i></a></span>
</div>
<!--End of the main card.-->
<!---Right side panel-->
<div class="col-sm-1 col-sm-1">
<!--Pagedoll.-->
<div style="margin-left: -80px; margin-right: -23px;">
<img src="PAGEDOLL'S PICTURE URL HERE" class="float-right" style="max-height:300px;">
</div>
<div class="mt-5"></div>
<span class="pull-left">
<a href=#>
<i class="fas fa-icons tooltipster" style="color: #827E7A;" title="Pagedoll by NAME"></i>
</span>
<br>
<!---Any of the buttons below can be removed/changed to your liking; I prefer 4 as it extends down to the bottom/evens out on mobile.-->
<div class="mt-3"></div>
<a href="GALLERY URL HERE">
<i class="fas fa-images tooltipster fa-2x" title="Gallery" style="color: #827E7A;">
</i></a>
<div class="mt-3"></div>
<!--Masterlist button, can easily be swapped out for a link to an alternate site profile (like artfight for example) or such, or removed.-->
<a href="#">
<i class="fas fa-list tooltipster fa-2x" title="Masterlist" style="color: #827E7A;">
</i></a>
<div class="mt-3"></div>
<!---Offer status mouse over, if you want to change it to link to a specific thread or something, place <a href="LINK HERE"> in front of <i class> and make sure to place a </a> after the </i>.-->
<i class="fas fa-handshake tooltipster fa-2x" title="OFFER STATUS HERE" style="color: #827E7A;">
</i>
<div class="mt-3"></div>
<!--Music player, a huge kudos to Strabi for the in-character music player code-->
<span><iframe class="flex-fill" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBE ENDTAG HERE"></iframe><i class="fas fa-music fa-2x tooltipster" style="margin-left:-25px; color: #827E7A;" title="Artist - Song Name"></i></span>
</div>
</div>
</div>
</div></span>
<!--End of code.-->