<!-- [F2U] processor by macroura
- entry for the september 2022 coder's quarters challenge! here i used the "digital" moodboard
- i struggled so hard w this only to bang out like 90% of it in two days... imma be real w y'all im not a fan of this layout but!! we must persevere
notes:
- uses both bootstrap and custom colors! uses [ faded ] as a secondary color
> accent text (blue color): #53B2C9
> link text (magenta color): #D62A6C
- accordion bc fuck tabs and i like the animation :) it's a lot simpler imo and nice to look at code-wise so. lol
- yet another carousel and secret music player i know im soooo original
-->
<div class="container" style="max-width:750px; font-size:12px">
<!-- ==============================
I. INTRODUCTION;
> header card with icons & name
============================== -->
<div class="card p-2 px-3 mb-2" style="border-radius:50px 50px 0px 0px">
<div class="row no-gutters">
<!-- icons -->
<div class="col align-self-center hidden-sm-down">
<i class="fa-regular fa-arrow-left mx-1 fa-fw text-muted"></i>
<i class="fa-regular fa-arrow-right mx-1 fa-fw"></i>
<i class="fa-regular fa-arrow-rotate-right mx-1 fa-fw"></i>
</div>
<div class="col-md-9 px-2 align-self-center">
<div class="card flex-row" style="border-radius:50px; padding:2px 8px">
<span class="mr-2"><i class="fa-solid fa-lock fa-fw text-muted fa-xs"></i></span>
12345678.name
</div>
</div>
<!-- icons -->
<div class="col align-self-center hidden-sm-down">
<i class="fa-regular fa-window-minimize mx-1 fa-fw"></i>
<i class="fa-regular fa-window-restore mx-1 fa-fw"></i>
<i class="fa-regular fa-xmark mx-1 fa-fw"></i>
</div>
</div>
</div>
<div class="card p-3 mt-2 rounded-0">
<!-- ==============================
II. MAIN CONTENT;
> contains all four accordion pages
============================== -->
<div class="accordion" id="processor" style="max-height:450px; overflow-y:auto">
<!-- II.a. BASIC INFO
> includes side picture, basic info, and a short introduction
-->
<div class="collapse show" id="kilobyte" data-parent="#processor">
<div class="row no-gutters">
<!-- IMAGE;
> replace IMG_URL with the link to the image, which should end in a .png, .jpg, or the like
-->
<div class="col-md-4">
<div class="h-100" style="min-height:340px; border-radius:0px 50px 0px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
<div class="col-md-8 pl-sm-3">
<!-- HEADER QUOTE -->
<div class="card p-2 px-3 my-2 text-center" style="border-radius:30px; border-width:0px 2px">
<p> This is a quote, <span style="color:#53B2C9; font-weight:700">this is accent text</span>. Remember, keep it short! </p>
</div>
<!-- BASIC INFO -->
<div class="row no-gutters">
<div class="col-sm-6 pr-sm-2">
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">full name</span>
<span class="pull-right text-muted">name lastname</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">aliases</span>
<span class="pull-right text-muted">content</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">pronouns</span>
<span class="pull-right text-muted">pro/noun/s</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">gender</span>
<span class="pull-right text-muted">identity</span>
</div>
</div>
<div class="col-sm-6 pl-sm-2">
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">age</span>
<span class="pull-right text-muted">000 or range</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">birthday</span>
<span class="pull-right text-muted">00/00</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">species/race</span>
<span class="pull-right text-muted">content</span>
</div>
<div class="justify-content-between my-2">
<span class="px-2 text-dark" style="background:#53B2C9; border-radius:50px">occupation</span>
<span class="pull-right text-muted">job, or not</span>
</div>
</div>
</div>
<!-- DIVIDER -->
<div class="justify-content-between my-2">
<hr class="w-100">
<span class="card px-3 py-0" style="border-radius:10px; border-width:0px 2px">
<i class="fa-solid fa-microchip my-auto fa-lg" style="text-shadow:1px 1px #D62A6C"></i>
</span>
<hr class="w-100">
</div>
<!-- INTRODUCTION PARAGRAPH -->
<p class="text-justify my-2">
<span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">L</span>
orem ipsum dolor sit amet, consectetur adipiscing elit.
<span style="color:#53B2C9; font-weight:700">accent text</span>
<em>italics</em>
<strong>bold text</strong>
<strike>strikethrough text</strike>.
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</p>
</div>
</div>
</div>
<!-- II.b. PERSONALITY
> includes short explanation, trait carousel, and sliding stats
-->
<div class="collapse" id="megabyte" data-parent="#processor">
<div class="justify-content-between mb-3">
<hr class="w-100">
<span class="card px-3 py-0" style="border-radius:20px; border-width:0px 2px">
<span class="my-auto fa-xl" style="text-shadow:1px 1px #D62A6C; font-variant:small-caps; font-weight:700">>personality_</span>
</span>
<hr class="w-100">
</div>
<div class="row no-gutters">
<!-- TEXT BLOCK;
> it's a big block of text. not much to say
-->
<div class="col-sm-8 pr-sm-2 align-self-center">
<p class="text-justify px-2">
<span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">T</span>
he big scary personality block of text ooooo so spooky... lmao. Since this was intially a personal code and I just loooove writing novels about my characters' personalities, this block looks best when there's a good chunk of text in here! Of course, you can always pretty this section up with a divider or two if you aren't that type (which is perfectly fine btw), or omit this section entirely! The little quote block to the right will automatically center-align itself based on how much text there is here, and vice versa for this text block. </p>
</div>
<!-- SIDE QUOTE;
> will automatically align with the text block to the left
-->
<div class="col-sm-4 pl-sm-2 align-self-center">
<div class="card p-2 px-3 my-2 text-center" style="border-radius:30px; border-width:0px 2px">
<p class="align-self-center">
A quote that shows a part of your character and <span style="color:#53B2C9; font-weight:700">looks better short</span>.
</p>
</div>
</div>
</div>
<hr class="mx-2 my-3">
<div class="row no-gutters">
<!-- TRAIT CAROUSEL;
> each card has a min-height attribute to keep everything the same base height. if u want it to scroll, just add [ overflow-y:auto ] after the min-height.
> also u lowkey have to write at least that min-height of the box to keep the trait card at the bottom STAY at the bottom lmao. to avoid this, u just have to change the min-height for each of the cards :)
-->
<div class="col-sm-6 pr-sm-2">
<div class="carousel slide" id="binary" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!-- positive trait -->
<div class="carousel-item active">
<div class="card p-1 px-2 my-3 text-justify" style="border-width:0px 2px 2px 0px; min-height:137px;">
<p class="mb-2"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">T</span>his section is for talking about a positive trait your oc has! go indepth and exercise those writing muscles!! or not i mean i can't MAKE u do anything u know like...idk.. also the min-height in style tag of this parent card is just to keep things looking nice from the personal code i ripped this from lmao change it if u want </p>
<span class="mb-n3 card text-center align-self-end w-100" style="border-width:2px; font-variant:small-caps; font-weight:600; color:#D62A6C"> positive trait </span>
</div>
</div>
<!-- neutral trait -->
<div class="carousel-item">
<div class="card p-1 px-2 my-3 text-justify" style="border-width:0px 2px 2px 0px; min-height:137px;">
<p class="mb-2"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">T</span>his is where you talk about a neutral trait your oc has! imma just lorerm ipsum this to fill up the space :) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus feugiat non. </p>
<span class="mb-n3 card text-center align-self-end w-100" style="border-width:2px; font-variant:small-caps; font-weight:600; color:#D62A6C"> neutral trait </span>
</div>
</div>
<!-- negative trait -->
<div class="carousel-item">
<div class="card p-1 px-2 my-3 text-justify" style="border-width:0px 2px 2px 0px; min-height:137px;">
<p class="mb-2"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">T</span>his is for a negative trait! lorem ipsum whoopee: 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. </p>
<span class="mb-n3 card text-center align-self-end w-100" style="border-width:2px; font-variant:small-caps; font-weight:600; color:#D62A6C"> negative trait </span>
</div>
</div>
</div>
</div>
<!-- CAROUSEL CONTROLS -->
<div class="justify-content-center">
<a class="btn btn-outline-secondary p-1 mx-2" style="border:1.5px solid #53B2C9" href="#binary" data-slide="prev">
<i class="fa-light fa-angles-left fa-fw" style="color:#53B2C9"></i>
</a>
<a class="btn btn-outline-secondary p-1 mx-2" style="border:1.5px solid #53B2C9" href="#binary" data-slide="next">
<i class="fa-light fa-angles-right fa-fw" style="color:#53B2C9"></i>
</a>
</div>
</div>
<!-- SLIDING STATS;
> change the width to alter the circle's placement! the value has to be in between 0% and 100%
-->
<div class="col-sm-6 pl-sm-2 align-self-center">
<!-- sincere vs dishonest -->
<div class="row no-gutters text-center my-2">
<div class="col-2 text-truncate text-monospace" style="color:#53B2C9"> sincere </div>
<div class="col-8 px-3 align-self-center">
<div class="progress bg-faded" style="height:4px; overflow:visible">
<div class="progress-bar bg-transparent" style="width:30%; margin-top:-2px">
<i class="fa-solid fa-square pull-right" style="color:#D62A6C"></i>
</div>
</div>
</div>
<div class="col-2 text-truncate text-muted"> dishonest </div>
</div>
<!-- naive vs conscious -->
<div class="row no-gutters text-center my-2">
<div class="col-2 text-truncate text-muted"> naive </div>
<div class="col-8 px-3 align-self-center">
<div class="progress bg-faded" style="height:4px; overflow:visible">
<div class="progress-bar bg-transparent" style="width:75%; margin-top:-2px">
<i class="fa-solid fa-square pull-right" style="color:#D62A6C"></i>
</div>
</div>
</div>
<div class="col-2 text-truncate text-monospace" style="color:#53B2C9"> conscious </div>
</div>
<!-- stubborn vs yielding -->
<div class="row no-gutters text-center my-2">
<div class="col-2 text-truncate text-monospace" style="color:#53B2C9"> stubborn </div>
<div class="col-8 px-3 align-self-center">
<div class="progress bg-faded" style="height:4px; overflow:visible">
<div class="progress-bar bg-transparent" style="width:10%; margin-top:-2px">
<i class="fa-solid fa-square pull-right" style="color:#D62A6C"></i>
</div>
</div>
</div>
<div class="col-2 text-truncate text-muted"> yielding </div>
</div>
<!-- solitary vs social -->
<div class="row no-gutters text-center my-2">
<div class="col-2 text-truncate text-monospace" style="color:#53B2C9"> solitary </div>
<div class="col-8 px-3 align-self-center">
<div class="progress bg-faded" style="height:4px; overflow:visible">
<div class="progress-bar bg-transparent" style="width:30%; margin-top:-2px">
<i class="fa-solid fa-square pull-right" style="color:#D62A6C"></i>
</div>
</div>
</div>
<div class="col-2 text-truncate text-muted"> social </div>
</div>
<!-- emotional vs withdrawn -->
<div class="row no-gutters text-center my-2">
<div class="col-2 text-truncate text-muted"> emotional </div>
<div class="col-8 px-3 align-self-center">
<div class="progress bg-faded" style="height:4px; overflow:visible">
<div class="progress-bar bg-transparent" style="width:60%; margin-top:-2px">
<i class="fa-solid fa-square pull-right" style="color:#D62A6C"></i>
</div>
</div>
</div>
<div class="col-2 text-truncate text-monospace" style="color:#53B2C9"> withdrawn </div>
</div>
</div>
</div>
</div>
<!-- II.c. HISTORY
> includes collapsable scrollspy directory
-->
<div class="collapse" id="gigabyte" data-parent="#processor">
<div class="justify-content-between mb-3">
<hr class="w-100">
<span class="card px-3 py-0" style="border-radius:20px; border-width:0px 2px">
<span class="my-auto fa-xl" style="text-shadow:1px 1px #D62A6C; font-variant:small-caps; font-weight:700">>history_</span>
</span>
<hr class="w-100">
</div>
<!-- SCROLLSPY DIRECTORY;
> hit [hide] and it collapses!! wow so cool!!
> you'll want to keep the scrollspy links and the header div ids the same for this to work!
-->
<div class="float-right mx-2">
<div class="card p-2 px-3 rounded-0 bg-faded">
<p style="font-variant:small-caps; font-size:1.3em; font-weight:700">
directory [
<span>
<a style="color:#D62A6C; font-size:0.9em" href="#contents" data-toggle="collapse"> hide </a>
</span>
]
</p>
<div class="collapse show" id="contents" style="transition-duration:0s">
<hr class="my-1 w-100">
<!-- actual scrollspy -->
<ul class="fa-ul mb-1" style="margin-left:20px">
<li><span class="fa-li"><i class="fa-regular fa-folder-open"></i></span> <a href="#sect1" class="text-reset"> subheader one </a> </li>
<li><span class="fa-li"><i class="fa-regular fa-folder-open"></i></span> <a href="#sect2" class="text-reset"> subheader two </a> </li>
<li><span class="fa-li"><i class="fa-regular fa-folder-open"></i></span> <a href="#sect3" class="text-reset"> subheader three </a> </li>
<li><span class="fa-li"><i class="fa-regular fa-folder-open"></i></span> <a href="#sect4" class="text-reset"> subheader four </a> </li>
</ul>
</div>
</div>
</div>
<!-- BODY TEXT CONTENT;
> alternates header and text content. each header has a id that corresponds to its respective scrollspy link
-->
<!-- SECTION ONE: header & content -->
<div class="justify-content-start my-1" id="sect1">
<i class="fa-regular fa-turn-down-right fa-lg align-self-center px-1"></i>
<div class="p-1 px-2 text-white" style="background:#D62A6C">
<span style="font-weight:700; letter-spacing:1.2px"> SUBHEADER 1 </span>
</div>
<hr class="flex-fill my-auto" style="height:3px; background:#D62A6C">
</div>
<div class="pl-md-4 mt-3 px-2">
<p class="text-justify"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">L</span>orem 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-justify"> 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>
<!-- SECTION TWO: header & content -->
<div class="justify-content-start mt-3" id="sect2">
<i class="fa-regular fa-turn-down-right fa-lg align-self-center px-1"></i>
<div class="p-1 px-2 text-white" style="background:#D62A6C">
<span style="font-weight:700; letter-spacing:1.2px"> SUBHEADER 2 </span>
</div>
<hr class="flex-fill my-auto" style="height:3px; background:#D62A6C">
</div>
<div class="pl-md-4 mt-3 px-2">
<p class="text-justify"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">L</span>orem 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-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- SECTION THREE: header & content -->
<div class="justify-content-start mt-3" id="sect3">
<i class="fa-regular fa-turn-down-right fa-lg align-self-center px-1"></i>
<div class="p-1 px-2 text-white" style="background:#D62A6C">
<span style="font-weight:700; letter-spacing:1.2px"> SUBHEADER 3 </span>
</div>
<hr class="flex-fill my-auto" style="height:3px; background:#D62A6C">
</div>
<div class="pl-md-4 mt-3 px-2">
<p class="text-justify"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- SECTION FOUR: header & content -->
<div class="justify-content-start mt-3" id="sect4">
<i class="fa-regular fa-turn-down-right fa-lg align-self-center px-1"></i>
<div class="p-1 px-2 text-white" style="background:#D62A6C">
<span style="font-weight:700; letter-spacing:1.2px"> SUBHEADER 4 </span>
</div>
<hr class="flex-fill my-auto" style="height:3px; background:#D62A6C">
</div>
<div class="pl-md-4 mt-3 px-2">
<p class="text-justify"> <span class="float-left py-1 px-2 mr-2 card border-0" style="background:#53B2C9; font-family:georgia; font-size:1.5em; font-weight:700">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
</div>
</div>
<!-- II.d. MISCELLANEOUS
> includes design notes and palette, trivia, and moodboard and music player
-->
<div class="collapse" id="terabyte" data-parent="#processor">
<div class="justify-content-between mb-3">
<hr class="w-100">
<span class="card px-3 py-0" style="border-radius:20px; border-width:0px 2px">
<span class="my-auto fa-xl" style="text-shadow:1px 1px #D62A6C; font-variant:small-caps; font-weight:700">>design_notes_</span>
</span>
<hr class="w-100">
</div>
<!-- DESIGN NOTES;
> the order of the columns from left to right is reversed on medium-sized and smaller screens, with the ref image being first and the notes last.
> the ordering is just to make things look nicer on smaller screens lol
-->
<div class="row no-gutters mb-4">
<!-- actual notes -->
<div class="col-md-5 px-2 order-md-1 order-3">
<ul style="line-height:1.7">
<li>
sorry for no fancy list icons i'm too lazy for them lmaoooo
<ul>
<li>also they look confusing after a while and the code for them is super ugly and ion like reading it so</li>
</ul>
</li>
<li>uhm blah blah blah talk ab oc things here</li>
<li>im gonna do the trick where u space things out more to make it look like u wrote more for like essays and stuff lol</li>
<li>also so its easier to look at bc i like cramped text & layouts but i know not everyone does
<ul>
<li>hastag accessibility omggg</li>
</ul>
</li>
</ul>
</div>
<!-- PALETTE;
> can have a maximum of twelve colors.
> displays as a column on desktop and larger screens, and as a row on tablets and phones
-->
<div class="col-md-1 order-2 align-self-sm-center">
<div class="flex-md-column justify-content-between flex-row px-md-2 my-md-0 my-2">
<div class="col h-100 p-3 tooltipster mb-md-2 mb-0 mr-md-0 mr-2" title="#F72585" style="background:#f72585"></div>
<div class="col h-100 p-3 tooltipster mb-md-2 mb-0 mr-md-0 mr-2" title="#7209b7" style="background:#7209b7"></div>
<div class="col h-100 p-3 tooltipster mb-md-2 mb-0 mr-md-0 mr-2" title="#3A0CA3" style="background:#3a0ca3"></div>
<div class="col h-100 p-3 tooltipster mb-md-2 mb-0 mr-md-0 mr-2" title="#4361EE" style="background:#4361ee"></div>
<div class="col h-100 p-3 tooltipster mb-md-2 mb-0 mr-md-0 mr-2" title="#4CC9f0" style="background:#4cc9f0"></div>
</div>
</div>
<!-- IMAGE;
> remember to replace IMG_LINK with a link to the image itself, not the website it's hosted on
-->
<div class="col-md-6 order-md-3 order-1">
<div class="h-100" style="min-height:150px;
background:url(IMG_LINK) center;
background-size:cover">
<!-- design/art credits -->
<span class="text-white" style="position:absolute; bottom:5px; right:10px">
<a href="DESIGNER" class="text-white tooltipster" title="designed by user"> <i class="fa-light fa-palette"></i> </a>
.
<a href="ARTIST" class="text-white tooltipster" title="art by user"> <i class="fa-light fa-pen-paintbrush"></i> </a>
</span>
</div>
</div>
</div>
<hr class="my-auto">
<!-- TRIVIA AND MOODBOARD -->
<div class="row no-gutters mt-4">
<!-- TRIVIA;
> text will scroll when it reaches a certain length
> appears on top of the moodboard on medium-sized screens and smaller
-->
<div class="col-md-6 order-md-2 order-1">
<div class="justify-content-between mb-3 mx-md-2">
<hr class="w-100">
<span class="card px-3 py-0" style="border-radius:20px; border-width:0px 2px">
<span class="my-auto fa-xl" style="text-shadow:1px 1px #D62A6C; font-variant:small-caps; font-weight:700">>trivia_</span>
</span>
<hr class="w-100">
</div>
<ul style="line-height:1.7; max-height:260px; overflow-y:auto">
<li> even more lists yipee </li>
<ul>
<li> yeah u know the drill. subnote </li>
</ul>
<li> note </li>
<li> note that is so so so absurdly long that it trails around and down and oh ok its long enough lmao </li>
<li> ok so this moodboard on the left for computer users & underneath for everyone else will keep its format on any size screen. if it gets fucked up lmk & i'll fix it eventually but ion wanna fuck around with responsiveness tonight lololol </li>
<li>im not actually sure if the entire moodboard will grow with the trivia text but it might? oh no it doesnt sorry</li>
</ul>
</div>
<!-- MOODBOARD;
> replace IMG_LINK with a link to the image!
-->
<div class="col-md-6 order-md-1 order-2">
<!-- FIRST ROW OF IMAGES -->
<div class="row no-gutters">
<div class="col-4 pr-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
<div class="col-8 pl-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
</div>
<!-- SECOND ROW OF IMAGES ft. music player -->
<div class="row no-gutters my-2">
<div class="col-6 pr-1">
<div class="card-block h-100 align-items-center bg-faded p-1">
<div class="row no-gutters align-items-center">
<div class="col-auto px-2 overflow-hidden">
<a style="color:#D62A6C">
<!-- MUSIC PLAYER;
> replace ID_HERE with the youtube video id, which is the string of characters found after [ watch?v= ]
-->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:145px;opacity:0.0001;position:absolute;top:-55px;left:-50px;z-index:1000;" src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fa-regular fa-cloud-music fa-2x"></i>
</a>
</div>
<div class="col-auto pl-1">
<p class="mb-0">
SONG NAME
</p>
<p class="text-muted font-italic mt-n1" style="font-variant:small-caps; font-size:">
artist
</p>
</div>
</div>
</div>
</div>
<div class="col-6 pl-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
</div>
<!-- THIRD ROW OF IMAGES -->
<div class="row no-gutters">
<div class="col-4 pr-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
<div class="col-4 px-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
<div class="col-4 pl-1">
<div class="h-100" style="min-height:100px;
background:url(IMG_LINK) center;
background-size:cover"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==============================
III. NAVIGATION;
> self-explanatory.
> if you want to change the link, be sure to change the corresponding accordion page id.
> text is hidden on medium-sized screens and smaller
============================== -->
<div class="mt-3">
<div class="row no-gutters">
<div class="col-3 text-truncate">
<div class="card p-1 rounded-0 mx-2 text-center">
<a href="#kilobyte" data-toggle="collapse" aria-expanded="true" class="stretched-link" style="font-weight:700; color:#D62A6C; font-variant:small-caps; font-size:1.2em; text-decoration:none">
<i class="fa-solid fa-brain-circuit"></i>
<span class="hidden-md-down"> basics </span>
</a>
</div>
</div>
<div class="col-3 text-truncate">
<div class="card p-1 rounded-0 mx-2 text-center">
<a href="#megabyte" data-toggle="collapse" aria-expanded="false" class="stretched-link" style="font-weight:700; color:#D62A6C; font-variant:small-caps; font-size:1.2em; text-decoration:none">
<i class="fa-solid fa-user-secret"></i>
<span class="hidden-md-down"> personality </span>
</a>
</div>
</div>
<div class="col-3 text-truncate">
<div class="card p-1 rounded-0 mx-2 text-center">
<a href="#gigabyte" data-toggle="collapse" aria-expanded="false" class="stretched-link" style="font-weight:700; color:#D62A6C; font-variant:small-caps; font-size:1.2em; text-decoration:none">
<i class="fa-solid fa-folder-open"></i>
<span class="hidden-md-down"> history </span>
</a>
</div>
</div>
<div class="col-3 text-truncate">
<div class="card p-1 rounded-0 mx-2 text-center">
<a href="#terabyte" data-toggle="collapse" aria-expanded="false" class="stretched-link" style="font-weight:700; color:#D62A6C; font-variant:small-caps; font-size:1.2em; text-decoration:none">
<i class="fa-solid fa-box-archive"></i>
<span class="hidden-md-down"> miscellaneous </span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="card p-2 px-3 mt-2" style="border-radius:0px 0px 50px 50px">
<div class="text-center text-muted" style="font-size:0.85em">
code <a href="https://toyhou.se/sharkadelic" class="text-muted"> © sharkadelic </a> 2022
| images from <a href="https://unsplash.com" class="text-muted"> unsplash </a>
</div>
</div>
</div>