Web Code
created by:AnsuCodes
HTMLCustom ColorsMixed ColorsBootstrapCharacter
Copy
<!--------------------------------------------------
Feel free to edit, frakenstein, etc. Just credit me
(Ansuperope on TH) somewhere on the code please and
don't sell / profit off of this
If the code is broken, hard to see, looks off or
you need help feel free to tell / ask me by commenting
or dming me
Use "ctrl" + "f" to find, replace and delete
text faster
BOOTSTRAP COLOR VERSION
bootstrap overrides custom colors. Delete if you don't
want them
- BG: bg-muted
- TEXT: text-dark
- HEADER: text-primary bg-primary
CUSTOM COLORS
- BORDER & TEXT: 000
- HEADER & LINES: 444
- BG: ddd
- ACCENT: bbb
Live Preview:
https://toyhou.se/21608154.f2u-web-code
Pastebin:
https://pastebin.com/xRLVpsyr
Live code editor (shows how code looks as you work):
https://th.circlejourney.net/
Bootstrap Colors:
https://getbootstrap.com/docs/4.0/utilities/colors/
Hex Colors:
https://imagecolorpicker.com/
Icons:
https://fontawesome.com/search
Ask for Help Here / Help Thread:
https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
--------------------------------------------------->
<div class="justify-content-center"><div class="bg-muted text-dark" style="width:750px; border:1px solid #000; color:#000; background-color:#ddd;">
<!-- HEADER / CREDITS ------------------------->
<div class="bg-primary col-12 py-1 text-right" style="border-bottom:1px solid #000; background-color:#444;">
<!-- minimize / code credit -->
<a title="Artist" href="LINK" class="text-primary bg-muted m-1 px-1" style="border:1px solid #000; color:#000; background-color:#bbb;"><i class="fa-solid fa-dash"></i></a>
<!-- window / layout credit -->
<a title="Layout by AJGodess" href="https://toyhou.se/AJGodess" class="text-primary bg-muted m-1 px-1" style="border:1px solid #000; color:#000; background-color:#bbb;"><i class="fa-regular fa-window-restore"></i></a>
<!-- x -->
<a title="Code by Ansuperope" href="https://toyhou.se/Ansuperope" class="text-primary bg-muted m-1 px-1" style="border:1px solid #000; color:#000; background-color:#bbb;"><i class="fa-solid fa-x"></i></a>
</div>
<!-- END HEADER / CREDITS --------------------->
<!-- NAME AND FAVE ---------------------------->
<div class="col-12 my-2"><div class="bg-muted px-2 pb-1 row no-gutters" style="border:1px solid #000; background-color:#bbb;">
<!-- name -->
<span class="col">www.CharacterName.com</span>
<!-- favorite -->
<span class="pb-1"><a data-toggle="th-favorite" href="#" class="text-primary px-2" style="color:#444;">
<span class="favorite" title="Favorite"><i class="fa-regular fa-star"></i></span>
<span class="unfavorite" title="Unfavorite"><i class="fa-solid fa-star"></i></span>
</a></span>
</div></div>
<!-- END NAME AND FAVE ------------------------>
<!-- TOP TABS AND PIC ------------------------->
<div class="col-12 my-2 row no-gutters">
<!-- TOP TABS ----------------------------->
<div class="col-6 col-lg-8"><div class="mr-1">
<!-- NAV BUTTONS ---------------------->
<ul class="nav">
<li class="nav-item bg-muted mx-1 px-1" style="border:1px solid #000; border-bottom:none; background-color:#bbb;"><a data-toggle="tab" href="#TOP1" class="text-dark" style="color:#000;">1</a></li>
<li class="nav-item bg-muted mx-1 px-1" style="border:1px solid #000; border-bottom:none; background-color:#bbb;"><a data-toggle="tab" href="#TOP2" class="text-dark" style="color:#000;">2</a></li>
<li class="nav-item bg-muted mx-1 px-1" style="border:1px solid #000; border-bottom:none; background-color:#bbb;"><a data-toggle="tab" href="#TOP3" class="text-dark" style="color:#000;">3</a></li>
</ul>
<!-- END NAV BUTTONS ------------------>
<!-- TAB CONTENT ---------------------->
<div class="tab-content bg-muted" style="background-color:#bbb;">
<!-- TAB 1 ------------------------>
<div id="TOP1" data-toggle="tab" class="tab-pane show active"><div class="py-1" style="height:187px; overflow:auto; border:1px solid #000;">
<!-- BASIC INFO --------------->
<div class="col-lg-12 row no-gutters">
<!-- 1 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">name:</div>
<div class="col-6 col-lg-8 pl-1 ">content</div>
</div></div>
<!-- 2 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">gender:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 3 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">species:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 4 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">ethnicity:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 5 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">age:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 6 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">height:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 7 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">birthday:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- 8 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="text-primary col-6 col-lg-4" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">status:</div>
<div class="col-6 col-lg-8 pl-1">content</div>
</div></div>
<!-- copy and paste more above here -->
</div>
<!-- END BASIC INFO ----------->
<!-- LINE --------------------->
<div class="my-2 mx-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE ----------------->
<!--- EXTRA ------------------>
<div class="col-12">
<div>insert info about character</div>
<div>content</div>
<!-- copy and paste more above -->
</div>
<!--- END EXTRA -------------->
</div></div>
<!-- END TAB 1 -------------------->
<!-- TAB 2 ------------------------>
<div id="TOP2" data-toggle="tab" class="tab-pane show"><div class="py-1" style="height:187px; overflow:auto; border:1px solid #000;">
<!-- STATS -------------------->
<div class="col-12 row no-gutters">
<!-- 1 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="col-6 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">kindness</div>
<div class="col-6 pt-1 pr-lg-1"><div class="progress"><div class="progress-bar bg-primary" style="width:10%; background-color:#ddd;">10%</div></div></div>
</div></div>
<!-- 2 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="col-6 pr-1 pl-lg-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">brain cells</div>
<div class="col-6 pt-1"><div class="progress"><div class="progress-bar bg-primary" style="width:0%; background-color:#ddd;">0%</div></div></div>
</div></div>
<!-- 3 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="col-6 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">yandere</div>
<div class="col-6 pt-1 pr-lg-1"><div class="progress"><div class="progress-bar bg-primary" style="width:100%; background-color:#ddd;">100%</div></div></div>
</div></div>
<!-- 4 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="col-6 pr-1 pl-lg-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">cringe</div>
<div class="col-6 pt-1"><div class="progress"><div class="progress-bar bg-primary" style="width:69%; background-color:#ddd;">69%</div></div></div>
</div></div>
<!-- 5 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="col-6 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">rude</div>
<div class="col-6 pt-1 pr-lg-1"><div class="progress"><div class="progress-bar bg-primary" style="width:50%; background-color:#ddd;">50%</div></div></div>
</div></div>
<!-- 6 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="col-6 pr-1 pl-lg-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">fanfics</div>
<div class="col-6 pt-1"><div class="progress"><div class="progress-bar bg-primary" style="width:50%; background-color:#ddd;">50%</div></div></div>
</div></div>
<!-- 7 -->
<div class="col-lg-6"><div class="pr-lg-1 row no-gutters">
<div class="col-6 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">haha</div>
<div class="col-6 pt-1 pr-lg-1"><div class="progress"><div class="progress-bar bg-primary" style="width:50%; background-color:#ddd;">50%</div></div></div>
</div></div>
<!-- 8 -->
<div class="col-lg-6"><div class="pl-lg-1 row no-gutters">
<div class="col-6 pr-1 pl-lg-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">mafia</div>
<div class="col-6 pt-1"><div class="progress"><div class="progress-bar bg-primary" style="width:50%; background-color:#ddd;">50%</div></div></div>
</div></div>
<!-- copy and paste more above here -->
</div>
<!-- END STATS ---------------->
<!-- LINE --------------------->
<div class="my-2 mx-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE ----------------->
<!--- EXTRA ------------------>
<div class="col-12">
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<!-- copy and paste more above -->
</div>
<!--- END EXTRA -------------->
</div></div>
<!-- END TAB 2 -------------------->
<!-- TAB 3 ------------------------>
<div id="TOP3" data-toggle="tab" class="tab-pane show"><div class="py-1" style="height:187px; overflow:auto; border:1px solid #000;">
<div class="col-12 row no-gutters">
<!-- LIKES ----------------->
<div class="col-lg-6"><div class="pr-lg-1">
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-heart"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-heart"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-heart"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-heart"></i></span>
<span class="pl-2">content</span></div>
<!-- copy and paste more above -->
</div></div>
<!-- END LIKES ------------->
<!-- LINE ------------------
- hidden on computer
- delete d-lg-none if you want
- it visible on computer too
---------------------------->
<div class="d-lg-none col-12 my-2 mx-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE -------------->
<!-- DISLIKES -------------->
<div class="col-lg-6"><div class="pl-lg-1">
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-xmark"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-xmark"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-xmark"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-solid fa-xmark"></i></span>
<span class="pl-2">content</span></div>
<!-- copy and paste more above -->
</div></div>
<!-- END DISLIKES ---------->
</div>
</div></div>
<!-- END TAB 3 -------------------->
</div>
<!-- END TAB CONTENT ------------------>
</div></div>
<!-- END TOP TABS ------------------------->
<!-- PICTURE ------------------------------>
<div class="col-6 col-lg-4"><div class="ml-1 p-1" style="border:1px solid #000;">
<div style="border:1px solid #000; height:200px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/63141093_yVwUrpRjy52IcjU.png');
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
</div></div>
<!-- END PICTURE -------------------------->
</div>
<!-- END TOP TABS AND PIC --------------------->
<!-- BOTTOM TABS ------------------------------>
<div class="col-12 my-2"><div class="bg-muted" style="border:1px solid #000; background-color:#bbb;">
<!-- NAV BUTTONS ---------------------->
<ul class="p-2 nav justify-content-center">
<li class="nav-item mx-1 px-1" style="border:1px solid #000;"><a data-toggle="tab" href="#BOTTOM1" class="text-dark" style="color:#000">1</a></li>
<li class="nav-item mx-1 px-1" style="border:1px solid #000;"><a data-toggle="tab" href="#BOTTOM2" class="text-dark" style="color:#000">2</a></li>
<li class="nav-item mx-1 px-1" style="border:1px solid #000;"><a data-toggle="tab" href="#BOTTOM3" class="text-dark" style="color:#000">3</a></li>
</ul>
<!-- END NAV BUTTONS ------------------>
<!-- TAB CONTENT ---------------------->
<div class="tab-content">
<!-- TAB 1 ------------------------>
<div id="BOTTOM1" data-toggle="tab" class="tab-pane show active"><div class="py-1" style="height:200px; overflow:auto;"><div class="col-12 row no-gutters">
<!-- PICTURE ------------------>
<div class="col-12 col-lg-4 pb-2"><div class="ml-1 mr-lg-3 p-1" style="border:1px solid #000;">
<div style="border:1px solid #000; height:100px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/63141093_yVwUrpRjy52IcjU.png');
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
</div></div>
<!-- END PICTURE -------------->
<!-- INFO --------------------->
<div class="col-12 col-lg-8 pb-2 row no-gutters">
<!-- 1 -->
<div class="col-12 row no-gutters">
<div class="text-primary col-4 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">eyes</div>
<div class="col-8">content</div>
</div>
<!-- 2 -->
<div class="col-12 row no-gutters">
<div class="text-primary col-4 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">hair</div>
<div class="col-8">content</div>
</div>
<!-- 3 -->
<div class="col-12 row no-gutters">
<div class="text-primary col-4 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">body</div>
<div class="col-8">content</div>
</div>
<!-- 4 -->
<div class="col-12 row no-gutters">
<div class="text-primary col-4 pr-1" style="color:#444; font-variant:small-caps; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">clothes</div>
<div class="col-8">content</div>
</div>
<!-- copy and paste more above here -->
</div>
<!-- END INFO ----------------->
<!-- LINE --------------------->
<div class="col-12 my-2 px-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE ----------------->
<!--- EXTRA ------------------>
<div class="col-12">
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<div><span class="text-primary" style="color:#444;"><i class="fa-regular fa-square-small"></i></span>
<span class="pl-2">content</span></div>
<!-- copy and paste more above -->
</div>
<!--- END EXTRA -------------->
</div></div></div>
<!-- END TAB 1 -------------------->
<!-- TAB 2 ------------------------>
<div id="BOTTOM2" data-toggle="tab" class="tab-pane show"><div class="py-1 px-2" style="height:200px; overflow:auto;">
<!-- SECTION 1 ---------------->
<div class="col-12 row no-gutters">
<div class="text-primary col-12" style="color:#444; font-variant:small-caps;">header</div>
<div class="col-12 px-2">insert info about backstory</div>
</div>
<!-- END SECTION 1 ------------>
<!-- LINE --------------------->
<div class="col-12 my-2 px-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE ----------------->
<!-- SECTION 2 ---------------->
<div class="col-12 row no-gutters">
<div class="text-primary col-12" style="color:#444; font-variant:small-caps;">header</div>
<div class="col-12 px-2">insert anything you want</div>
<div class="col-12 px-2">another paragraph</div>
</div>
<!-- END SECTION 1 ------------>
</div></div>
<!-- END TAB 2 -------------------->
<!-- TAB 3 ------------------------>
<div id="BOTTOM3" data-toggle="tab" class="tab-pane show"><div class="col-12 py-1 row no-gutters" style="height:200px; overflow:auto;">
<!-- REL 1 -------------------->
<div class="col-12 py-2 row no-gutters">
<!-- PICTURE -------------->
<div class="col-6 col-lg-4"><div class="ml-1 p-1" style="border:1px solid #000;">
<div style="border:1px solid #000; min-height:100px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/63141093_yVwUrpRjy52IcjU.png');
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
</div></div>
<!-- END PICTURE ---------->
<!-- INFO ----------------->
<div class="col-6 col-lg-8"><div class="pl-3">
<!-- HEADER ----------->
<div class="col-12 row no-gutters">
<a href="LINK" class="text-primary col-12 col-lg-6" style="color:#444; font-variant:small-caps;">name</a>
<!-- like stats ----
- only shows on computer
- delete d-none d-lg-block
- to show on all devices
-
- solid = filled heart
- regular = empty heart
------------------->
<span class="text-primary d-none d-lg-block col-lg-6 text-right" style="color:#444; font-variant:small-caps;">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</span>
</div>
<!-- END HEADER ------->
<!-- CONTENT ---------->
<div class="col-12 pl-2">this won't scroll. insert info about realtionship</div>
<!-- END CONTENT ------>
</div></div>
<!-- END INFO ------------->
</div>
<!-- REL 1 -------------------->
<!-- LINE --------------------->
<div class="col-12 my-2 px-2" style="border-bottom:1px solid #444;"></div>
<!-- END LINE ----------------->
<!-- REL 2 -------------------->
<div class="col-12 py-2 row no-gutters">
<!-- PICTURE -------------->
<div class="col-6 col-lg-4"><div class="ml-1 p-1" style="border:1px solid #000;">
<div style="border:1px solid #000; min-height:100px; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/63141093_yVwUrpRjy52IcjU.png');
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
</div></div>
<!-- END PICTURE ---------->
<!-- INFO ----------------->
<div class="col-6 col-lg-8"><div class="pl-3">
<!-- HEADER ----------->
<div class="col-12 row no-gutters">
<a href="LINK" class="text-primary col-12 col-lg-6" style="color:#444; font-variant:small-caps;">name</a>
<!-- like stats ----
- only shows on computer
- delete d-none d-lg-block
- to show on all devices
-
- solid = filled heart
- regular = empty heart
------------------->
<span class="text-primary d-none d-lg-block col-lg-6 text-right" style="font-variant:small-caps; color:#444;">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</span>
</div>
<!-- END HEADER ------->
<!-- CONTENT ---------->
<div class="col-12 pl-2">this won't scroll. insert info about realtionship</div>
<!-- END CONTENT ------>
</div></div>
<!-- END INFO ------------->
</div>
<!-- REL 2 -------------------->
<!-- copy and paste more above -->
</div></div>
<!-- END TAB 3 -------------------->
</div>
<!-- END TAB CONTENT ------------------>
</div></div>
<!-- END BOTTOM TABS -------------------------->
<!-- MUSIC BOX -------------------------------->
<div class="col-12 my-2"><div class="bg-muted px-2 py-1 row no-gutters" style="border:1px solid #000; background-color:#bbb;">
<!-- SONG TITLE --------------------------->
<a href="https://www.youtube.com/embed/dQw4w9WgXcQ" class="text-primary col-12 justify-content-center" style="font-variant:small-caps; color:#444;">
song name
</a>
<!-- END SONG TITLE ---------------------->
<!-- MUSIC PLAYER -------------------------
- to put different song replace the random
- stuff with your videos stuff
-
- example:
- https://youtu.be/yYGW68ssN-4
-
- replace "dQw4w9WgXcQ"
- with "yYGW68ssN-4"
- in the src section
-
- DON'T TOUCH FRAMEBORDER, CLASS OR STYLE
- UNLESS YOU KNOW WHAT YOURE DOING
------------------------------------------->
<div class="col-12 justify-content-center">
<span class="pr-2"><i class="fa-solid fa-angles-left"></i></span>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0"
frameborder="0"
style="position:absolute; opacity:0; height:20px; width:20px; z-index:420;">
</iframe>
<span><i class="fa-regular fa-circle-play"></i></span>
<span class="pl-2"><i class="fa-solid fa-angles-right"></i></span>
</div>
<!-- END MUSIC PLAYER --------------------->
<!-- MUSIC SLIDE -------------------------->
<div class="col-12 px-1 row no-gutters justify-content-center text-center">
<div class="col-1" style="font-variant:small-caps;">1:05</div>
<!-- bar -->
<div class="col-10 pt-2 px-1">
<div class="progress" style="height:6px;"><div class="progress-bar bg-primary" style="width:50%; background-color:#ddd;"></div></div>
</div>
<div class="col-1" style="font-variant:small-caps;">4:43</div>
</div>
<!-- END MUSIC SLIDE ---------------------->
</div></div>
<!-- END MUSIC BOX ---------------------------->
</div></div>