<!--
THRU TIME by Bretzel_Bin_
https://toyhou.se/17688613.char-code-thru-time
--
keep all image urls in parenthesis
custom colors/fonts (ctrl+f to change):
pink: #ffbdde
blue: #bdedff
yellow: #f8ffbd
collapse background: rgba(0,0,0, 0.5)
accent font: tahoma
-->
<div class="container-fluid" style="max-width: 700px">
<!--------------------
FIRST QUOTE
--------------------->
<div class="row no-gutters mx-1">
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #f8ffbd"></i></div>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #f8ffbd, #ffbdde); height: 1px"></div>
<p class="mt-2" style="font-family: Tahoma"><i class="fa-solid fa-quote-left mr-2"></i>
quote
<i class="fa-solid fa-quote-right ml-2"></i></p>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #f8ffbd, #ffbdde); height: 1px"></div>
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #ffbdde"></i></div>
</div>
<!--------------------
FIRST ROW
--------------------->
<div class="row no-gutters mt-2">
<!--------------------
IMAGE/PARAGRAPHS
--------------------->
<div class="col-lg mb-lg-0 mb-2 mr-lg-1 card" style="height: 450px; overflow: auto; border: solid 3px #ffbdde;
background: url(IMAGE URL) bottom;
background-size: cover">
<div style="background: rgba(0,0,0, 0.5)">
<div class="collapse show pink-collapse"><a class="justify-content-center" data-toggle="collapse" href=".pink-collapse"><i class="fa-solid fa-chevrons-down my-3" style="color: #ffbdde"></i></a></div>
<!--------------------
COLLAPSE INFO
--------------------->
<div class="collapse pink-collapse"><div style="min-height: 444px"><a class="justify-content-center" data-toggle="collapse" href=".pink-collapse"><i class="fa-solid fa-chevrons-up my-3" style="color: #ffbdde"></i></a>
<div class="px-3 pb-3">
<p class="text-center">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 class="text-center">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 class="text-center">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>
<!-- add more paragraphs above this line -->
</div>
</div></div>
</div>
</div>
<div class="ml-lg-1 col-lg">
<div class="flex-column" style="height: 450px">
<!--------------------
NAME + PRNS
--------------------->
<div class="card mb-2 p-3" style="height:100px; border: solid 3px #ffbdde">
<div style="border-left: dotted 3px #ffbdde; border-right: dotted 3px #ffbdde" class="mx-auto my-auto col-11">
<h1 class="my-auto text-center" style="font-family: tahoma"><span style="color: #ffbdde" class="display-4">
N</span>ame <span style="color: #ffbdde" class="display-4">S</span>urname </h1>
<p style="color: #ffbdde" class="h4 text-center">(prn/prn)</p>
</div>
</div>
<!--------------------
INFO
--------------------->
<div class="card mb-2 p-3" style="height:150px; border: solid 3px #ffbdde">
<div class="row no-gutters">
<p style="font-family: tahoma" class="mt-1"><i class="fa-regular fa-calendar" style="color: #ffbdde"></i> Birthday</p>
<div class="col mx-3"><hr style="border-top: dotted 3px #ffbdde"></div><p class="mt-1">content</p>
</div>
<div class="row no-gutters">
<p style="font-family: tahoma" class="mt-1"><i class="fa-regular fa-map-location" style="color: #ffbdde"></i> Hometown</p>
<div class="col mx-3"><hr style="border-top: dotted 3px #ffbdde"></div><p class="mt-1">content</p>
</div>
<div class="row no-gutters">
<p style="font-family: tahoma" class="mt-1"><i class="fa-regular fa-backpack" style="color: #ffbdde"></i> Education</p>
<div class="col mx-3"><hr style="border-top: dotted 3px #ffbdde"></div><p class="mt-1">content</p>
</div>
</div>
<!--------------------
PHYSICAL INFO
--------------------->
<div class="card col p-3" style="; border: solid 3px #ffbdde">
<div style="border-left: dotted 3px #ffbdde; border-right: dotted 3px #ffbdde" class="mx-auto my-auto col-11">
<div class="row no-gutters" style="font-family: tahoma">
<div class="col"><p class="text-right">HAIR</p></div>
<div class="col-3 bg-faded ml-2 text-center"><i class="fa-regular fa-headphones" style="color: #ffbdde"></i></div>
<div class="col ml-2">Content</div>
</div>
<div class="row no-gutters mt-2" style="font-family: tahoma">
<div class="col"><p class="text-right">EYE</p></div>
<div class="col-3 bg-faded ml-2 text-center"><i class="fa-regular fa-eye" style="color: #ffbdde"></i></div>
<div class="col ml-2">Content</div>
</div>
<div class="row no-gutters mt-2" style="font-family: tahoma">
<div class="col"><p class="text-right">SKIN</p></div>
<div class="col-3 bg-faded ml-2 text-center"><i class="fa-regular fa-user" style="color: #ffbdde"></i></div>
<div class="col ml-2">Content</div>
</div>
<div class="row no-gutters mt-2" style="font-family: tahoma">
<div class="col"><p class="text-right">HEIGHT</p></div>
<div class="col-3 bg-faded ml-2 text-center"><i class="fa-regular fa-ruler" style="color: #ffbdde"></i></div>
<div class="col ml-2">Content</div>
</div>
<div class="row no-gutters mt-2" style="font-family: tahoma">
<div class="col"><p class="text-right">WEIGHT</p></div>
<div class="col-3 bg-faded ml-2 text-center"><i class="fa-regular fa-gauge" style="color: #ffbdde"></i></div>
<div class="col ml-2">Content</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------
SECOND QUOTE
--------------------->
<div class="row no-gutters mx-1 mt-1">
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #ffbdde"></i></div>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #ffbdde, #bdedff); height: 1px"></div>
<p class="mt-2" style="font-family: Tahoma"><i class="fa-solid fa-quote-left mr-2"></i>
quote
<i class="fa-solid fa-quote-right ml-2"></i></p>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #ffbdde, #bdedff); height: 1px"></div>
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #bdedff"></i></div>
</div>
<!--------------------
SECOND ROW
--------------------->
<div class="row no-gutters mt-2">
<div class="mr-lg-1 col-lg">
<div class="flex-column" style="height: 450px">
<!--------------------
STATS
--------------------->
<div class="card col mb-2" style="border: solid 3px #bdedff">
<div class="my-auto"><div class="row p-2">
<div class="col mr-2 px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-shield"></i> STR</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
<div class="col mr-2 px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-person-biking"></i> DEX</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
<div class="col px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-heart"></i> CON</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
</div>
<div class="row p-2">
<div class="col mr-2 px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-brain"></i> INT</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
<div class="col mr-2 px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-book"></i> WIS</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
<div class="col px-1" style="border: dotted 3px #bdedff; border-top: none">
<p style="color: #bdedff" class="bg-faded mb-1 text-center"><i class="fa-regular fa-comment"></i> CHR</p>
<p class="mt-0 text-center mb-1" style="font-family: tahoma">10</p>
</div>
</div></div>
</div>
<!--------------------
ITEMS/POWERS
--------------------->
<div class="col mb-2" style="overflow: hidden">
<div class="row h-100">
<!-- 1 -->
<div class="card col mr-2 h-100" style="border: solid 3px #bdedff; overflow: hidden">
<div class="row no-gutters mt-1">
<div class="col"><hr style="border-bottom: solid 2px #bdedff; margin-top: 9px"></div>
<p><i class="fa-solid fa-chevrons-right ml-2" style="color: #bdedff"></i></p>
</div>
<p style="font-family: tahoma" class="mb-1">Item or Power 1</p>
<p class="ml-2 mt-0">Something about it's use or origin this'll hide any extra text</p>
<!-- add more above this line -->
</div>
<!-- 2 -->
<div class="card col" style="border: solid 3px #bdedff; overflow: hidden">
<div class="row no-gutters mt-1">
<p><i class="fa-solid fa-chevrons-left mr-2" style="color: #bdedff"></i></p>
<div class="col"><hr style="border-bottom: solid 2px #bdedff; margin-top: 9px"></div>
</div>
<p style="font-family: tahoma" class="mb-1 text-right">Item or Power 2</p>
<p class="mr-2 mt-0 text-right">Something about it's use or origin</p>
<!-- add more above this line -->
</div>
</div>
</div>
<!--------------------
MBTI STATS
change width to change progress
--------------------->
<div class="card col" style="border: solid 3px #bdedff">
<div class="mt-2" style="border: dotted 3px #bdedff; border-bottom: none">
<p class="mb-0 ml-3" style="position: absolute">Introverted</p>
<p class="mb-0" style="position: absolute; right: 35px">Extraverted</p>
<div class="progress mt-1 mx-2 bg-faded" style="height:10px;">
<div class="progress-bar" style="background: none; border-right: 10px solid #bdedff;
width: 52%
"></div>
</div>
<div style="height: 8px"></div>
</div>
<div class="mt-2" style="border: dotted 3px #bdedff; border-bottom: none">
<p class="mb-0 ml-3" style="position: absolute">Sensing</p>
<p class="mb-0" style="position: absolute; right: 35px">Intuition</p>
<div class="progress mt-1 mx-2 bg-faded" style="height:10px;">
<div class="progress-bar" style="background: none; border-right: 10px solid #bdedff;
width: 52%
"></div>
</div>
<div style="height: 8px"></div>
</div>
<div class="mt-2" style="border: dotted 3px #bdedff; border-bottom: none">
<p class="mb-0 ml-3" style="position: absolute">Thinker</p>
<p class="mb-0" style="position: absolute; right: 35px">Feeler</p>
<div class="progress mt-1 mx-2 bg-faded" style="height:10px;">
<div class="progress-bar" style="background: none; border-right: 10px solid #bdedff;
width: 52%
"></div>
</div>
<div style="height: 8px"></div>
</div>
<div class="mt-2" style="border: dotted 3px #bdedff; border-bottom: none">
<p class="mb-0 ml-3" style="position: absolute">Judger</p>
<p class="mb-0" style="position: absolute; right: 35px">Perciever</p>
<div class="progress mt-1 mx-2 bg-faded" style="height:10px;">
<div class="progress-bar" style="background: none; border-right: 10px solid #bdedff;
width: 52%
"></div>
</div>
<div style="height: 8px"></div>
</div>
</div>
</div>
</div>
<!--------------------
IMAGE/PARAGRAPHS
--------------------->
<div class="col-lg mt-lg-0 mt-2 ml-lg-1 card" style="height: 450px;overflow: auto; border: solid 3px #bdedff;
background: url(IMAGE URL) top;
background-size: cover">
<div style="background: rgba(0,0,0, 0.5)">
<div class="collapse show blue-collapse"><a class="justify-content-center" data-toggle="collapse" href=".blue-collapse"><i class="fa-solid fa-chevrons-down my-3" style="color: #bdedff"></i></a></div>
<div class="collapse blue-collapse"><div style="min-height: 444px"><a class="justify-content-center" data-toggle="collapse" href=".blue-collapse"><i class="fa-solid fa-chevrons-up my-3" style="color: #bdedff"></i></a>
<div class="px-3 pb-3">
<p class="text-center">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 class="text-center">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>
<!-- add more paragraphs above this line -->
</div>
</div></div>
</div>
</div>
</div>
<!--------------------
THIRD QUOTE
--------------------->
<div class="row no-gutters mx-1 mt-1">
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #bdedff"></i></div>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #bdedff, #f8ffbd); height: 1px"></div>
<p class="mt-2" style="font-family: Tahoma"><i class="fa-solid fa-quote-left mr-2"></i>
quote
<i class="fa-solid fa-quote-right ml-2"></i></p>
<div class="col mx-3 mt-1"><hr style="background: linear-gradient(to right, #bdedff, #f8ffbd); height: 1px"></div>
<div class="pt-2"><i class="fa-solid fa-chevrons-right" style="color: #f8ffbd"></i></div>
</div>
<!--------------------
THIRD ROW
--------------------->
<div class="row no-gutters mt-2">
<!--------------------
IMAGE/PARAGRAPHS
--------------------->
<div class="col-lg mb-lg-0 mb-2 mr-lg-1 card" style="height: 450px; overflow: auto; border: solid 3px #f8ffbd;
background: url(IMAGE URL) bottom;
background-size: cover">
<div style="background: rgba(0,0,0, 0.5)">
<div class="collapse show yellow-collapse"><a class="justify-content-center" data-toggle="collapse" href=".yellow-collapse"><i class="fa-solid fa-chevrons-down my-3" style="color: #f8ffbd"></i></a></div>
<div class="collapse yellow-collapse"><div style="min-height: 444px"><a class="justify-content-center" data-toggle="collapse" href=".yellow-collapse"><i class="fa-solid fa-chevrons-up my-3" style="color: #f8ffbd"></i></a>
<div class="px-3 pb-3">
<p class="text-center">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>
<!-- add more paragraphs above this line -->
</div>
</div></div>
</div>
</div>
<div class="ml-lg-1 col-lg">
<div class="flex-column" style="height: 450px">
<div class="card col mb-2 p-2" style="border: solid 3px #f8ffbd; overflow: auto">
<div class="flex-column m-0">
<!--------------------
IMPRESSIONS
--------------------->
<div class="col mb-2 p-2">
<div class="w-100 p-2" style="border-left: dotted 3px #f8ffbd; border-top: dotted 3px #f8ffbd">
<p style="color: #f8ffbd; font-family: tahoma" class="mb-0">To Others:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- add more above this line -->
</div>
<div class="w-100 p-2 mt-2" style="border-right: dotted 3px #f8ffbd; border-bottom: dotted 3px #f8ffbd">
<p style="color: #f8ffbd; font-family: tahoma" class="mb-0 text-right">To Themself:</p>
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- add more above this line -->
</div>
</div>
<!--------------------
RELATIONSHIPS
--------------------->
<div class=" mb-2" style="height:110px">
<div class="row no-gutters h-100">
<!-- 1 -->
<div class="card col mr-2 p-2 h-100" style="border: solid 3px #f8ffbd; border-top: none; border-left: none; overflow-x: hidden">
<a style="color: #f8ffbd; font-family: tahoma" style="mb-0" href="CHARACTER LINK">Character</a>
<p class="ml-2">relationship</p>
<!-- add more above this line -->
</div>
<!-- 2 -->
<div class="card col p-2 h-100" style="border: solid 3px #f8ffbd; border-top: none; border-right: none; overflow-x: hidden">
<a style="color: #f8ffbd; font-family: tahoma" style="mb-0" href="CHARACTER LINK">Character</a>
<p class="ml-2">relationship</p>
<!-- add more above thise line -->
</div>
</div>
</div>
<div class="mb-2" style="height:110px">
<div class="row no-gutters h-100">
<!-- 3 -->
<div class="card col mr-2 p-2 h-100" style="border: solid 3px #f8ffbd; border-bottom: none; border-left: none; overflow-x: hidden">
<a style="color: #f8ffbd; font-family: tahoma" style="mb-0" href="CHARACTER LINK">Character</a>
<p class="ml-2">relationship</p>
<!-- add more above thise line -->
</div>
<!-- 4 -->
<div class="card col p-2 h-100" style="border: solid 3px #f8ffbd; border-bottom: none; border-right: none; overflow-x: hidden">
<a style="color: #f8ffbd; font-family: tahoma" style="mb-0" href="CHARACTER LINK">Character</a>
<p class="ml-2">relationship</p>
<!-- add more above this line -->
</div>
</div>
</div>
</div>
</div>
<!--------------------
CREDIT
--------------------->
<div class="card p-3" style="border: solid 3px #f8ffbd; height: 70px">
<div class="row no-gutters my-auto">
<a style="font-family: tahoma" class="mt-1 tooltipster mr-1" href="https://toyhou.se/17688613.char-code-thru-time" title="code by Bretzel_Bin_"><i class="fa-regular fa-pretzel"></i></a>
<div class="col mx-2"><hr style="border-top: dotted 3px #f8ffbd"></div>
<a class="mt-1 mx-1 toolitpster" href="#" title="image from __"><i class="fa-regular fa-image"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>