<!-- [F2U] gilded by macroura
- entry for the august 2022 coders quarter's challenge! used the offset layout for this, rlly like how it came out :0
- this code triples as a f2u release, cq entry, and code for my oc meow meows. ferris is my chara code guinea pig :pray:
notes:
- bootstrap colors! uses [ warning ] as an accent
> not making a cc version y'all can figure that out urselves lol
- has a carousel sidebar and music player bc i will drop dead if i cant include at least one of them in every code i make. OTL
- need a live code editor? try [ https://th.circlejourney.net/# ]
- need an easy palette generator? try [ https://coolors.co ]
- need free-to-use vector icons? try [ https://fontawesome.com ]
-->
<div class="container" style="max-width:780px; font-size:11px; line-height:1.2; letter-spacing:0.7px">
<div class="card rounded-0 p-1" style="border-width:2px">
<!-- =====================
>> BEGIN CONTENT <<
===================== -->
<div class="row no-gutters mx-sm-n4 my-sm-3">
<!-- ====== BEGIN SIDEBAR ====== -->
<div class="col-sm-3 pr-sm-2">
<!-- main focal image;
> i would recommend using an image that has the character's face in the uppermost portion ^^
-->
<div class="card p-2 bg-faded rounded-0 h-100" style="min-height:400px;
background-image:url(IMG_LINK);
background-size:cover;
background-position:center">
<!--empty div, doesn't do anything its just for space lawl-->
<div class="h-50"></div>
<!-- attributes / at-a-glance info;
> box will expand if you add more!
- this also increases the height of the main content box, so you may have to manually adjust some preset heights to keep everything looking sleek B)
-->
<div class="card mx-1 px-1 py-0 rounded-0 bg-faded">
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-pen-line"></i> </div>
<div class="col-9 align-self-center">
aliases
</div>
</div>
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-transgender"></i> </div>
<div class="col-9 align-self-center">
pro/nouns
</div>
</div>
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-calendar"></i> </div>
<div class="col-9 align-self-center">
00/00/0000
</div>
</div>
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-cake"></i> </div>
<div class="col-9 align-self-center">
age (000)
</div>
</div>
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-dna"></i> </div>
<div class="col-9 align-self-center">
species/race
</div>
</div>
<div class="row no-gutters my-1 text-center">
<div class="col-3 card bg-warning rounded-0 p-2"> <i class="fal fa-briefcase"></i> </div>
<div class="col-9 align-self-center">
occupation (or not)
</div>
</div>
</div>
</div>
</div>
<!-- ====== END SIDEBAR ====== -->
<!-- ====== BEGIN MAIN CONTENT ====== -->
<div class="col-sm-9 pl-sm-2">
<!-- title -->
<div class="justify-content-sm-start justify-content-center mb-2">
<span class="p-2 bg-warning mr-2 hidden-sm-down"> <i class="fal fa-pegasus fa-2x"></i> </span>
<p style="font-size:3em; font-family:georgia; font-weight:700; font-style:italic"> NAME LASTNAME </p>
</div>
<div class="card bg-faded rounded-0 p-1" style="min-height:400px">
<div class="row no-gutters h-100">
<!-- === BODY CONTENT === -->
<div class="col-sm-8 pr-sm-2">
<!-- I. personality -->
<div class="justify-content-between">
<p class="text-warning m-1" style="font-family:georgia; font-size:1.5em; font-style:italic"> personality </p>
<span class="m-1 text-warning" style="font-size:1.2em; font-variant:small-caps; font-weight:600">
positive / neutral / negative
</span>
</div>
<div class="row no-gutters">
<div class="col-sm-9">
<div class="card rounded-0 bg-transparent p-1 text-justify" style="height:90px; overflow-y:auto">
hey hey this box scrolls! wax poetic about ur oc's little quirks and attitudes and whatnot :) 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.
</div>
</div>
<!-- I.a. bane & boon -->
<div class="col-sm-3">
<div class="flex-sm-column flex-row align-items-sm-center justify-content-center">
<div class="m-1 text-center">
<p class="mb-1 font-italic">adjective</p>
<p class="text-warning" style="font-size:1.1em; font-weight:600; font-variant:small-caps">boon</p>
</div>
<div class="m-1 text-center">
<p class="mb-1 font-italic">adjective</p>
<p class="text-warning" style="font-size:1.1em; font-weight:600; font-variant:small-caps">bane</p>
</div>
</div>
</div>
</div>
<!-- intermission;. tiny little moodboard!
> use images with focal points near/at the center for best results!
-->
<div class="flex-row no-gutters flex-wrap justify-content-center my-3">
<div class="mx-1 p-4" style="width:85px; background:url(IMG_LINK) center; background-size:cover"></div>
<div class="mx-1 p-4" style="width:85px; background:url(IMG_LINK) center; background-size:cover"></div>
<div class="mx-1 p-4" style="width:85px; background:url(IMG_LINK) center; background-size:cover"></div>
<div class="mx-1 p-4" style="width:85px; background:url(IMG_LINK) center; background-size:cover"></div>
</div>
<!-- II. bio -->
<div class="card p-1 rounded-0 bg-transparent" style="height:200px; overflow-y:auto">
<p class="text-justify mb-1">
<!-- this is for that cool ass L lol -->
<span class="card rounded-0 mr-2 p-2 text-center bg-warning" style="float:left; font-size:1.6em; font-weight:700; font-family:georgia">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>
<!-- pro tip:
> bold text: <b></b> or <strong></strong>
> italic text: <em></em>
> strikethrough text: <strike></strike>
-->
<p class="text-justify"> This box can scroll too! Will it look good? who knows! it might or it might not...anyways look at this! <b>bold text</b> <em>italic text</em> <strike>strikethrough text</strike> 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 class="bg-faded px-2" style="position:absolute; right:0; bottom:0">
<p class="text-warning" style="font-family:georgia; font-size:1.5em; font-style:italic"> information </p>
</div>
</div>
<!-- === END BODY CONTENT=== -->
<!-- === START SIDEBAR === -->
<div class="col-sm-4">
<!-- carousel start -->
<div class="carousel carousel-fade slide" id="offset" data-pause="true" data-ride="false">
<div class="carousel-inner">
<!-- first page; misc (includes missing stat sliders, trivia, & music player) -->
<div class="carousel-item active">
<!-- sliding stats;
> you can always add more but be aware that the entire main content AND image sidebar boxes will expand with it!
-->
<div class="row no-gutters mt-2 mb-1">
<div class="col-4 px-1 text-truncate">charisma</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 px-1 text-truncate">integrity</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 px-1 text-truncate">intelligence</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 px-1 text-truncate">temper</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 px-1 text-truncate">humor</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-4 px-1 text-truncate">maturity</div>
<div class="col-8 py-1">
<div class="progress rounded-0" style="height:4.5px">
<div class="progress-bar bg-transparent" style="width:50%; margin-top:-2px">
<i class="fas fa-square text-warning pull-right"></i>
</div>
</div>
</div>
</div>
<!-- trivia -->
<p class="text-right text-warning m-1" style="font-family:georgia; font-size:1.5em; font-style:italic"> trivia </p>
<div class="card rounded-0 bg-transparent p-1 mb-2" style="height:90px; overflow-y:auto">
<ul style="margin-left:-20px; margin-bottom:0px">
<li>lorem ipsum blah blah blah nuh nuh waaa weee!!! man idk</li>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>sub-something</li>
</ul>
</ul>
</div>
<!-- music box -->
<div class="text-center mt-3">
<img class="align-self-center" style="object-fit:cover; height:100px; width:100px"
src="IMG_LINK">
<div class="justify-content-between align-items-center p-2 mx-3">
<i class="fa-solid fa-shuffle text-warning fa-fw"></i>
<i class="fa-solid fa-backward text-warning fa-fw"></i>
<!-- music player
> replace "ID_HERE" with the youtube video id, found after v?
-->
<a class="align-self-center">
<iframe allow-fullscreen src="https://www.youtube.com/embed/ID_HERE?controls=0" class="m-auto" frameborder="0" style="position:absolute; z-index:100; height:45px; width:45px; bottom:10px; opacity:0.0001"></iframe>
<i class="fa-solid fa-play text-warning fa-fw"></i>
</a>
<i class="fa-solid fa-forward text-warning fa-fw"></i>
<i class="fa-solid fa-arrows-repeat text-warning fa-fw"></i>
</div>
<div class="progress rounded-0 mx-3" style="height:1px">
<div class="progress-bar bg-warning" style="width:75%"></div>
</div>
<p class="text-center text-truncate mt-1" style="font-variant:small-caps"> rhinestone eyes - gorillaz </p>
</div>
</div>
<!-- second page; design notes (includes image & mini palette) -->
<div class="carousel-item">
<!-- image -->
<div class="h-100" style="min-height:230px;
background:url(IMG_LINK) center;
background-size:cover">
</div>
<p class="text-right text-warning m-1 bg-faded" style="font-family:georgia; font-size:1.5em; font-style:italic; position:absolute; right:0; bottom:160px"> design notes </p>
<div class="card rounded-0 bg-transparent p-1 mb-2" style="height:123px; overflow-y:auto">
<ul style="margin-left:-20px; margin-bottom:0px">
<li>lorem ipsum blah blah blah nuh nuh waaa weee!!! man idk</li>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>sub-something</li>
</ul>
<li>oh and btw these boxes scroll!! actually all of them do. so write to ur hearts content!</li>
</ul>
</div>
<!-- mini palette -->
<div class="flex-row justify-content-between flex-wrap" style="max-height:35px; overflow-y:auto">
<!-- can have a max of 12 colors! -->
<div class="col p-2 tooltipster mr-1" style="background:#HEXCODE; height:30px" title="#HEXCODE"></div>
<div class="col p-2 tooltipster mr-1" style="background:#HEXCODE; height:30px" title="#HEXCODE"></div>
<div class="col p-2 tooltipster mr-1" style="background:#HEXCODE; height:30px" title="#HEXCODE"></div>
<div class="col p-2 tooltipster mr-1" style="background:#HEXCODE; height:30px" title="#HEXCODE"></div>
<div class="col p-2 tooltipster mr-1" style="background:#HEXCODE; height:30px" title="#HEXCODE"></div>
</div>
</div>
<!-- third page; relationships -->
<div class="carousel-item" style="height:391px; overflow-y:auto">
<p class="text-warning text-right m-1" style="font-family:georgia; font-size:1.5em; font-style:italic"> relationships </p>
<!-- relationship card 1 -->
<div class="card mb-3 mt-2 rounded-0 p-1 bg-transparent" style="height:100px; overflow-y:auto">
<div class="text-justify">
<span class="float-left">
<img class="mr-2" style="height:50px; width:40px; object-fit:cover;" src="IMG_LINK">
</span>
<span class="justify-content-between" style="font-variant:small-caps; font-size:1.2em">
<a class="text-warning mr-1" href="LINK"> NAME </a>
<span class="pull-right text-truncate"> / relationship </span>
</span>
<p>talk allll about this character's relationship with ur other character! worry not, this box scrolls, as do the others, so you'll never run out of space! and if you do want to add more relationship boxes, this entire main section will scroll with it! (hopefully)</p>
</div>
</div>
<!-- relationship card 2 -->
<div class="card mb-3 mt-2 rounded-0 p-1 bg-transparent" style="height:100px; overflow-y:auto">
<div class="text-jusify">
<span class="float-left">
<img class="mr-2" style="height:50px; width:40px; object-fit:cover;" src="IMG_LINK">
</span>
<span class="justify-content-between" style="font-variant:small-caps; font-size:1.2em">
<a class="text-warning mr-1" href="LINK"> NAME </a>
<span class="pull-right text-truncate"> / relationship </span>
</span>
<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>
<!-- relationship card 3 -->
<div class="card mb-3 mt-2 rounded-0 p-1 bg-transparent" style="height:100px; overflow-y:auto">
<div class="text-justify">
<span class="float-left">
<img class="mr-2" style="height:50px; width:40px; object-fit:cover;" src="IMG_LINK">
</span>
<span class="justify-content-between" style="font-variant:small-caps; font-size:1.2em">
<a class="text-warning mr-1" href="LINK"> NAME </a>
<span class="pull-right text-truncate"> / relationship </span>
</span>
<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>
<!-- add more cards above this comment! -->
</div>
</div>
</div>
</div>
<!-- === END SIDEBAR === -->
</div>
</div>
</div>
<!-- === START FOOTER === -->
<div class="col-12 row no-gutters pt-2">
<div class="col-sm-8 pr-sm-2 order-sm-1 order-2">
<div class="card h-100 rounded-0 bg-faded p-1">
<!-- quote box;
> text will truncate (cut off and make ellipses) if the text is larger than the set size of the box. just remove "text-truncate" to get rid of this!
-->
<div class="justify-content-between">
<div class="card p-2 rounded-0 bg-warning"> <i class="fal fa-quote-left"></i> </div>
<p class="font-italic align-self-center text-truncate mx-1" style="font-weight:600">
super duper swagadelic quote goes here... or just a short desc of ur character. text truncates if you go over!
</p>
<div class="card p-2 rounded-0 bg-warning"> <i class="fal fa-quote-right"></i> </div>
</div>
</div>
</div>
<!-- carousel nav;
> self-explanatory, just keep the id consistent!
-->
<div class="col-sm-4 pl-sm-2 order-sm-2 order-1">
<div class="card h-100 rounded-0 bg-faded p-1">
<div class="justify-content-around my-auto">
<a class="btn btn-outline-warning rounded-0 p-0" href="#offset" data-slide="prev"> <i class="fa-solid fa-caret-left fa-fw"></i> </a>
<a class="btn btn-outline-warning rounded-0 p-0" data-target="#offset" data-slide-to="0" href="#"> <i class="fal fa-list fa-fw"></i> </a>
<a class="btn btn-outline-warning rounded-0 p-0" data-target="#offset" data-slide-to="1" href="#"> <i class="fal fa-swatchbook fa-fw"></i> </a>
<a class="btn btn-outline-warning rounded-0 p-0" data-target="#offset" data-slide-to="2" href="#"> <i class="fal fa-head-side-heart fa-fw"></i> </a>
<a class="btn btn-outline-warning rounded-0 p-0" href="#offset" data-slide="next"> <i class="fa-solid fa-caret-right fa-fw"></i> </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- =====================
>> END CONTENT <<
===================== -->
<!-- CREDITS; DO NOT REMOVE -->
<span class="pull-right" style="font-size:0.8em; margin-top:3px">
<a href="/sharkadelic"> <i class="fa-duotone fa-fish"></i> by sharkadelic</a>
|
</span>
</div>