[04] adventurer
created by:Skysong
BootstrapHTMLCharacter
Copy
<!-------------------------------------------------------------------------------------
A D V E N T U R E R
> alternatively: dungeons & div tags
f2u code by skysong
c o l o r p a l e t t e
main bg bg-faded
accent bg bg-dark
main text (default, unspecified)
headers text-secondary
accent color text-warning, bg-warning
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-------------------------------------------------------------------------------------->
<div class="container" style="font-family:serif;">
<div class="row">
<!-----------------------------------------------------------------------STICKY SIDE-->
<div class="col-sm-4 p-0">
<div style="position:sticky; top:0;">
<div class="px-0 py-5 m-2 bg-dark text-light" style=" text-align:center; position:relative;">
<!--BANNER LINE 1-->
<div style="position:absolute; top:3%; left:50%; transform:translate(-50%, 0); width:100%; align-items:center; display:flex;">
<!--THE ACTUAL LINE-->
<div class="bg-secondary" style="height:2px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fal fa-diamond text-secondary" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fas fa-diamond text-secondary" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fal fa-diamond text-secondary" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
<!--NAME-->
<h1 class="my-4 text-warning" style="font-size:35px"><b>NAME</b></h1>
<!--OPT. TITLE-->
<h3 style="opacity:0.5">- the great -</h3>
<!--IMAGE-->
<img class="w-100 my-3" src="https://iili.io/2MBzEHQ.png">
<!--QUOTE-->
<p class="mx-2 mb-4" style="font-size:17px">
<i class="fal fa-quote-left text-warning"></i>
Quote here. This box will expand. Lorem ipsum.
<i class="fal fa-quote-right text-warning"></i>
</p>
<!--BANNER LINE 1-->
<div style="position:absolute; bottom:3%; left:50%; transform:translate(-50%, 0); width:100%; align-items:center; display:flex;">
<!--THE ACTUAL LINE-->
<div class="bg-secondary" style="height:2px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fal fa-diamond text-secondary" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fas fa-diamond text-secondary" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fal fa-diamond text-secondary" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
</div> <!--end side content-->
<!--CREDITS-->
<div style="text-align:center;">
<!--IMG 1-->
<a class="text-warning tooltipster px-1" data-placement="bottom" title="banner img - pexels" href="https://www.pexels.com/photo/stone-medieval-arch-window-17686985/">
<i class="fa fa-image-polaroid"></i></a>
<!--[ edit href="LINKHERE" ]-->
<!--CODE-->
<a class="text-warning tooltipster px-1" data-placement="bottom" title="code - skysong" href="https://toyhou.se/Skysong">
<i class="fa fa-code"></i></a>
<!--[ do not edit :) ]-->
<!--IMG 2-->
<a class="text-warning tooltipster px-1" data-placement="bottom" title="basics img - pexels" href="https://www.pexels.com/photo/a-concrete-castle-near-the-green-trees-9088004/">
<i class="fa fa-image-polaroid"></i></a>
<!--[ edit href="LINKHERE" ]-->
</div>
</div> <!--end sticky-->
</div> <!--end whole side-->
<!----------------------------------------------------------------------MAIN CONTENT-->
<div class="col-sm m-2">
<!----------------------------------------------------------------------------BASICS-->
<!--TITLE-->
<h1 class="text-muted" style="font-size:30px; opacity:0.5;"><b>
BASICS
<!--ICON-->
<i class="float-right fad fa-fw fa-dungeon"></i>
<!--[ repace the very last thing (fa-dungeon) with the icon name ]-->
</b></h1>
<div class="container">
<div class="row gx-1">
<!--CONTENT-->
<div class="col-sm bg-faded">
<div class="p-3">
<!--ROW-->
<div class="row">
<span><b>NAME</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Something</span></div>
<!--ROW-->
<div class="row">
<span><b>NICKNAME</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Thing</span></div>
<!--ROW-->
<div class="row">
<span><b>RACE</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Creature</span></div>
<!--ROW-->
<div class="row">
<span><b>AGE</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">0 years</span></div>
<!--ROW-->
<div class="row">
<span><b>CLASS</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Adventurer</span></div>
<!--ROW-->
<div class="row">
<span><b>BACKGROUND</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Unkown</span></div>
<!--ROW-->
<div class="row">
<span><b>ORIENTATION</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Ramen</span></div>
<!--ROW-->
<div class="row">
<span><b>PRONOUNS</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Any/All</span></div>
<!--ROW-->
<div class="row">
<span><b>BLANK</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right">Template</span></div>
<!--ROW-->
<div class="row">
<span><b>LINK</b></span>
<div class="col"><hr class="mx-2" style="margin-top:10px; border-top:1px solid; opacity:0.5;"></div>
<span class="pull-right"><a class="text-warning" href="https://toyhou.se/LINK_HERE">Template</a></span></div>
</div></div>
<!--IMAGE-->
<div class="col-sm-4 p-0">
<div class="bg-secondary h-100 w-100" style="min-height:50px; background-image:url(https://iili.io/2MBA1B1.png); background-size:cover; background-repeat:no-repeat; background-position:center;"></div>
<!--[ edit background-image:url(IMGHERE) ]-->
</div>
</div></div>
<!--DIVIDER-->
<div class="py-5" style="align-items:center; display:flex; opacity:0.5">
<!--LINE-->
<div class="bg-warning" style="height:1px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fal fa-diamond text-warning" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
<!-----------------------------------------------------------------------------STATS-->
<!--TITLE-->
<h1 class="text-muted" style="font-size:30px; opacity:0.5;"><b>
STATS
<!--ICON-->
<i class="float-right fad fa-fw fa-dice-d20"></i>
<!--[ repace the very last thing (fa-dice-20) with the icon name ]-->
</b></h1>
<div class="bg-faded">
<div class="p-3">
<!--STAT ROW (STRENGTH)-->
<div class="row align-items-center">
<div class="col-4">
<b>STRENGTH</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
<!--STAT ROW (DEXTERITY)-->
<div class="row align-items-center">
<div class="col-4">
<b>DEXTERITY</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
<!--STAT ROW (CONSTITUTION)-->
<div class="row align-items-center">
<div class="col-4">
<b>CONSTITUTION</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
<!--STAT ROW (INTELLIGENCE)-->
<div class="row align-items-center">
<div class="col-4">
<b>INTELLIGENCE</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
<!--STAT ROW (WISDOM)-->
<div class="row align-items-center">
<div class="col-4">
<b>WISDOM</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
<!--STAT ROW (CHARISMA)-->
<div class="row align-items-center">
<div class="col-4">
<b>CHARISMA</b></div>
<div class="col-sm" style="display:flex; align-items:center;">
<!--STAT BAR-->
<div class="col p-0" style="background:#fff; height:2px; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ multiply your abillity score by 5 to get the % ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]-->
</div>
<!--SCORE-->
<div class="col-2 text-right">20/20</div>
</div>
</div>
</div></div>
<!--DIVIDER-->
<div class="py-5" style="align-items:center; display:flex; opacity:0.5">
<!--LINE-->
<div class="bg-warning" style="height:1px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fal fa-diamond text-warning" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
<!----------------------------------------------------------------------------TRAITS-->
<!--TITLE-->
<h1 class="text-muted" style="font-size:30px; opacity:0.5;"><b>
TRAITS
<!--ICON-->
<i class="float-right fad fa-fw fa-dragon"></i>
<!--[ repace the very last thing (fa-dragon) with the icon name ]-->
</b></h1>
<!--FEATURES-->
<div class="bg-faded mb-3">
<div class="p-3">
<h2 class="text-secondary text-center">- FEATURES -</h2>
<!--FEATURE 1-->
<h4><b>Feature 1 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Feature type</span><br>
A description of the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!--FEATURE 2-->
<h4><b>Feature 2 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Feature type</span><br>
A description of the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!--FEATURE 3-->
<h4><b>Feature 3 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Feature type</span><br>
A description of the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></div>
<!--PROFICIENCIES-->
<div class="bg-faded mb-3">
<div class="p-3">
<h2 class="text-secondary text-center">- PROFICIENCIES -</h2>
<!--PROF. 1-->
<h4><b>Proficieny 1 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Prof. type</span><br>
A description of the proficiency. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!--PROF. 2-->
<h4><b>Proficieny 2 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Prof. type</span><br>
A description of the proficiency. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!--PROF. 1-->
<h4><b>Proficieny 3 Name</b></h4>
<p class="ml-3"><span style="opacity:0.5;">Prof. type</span><br>
A description of the proficiency. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></div>
<!--PERSONALITY-->
<div class="bg-faded">
<div class="p-3">
<h2 class="text-secondary text-center">- PERSONALITY -</h2>
<!--CONTENT-->
<p> A description of your character's personality traits. 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>
<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>
<!--DIVIDER-->
<div class="py-5" style="align-items:center; display:flex; opacity:0.5">
<!--LINE-->
<div class="bg-warning" style="height:1px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fal fa-diamond text-warning" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
<!-------------------------------------------------------------------------EQUIPMENT-->
<!--TITLE-->
<h1 class="text-muted" style="font-size:30px; opacity:0.5;"><b>
EQUIPMENT
<!--ICON-->
<i class="float-right fad fa-fw fa-swords"></i>
<!--[ repace the very last thing (fa-swords) with the icon name ]-->
</b></h1>
<div class="row m-0">
<!--ICONS-->
<ul class="col-auto bg-dark text-warning nav flex-column py-3" style="text-align:center; font-size:25px;">
<!--[ repace the middle thing (fa-dagger, etc) with the icon name ]-->
<!--[ have as much as you like! spacing/div height will scale ]-->
<!--ICON-->
<li class="nav-item" style="flex: 1 1 0;">
<i class="fad fa-dagger fa-fw"></i></li>
<!--ICON-->
<li class="nav-item" style="flex: 1 1 0;">
<i class="fad fa-bow-arrow fa-fw"></i></li>
<!--ICON-->
<li class="nav-item" style="flex: 1 1 0;">
<i class="fad fa-axe-battle"></i></li>
<!--ICON-->
<li class="nav-item" style="flex: 1 1 0;">
<i class="fad fa-mandolin fa-fw"></i></li>
<!--ICON-->
<li class="nav-item" style="flex: 1 1 0;">
<i class="fad fa-hat-wizard fa-fw"></i></li>
</ul>
<!--CONTENT-->
<div class="col bg-faded p-3">
<ul style="list-style-type:square;">
<li>Item name <span style="opacity:0.5">x1</span></li>
<li class="ml-3">Opt. item description.</li>
<li>Item name <span style="opacity:0.5">x1</span></li>
<li>Item name <span style="opacity:0.5">x1</span></li>
<li>Item name <span style="opacity:0.5">x1</span></li>
<li>Item name <span style="opacity:0.5">x1</span></li>
<li>Item name <span style="opacity:0.5">x1</span></li>
<li>Item name <span style="opacity:0.5">x1</span></li>
</ul>
</div>
</div>
<!--DIVIDER-->
<div class="py-5" style="align-items:center; display:flex; opacity:0.5">
<!--LINE-->
<div class="bg-warning" style="height:1px; width:100%;"></div>
<!--DIAMOND 1-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:35%; transform:translate(-35%, 0); font-size:18px;"></i>
<!--DIAMOND 2-->
<i class="fal fa-diamond text-warning" style="position:absolute; left:50%; transform:translate(-50%, 0); font-size:25px;"></i>
<!--DIAMOND 3-->
<i class="fat fa-diamond text-warning" style="position:absolute; left:65%; transform:translate(-65%, 0); font-size:18px;"></i>
</div>
<!----------------------------------------------------------------------------TRIVIA-->
<!--TITLE-->
<h1 class="text-muted" style="font-size:30px; opacity:0.5;"><b>
TRIVIA
<!--ICON-->
<i class="float-right fad fa-fw fa-wand-sparkles"></i>
<!--[ repace the very last thing (fa-wand-sparkles) with the icon name ]-->
</b></h1>
<div class="bg-faded mb-3">
<div class="p-3">
<!--CONTENT-->
<ul style="list-style-type:square;">
<li>Trivia here!</li>
<li>Some extra trivia-related things are below if you want to use them</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
</div></div>
<!--PLAYLIST-->
<div class="bg-faded mb-3">
<div class="p-3">
<h2 class="text-secondary text-center">- PLAYLIST -</h2>
<!--SONG-->
<div class="row m-0">
<div class="col-auto mr-1">
<b style="border-bottom:1px dotted" class="tooltipster" data-placement="right" title="Artist Name">Song Title</b>
<!--[ edit title="Artist Name" ]-->
</div>
<!--PLAY BUTTON-->
<div class="col-auto p-0" style="text-align:center; display:flex; align-items:center;">
<!--SONG EMBED-->
<iframe frameborder="0" width="20" height="20" style="opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);" src="https://www.youtube.com/embed/dQw4w9WgXcQ?control=0"></iframe>
<!--[ go to youtube and copy/paste the last group of text (v="copy and paste this thing") ]-->
<!--[ edit src="https://www.youtube.com/embed/INSERTHERE?control=0" ]-->
<i class="fa-sharp fa-play text-warning" style="font-size:20px;"></i>
</div>
<!--PROGRESS BAR-->
<!--STAT BAR-->
<div class="col mx-1" style="display:flex; align-items:center;">
<div style="background:#fff; height:2px; width:100%; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ edit the width:50% ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]--></div>
</div>
<!--TIMESTAMP-->
<div class="col-auto" style="display:flex; align-items:center;">
00:00
</div>
</div>
<!--SONG-->
<div class="row m-0">
<div class="col-auto mr-1">
<b style="border-bottom:1px dotted" class="tooltipster" data-placement="right" title="Artist Name">Song Title</b>
</div>
<!--PLAY BUTTON-->
<div class="col-auto p-0" style="text-align:center; display:flex; align-items:center;">
<!--SONG EMBED-->
<iframe frameborder="0" width="20" height="20" style="opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);" src="https://www.youtube.com/embed/dQw4w9WgXcQ?control=0"></iframe>
<i class="fa-sharp fa-play text-warning" style="font-size:20px;"></i>
</div>
<!--PROGRESS BAR-->
<!--STAT BAR-->
<div class="col mx-1" style="display:flex; align-items:center;">
<div style="background:#fff; height:2px; width:100%; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ edit the width:50% ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]--></div>
</div>
<!--TIMESTAMP-->
<div class="col-auto" style="display:flex; align-items:center;">
00:00
</div>
</div>
<!--SONG-->
<div class="row m-0">
<div class="col-auto mr-1">
<b style="border-bottom:1px dotted" class="tooltipster" data-placement="right" title="Artist Name">Song Title</b>
</div>
<!--PLAY BUTTON-->
<div class="col-auto p-0" style="text-align:center; display:flex; align-items:center;">
<!--SONG EMBED-->
<iframe frameborder="0" width="20" height="20" style="opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);" src="https://www.youtube.com/embed/dQw4w9WgXcQ?control=0"></iframe>
<i class="fa-sharp fa-play text-warning" style="font-size:20px;"></i>
</div>
<!--PROGRESS BAR-->
<!--STAT BAR-->
<div class="col mx-1" style="display:flex; align-items:center;">
<div style="background:#fff; height:2px; width:100%; display:flex; align-items:center;">
<div class="bg-warning" style="height:2px; width:50%;"></div>
<!--[ edit the width:50% ]-->
<!--ICON-->
<i class="fas fa-diamond text-warning" style="position:absolute; left:50%; font-size:15px;"></i>
<!--[ use the same % as above ]--></div>
</div>
<!--TIMESTAMP-->
<div class="col-auto" style="display:flex; align-items:center;">
00:00
</div>
</div>
</div></div>
<!--Q&A-->
<div class="bg-faded mb-3">
<div class="p-3">
<h2 class="text-secondary text-center">- Q&A -</h2>
<!--[ ignore the error here. it's expecting something like because of the &, but it won't effect anything ]-->
<!--QUESTION 1-->
<div class="font-weight-bold bg-dark text-warning w-100 p-1 px-2">
01. Insert question here?
</div>
<!--ANSWER 1-->
<div class="w-100 p-2" style="min-height:95px;">
<!--IMAGE-->
<img src="https://iili.io/2EEroFV.png" class="mr-3" style="float:left; height:80px; border-radius:100%;">
<!--[ edit src="IMGHERE" ]-->
<b>Insert answer here!</b> 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.
</div>
</div>
</div>
<!--MOODBOARD-->
<!--[ this section is a slightly modified version of my own code; you can find the original here: https://toyhou.se/29936589.moodboard-f2u ]-->
<div class="bg-faded">
<div class="p-3">
<h2 class="text-secondary text-center">- MOODBOARD -</h2>
<div class="container">
<div class="row justify-content-md-center">
<!--TOP LEFT-->
<div class="col-sm p-2">
<div class="h-100 w-100" style="padding-bottom:100%; border-radius:10px; background-image:url(https://iili.io/2Cce1N2.png); background-size:cover; background-position:0% 20%;">
<!--[ edit background-image:url(IMGHERE) ]-->
</div>
</div>
<!--TOP RIGHT-->
<div class="col-sm-6 p-2">
<div class="w-100" style="height:0; padding-bottom:100%; width:100%; overflow:hidden;">
<div class="container px-0" style="height:100%; padding-bottom:100%; width:100%;">
<!--COLOR PALLETE-->
<div class="row m-0 w-100" style="height:20%; position:absolute; top:0; border-radius: 10px 10px 0 0; overflow:hidden;">
<div class="col" style="background-color:#414a6b"></div>
<div class="col" style="background-color:#78749e"></div>
<div class="col" style="background-color:#ca95ad"></div>
<div class="col" style="background-color:#debdbd"></div>
</div>
<!--IMAGE-->
<div class="row m-0 w-100" style="height:75%; position:absolute; bottom:0; border-radius: 0 0 10px 10px; overflow:hidden;">
<div class="h-100 w-100" style="background-image:url(https://iili.io/2C1VRCg.png); background-size:cover; background-position:center"></div>
<!--[ edit background-image:url(IMGHERE) ]-->
</div>
</div></div></div>
</div>
<div class="row">
<!--BOTTOM LEFT-->
<div class="col-sm p-2">
<div class="ratio ratio-1x1" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; position:relative;">
<!--IMAGE-->
<div style="width:54%; padding-bottom:100%; background-image:url(https://iili.io/2CEVSX1.png); background-size:cover; background-position:center;"></div>
<!--[ edit background-image:url(IMGHERE) ]-->
<!--ICON 1-->
<div class="bg-dark text-warning" style="width:40%; height:47%; position:absolute; top:0; right:0; align-content:center; text-align:center;">
<i class="fad fa-scroll-old" style="font-size:50px"></i>
</div>
<!--ICON 2-->
<div class="bg-dark text-warning" style="width:40%; height:47%; position:absolute; bottom:0; right:0; align-content:center; text-align:center;">
<i class="fad fa-treasure-chest" style="font-size:50px;"></i>
</div>
</div>
</div>
<!--BOTTOM RIGHT-->
<div class="col-sm p-2">
<div class="ratio ratio-1x1 bg-faded px-4" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; background-image:url(https://iili.io/2CEu5XV.png); background-size:cover; background-position:center;">
<!--[ edit background-image:url(IMGHERE) ]-->
</div></div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------>
</div> <!--end main content-->
</div> <!--end row-->
</div> <!--end everything-->