SILLY DECOR
created by:clowniicat
Custom ColorsBootstrapHTMLCharacter
Copy
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Code is fully bootstrap so no palette to change colours
==========================================-->
<div class="mx-auto" style="max-width:650px">
<div class="row no-gutters m-n1">
<!--=======ICON & QUOTE=======-->
<div class="col-sm-6 p-1 order-1">
<!--=======ICON=======-->
<div class="card bg-faded mb-2" style="height:250px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
"></div>
<!--=======QUOTE=======-->
<div class="card bg-faded p-2">
<p class="text-center">
<sup class="fas fa-quote-left"></sup>
<span class="text-muted">
Insert super cool quote here
</span>
<sub class="fas fa-quote-right"></sub>
</p>
</div>
</div>
<!--=======MOODBOARD=======-->
<div class="col-sm-6 p-1 d-flex order-sm-2 order-3">
<!--=======IMAGES=======-->
<div class="card px-2 pt-2 bg-faded flex-fill" style="min-height:300px">
<div class="row no-gutters m-n1 m d-flex h-100">
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
" class="card flex-fill d-flex">
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======SIDE IMAGES=======-->
<div class="col-sm-4 p-1 mb-n2 order-sm-3 order-sm-4 order-5">
<!--=======ONE=======-->
<div class="row no-gutters mx-sm-0 mx-n1">
<div class="card bg-faded mb-2 col-sm-12 col mx-sm-0 mx-1" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
"></div>
<!--=======TWO=======-->
<div class="card bg-faded mb-2 col-sm-12 col mx-sm-0 mx-1" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
"></div>
<!--=======THREE=======-->
<div class="card bg-faded mb-2 col-sm-12 col mx-sm-0 mx-1" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======RIBBONS & BLINKES=======-->
<div class="col-sm-4 d-flex flex-column p-1 mb-n2 order-sm-4 order-2">
<!--=======RIBBONS=======-->
<div class="card d-flex bg-faded mb-2 text-muted text-center p-1">
RIBBONS
</div>
<!--=======RIBBON CONTAINER=======-->
<div class="card flex-fill d-flex bg-faded mb-2 p-2" style="max-height:120px">
<div class="row no-gutters justify-content-center" style="overflow-y:auto;overflow-x:hidden">
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======BLINKIES=======-->
<div class="card d-flex bg-faded mb-2 text-muted text-center p-1">
BLINKIES
</div>
<!--=======BLINKIES CONTAINER=======-->
<div class="card flex-fill d-flex bg-faded mb-2 p-2" style="max-height:110px">
<div class="row no-gutters w-100 my-n1" style="overflow-y:auto;overflow-x:hidden">
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======PLAYLIST=======-->
<div class="col-sm-4 flex-column d-flex p-1 mb-n2 orders-sm-5 order-4">
<div class="card d-flex bg-faded mb-2 text-muted text-center p-1">
PLAYLIST
</div>
<!--=======SONGS CONTAINER=======-->
<div class="card flex-fill w-100 d-flex bg-faded mb-2 p-2" style="height:277px;overflow:auto">
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="card p-3 text-center rounded-circle" style="height:3rem;width:3rem;z-index:8">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl text-muted"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 text-muted pl-sm-4">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="card p-3 text-center rounded-circle" style="height:3rem;width:3rem;z-index:8">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl text-muted"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 text-muted pl-sm-4">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="card p-3 text-center rounded-circle" style="height:3rem;width:3rem;z-index:8">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl text-muted"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 text-muted pl-sm-4">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="card p-3 text-center rounded-circle" style="height:3rem;width:3rem;z-index:8">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl text-muted"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 text-muted pl-sm-4">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="card p-3 text-center rounded-circle" style="height:3rem;width:3rem;z-index:8">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl text-muted"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 text-muted pl-sm-4">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======CREDIT, DO NOT REMOVE!!!=======-->
<div class="col-12 text-sm-right text-center order-6">
<a href="https://toyhou.se/clowniicat" class="text-muted">
<i class="fas fa-code"></i>
</a>
</div>
</div>
</div>
<!--================================================================
CODE END!!!
silly bingus!!
================================================================-->
Copy
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT:have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Dark Accents---------#05252f
Main colour----------#193a57
Text-----------------#a8e597
Muted text-----------#ea5350
Borders--------------#a82b95
==========================================-->
<div class="mx-auto" style="max-width:650px">
<div class="row no-gutters m-n1" style="color:#a8e597">
<!--=======ICON & QUOTE=======-->
<div class="col-sm-6 p-1 order-1">
<!--=======ICON=======-->
<div class="mb-2 card" style="height:250px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#193a57;border-color:#a82b95
"></div>
<!--=======QUOTE=======-->
<div class="p-2 card" style="background-color:#193a57;border-color:#a82b95;">
<p class="text-center">
<sup class="fas fa-quote-left"></sup>
<span style="color:#ea5350;">
Insert super cool quote here
</span>
<sub class="fas fa-quote-right"></sub>
</p>
</div>
</div>
<!--=======MOODBOARD=======-->
<div class="col-sm-6 p-1 d-flex order-sm-2 order-3">
<!--=======IMAGES=======-->
<div class="px-2 pt-2 flex-fill card" style="min-height:300px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters m-n1 m d-flex h-100">
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======SIDE IMAGES=======-->
<div class="col-sm-4 p-1 mb-n2 order-sm-3 order-sm-4 order-5">
<!--=======ONE=======-->
<div class="row no-gutters mx-sm-0 mx-n1">
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======TWO=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======THREE=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======RIBBONS & BLINKES=======-->
<div class="col-sm-4 d-flex flex-column p-1 mb-n2 order-sm-4 order-2">
<!--=======RIBBONS=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
RIBBONS
</div>
<!--=======RIBBON CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:120px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters justify-content-center" style="overflow-y:auto;overflow-x:hidden">
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======BLINKIES=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
BLINKIES
</div>
<!--=======BLINKIES CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:110px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters w-100 my-n1" style="overflow-y:auto;overflow-x:hidden">
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======PLAYLIST=======-->
<div class="col-sm-4 flex-column d-flex p-1 mb-n2 orders-sm-5 order-4">
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
PLAYLIST
</div>
<!--=======SONGS CONTAINER=======-->
<div class="flex-fill w-100 d-flex mb-2 p-2 card" style="height:277px;overflow:auto;background-color:#193a57;border-color:#a82b95">
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======CREDIT, DO NOT REMOVE!!!=======-->
<div class="col-12 text-sm-right text-center order-6">
<a href="https://toyhou.se/clowniicat" style="color:#a8e597;">
<i class="fas fa-code"></i>
</a>
</div>
</div>
</div>
<!--================================================================
CODE END!!!
silly bingus!!
================================================================-->
<!--================================================================
================================================================-->
<ul class="nav nav-tabs row no-gutters border-0 mb-1 mt-2">
<li class="col-sm-6 mb-1 p-1"><a class="rounded-0 btn bg-faded btn-block btn-outline-primary active" data-toggle="tab" href="#auto">AUTO SELECT</a></li>
<li class="col-sm-6 mb-1 p-1"><a class="rounded-0 btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#manual">MANUAL SELECT</a></li>
</ul>
<!--=======-->
<div class="px-1">
<div class="p-2 bg-faded">
<div class="tab-content">
<div class="tab-pane fade active show mt-n3" id="auto">
<pre style="user-select:all">
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT:have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Dark Accents---------#05252f
Main colour----------#193a57
Text-----------------#a8e597
Muted text-----------#ea5350
Borders--------------#a82b95
==========================================-->
<div class="mx-auto" style="max-width:650px">
<div class="row no-gutters m-n1" style="color:#a8e597">
<!--=======ICON & QUOTE=======-->
<div class="col-sm-6 p-1 order-1">
<!--=======ICON=======-->
<div class="mb-2 card" style="height:250px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#193a57;border-color:#a82b95
"></div>
<!--=======QUOTE=======-->
<div class="p-2 card" style="background-color:#193a57;border-color:#a82b95;">
<p class="text-center">
<sup class="fas fa-quote-left"></sup>
<span style="color:#ea5350;">
Insert super cool quote here
</span>
<sub class="fas fa-quote-right"></sub>
</p>
</div>
</div>
<!--=======MOODBOARD=======-->
<div class="col-sm-6 p-1 d-flex order-sm-2 order-3">
<!--=======IMAGES=======-->
<div class="px-2 pt-2 flex-fill card" style="min-height:300px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters m-n1 m d-flex h-100">
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======SIDE IMAGES=======-->
<div class="col-sm-4 p-1 mb-n2 order-sm-3 order-sm-4 order-5">
<!--=======ONE=======-->
<div class="row no-gutters mx-sm-0 mx-n1">
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======TWO=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======THREE=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======RIBBONS & BLINKES=======-->
<div class="col-sm-4 d-flex flex-column p-1 mb-n2 order-sm-4 order-2">
<!--=======RIBBONS=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
RIBBONS
</div>
<!--=======RIBBON CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:120px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters justify-content-center" style="overflow-y:auto;overflow-x:hidden">
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======BLINKIES=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
BLINKIES
</div>
<!--=======BLINKIES CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:110px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters w-100 my-n1" style="overflow-y:auto;overflow-x:hidden">
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======PLAYLIST=======-->
<div class="col-sm-4 flex-column d-flex p-1 mb-n2 orders-sm-5 order-4">
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
PLAYLIST
</div>
<!--=======SONGS CONTAINER=======-->
<div class="flex-fill w-100 d-flex mb-2 p-2 card" style="height:277px;overflow:auto;background-color:#193a57;border-color:#a82b95">
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======CREDIT, DO NOT REMOVE!!!=======-->
<div class="col-12 text-sm-right text-center order-6">
<a href="https://toyhou.se/clowniicat" style="color:#a8e597;">
<i class="fas fa-code"></i>
</a>
</div>
</div>
</div>
<!--================================================================
CODE END!!!
silly bingus!!
================================================================-->
</pre>
</div>
<!--=======-->
<div class="tab-pane fade mt-n3" id="manual">
<pre>
<!--==========================================
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT:have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
====================================================
Please read my TOS here, it'd be nice if you leave a comment saying you read it:
[ https://toyhou.se/~bulletins/1459193.tos-rules ]
Support me here:
[ https://ko-fi.com/onionx2 ]
====================================================
If you need a code editor with live preview use this:
[ https://th.circlejourney.net/# ]
If you want to change the icons, find more here:
[ https://fontawesome.com/search ]
====================================================
Palette to change colours!!
select the colour and press Ctrl+F to replace it
(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")
Dark Accents---------#05252f
Main colour----------#193a57
Text-----------------#a8e597
Muted text-----------#ea5350
Borders--------------#a82b95
==========================================-->
<div class="mx-auto" style="max-width:650px">
<div class="row no-gutters m-n1" style="color:#a8e597">
<!--=======ICON & QUOTE=======-->
<div class="col-sm-6 p-1 order-1">
<!--=======ICON=======-->
<div class="mb-2 card" style="height:250px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#193a57;border-color:#a82b95
"></div>
<!--=======QUOTE=======-->
<div class="p-2 card" style="background-color:#193a57;border-color:#a82b95;">
<p class="text-center">
<sup class="fas fa-quote-left"></sup>
<span style="color:#ea5350;">
Insert super cool quote here
</span>
<sub class="fas fa-quote-right"></sub>
</p>
</div>
</div>
<!--=======MOODBOARD=======-->
<div class="col-sm-6 p-1 d-flex order-sm-2 order-3">
<!--=======IMAGES=======-->
<div class="px-2 pt-2 flex-fill card" style="min-height:300px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters m-n1 m d-flex h-100">
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======-->
<div class="col-4 d-flex p-1">
<div style="background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png');
;background-color:#05252f;" class="flex-fill d-flex card">
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======SIDE IMAGES=======-->
<div class="col-sm-4 p-1 mb-n2 order-sm-3 order-sm-4 order-5">
<!--=======ONE=======-->
<div class="row no-gutters mx-sm-0 mx-n1">
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======TWO=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======THREE=======-->
<div class="mb-2 col-sm-12 col mx-sm-0 mx-1 card" style="height:100px;background-size:cover;background-position:center;
/* INSERT IMAGE URL HERE */
;background-image:url('https://placehold.co/500.png')
;background-color:#193a57;border-color:#a82b95;
"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======RIBBONS & BLINKES=======-->
<div class="col-sm-4 d-flex flex-column p-1 mb-n2 order-sm-4 order-2">
<!--=======RIBBONS=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
RIBBONS
</div>
<!--=======RIBBON CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:120px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters justify-content-center" style="overflow-y:auto;overflow-x:hidden">
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======-->
<div class="col text-center text-break" style="min-width:60px">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png" class="d-block mx-auto">
Ribbon title
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======BLINKIES=======-->
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
BLINKIES
</div>
<!--=======BLINKIES CONTAINER=======-->
<div class="flex-fill d-flex mb-2 p-2 card" style="max-height:110px;background-color:#193a57;border-color:#a82b95">
<div class="row no-gutters w-100 my-n1" style="overflow-y:auto;overflow-x:hidden">
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======-->
<div class="col-sm-12 col-6 p-1">
<img src="https://placehold.co/150x20?text=blinkie+here" class="d-block w-100">
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
</div>
<!--=======PLAYLIST=======-->
<div class="col-sm-4 flex-column d-flex p-1 mb-n2 orders-sm-5 order-4">
<div class="d-flex mb-2 text-center p-1 card" style="background-color:#193a57;border-color:#a82b95;color:#ea5350;">
PLAYLIST
</div>
<!--=======SONGS CONTAINER=======-->
<div class="flex-fill w-100 d-flex mb-2 p-2 card" style="height:277px;overflow:auto;background-color:#193a57;border-color:#a82b95">
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
<!--=======DIVIDER=======-->
<hr class="mt-2 mb-0" style="border-color:#a82b95">
</div>
<!--=======-->
<div class="mb-2">
<div class="row no-gutters">
<!--=======SONG LINK=======-->
<div class="col-2">
<div class="p-3 text-center rounded-circle card" style="height:3rem;width:3rem;z-index:8;background-color:#05252f;border-color:#a82b95">
<a href="LINK_TO_SONG" class="mt-n1">
<i class="fas fa-play fa-xl" style="color:#ea5350;"></i>
</a>
</div>
</div>
<!--=======TITLE & ARTIST=======-->
<div class="col-10 pl-sm-4" style="color:#ea5350;">
<p><span class="font-weight-bold">
SONG TITLE
</span><br>
<small>
Artist name
</small>
</p>
</div>
</div>
</div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======CREDIT, DO NOT REMOVE!!!=======-->
<div class="col-12 text-sm-right text-center order-6">
<a href="https://toyhou.se/clowniicat" style="color:#a8e597;">
<i class="fas fa-code"></i>
</a>
</div>
</div>
</div>
<!--================================================================
CODE END!!!
silly bingus!!
================================================================-->
</pre>
</div>
</div>
</div>
</div>