[SNIP] Musical banner

Custom ColorsHTMLMiscellaneous

Line Count: 108

Difficulty:

Base code
Cityscape version
Nature version
Mechanical version
Monochrome baseball version

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯

Musical banner: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once

Text color: #fff
Main color: #f5335a

Fontawesome icons: https://fontawesome.com/v6/icons

-->

<div class="card bg-faded" style="color: #fff; overflow: hidden;

background: linear-gradient(180deg, #f5335a, #f5335a); border: 0px #000 solid; border-radius: 0px; font-family: ">
<!--/////
Background gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Border: style variation possible: solid, dotted, dashed, double, groove, ridge, inset, outset
Font: check this page: https://toyhou.se/23372355.
/////-->

    <div class="align-items-start">
        <p class="text-center text-truncate p-3" style="max-width: 90%; font-weight: bold; text-shadow: 1px 0 0 #f5335a, 1px 1px 0 #f5335a, -1px 0 0 #f5335a, 1px -1px 0 #f5335a, -1px 1px 0 #f5335a, 0 1px 0 #f5335a, 0 -1px 0 #f5335a, -1px -1px 0 #f5335a; z-index: 5">
            
            <!--///// TITLE + ARTIST /////-->
            <span style="font-size: 1.2.em" data-toggle="tooltip"
            
            title="Song title - artist"><!-- Tooltip in case the title is too long and gets truncated -->
            Song title<br><em>artist</em>
            
            </span><br>
            <!--///// TITLE + ARTIST end /////-->
            
            <!--///// TIME /////-->
            00:25 ━━━━●───── 01:00<br>
            <!--///// TIME end /////-->
            
            <!--///// Decorative player /////-->
            <i class="far fa-sharp fa-shuffle fa-fw mr-3"></i>
            <i class="far fa-sharp fa-backward-step fa-fw mr-3"></i>
            <span class="fa-stack fa-2x" style="font-size: 1.3em">
                <i class="fa-solid fa-circle fa-stack-2x"></i>
                <i class="fa-solid fa-sharp fa-play fa-fade fa-stack-1x" style="margin-top: 1px; margin-left: 2px; color: #f5335a; text-shadow: 0 0 0 #fff">
                    
                    <!--///// YOUTUBE VIDEO ID /////-->
                    <iframe class="flex-fill" style="position: absolute; width: 50px; height: 50px; left: -4px; bottom: -5px; opacity: 0.01; z-index: 10" frameborder="0"
                    
                    src="https://www.youtube.com/embed/VIDEOID"><!--///// VIDEO ID, COPY THE SERIES OF NUMBERS AND LETTERS AFTER "watch?v=" IN THE YOUTUBE LINK /////-->
                    
                    </iframe>
                    <!--///// YOUTUBE VIDEO ID end /////-->
                    
                </i>
            </span>
            <i class="far fa-sharp fa-forward-step fa-fw ml-3"></i>
            <i class="far fa-sharp fa-repeat fa-fw ml-3"></i>
            <!--///// Decorative player end /////-->
        </p>
    </div>
    
    <!--///// DECORATIVE ICONS /////-->
    <!--Background waves-->
    <p style="position: absolute; top: -10px; left: -25px; font-size: 7em; opacity: 0.5">
        <i class="fas fa-sharp fa-waveform-lines fa-fw fa-flip-horizontal"></i>
        <i class="fas fa-sharp fa-waveform-lines fa-fw ml-n3"></i>
        <i class="fas fa-sharp fa-waveform-lines fa-fw ml-n3 fa-flip-horizontal"></i>
    </p>
    
    <!--Spinning disc-->
    <i class="fas fa-compact-disc fa-spin fa-fw" style="position: absolute; top: 20px; right: -65px; font-size: 11em"></i>
    
    <!--Bouncing notes-->
    <div class="hidden-md-down">
    <p class="fa-fade" style="position: absolute; bottom: -5px; right: 140px; font-size: 1em; transform: rotate(20deg)">
        <i class="fas fa-music-note fa-bounce fa-fw"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 30px; right: 160px; animation-delay: 0.3s; font-size: 1.7em; transform: rotate(-15deg)">
        <i class="fas fa-music fa-bounce fa-fw" style="animation-delay: 0.3s"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 80px; right: 250px; animation-delay: 0.5s; font-size: 1.3em; transform: rotate(15deg)">
        <i class="fas fa-music fa-bounce fa-fw" style="animation-delay: 0.5s"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 50px; right: 330px; animation-delay: 0.7s; font-size: 1em; transform: rotate(-20deg)">
        <i class="fas fa-music-note fa-bounce fa-fw" style="animation-delay: 0.7s"></i>
    </p>
    </div>
    <!--///// DECORATIVE ICONS end /////-->
    
</div>
<p class="mb-3" style="font-size: 12px"><em>[click the play button]</em></p>
<!--//////////////////////////////////////// END CODE ////////////////////////////////////////-->

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯

Musical banner [Cityscape version]: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once

Text color: #fff
Main color: #a70a30
Secondary color: #150285
Border color: #4c00cb

Fontawesome icons: https://fontawesome.com/v6/icons

-->

<div class="card bg-faded" style="color: #fff; overflow: hidden;

background: linear-gradient(180deg, #150285, #a70a30); border: 3px #4c00cb solid; border-radius: 0px; font-family: papyrus">
<!--/////
Background gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Border: style variation possible: solid, dotted, dashed, double, groove, ridge, inset, outset
Font: check this page: https://toyhou.se/23372355
/////-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background-image: url(https://www.transparenttextures.com/patterns/stardust.png); z-index: 0"></div>

    <div class="align-items-start">
        <p class="text-center text-truncate p-3" style="max-width: 90%; font-weight: bold; text-shadow: 1px 0 0 #a70a30, 1px 1px 0 #a70a30, -1px 0 0 #a70a30, 1px -1px 0 #a70a30, -1px 1px 0 #a70a30, 0 1px 0 #a70a30, 0 -1px 0 #a70a30, -1px -1px 0 #a70a30; z-index: 5">
            
            <!--///// TITLE + ARTIST /////-->
            <span style="font-size: 1.2.em" data-toggle="tooltip"
            
            title="Song title - artist"><!-- Tooltip in case the title is too long and gets truncated -->
            Song title<br><em>artist</em>
            
            </span><br>
            <!--///// TITLE + ARTIST end /////-->
            
            <!--///// TIME /////-->
            00:25 ━━━━●───── 01:00<br>
            <!--///// TIME end /////-->
            
            <!--///// Decorative player /////-->
            <i class="far fa-sharp fa-shuffle fa-fw mr-3"></i>
            <i class="far fa-sharp fa-backward-step fa-fw mr-3"></i>
            <span class="fa-stack fa-2x" style="font-size: 1.3em">
                <i class="fa-solid fa-circle fa-stack-2x"></i>
                <i class="fa-solid fa-sharp fa-play fa-fade fa-stack-1x" style="margin-top: 1px; margin-left: 2px; color: #a70a30; text-shadow: 0 0 0 #fff">
                    
                    <!--///// YOUTUBE VIDEO ID /////-->
                    <iframe class="flex-fill" style="position: absolute; width: 50px; height: 50px; left: -4px; bottom: -5px; opacity: 0.01; z-index: 10" frameborder="0"
                    
                    src="https://www.youtube.com/embed/VIDEOID"><!--///// VIDEO ID, COPY THE SERIES OF NUMBERS AND LETTERS AFTER "watch?v=" IN THE YOUTUBE LINK /////-->
                    
                    </iframe>
                    <!--///// YOUTUBE VIDEO ID end /////-->
                    
                </i>
            </span>
            <i class="far fa-sharp fa-forward-step fa-fw ml-3"></i>
            <i class="far fa-sharp fa-repeat fa-fw ml-3"></i>
            <!--///// Decorative player end /////-->
        </p>
    </div>
    
    <!--///// DECORATIVE ICONS /////-->
    <!--Background waves-->
    <p style="position: absolute; top: 35px; left: -25px; font-size: 7em; opacity: 0.5">
        <i class="fas fa-sharp fa-building fa-fw mr-n2" style="position: relative; top: 25px"></i>
        <i class="fas fa-sharp fa-buildings fa-fw ml-n5 mr-n2 fa-flip-horizontal" style="position: relative; top: -15px"></i>
        <i class="fas fa-sharp fa-building-flag fa-fw ml-n4"></i>
    </p>
    
    <!--Spinning disc-->
    <i class="fas fa-compact-disc fa-spin fa-fw" style="position: absolute; top: 20px; right: -65px; font-size: 11em"></i>
    
    <!--Bouncing notes-->
    <div class="hidden-md-down">
    <p class="fa-fade" style="position: absolute; bottom: -5px; right: 140px; font-size: 1em; transform: rotate(20deg)">
        <i class="fas fa-sparkles fa-bounce fa-fw"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 30px; right: 160px; animation-delay: 0.3s; font-size: 1.7em; transform: rotate(-15deg)">
        <i class="fas fa-star fa-bounce fa-fw" style="animation-delay: 0.3s"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 80px; right: 250px; animation-delay: 0.5s; font-size: 1.3em; transform: rotate(15deg)">
        <i class="fas fa-sparkle fa-bounce fa-fw" style="animation-delay: 0.5s"></i>
    </p>
    <p class="fa-bounce" style="position: absolute; top: 50px; right: 330px; animation-delay: 0.7s; font-size: 1em">
        <i class="fas fa-stars fa-fade fa-fw" style="animation-delay: 0.7s; transform: rotate(180deg)"></i>
    </p>
    </div>
    <!--///// DECORATIVE ICONS end /////-->
    
</div>
<p class="mb-3" style="font-size: 12px"><em>[click the play button]</em></p>
<!--//////////////////////////////////////// END CODE ////////////////////////////////////////-->

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯

Musical banner [Nature version]: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once

Text color: #ffe75c
Main color: #147e5e
Secondary color: #8b9111

Fontawesome icons: https://fontawesome.com/v6/icons

-->

<div class="card bg-faded" style="color: #ffe75c; overflow: hidden;

background: linear-gradient(180deg, #147e5e, #8b9111); border: 3px #ffe75c dashed; border-radius: 10px; font-family: Pristina">
<!--/////
Background gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Border: style variation possible: solid, dotted, dashed, double, groove, ridge, inset, outset
Font: check this page: https://toyhou.se/23372355.
Fonts will change the position of background elements
/////-->

    <div class="align-items-start">
        <p class="text-center text-truncate p-3" style="max-width: 90%; font-weight: bold; text-shadow: 1px 0 0 #147e5e, 1px 1px 0 #147e5e, -1px 0 0 #147e5e, 1px -1px 0 #147e5e, -1px 1px 0 #147e5e, 0 1px 0 #147e5e, 0 -1px 0 #147e5e, -1px -1px 0 #147e5e; z-index: 5">
            
            <!--///// TITLE + ARTIST /////-->
            <span style="font-size: 1.2.em" data-toggle="tooltip"
            
            title="Song title - artist"><!-- Tooltip in case the title is too long and gets truncated -->
            Song title<br><em>artist</em>
            
            </span><br>
            <!--///// TITLE + ARTIST end /////-->
            
            <!--///// TIME /////-->
            00:25 ━━━━●───── 01:00<br>
            <!--///// TIME end /////-->
            
            <!--///// Decorative player /////-->
            <i class="far fa-sharp fa-shuffle fa-fw mr-3"></i>
            <i class="far fa-sharp fa-backward-step fa-fw mr-3"></i>
            <span class="fa-stack fa-2x" style="font-size: 1.3em">
                <i class="fa-solid fa-circle fa-stack-2x"></i>
                <i class="fa-solid fa-sharp fa-play fa-fade fa-stack-1x" style="margin-top: 1px; margin-left: 2px; color: #147e5e; text-shadow: 0 0 0 #ffe75c">
                    
                    <!--///// YOUTUBE VIDEO ID /////-->
                    <iframe class="flex-fill" style="position: absolute; width: 50px; height: 50px; left: -4px; bottom: -5px; opacity: 0.01; z-index: 10" frameborder="0"
                    
                    src="https://www.youtube.com/embed/VIDEOID"><!--///// VIDEO ID, COPY THE SERIES OF NUMBERS AND LETTERS AFTER "watch?v=" IN THE YOUTUBE LINK /////-->
                    
                    </iframe>
                    <!--///// YOUTUBE VIDEO ID end /////-->
                    
                </i>
            </span>
            <i class="far fa-sharp fa-forward-step fa-fw ml-3"></i>
            <i class="far fa-sharp fa-repeat fa-fw ml-3"></i>
            <!--///// Decorative player end /////-->
        </p>
    </div>
    
    <!--///// DECORATIVE ICONS /////-->
    <!--Background waves-->
    <p style="position: absolute; top: 27px; left: -25px; font-size: 7em; opacity: 0.5">
        <i class="fas fa-trees fa-fw fa-flip-horizontal"></i>
        <i class="fas fa-trees fa-fw ml-n5"></i>
        <i class="fas fa-tree fa-fw ml-n3 fa-flip-horizontal"></i>
        <i class="fas fa-crow fa-fw" style="position: absolute; top: 0px; left: 70px; font-size: 25px"></i>
        <i class="fas fa-crow fa-fw fa-flip-horizontal" style="position: absolute; bottom: 44px; left: 64%; font-size: 15px"></i>
    </p>
    
    <!--Spinning disc-->
    <i class="fas fa-sun fa-spin fa-fw" style="animation-duration: 5s; position: absolute; top: 20px; right: -65px; font-size: 11em"></i>
    
    <!--Bouncing notes-->
    <div class="hidden-md-down">
    <p style="position: absolute; bottom: -5px; right: 140px; font-size: 1em; transform: rotate(20deg)">
        <i class="fas fa-feather fa-bounce fa-fw" style="animation-duration: 4s"></i>
    </p>
    <p style="position: absolute; top: 30px; right: 160px; font-size: 1.7em; transform: rotate(-15deg)">
        <i class="fas fa-dove fa-bounce fa-fw" style="animation-delay: 0.3s; animation-duration: 4s"></i>
    </p>
    <p style="position: absolute; top: 80px; right: 250px; font-size: 1.3em; transform: rotate(-80deg)">
        <i class="fas fa-feather fa-bounce fa-fw" style="animation-delay: 0.5s; animation-duration: 4s"></i>
    </p>
    <p style="position: absolute; top: 50px; right: 330px; font-size: 1em; transform: rotate(-20deg)">
        <i class="fas fa-feather fa-bounce fa-fw" style="animation-delay: 0.7s; animation-duration: 4s"></i>
    </p>
    </div>
    <!--///// DECORATIVE ICONS end /////-->
    
</div>
<p class="mb-3" style="font-size: 12px"><em>[click the play button]</em></p>
<!--//////////////////////////////////////// END CODE ////////////////////////////////////////-->

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯

Musical banner [Mechanical version]: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once

Text color: #fef949
Main color: #0a0000
Secondary color: #3a160d

Fontawesome icons: https://fontawesome.com/v6/icons

-->

<div class="card bg-faded" style="color: #fef949; overflow: hidden;

background: linear-gradient(to right, #3a160d, #0a0000); border: 5px #fef949 double; border-radius: 0px; font-family: ms gothic">
<!--/////
Background gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Border: style variation possible: solid, dotted, dashed, double, groove, ridge, inset, outset
Font: check this page: https://toyhou.se/7828652.
/////-->

    <div class="align-items-start">
        <p class="text-center text-truncate p-3" style="max-width: 90%; font-weight: bold; text-shadow: 1px 0 0 #0a0000, 1px 1px 0 #0a0000, -1px 0 0 #0a0000, 1px -1px 0 #0a0000, -1px 1px 0 #0a0000, 0 1px 0 #0a0000, 0 -1px 0 #0a0000, -1px -1px 0 #0a0000; z-index: 5">
            
            <!--///// TITLE + ARTIST /////-->
            <span style="font-size: 1.2.em" data-toggle="tooltip"
            
            title="Song title - artist"><!-- Tooltip in case the title is too long and gets truncated -->
            Song title<br><em>artist</em>
            
            </span><br>
            <!--///// TITLE + ARTIST end /////-->
            
            <!--///// TIME /////-->
            00:25 ━━━━●───── 01:00<br>
            <!--///// TIME end /////-->
            
            <!--///// Decorative player /////-->
            <i class="far fa-sharp fa-shuffle fa-fw mr-3"></i>
            <i class="far fa-sharp fa-backward-step fa-fw mr-3"></i>
            <span class="fa-stack fa-2x" style="font-size: 1.3em">
                <i class="fa-solid fa-circle fa-stack-2x"></i>
                <i class="fa-solid fa-sharp fa-play fa-fade fa-stack-1x" style="margin-top: 1px; margin-left: 2px; color: #0a0000; text-shadow: 0 0 0 #fef949">
                    
                    <!--///// YOUTUBE VIDEO ID /////-->
                    <iframe class="flex-fill" style="position: absolute; width: 50px; height: 50px; left: -4px; bottom: -5px; opacity: 0.01; z-index: 10" frameborder="0"
                    
                    src="https://www.youtube.com/embed/VIDEOID"><!--///// VIDEO ID, COPY THE SERIES OF NUMBERS AND LETTERS AFTER "watch?v=" IN THE YOUTUBE LINK /////-->
                    
                    </iframe>
                    <!--///// YOUTUBE VIDEO ID end /////-->
                    
                </i>
            </span>
            <i class="far fa-sharp fa-forward-step fa-fw ml-3"></i>
            <i class="far fa-sharp fa-repeat fa-fw ml-3"></i>
            <!--///// Decorative player end /////-->
        </p>
    </div>
    
    <!--///// DECORATIVE ICONS /////-->
    <!--Background waves-->
    <p style="position: absolute; top: -10px; left: -25px; font-size: 7em; opacity: 0.3">
        <i class="fas fa-sharp fa-wave-square fa-fw mr-n1"></i>
        <i class="fas fa-sharp fa-wave-square fa-fw ml-n5 mr-n1"></i>
        <i class="fas fa-sharp fa-wave-square fa-fw ml-n5"></i>
        <i class="fas fa-sharp fa-bug fa-fw ml-n5"></i>
    </p>
    
    <!--Spinning disc-->
    <i class="fas fa-sharp fa-gear fa-spin fa-fw" style="animation-duration: 3s; position: absolute; top: 50px; right: -65px; font-size: 11em"></i>
    <i class="fas fa-sharp fa-gear fa-spin fa-spin-reverse fa-fw" style="animation-duration: 3s; position: absolute; top: -50px; right: -5px; font-size: 8em"></i>
    
    <!--Bouncing notes-->
    <div class="hidden-md-down">
    <p class="fa-fade" style="position: absolute; bottom: -5px; right: 140px; font-size: 1em; transform: rotate(20deg)">
        <i class="fas fa-lambda fa-bounce fa-fw"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 30px; right: 160px; animation-delay: 0.3s; font-size: 1.7em; transform: rotate(-15deg)">
        <i class="fas fa-infinity fa-bounce fa-fw" style="animation-delay: 0.3s"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 80px; right: 250px; animation-delay: 0.5s; font-size: 1.3em; transform: rotate(15deg)">
        <i class="fas fa-function fa-bounce fa-fw" style="animation-delay: 0.5s"></i>
    </p>
    <p class="fa-fade" style="position: absolute; top: 50px; right: 330px; animation-delay: 0.7s; font-size: 1em; transform: rotate(-20deg)">
        <i class="fas fa-pi fa-bounce fa-fw" style="animation-delay: 0.7s"></i>
    </p>
    </div>
    <!--///// DECORATIVE ICONS end /////-->
    
</div>
<p class="mb-3" style="font-size: 12px"><em>[click the play button]</em></p>
<!--//////////////////////////////////////// END CODE ////////////////////////////////////////-->

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯

Musical banner [Monochrome baseball version]: code by FlowerlyRat || Based on the game OFF by Mortis Ghost

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Select, ctrl+F, "+", write what you want it to be, and click "all" to change everything at once

Zone 0 palette:
Text color: #efffce
Main color: #d69e00
Secondary color: #efff39

Zone 1 palette:
Text color: #8ce700
Main color: #7500d7
Secondary color: #d72130

Zone 2 palette:
Text color: #e1a0b6
Main color: #0208d6
Secondary color: #cd00a2

Zone 3 palette:
Text color: #d2f5d7
Main color: #d57505
Secondary color: #4ec432

The Room palette:
Text color: #fff
Main color: #000
Secondary color: #f70000


Fontawesome icons: https://fontawesome.com/v6/icons

When modifying the code, the YouTube embed might get misaligned. I recommend putting its opacity to 0.5 and play around with its position until its properly aligned again.

-->

<div class="card bg-faded" style="color: #efffce; overflow: hidden;

background: linear-gradient(180deg, #d69e00, #d69e00); border: 6px #efff39 double; border-radius: 0px; font-family: ms gothic">
<!--/////
Background gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
Border: style variation possible: solid, dotted, dashed, double, groove, ridge, inset, outset
Font: check this page: https://toyhou.se/23372355.
/////-->

    <div class="align-items-start">
        <p class="text-center text-truncate p-3" style="max-width: 90%; font-weight: bold; text-shadow: 1px 0 0 #d69e00, 1px 1px 0 #d69e00, -1px 0 0 #d69e00, 1px -1px 0 #d69e00, -1px 1px 0 #d69e00, 0 1px 0 #d69e00, 0 -1px 0 #d69e00, -1px -1px 0 #d69e00; z-index: 5">
            
            <!--///// TITLE + ARTIST /////-->
            <span style="font-size: 1.2.em" data-toggle="tooltip"
            
            title="Song title - artist"><!-- Tooltip in case the title is too long and gets truncated -->
            Song title<br><em>artist</em>
            
            </span><br>
            <!--///// TITLE + ARTIST end /////-->
            
            <!--///// TIME /////-->
            00:25 ━━━━●───── 01:00<br>
            <!--///// TIME end /////-->
            
            <!--///// Decorative player /////-->
            <i class="far fa-sharp fa-shuffle fa-fw mr-3"></i>
            <i class="far fa-sharp fa-backward-step fa-fw mr-3"></i>
            <span class="fa-stack fa-2x" style="font-size: 1.3em">
                <i class="fa-solid fa-circle fa-stack-2x"></i>
                <i class="fa-solid fa-sharp fa-play fa-fade fa-stack-1x" style="margin-top: 1px; margin-left: 2px; color: #d69e00; text-shadow: 0 0 0 #efffce">
                    
                    <!--///// YOUTUBE VIDEO ID /////-->
                    <iframe class="flex-fill" style="position: absolute; width: 50px; height: 50px; left: -4px; bottom: -5px; opacity: 0.01; z-index: 10" frameborder="0"
                    
                    src="https://www.youtube.com/embed/VIDEOID"><!--///// VIDEO ID, COPY THE SERIES OF NUMBERS AND LETTERS AFTER "watch?v=" IN THE YOUTUBE LINK /////-->
                    
                    </iframe>
                    <!--///// YOUTUBE VIDEO ID end /////-->
                    
                </i>
            </span>
            <i class="far fa-sharp fa-forward-step fa-fw ml-3"></i>
            <i class="far fa-sharp fa-repeat fa-fw ml-3"></i>
            <!--///// Decorative player end /////-->
        </p>
    </div>
    
    <!--///// DECORATIVE ICONS /////-->
    <!--Background waves-->
    <p style="position: absolute; top: 30px; left: -25px; font-size: 7em; color: #efff39; opacity: 1">
        <i class="far fa-sharp fa-circle fa-fw fa-shake" style="animation-duration: 5s"></i>
        <i class="far fa-sharp fa-circle fa-fw fa-shake" style="animation-duration: 5s; animation-delay: 1.5s; position: absolute; top: -64px; left: 67px"></i>
        <i class="far fa-sharp fa-circle fa-fw fa-shake" style="animation-duration: 5s; animation-delay: 3s; position: absolute; top: 29px; left: 125px"></i>
        <i class="fas fa-baseball-bat-ball fa-fw hidden-md-down" style="position: relative; top: -5px; left: 70px; transform: rotate(-15deg)"></i>
    </p>
    
    <i class="fas fa-cat fa-fw" style="position: absolute; top: 105px; left: -57px; font-size: 7em; color: #efffce; animation-duration: 5s"></i>
    
    <!--Spinning disc-->
    <i class="fas fa-baseball fa-spin fa-fw" style="position: absolute; top: 20px; right: -65px; font-size: 11em"></i>
    
    <!--Bouncing notes-->
    <div class="hidden-md-down">
    <p style="position: absolute; bottom: -5px; right: 140px; font-size: 1.5em">
        <i class="fas fa-fade fa-smoke fa-fw" style="animation-duration: 5s"></i>
    </p>
    <p style="position: absolute; top: 30px; right: 160px; font-size: 2em; transform: rotate(-15deg)">
        <i class="fas fa-gear fa-pulse fa-fw" style="animation-duration: 4.4s"></i>
    </p>
    <p style="position: absolute; top: 80px; right: 220px; font-size: 1.7em; transform: rotate(15deg)">
        <i class="fas fa-bottle-water fa-shake fa-fw" style="animation-duration: 5s"></i>
    </p>
    <p style="position: absolute; top: 50px; right: 290px; font-size: 1.9em; transform: rotate(-20deg)">
        <i class="fas fa-steak fa-bounce fa-fw" style="animation-duration: 5s"></i>
    </p>
    <p style="position: absolute; top: 90px; right: 360px; font-size: 1.5em; transform: rotate(80deg)">
        <i class="fas fa-lollipop fa-shake fa-fw" style="animation-duration: 5s"></i>
    </p>
    </div>
    <!--///// DECORATIVE ICONS end /////-->
    
</div>
<p class="mb-3" style="font-size: 12px"><em>[click the play button]</em></p>
<!--//////////////////////////////////////// END CODE ////////////////////////////////////////-->

Stor8

[SNIP] Musical banner

Password (optional)