Profile
<!-- [F2U] jukebox by macroura
- this is a remaster of a previous code, jukebox!
- ending the month with a quick f2u to make up for the p2u lol
notes:
- uses bootstrap colors with [ -primary ] and [ -warning ] as an accent
- a hugeass embedded music player accordion its literally like 50% of the code lmfao
-->
<div class="container py-sm-2 py-5" style="max-width:630px; font-size:12px; letter-spacing:0.3px; line-height:1.4">
<div class="row no-gutters">
<!--====== I. sidebar =======-->
<div class="col-sm-4 mb-sm-0 mb-2 align-self-sm-center">
<div class="card rounded-0 bg-transparent">
<div class="h-100 flex-column align-items-center justify-content-between p-2 text-center">
<!-- ==== I.a; CHARACTER ICON ====
> replace [ IMG_URL ] with the link to the image you want!
======================-->
<img src="IMG_URL" class="img-thumbnail p-2 rounded-circle mb-2 mt-n5" style="object-fit:cover; height:130px; width:130px;">
<!--== I.b; CHARACTER NAME ==-->
<h4 class="my-2 font-weight-light">
name lastname
</h4>
<!--== I.c; QUOTE ==-->
<p class="text-muted font-italic mb-2">
simple little quote... this box will expand based on how long the quote is.
</p>
</div>
</div>
<!--==== I.d; CAROUSEL NAVIGATION ====-->
<div class="card rounded-0 bg-transparent mt-2 p-1">
<div class="justify-content-around align-items-center">
<a class="btn btn-outline-warning border-0 px-1 py-0" href="#demo" data-slide="prev">
<i class="fa-light fa-angle-left text-warning"></i>
</a>
<a class="btn btn-outline-warning border-0 px-1 py-0" data-target="#demo" data-slide-to="0">
<i class="fa-light fa-user text-warning"></i>
</a>
<a class="btn btn-outline-warning border-0 px-1 py-0" data-target="#demo" data-slide-to="1">
<i class="fa-light fa-book-bookmark text-warning"></i>
</a>
<a class="btn btn-outline-warning border-0 px-1 py-0" data-target="#demo" data-slide-to="2">
<i class="fa-light fa-swatchbook text-warning"></i>
</a>
<a class="btn btn-outline-warning border-0 px-1 py-0" data-target="#demo" data-slide-to="3">
<i class="fa-light fa-list-music text-warning"></i>
</a>
<a class="btn btn-outline-warning border-0 px-1 py-0" href="#demo" data-slide="next">
<i class="fa-light fa-angle-right text-warning"></i>
</a>
</div>
</div>
</div>
<!--====== end sidebar =======-->
<!--====== II. main content =======-->
<div class="col-sm-8 pl-sm-4 mt-sm-0 mt-2">
<div class="card p-3 rounded-0 bg-transparent" style="height:320px; overflow-y:auto">
<div class="carousel slide" id="demo" data-pause="true" data-ride="false">
<div class="carousel-inner">
<!--===== page one =====
includes:
> basic info
> short info block
> stat bars
=====================-->
<div class="carousel-item active">
<div class="justify-content-between align-items-center"><h6 class="text-primary mb-0">info</h6>
<i class="fa-thin fa-user fa-lg text-primary m-1"></i></div>
<hr class="mt-1 mb-2 w-100">
<!--=== BASIC INFO ===-->
<div class="d-flex flex-row flex-wrap justify-content-between align-items-center my-2">
<div class="col-auto py-1 text-center">
content
<p class="text-muted">name(s)</p>
</div>
<div class="col-auto py-1 text-center">
000
<p class="text-muted">age</p>
</div>
<div class="col-auto py-1 text-center">
00/00/0000
<p class="text-muted">birthday</p>
</div>
<div class="col-auto py-1 text-center">
pro/noun
<p class="text-muted">pronouns</p>
</div>
<div class="col-auto py-1 text-center">
identity
<p class="text-muted">gender</p>
</div>
<div class="col-auto py-1 text-center">
or race
<p class="text-muted">species</p>
</div>
<div class="col-auto py-1 text-center">
content
<p class="text-muted">orient.</p>
</div>
<div class="col-auto py-1 text-center">
job, or not
<p class="text-muted">occup.</p>
</div>
</div>
<!--=== INFO BLOCK ===-->
<p class="text-justify">
<span class="text-warning" style="font-size:1.1em; font-weight:700"> Lorem ipsum dolor </span>
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>
<hr>
<!--=== STAT BARS ===
> change the width percent to change how filled the bar is!
=================-->
<div class="flex-row flex-wrap no-gutters">
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
str
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
int
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
con
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
dex
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
cha
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
<div class="col-6 row no-gutters align-items-center my-1 px-2">
<div class="col-2 text-truncate">
wis
</div>
<div class="col pl-2">
<div class="progress" style="height:6px">
<div class="progress-bar bg-warning" style="
width:10% "
></div>
</div>
</div>
</div>
</div>
</div>
<!--===== end page one =====-->
<!--===== page two =====
includes:
> text blocks
> trivia
=====================-->
<div class="carousel-item">
<div class="justify-content-between align-items-center"><h6 class="text-primary mb-0">about</h6>
<i class="fa-thin fa-book-bookmark fa-lg text-primary m-1"></i></div>
<hr class="mt-1 mb-2 w-100">
<!--=== info blocks ===-->
<p class="text-justify"> <span class="text-warning" style="font-size:1.1em; font-weight:700">Write about your character!</span>
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 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>
<!-- trivia header -->
<div class="justify-content-between align-items-center my-2">
<p class="text-uppercase text-left text-warning" style="font-weight:700; font-size:1.1em">
trivia
</p>
<hr class="flex-fill mx-3">
<i class="fa-thin fa-circle-info text-warning fa-lg"></i>
</div>
<!--=== triva list ===-->
<ul class="mb-0" style="margin-left:-20px">
<li> add some info here </li>
<li> trivia note </li>
<li> trivia note </li>
<li> another note </li>
<!-- add more notes above this comment! -->
</ul>
</div>
<!--===== end page two =====-->
<!--===== page three =====
includes:
> ref image
> palette
> design info
> design notes
=====================-->
<div class="carousel-item">
<div class="justify-content-between align-items-center"><h6 class="text-primary mb-0">design notes</h6>
<i class="fa-thin fa-swatchbook fa-lg text-primary m-1"></i></div>
<hr class="mt-1 mb-2 w-100">
<!-- ==== ref sheet image ====
> replace [ IMG_URL ] with the link to the image you want!
======================-->
<div class="card rounded-0" style="min-height:150px;
background:url(IMG_HERE) center;
background-size:cover"></div>
<!-- ==== palette sheet;
- can have up to twelve colors before breaking to a new row!
==== -->
<div class="card rounded-0 my-2 p-1">
<div class="flex-row flex-wrap">
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
<div class="col p-2 tooltipster" style="background:#HEXCODE" title="#HEXCODE"></div>
</div>
</div>
<!-- ==== design info ==== -->
<div class="d-flex flex-row justify-content-between align-items-center my-3">
<div class="col-auto text-center">
000 cm
<p class="text-muted">height</p>
</div>
<div class="col-auto text-center">
000 kg
<p class="text-muted">weight</p>
</div>
<div class="col-auto text-center">
build
<p class="text-muted">body type</p>
</div>
<div class="col-auto text-center">
<span class="text-warning">
user
</span>
<p class="text-muted">designer</p>
</div>
</div>
<!-- ==== design notes ==== -->
<ul class="mb-0" style="margin-left:-20px">
<li> design note </li>
<li> another note </li>
<ul>
<li> subnote. elaborate on note above. </li>
</ul>
<li> another note </li>
<!-- add more notes above this comment! -->
</ul>
</div>
<!--===== end page three =====-->
<!--===== page four =====
includes:
> accordion music player
> control buttons
=====================-->
<div class="carousel-item">
<div class="justify-content-between"><h6 class="text-primary mb-0">tracklist</h6>
<i class="fa-thin fa-list-music text-primary m-1"></i></div>
<hr class="mt-1 mb-2 w-100">
<!-- ==== music player accordion;
- this is a long one y'all buckle in
==== -->
<div class="accordion card-block bg-faded p-3 pt-4" id="jukebox">
<!-- == SONG ONE == -->
<div class="collapse show" id="one" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG TWO == -->
<div class="collapse" id="two" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG THREE == -->
<div class="collapse" id="three" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG FOUR == -->
<div class="collapse" id="four" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG FIVE == -->
<div class="collapse" id="five" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG SIX == -->
<div class="collapse" id="six" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG SEVEN == -->
<div class="collapse" id="seven" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- == SONG EIGHT == -->
<div class="collapse" id="eight" data-parent="#jukebox">
<div class="row no-gutters justify-content-around align-items-center px-4">
<div class="col-auto text-center" style="overflow:hidden">
<a class="btn btn-outline-warning rounded-0 p-2">
<!-- === music player;
- replace [ ID_HERE ] with the youtube id of the song, found after [ watch?v= ]
=== -->
<iframe allowfullscreen class="m-auto" frameborder="0" style="height:145px;width:245px;opacity:0.0001;position:absolute;top:-50px;left:-30px;z-index:1000;"
src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
<i class="fal fa-play text-warning fa-fw"></i>
</a>
</div>
<div class="col-6">
<div class="card pl-4 bg-transparent rounded-0 flex-column" style="border-width:0px 0px 0px 1px">
<p class="mb-1 text-truncate" style="font-size:1.1em; font-weight:700">
SONG
</p>
<p class="text-muted text-truncate"> ARTIST </p>
</div>
</div>
</div>
<hr class="mt-2 mx-3">
<p class="text-center text-muted font-italic mt-2 mb-0" style="font-size:0.9em"> lyrics go here. </p>
</div>
<!-- add more songs above this comment! -->
</div>
<!-- ==== accordion controls ==== -->
<div class="flex-row flex-wrap justify-content-around mt-3 mb-0">
<div class="col text-center px-1 py-2">
<a href="#one" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song one</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#two" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song two</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#three" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song three</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#four" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song four</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#five" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song five</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#six" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song six</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#seven" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song seven</a>
</div>
<div class="col text-center px-1 py-2">
<a href="#eight" data-toggle="collapse" class="btn btn-outline-warning rounded-0 w-100 p-1" style="font-size:inherit">song eight</a>
</div>
</div>
</div>
<!--===== end page four =====-->
</div>
</div>
</div>
</div>
<!--====== end main content =======-->
</div>
<!--===== CREDITS; DO NOT REMOVE =====-->
<span class="pull-right mt-1 mr-2"><a href="https://toyhou.se/sharkadelic" style="font-size:0.75em"><i class="fa-duotone fa-fish mr-1"></i> by sharkadelic</a></span></div>