Forest Path
created by:Aris
Custom ColorsHTMLCharacter
Copy
<!--
main background colour: #627055
border colour and filled-slider colour: #2e352a
text colour and slider-background colour: #edf5e3
tiny accent colour: #a1783b
border-radius:0px
you can ctrl f 'border-radius:0px' and raise the border radius! for example replace:
border-radius:0px
with
border-radius:10px
green hearts: #79c928
yellow hearts: #ffe067
red hearts: #ac2323
all quotes should be easily copypasteable to add in more! the last quote is a song quote, generally meant for a lyric that fits and you can press the disc icon to play the song!
a lot of sections r easily removeable or you can edit them for your own uses. if you need any help with this lmk!!
-->
<!-- background image in below div -->
<div class="row no-gutters p-1 pb-2" style="background:url('https://images.unsplash.com/photo-1614427206242-570a45330575'); background-size:cover; background-repeat:no-repeat; background-position:center; height:auto; max-width:100%; font-family:calibri">
<!-- left column with bio -->
<div class="col-lg-4 col-12"><div class="sticky-top pt-2 pb-2">
<!-- bio -->
<div class="pb-2" style="height:auto; background:#627055; border:6px double #2e352a; border-radius:0px; color:#edf5e3; position:relative">
<!-- icon stuff, ignoreable --><div>
<div class="fas fa-leaf-maple fa-2xl" style="color:#cb8050;position:absolute; transform:rotate(100deg); right:-5px; top:10px"></div>
<div class="fal fa-leaf-maple fa-2xl" style="color:#834211;position:absolute; transform:rotate(100deg); right:-5px; top:10px"></div>
<div class="fas fa-leaf-oak fa-2xl" style="color:#66aa44;position:absolute; transform:rotate(60deg); right:-10px;"></div>
<div class="fal fa-leaf-oak fa-2xl" style="color:#0e2004;position:absolute; transform:rotate(60deg); right:-10px;"></div>
<div class="fa-stack fa-2x" style="position:absolute; transform:rotate(20deg); left:-40px; top:170px">
<i class="fas fa-trillium fa-stack-1x" style="color:#93dc73"></i>
<i class="fad fa-trillium fa-stack-1x" style="color:#98c7e0"></i>
</div>
</div>
<!-- top text, could be the name your character mostly goes by or perhaps a quote -->
<div class="p-1 text-center" style="font-size:2em; font-variant:small-caps">
<span>Lorem Ipsum</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- name header -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.75em; font-variant:small-caps">Name</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
</div>
<!-- name content -->
<div class="px-3 mb-2" style="font-size:1.25em">
<span>Marie-Joseph Paul Yves Roch Gilbert du Motier de La Fayette</span>
</div>
<!-- age header and birthday content -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.75em; font-variant:small-caps">Age</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
<span style="font-size:1.75em; font-variant:small-caps"><i class="fa-solid fa-cake-candles"></i> xx/xx</span>
</div>
<!-- age content -->
<div class="px-3 mb-2" style="font-size:1.25em">
<span>Lorem ipsum years</span>
</div>
<!-- gender and pronouns header -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.75em; font-variant:small-caps">Gender . Pronouns</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
</div>
<!-- gender and pronouns content -->
<div class="px-3 mb-2" style="font-size:1.25em">
<span>Gender . pro/nouns</span>
</div>
<!-- sexuality header -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.75em; font-variant:small-caps">Sexuality</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
</div>
<!-- sexuality content -->
<div class="px-3 mb-2" style="font-size:1.25em">
<span>Sexual orientation . romantic orientation</span>
</div>
</div>
<!-- ribbon display bookshelf. can remove link via deleting content of href="" part (don't remove it completely just leave it empty), is intended for credit -->
<div class="mt-2 px-1" style="height:auto; border-top:3px solid #4c3e3a; border-bottom:3px solid #4c3e3a">
<div class="container p-0" style="background:url('https://images.unsplash.com/photo-1597113366853-fea190b6cd82'); background-size:cover; background-position:center; background-repeat:no-repeat; border:3px solid #4c3e3a; position:relative"><div class="h-100 w-100 pb-1" style="background:rgba(107,88,82,0.9)">
<!-- icons, ignoreable --><div>
<div class="fas fa-flower fa-2xl" style="color:#f5f1ee;position:absolute; transform:rotate(0deg); left:-5px; bottom:10px"></div>
<div class="fas fa-flower fa-xl" style="color:#f09d69;position:absolute; transform:rotate(50deg); left:-2px; bottom:10px"></div>
</div>
<!-- row 1. max of 5 ribbons per row (due to mobile), if less than 5 it auto centers -->
<div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #4c3e3a">
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
<!-- row 2, just copy paste in more rows to add in more -->
<div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #4c3e3a">
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<!-- ribbon -->
<a
href="https://toyhou.se/20187371.ribbon-masterlist/20252719.character-section" target="_blank" data-toggle="tooltip"
title='Ribbon Name: "Insert ribbon explanation."'><img class="mx-1"
src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
</div></div>
</div>
<!-- value tracker -->
<div class="mt-2 p-1 text-center mx-auto" style="height:auto; background:#627055; border:6px double #2e352a; border-radius:0px; color:#edf5e3; position:relative; width:100px">
<div data-toggle="tooltip" title="$xx + $x + $xxx + $xx"><i class="fas fa-dollar"></i><strong>xxx.xx</strong></div>
</div>
</div></div>
<!-- right content -->
<div class="col-lg col-12 ml-lg-2 ml-0 mr-2"><div class="row no-gutters" style="position:relative">
<!-- story and design -->
<div class="row no-gutters">
<!-- story -->
<div class="container mt-2 p-0 mb-2">
<!-- story header -->
<div class="text-center p-1" style="font-size:2em; font-variant:small-caps; background:#627055; color:#edf5e3; border:2px solid #2e352a; border-radius:0px">
<span>Story</span>
</div>
<!-- story content 1 -->
<div class="p-2 my-1" style="font-size:1.15em; background:#627055; color:#edf5e3; border:2px solid #2e352a; border-radius:0px">
<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.
<br><br>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>
<!-- story content 2 -->
<div class="p-2 my-1" style="font-size:1.15em; background:#627055; color:#edf5e3; border:2px solid #2e352a; border-radius:0px">
<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>
<!-- story content 3 -->
<div class="p-2 my-1" style="font-size:1.15em; background:#627055; color:#edf5e3; border:2px solid #2e352a; border-radius:0px">
<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.
<br><br>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>
<!-- quote -->
<div class="container mt-2 text-center p-3" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px; position:relative">
<!-- icons, ignoreable --><div>
<i class="fas fa-quote-left" style="opacity:0.6; position:absolute; left:5px; top:2.5px"></i>
<i class="fas fa-quote-right" style="opacity:0.6; position:absolute; right:5px; bottom:2.5px"></i>
</div>
<!-- quote content -->
<span class="" style="font-size:1.5em">Lorem ipsum</span>
</div>
<!-- design image and palette -->
<div class="col-lg-7 col-12 mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- main image -->
<img src="IMG-HERE">
<!-- palette, safely deleteable if unwanted -->
<div class="flex-row m-1" style="height:25px; overflow:hidden; border-radius:0px">
<div class="p-1 flex-grow-1" style="background:#000000" data-toggle="tooltip" title="#000000"></div>
<div class="p-1 flex-grow-1" style="background:#464646" data-toggle="tooltip" title="#464646"></div>
<div class="p-1 flex-grow-1" style="background:#8b8b8b" data-toggle="tooltip" title="#8b8b8b"></div>
<div class="p-1 flex-grow-1" style="background:#ffffff" data-toggle="tooltip" title="#ffffff"></div>
</div>
</div>
<!-- design description/text -->
<div class="col mt-2 ml-lg-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- design header -->
<div class="text-center p-1" style="font-size:2em; font-variant:small-caps">
<span>Design</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- design text -->
<div class=" pb-2 px-3" style="font-size:1.15em">
<p>Paragraph to talk in, for example how you coloured a part.
<br>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>
<!-- design list notes -->
<ul class="fa-ul" style="padding-top:10px">
<li><i class="fa-li fal fa-heart fa-xs"></i>Lorem ipsum</li>
<li><i class="fa-li far fa-exclamation fa-xs"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-circle-small fa-xs"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-x fa-xs"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-x fa-xs"></i>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<!-- bottom half left -->
<div class="col-lg col-12 mr-lg-1 mr-0 mt-0 mb-2" style="height:auto">
<!-- image -->
<div class="container mt-2" style="background:url('IMG-HERE'); background-size:contain; background-position:center; background-repeat:no-repeat; height:500px"></div>
<!-- personality -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- personality header -->
<div class="text-center p-1" style="font-size:2em; font-variant:small-caps">
<span>Personality</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- personality content -->
<div class="pb-2 p-1" style="font-size:1.15em">
<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>
<!-- quote -->
<div class="container mt-2 text-center p-3" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px; position:relative">
<!-- icons, ignoreable --><div>
<i class="fas fa-quote-left" style="opacity:0.6; position:absolute; left:5px; top:2.5px"></i>
<i class="fas fa-quote-right" style="opacity:0.6; position:absolute; right:5px; bottom:2.5px"></i>
</div>
<!-- quote content -->
<span class="" style="font-size:1.5em">Lorem ipsum</span>
</div>
<!-- likes and dislikes -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px"><div class="row no-gutters">
<!-- likes -->
<div class="col">
<!-- likes header -->
<div style="font-size:1.75em; border-bottom:2px solid #2e352a; font-variant:small-caps; margin-right:40px">
<span>Likes</span>
</div>
<!-- likes content, can add in more or remove some. doesn't have to be same amount as dislikes -->
<ul class="fa-ul ml-3" style="font-size:1.15em; padding-top:5px;">
<li><i class="fa-li fal fa-heart fa-sm"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-heart fa-sm"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-heart fa-sm"></i>Lorem ipsum</li>
</ul>
</div>
<!-- dislikes -->
<div class="col">
<!-- dislikes header -->
<div style="font-size:1.75em; text-align:end; border-bottom:2px solid #2e352a; font-variant:small-caps; margin-left:40px">
<span>Dislikes</span>
</div>
<!-- dislikes content, can add in more or remove some. doesn't have to be same amount as likes -->
<ul class="fa-ul ml-5" style="font-size:1.15em; padding-top:5px">
<li><i class="fa-li fal fa-heart-crack fa-sm"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-heart-crack fa-sm"></i>Lorem ipsum</li>
<li><i class="fa-li fal fa-heart-crack fa-sm"></i>Lorem ipsum</li>
</ul>
</div>
</div></div>
<!-- physical health and mental health -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px"><div class="row no-gutters">
<!-- physical health -->
<div class="col">
<!-- physical health header -->
<div style="font-size:1.75em; border-bottom:2px solid #2e352a; font-variant:small-caps; margin-right:40px;">
<span>Physical Health</span>
</div>
<!-- physical health bullet points, can add or remove some and doesn't have to be same amount as mental health -->
<ul class="fa-ul ml-3 mb-2" style="font-size:1.15em; padding-top:5px;">
<li><i class="fa-li fal fa-heart-pulse fa-sm"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fal fa-heart-pulse fa-sm"></i>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li><i class="fa-li fal fa-heart-pulse fa-sm"></i>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
</ul>
<!-- icon stuff, ignoreable --><div class="row no-gutters align-items-center">
<span class="far fa-monitor-waveform" style="color:#2e352a"></span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25"></div>
</div>
<!-- physical health description -->
<div class="mb-2" style="font-size:1.05em">
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- mental health -->
<div class="col">
<!-- mental health header -->
<div style="font-size:1.75em; text-align:end; border-bottom:2px solid #2e352a; font-variant:small-caps; margin-left:40px">
<span>Mental Health</span>
</div>
<!-- mental health bullet points, can add or remove some and doesn't have to be same amount as physical health -->
<ul class="fa-ul ml-5 mb-2" style="font-size:1.15em; padding-top:5px">
<li><i class="fa-li fal fa-brain fa-sm"></i>Duis porta eros et velit blandit dapibus.</li>
<li><i class="fa-li fal fa-brain fa-sm"></i>Curabitur ac finibus eros.</li>
<li><i class="fa-li fal fa-brain fa-sm"></i>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
<!-- icon stuff, ignoreable --><div class="row no-gutters align-items-center pl-3">
<span class="far fa-head-side-brain" style="color:#2e352a"></span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25"></div>
</div>
<!-- mental health description -->
<div class="mb-2 pl-4" style="font-size:1.05em">
<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.
</p>
</div>
</div>
</div></div>
<!-- personality trait sliders -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- personality trait slider header -->
<div class="text-center p-1" style="font-size:2em; font-variant:small-caps">
<span>Trait Sliders</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- trait sliders -->
<div style="font-size:1.1em; font-variant:small-caps">
<!-- Lone Wolf - Wolf Pack -->
<div class="px-2 justify-content-between pb-1">
<span>Lone Wolf</span>
<span>Wolf Pack</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- Daring - Cautious -->
<div class="px-2 justify-content-between pb-1">
<span>Daring</span>
<span>Cautious</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- Poker Face - Heart on Sleeve -->
<div class="px-2 justify-content-between pb-1">
<span>Poker Face</span>
<span>Heart on Sleeve</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- Need-to-Know - Transparent -->
<div class="px-2 justify-content-between pb-1">
<span>Need-to-Know</span>
<span>Transparent</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- Letter of the Law - Spirit of the Law -->
<div class="px-2 justify-content-between pb-1">
<span>Letter of the Law</span>
<span>Spirit of the Law</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- End Justifies Means - Honourable Actions -->
<div class="px-2 justify-content-between pb-1">
<span>End Justifies Means</span>
<span>Honourable Actions</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
<!-- Book Smart - Street Smart -->
<div class="px-2 justify-content-between pb-1">
<span>Book Smart</span>
<span>Street Smart</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px;width:95%;background:#edf5e3;overflow:visible;border:2.5px solid #edf5e3;">
<!-- change width below, lower percentage more to left and higher percentage more to the right. -->
<div class="progress-bar" style="width:50%; background:none;margin-top:.5px;">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#2e352a"></i>
</div>
</div>
</div>
</div>
<!-- quote -->
<div class="container mt-2 text-center p-3" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px; position:relative">
<!-- icons, ignoreable --><div>
<i class="fas fa-quote-left" style="opacity:0.6; position:absolute; left:5px; top:2.5px"></i>
<i class="fas fa-quote-right" style="opacity:0.6; position:absolute; right:5px; bottom:2.5px"></i>
</div>
<!-- quote content -->
<span class="" style="font-size:1.5em">Lorem ipsum</span>
</div>
</div>
<!-- bottom half right -->
<div class="col-lg col-12 ml-lg-1 ml-0 mb-5" style="height:auto;">
<!-- spacer for on desktop, ignoreable --><div class="d-none d-lg-block" style="margin-top:150px"></div>
<!-- skill sliders -->
<div class="container" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- skill sliders header -->
<div class="text-center p-1" style="font-size:2em; font-variant:small-caps">
<span>Skill Sliders</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- skill sliders -->
<div style="font-size:1.35em; font-variant:small-caps">
<!-- Strength -->
<div class="justify-content-center pb-1"><span>Strength</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end mb-3" style="width:50%; background-color:#2e352a;"></div>
</div>
<!-- Dexterity -->
<div class="justify-content-center pb-1"><span>Dexterity</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end" style="width:50%; background-color:#2e352a;"></div>
</div>
<!-- Constitution -->
<div class="justify-content-center pb-1"><span>Constitution</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end mb-3" style="width:50%; background-color:#2e352a;"></div>
</div>
<!-- Intelligence -->
<div class="justify-content-center pb-1"><span>Intelligence</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end" style="width:50%; background-color:#2e352a;"></div>
</div>
<!-- Wisdom -->
<div class="justify-content-center pb-1"><span>Wisdom</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end mb-3" style="width:50%; background-color:#2e352a;"></div>
</div>
<!-- Charisma -->
<div class="justify-content-center pb-1"><span>Charisma</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edf5e3;">
<!-- change width below, percent is equal to how much the bar is filled up -->
<div class="progress-bar justify-content-end" style="width:50%; background-color:#2e352a;"></div>
</div>
</div>
</div>
<!-- name meanings -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- name meanings header -->
<div class="p-1 text-center" style="font-size:2em; font-variant:small-caps">
<span>Name Meanings</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a;">
<!-- name meanings content -->
<div>
<!-- first name header -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.5em; font-variant:small-caps">First Name</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
</div>
<!-- first name content-->
<div class="px-3 mb-4" style="font-size:1.15em">
<span>Insert name explanation here.</span>
</div>
<!-- middle name header -->
<div class="row no-gutters px-3 align-items-center">
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
<span style="font-size:1.5em; font-variant:small-caps">Middle Name</span>
</div>
<!-- middle name content -->
<div class="px-3 mb-4" style="font-size:1.15em">
<span>Insert name explanation here.</span>
</div>
<!-- last name header -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.5em; font-variant:small-caps">Last Name</span>
<div class="col mx-2" style="border:1px solid #2e352a;opacity:.25;"></div>
</div>
<!-- last name content -->
<div class="px-3 mb-2" style="font-size:1.15em">
<span>Insert name explanation here.</span>
</div>
</div>
</div>
<!-- powers -->
<div class="container mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px">
<!-- powers header -->
<div class="p-1 text-center" style="font-size:2em; font-variant:small-caps">
<span>Powers</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a">
<!-- powers content. can add in more of course, or delete them -->
<div>
<!-- power 1 -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.5em; font-variant:small-caps">Power 1</span>
</div>
<!-- power 1 explanation -->
<div class="px-3 mb-4" style="font-size:1.15em">
<span>Insert power explanation here.</span>
</div>
<!-- power 2 -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.5em; font-variant:small-caps">Power 2</span>
</div>
<!-- power 2 explanation -->
<div class="px-3 mb-4" style="font-size:1.15em">
<span>Insert power explanation here.</span>
</div>
<!-- power 3 -->
<div class="row no-gutters px-3 align-items-center">
<span style="font-size:1.5em; font-variant:small-caps">Power 3</span>
</div>
<!-- power 3 explanation -->
<div class="px-3 mb-4" style="font-size:1.15em">
<span>Insert power explanation here.</span>
</div>
</div>
</div>
<!-- quote -->
<div class="container mt-2 text-center p-3" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px; position:relative">
<!-- icons, ignoreable --><div>
<i class="fas fa-quote-left" style="opacity:0.6; position:absolute; left:5px; top:2.5px"></i>
<i class="fas fa-quote-right" style="opacity:0.6; position:absolute; right:5px; bottom:2.5px"></i>
</div>
<!-- quote content -->
<span class="" style="font-size:1.5em">Lorem ipsum </span>
</div>
<!-- relationships. can add in more or remove any -->
<div>
<!-- relationship 1 -->
<div class="row no-gutters mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px;">
<!-- pfp -->
<div class="col-5 p-2 m-1 align-items-center">
<img src="IMG-HERE" style="border:2px solid #2e352a;">
</div>
<!-- relationship description -->
<div class="col p-2">
<!-- relationship type -->
<div class="text-center pr-1" style="font-size:1.3em; font-variant:small-caps">
<span>Relationship type</span>
</div>
<!-- name -->
<div class="text-center" style="font-size:1.25em">
<span>Name</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- thought paragraph -->
<div class="text-center px-3" style="font-size:1.15em">
<p>Short-ish thought paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<hr class="mx-3 mt-2 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- hearts -->
<div class="text-center" style="font-size:1.25em">
<i class="fas fa-heart" style="color:#79c928"></i>
<i class="fas fa-heart" style="color:#79c928"></i>
<i class="far fa-heart-half-stroke" style="color:#79c928"></i>
<i class="far fa-heart" style="color:#79c928"></i>
<i class="far fa-heart" style="color:#79c928"></i>
</div>
</div>
</div>
<!-- relationship 2 -->
<div class="row no-gutters mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px;">
<!-- relationship description -->
<div class="col p-2">
<!-- relationship type -->
<div class="text-center pr-1" style="font-size:1.3em; font-variant:small-caps">
<span>Relationship type</span>
</div>
<!-- name -->
<div class="text-center" style="font-size:1.25em">
<span>Name, †</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- thought paragraph -->
<div class="text-center px-3" style="font-size:1.15em">
<p>Short thought paragraph
</p>
</div>
<hr class="mx-3 mt-2 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- hearts -->
<div class="text-center" style="font-size:1.25em">
<i class="fas fa-heart" style="color:#ffe067"></i>
<i class="fas fa-heart" style="color:#ffe067"></i>
<i class="far fa-heart-half-stroke" style="color:#ffe067"></i>
<i class="far fa-heart" style="color:#ffe067"></i>
<i class="far fa-heart" style="color:#ffe067"></i>
</div>
</div>
<!-- pfp -->
<div class="col-5 p-3 m-1 align-items-center">
<img src="IMG-HERE" style="border:2px solid #2e352a;">
</div>
</div>
<!-- relationship 3 -->
<div class="row no-gutters mt-2" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px;">
<!-- pfp -->
<div class="col-5 p-3 m-1 align-items-center">
<img src="IMG-HERE" style="border:2px solid #2e352a;">
</div>
<!-- relationship description -->
<div class="col p-2">
<!-- relationship type -->
<div class="text-center pr-1" style="font-size:1.3em; font-variant:small-caps">
<span>Relationship type</span>
</div>
<!-- name -->
<div class="text-center" style="font-size:1.25em">
<span>Name</span>
</div>
<hr class="mx-3 mt-1 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- thought paragraph -->
<div class="text-center px-3" style="font-size:1.15em">
<p>Short thought paragraph.
</p>
</div>
<hr class="mx-3 mt-2 mb-2" style="border:1px solid #2e352a; opacity:.25">
<!-- hearts -->
<div class="text-center" style="font-size:1.25em">
<i class="fas fa-heart" style="color:#ac2323"></i>
<i class="fas fa-heart" style="color:#ac2323"></i>
<i class="far fa-heart-half-stroke" style="color:#ac2323"></i>
<i class="far fa-heart" style="color:#ac2323"></i>
<i class="far fa-heart" style="color:#ac2323"></i>
</div>
</div>
</div>
</div>
<!-- song quote -->
<div class="container mt-2 text-center p-3" style="background:#627055; color:#edf5e3; border:2px solid #2e352a; height:auto; border-radius:0px; position:relative">
<!-- icons, ignoreable -->
<div>
<i class="fas fa-music-note" style="opacity:0.6; position:absolute; left:5px; top:2.5px"></i>
<i class="fas fa-music-note" style="opacity:0.6; position:absolute; right:5px; bottom:2.5px; transform:rotate(180deg)"></i>
</div>
<!-- quote song -->
<div class="fa-spin fa-xl" style="position:absolute; right:-5px; top:-5px">
<!-- after embed/ add in the string of text/numbers after watch?v= -->
<iframe frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"
src="https://www.youtube.com/embed/Y6_Eraf5VZE"></iframe>
<i class="fas fa-compact-disc"></i>
</div>
<!-- quote content -->
<span style="font-size:1.5em">My story isn't violent, only the parts of it with him.</span>
</div>
</div>
<!-- code credit, leave in -->
<a href="/Aris" target="_blank" data-toggle="tooltip" title="HTML by Palarista" style="opacity:0.75">
<i class="fas fa-tree fa-2xl" style="color:#a1783b;position:absolute; transform:rotate(0deg); right:-3px; bottom:17px;"></i>
<i class="fas fa-code fa-xs" style="color:#edf5e3;position:absolute; transform:rotate(0deg); right:2.5px; bottom:15px;"></i>
</a>
</div></div>
</div>