Featured Song Player V1

<!-- ---------------------  CODE BY OneAlbatross  ------------------------
---- ---------------------------------------------------------------------

|[All links, socials, etc]:  https://onealbatross.carrd.co/
|[Tip jar]:  https://ko-fi.com/onealbatross

|[How to use Templates - Video Guide by Indianimations]: https://youtu.be/B-X57fmPuPo?t=93

|[ Rules ]
        - Modify the code as much as you like but please do not redistribute or claim it as your own.
        - Please DO NOT remove credit regardless of how you edit/Frankenstein the code.
        - Keep WYSIWYG off while adding or editing code
        - Turn "Enable Code Editor" off if you are on mobile to be able to paste.

|[ Info ]
    Color Key Index - use these to find and replace (ctrl+f -> "All" button -> type your desired #hex color code or rgba() value)
        - Play Button background: #40b850
        - Play button arrow: rgb(250, 250, 250)
        - Background Overlay Gradient
            - Left side of bg gradient: rgba(17,22,41,1)
            - middle of bg gradient: rgba(17,22,41,.4)
            - Right side of bg gradient: rgba(52,32,111,0)
        - artist link and my code credit icon are set to Bootstrap: text-light

|[ Images ]
    To fill in/replace images:
        - your desired image can be anywhere online like a free image website, your Deviantart stash, Discord, or here on Toyhouse
        - right click the image and select "copy image address" (should end in .png, .jpg, .gif, etc - NOT a .webp)
        - paste this web address within areas like url(LINK_HERE) or src="IMG URL HERE"

    - Some info on adjusting images can be seen here: https://toyhou.se/4930674](https://toyhou.se/4930674

|[ Icons ]
    - Icons used are from FontAwesome.com and you can find more info here: https://toyhou.se/3536712

---------------------------------------------------------------------------
----------------------------------------------------------------------- -->



<!-- BACKGROUND IMAGE - make sure not to delete the quotes, put your image link inside them ---------------- -->
<div class="mx-auto" style="max-width:500px; background-image: url('https://images.unsplash.com/photo-1503601350100-26336a6beda2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); background-position:center; background-size:cover; border-radius:4px">

    <div class="mx-auto row" style="width:100%; height:100%; background: linear-gradient(30deg, rgba(17,22,41,1) 25%, rgba(17,22,41,.4) 70%, rgba(52,32,111,0) 100%); border-radius:4px">


    <div class="" style="max-width:130px; padding:15px;">

        <img src="  https://f2.toyhou.se/file/f2-toyhou-se/characters/18738562?1667801640" style="border-radius:0px">

    </div>

    <div class="pl-2 pb-md-0 pr-2 pb-4">

        <p class="mt-2 mt-md-3 mb-1" style="font-weight:400; font-size:1.8rem; z-index:100 !important">Song Title</p>

        <div class="row no-gutters " style="z-index:10">

            <div class="pl-1 pr-1" style="margin-top:-18p; position:relative; ">
<!-- SONG LINK - Click the share button on a youtube video, click the EMBED button and copy the url between the src="" quotes and paste it in the src="" here (do not just copy paste the url - that's a youtu.be link, it doesn't work)-->
<!-- to get the song to stop and/or start at a specific time, add ?start=0&end=30 to the end of the link - 0 and 30 represent the start and stop time in seconds-->

                   <iframe class="" style="width: 40px; height:200px ; opacity:.01; border:none; position:absolute; z-index:10 !important; margin-top:-56px;" src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=43"></iframe>

                   <div class="py-2 px-3" style="height: 40px; width: 40px; background-color: #40b850; border-radius:50%;"><i class="fas fa-play fa-xl " style="color: rgb(250, 250, 250); margin-left:-8px; margin-top:12px"></i>

                   </div>
            </div>

            <div class="col"  style="color:white">

                <p class="" style="font-weight:300; font-size:1rem">by <a class="text-light" href="LINK_TO_ARTIST_HERE" style="">artist</a></p>
                <span style="font-size:85%">
<!-- [[ CODE CREDIT ON THIS LINE - PLEASE DO NOT REMOVE ]] --><a href="https://toyhou.se/OneAlbatross/characters/folder:3801186" class="text-decoration-none text-light" style="font-size:.7rem; " title="Code by OneAlbatross" data-toggle="tooltip" data-placement="bottom" ><i class="fa-solid fa-code"></i></a> <!-- extra info here --> • album • year • length
                </span>
            </div>

        </div>

    </div>

</div>

</div>