Dropshadow Small Mobile

<!--
My first ever real code oh man
I hope you enjoy it, was fun to make!

Please make sure to acknowledge my TOS before using!
https://horriifiied.weebly.com/tos.html

Thank you !


Colours in order of darkest to lightest.
Drop Shadow Box + music - #001219
Colour 2 - #005f73
Colour 3 - #0a9396
Colour 4 - #94d2bd
Colour 5 - #e9d8a6
Colour 6 - #edf6f9


-->
<!-- Big background image -->
<div style="position:absolute;top:0;bottom:0;left:0; background:url(IMG URL HERE) fixed center;background-size:cover;width:100%;z-index:-1;" alt="background image">
</div>
<!-- End big background image, start dropshadow box -->
<div class="container-fluid pt-3 pb-0 px-2" style="max-width:600px; background:#001219">

<!-- Picture and music box start -->
    <div class="row">
            <div class="col-xs-12 col-md-5 order-0" style="background:#e9d8a6;height:330px;">

<!-- Profile picture -->
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/681px-Placeholder_view_vector.svg.png" class="mx-auto d-block img-thumbnail img-responsive  my-3" style="max-height:200px;background:#edf6f9" alt="profile picture">

<!-- Song name and artist name -->
                 <p class="text-center text-uppercase font-weight-bold m-0 p-0" style="font-size:15px;color:#0a9396">Song</p>
                 <p class="text-center text-uppercase p-0 m-0" style="font-size:10px;color:#005f73;">Artist</p>

<!-- The player -->
    <div class="justify-content-center py-3">
    <span class="my-auto">
    <i class="fas fa-play" style="font-size:25px;color:#001219;"></i>
<!-- Basically you see that letter and number jumble after "watch?v=" and "&ab.." on a youtube video, copy it, and then paste that jumble between "embed/" and  "?modestbranding=1" here and bam music -->
    <iframe class="flex-fill" src="https://www.youtube-nocookie.com/embed/URLBITS?modestbranding=1" frameborder="0" style="height: 25px; width: 25px; margin-left:-27px; margin-top: 5px; position: absolute; z-index:1; opacity:0;"></iframe>

</span>
</div>
<!-- Music player and left box end -->
</div>

<!-- Name and information box start -->
        <div class="col-xs-12 col-md-7 order-1" style="background:#0a9396;height:330px;">
                        <h1 class="text-uppercase text-center pt-4 pb-1" style="font-size:20px; letter-spacing:4px;color:#94d2bd">

<!-- Username and 2 animated icons on either side! You can remove them if you like or if there is a different animation you prefer you can change "fa-beat-fade" to any of these! https://fontawesome.com/docs/web/style/animate -->
                            <i class="fas fa-heart fa-beat-fade" style="color:#edf6f9"></i>
                        <span style="color:#e9d8a6">U</span>ser <span style="color:#e9d8a6">N</span>ame <i class="fas fa-heart fa-beat-fade" style="color:#edf6f9"></i></h1>

<!-- Traits, can be anything doesn't need to be age or pronouns -->
                            <p class="text-center" style="color:#edf6f9">Age ▪ Pronouns ▪ Etc </p>
                        <hr class="p-0 m-0">

<!-- Little paragraph, summary or what have you -->
                            <div class="py-2" style="overflow:hidden">
                                <div class="text-justify mx-auto" style="overflow-y:auto; width:310px">
                        <p class="pr-1" style="color:#e9d8a6; height:140px;">This box scrolls! Feel free to write as much as you like! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div></div>
                        <hr class="p-0 m-0">

<!-- Art statuses, text-success is green, text-warning is yellow, and text-danger is red -->
                        <div class="py-2">
                        <div class="justify-content-between pt-2">
                            <span class="font-weight-bold" style="color:#005f73">Commissions</span>
                            <span style="color:#edf6f9" class="font-weight-bold">Open</span>
                        </div>
                        <div class="justify-content-between">
                            <span class="font-weight-bold" style="color:#005f73">Art Trades</span>
                            <span style="color:#001219" class="font-weight-bold">Closed</span>
                        </div>
                        <div class="justify-content-between">
                            <span class="font-weight-bold" style="color:#005f73">Info</span>
                            <a href="LINK" target="_blank" class="font-weight-bold" style="color:#94d2bd;">Link</a>
                        </div></div>

        </div>
<!-- End right box -->


<!-- Credit, do not remove please !! -->
    </div>
    <div class="justify-content-end py-1" style="font-size:10px;"><a href="https://toyhou.se/HORRIIFIIED" target="_blank" style="color:#edf6f9"><i class="fa fa-code pl-1"></i></a></div>
</div>
<!-- End everything ! -->