  <!--


    
    ██████╗░░█████╗░  ███╗░░██╗░█████╗░████████╗  ██╗░░░██╗░██████╗███████╗
    ██╔══██╗██╔══██╗  ████╗░██║██╔══██╗╚══██╔══╝  ██║░░░██║██╔════╝██╔════╝
    ██║░░██║██║░░██║  ██╔██╗██║██║░░██║░░░██║░░░  ██║░░░██║╚█████╗░█████╗░░
    ██║░░██║██║░░██║  ██║╚████║██║░░██║░░░██║░░░  ██║░░░██║░╚═══██╗██╔══╝░░
    ██████╔╝╚█████╔╝  ██║░╚███║╚█████╔╝░░░██║░░░  ╚██████╔╝██████╔╝███████╗
    ╚═════╝░░╚════╝░  ╚═╝░░╚══╝░╚════╝░░░░╚═╝░░░  ░╚═════╝░╚═════╝░╚══════╝

    ░██╗░░░░░░░██╗██╗░░░██╗░██████╗██╗░██╗░░░░░░░██╗██╗░░░██╗░██████╗░
    ░██║░░██╗░░██║╚██╗░██╔╝██╔════╝██║░██║░░██╗░░██║╚██╗░██╔╝██╔════╝░
    ░╚██╗████╗██╔╝░╚████╔╝░╚█████╗░██║░╚██╗████╗██╔╝░╚████╔╝░██║░░██╗░
    ░░████╔═████║░░░╚██╔╝░░░╚═══██╗██║░░████╔═████║░░░╚██╔╝░░██║░░╚██╗
    ░░╚██╔╝░╚██╔╝░░░░██║░░░██████╔╝██║░░╚██╔╝░╚██╔╝░░░░██║░░░╚██████╔╝
    ░░░╚═╝░░░╚═╝░░░░░╚═╝░░░╚═════╝░╚═╝░░░╚═╝░░░╚═╝░░░░░╚═╝░░░░╚═════╝░


    1. Go to https://toyhou.se/~account/display
    2. Click all necessary boxes (recommended: Profile Text)
    3. Click "Update WYSIWYG Settings"
    4. Reload page that you are editing the code in.
    5. Done!


    IF YOU DO NOT DO THIS, THE CODE WILL LOSE ITS INTENDED LAYOUT.
    YOU WILL NEED TO START OVER WITH A FRESH COPY.


    THIS CODE WAS NOT TESTED IN CIRCLEJOURNEY OR PLAYHOUSE.
    THIS CODE MAY NOT WORK AS INTENDED WHEN USED OFFSITE.
    THIS CODE MAY NOT WORK AS INTENDED WITH CUSTOM CSS.


-->
<!-- // Uaaaa (BS)


    -- HANDY WEBSITES
    Mozilla Docs              ::      https://developer.mozilla.org/en-US/docs/Web
    W3 Schools HTML           ::      https://www.w3schools.com/html/default.asp
    Bootstrap Docs            ::      https://getbootstrap.com/docs/5.1/getting-started/introduction/


    -- NEED HELP?
    Toyhou.se Help Thread     ::      https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
    Toyhou.se Code Forum      ::      https://toyhou.se/~forums/16.htmlcss-graphics


    -- QUICK RESOURCES
    Pattern Backgrounds       ::      https://www.transparenttextures.com/
    Color Picker              ::      https://g.co/kgs/r6Ka6uf
    Font Awesome              ::      https://fontawesome.com/


    -- CREDITS
    HTML by acodingperson, Toyhou.se (https://toyhou.se/acodingperson)
    Character and images by DEVSISTERS, Cookie Run Kingdom (https://www.cookierun-kingdom.com/en/)


    -- LEAVE A COMMENT!! :3
    Coding Thread       ::      https://toyhou.se/~forums/16.htmlcss-graphics/245374.the-codes-of-a-person-acp-s-coding-thread
    Terms of Use        ::      https://toyhou.se/~bulletins/491483.global-tos


    THANK YOU FOR USING <3


---------------------------->
<!--------------------------
============================================================


        ACCENT ------------------ secondary


============================================================
--------------------------->
<div class="mx-auto my-lg-5 py-lg-5" style="max-width: 400px;">



    <!-----------------------------
     ============================= 
    
                BANNER
        
     =============================
    ------------------------------>
    <div class="justify-content-end align-items-end font-italic font-weight-bold mb-3 p-3 text-secondary" style="background-size: cover; background-position: center center; background-image: url(

        https://f2.toyhou.se/file/f2-toyhou-se/images/98196682_Iylyjcm5Q5rVmpr.png

    ); font-size: 20px; font-family: century gothic; height: 155px; border-radius: 20px;">

        username

    </div>
    <!-- ============================== -->
    <!-------------- END ----------------->



    <!-----------------------------
     ============================= 
    
              MAIN CONTENT
        
     =============================
    ------------------------------>
    <div class="card px-4 pb-4 pt-lg-0 pt-4" style="border-radius: 20px;"><div class="row no-gutters">


        <!-- PAGEDOLL ---------------->
        <div class="col-lg-auto text-center">
            <div class="mt-lg-n5"><img 
                
                src="https://f2.toyhou.se/file/f2-toyhou-se/images/98168673_OqlapU3zM8ed3oq.png" 
                
            class="mt-lg-n5" style="width: 175px;"></div>
        </div>
        <!-- // END // ----------------------->


        <!-- YOUR STUFF ---------------->
        <div class="col-lg pl-4 pt-3">
            <div class="text-right mb-2 text-secondary" style="font-size: 90%; letter-spacing: 0.7px;">

                age 

                    <i class="fal fa-angle-right faded mx-1 fa-sm fa-fw"></i>

                prn prn

            </div>
            <div class="text-justify" style="height: 45px; overflow-y: auto; scrollbar-width: none; font-size: 80%;">

                <!-- WRITE HERE -->
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis nulla iure id earum ea rem nesciunt rerum laudantium eius libero? Alias dignissimos reiciendis reprehenderit?</p>

            </div>
        </div>
        <!-- // END // ----------------------->


    </div></div>
    <!-- ============================== -->
    <!-------------- END ----------------->



    <!-----------------------------
     ============================= 
    
                PLAYLIST
        
     =============================
    ------------------------------>
    <div class="row no-gutters mt-lg-0 mt-3">


        <!-- LIST ---------------- BEGIN -->
        <div class="col-lg-6 pr-lg-2">
        <div class="mt-lg-n3 ml-lg-n3">
        <ul class="nav flex-column">


            <!-- 1 ------->
            <li class="nav-item card" style="border-radius: 10px; overflow: hidden;">
            <a href="#SONG_ONE" data-toggle="tab" class="nav-link active btn bg-transparent border-0 row no-gutters align-items-center text-left text-reset" style="overflow: hidden;">
                <span class="col-auto pr-3 text-secondary"><i class="fas fa-circle-play" style="font-size: 160%;"></i></span>
                <span class="col-6 text-truncate text-secondary" style="font-size: 80%;">

                    song name

                <br><span class="faded" style="font-size: 75%;">

                    artist

                </span>
                </span>
                <span class="col text-right">

                    <i class="fas fa-heart text-secondary fa-width-auto"></i> <!-- FULL HEART -->

                <i class="fal fa-ellipsis-vertical fa-width-auto ml-1"></i>
                </span>
            </a>
            </li>
            <!------------>


            <!-- 2 ------->
            <li class="nav-item card mt-2" style="border-radius: 10px; overflow: hidden;">
            <a href="#SONG_TWO" data-toggle="tab" class="nav-link btn bg-transparent border-0 row no-gutters align-items-center text-left text-reset" style="overflow: hidden;">
                <span class="col-auto pr-3 text-secondary"><i class="fas fa-circle-play" style="font-size: 160%;"></i></span>
                <span class="col-6 text-truncate text-secondary" style="font-size: 80%;">

                    song name 2

                <br><span class="faded" style="font-size: 75%;">

                    artist

                </span>
                </span>
                <span class="col text-right">

                    <i class="fal fa-heart fa-width-auto text-secondary"></i> <!-- EMPTY HEART -->

                <i class="fal fa-ellipsis-vertical fa-width-auto ml-1"></i>
                </span>
            </a>
            </li>
            <!------------>


            <!-- 3 ------->
            <li class="nav-item card mt-2" style="border-radius: 10px; overflow: hidden;">
            <a href="#SONG_THREE" data-toggle="tab" class="nav-link btn bg-transparent border-0 row no-gutters align-items-center text-left text-reset" style="overflow: hidden;">
                <span class="col-auto pr-3 text-secondary"><i class="fas fa-circle-play" style="font-size: 160%;"></i></span>
                <span class="col-6 text-truncate text-secondary" style="font-size: 80%;">

                    song name 3

                <br><span class="faded" style="font-size: 75%;">

                    artist

                </span>
                </span>
                <span class="col text-right">

                    <i class="fal fa-heart fa-width-auto text-secondary"></i> <!-- EMPTY HEART -->

                <i class="fal fa-ellipsis-vertical fa-width-auto ml-1"></i>
                </span>
            </a>
            </li>
            <!------------>


        </ul>
        </div>
        </div>
        <!------------------------ END ---->


        <!-- CONTENT ------------- BEGIN -->
        <div class="col-lg-6 pt-lg-3 pt-2 pl-lg-2">
        <div class="tab-content">


            <!-- == SONG 1 ========== -->
            <div id="SONG_ONE" class="tab-pane active show">
            <div class="d-flex flex-column h-100">
            <div class="card flex-fill d-flex p-4 text-center" style="border-radius: 20px; overflow: hidden;">

                    <!-- LINK TO SONG HERE -->
                    <!-- replace [ UB5TYqQLa-Q?si=ynujJDG_cLAlBNYf ] with the ID of your song ( seen after https://www.youtube.com/watch?v= )-->
                    <iframe 
                                                
                        src="https://www.youtube.com/embed/UB5TYqQLa-Q?si=ynujJDG_cLAlBNYf?controls=0"
                    
                    class="w-100" frameborder="0" style="position: absolute; top: -175px; bottom: 0; left: 0; height: 500px; opacity: 0.0001; z-index: 10;"></iframe>

                <div class="mb-1 font-weight-bold text-secondary" style="font-size: 90%;">

                    so I can drown in you.

                </div>
                <div class="mb-3 font-italic faded" style="font-size: 75%;">

                    Yuh Baek

                </div>
                <span class="row no-gutters align-items-center" style="font-size: 80%;">
                    <span class="col-auto faded">
                        
                        0:00
                    
                    </span>
                    <span class="col px-3">
                        <span class="card border-0 progress bg-faded" style="overflow: hidden; height: 5px; border-radius: 7px;">
                        <span class="progress-bar bg-secondary" style="
                        
                            width: 50%; /* -- CHANGE NUMBER -- */;
                        
                        "></span>
                        </span>
                    </span>
                    <span class="col-auto faded">
                        
                        3:00
                    
                    </span>
                </span>
            </div>
            </div>
            </div>
            <!-- === END === -->


            <!-- == SONG 2 ========== -->
            <div id="SONG_TWO" class="tab-pane">
            <div class="d-flex flex-column h-100">
            <div class="card flex-fill d-flex p-4 text-center" style="border-radius: 20px; overflow: hidden;">

                    <!-- LINK TO SONG HERE -->
                    <!-- replace [ EMBED_HERE ] with the ID of your song ( seen after https://www.youtube.com/watch?v= )-->
                    <iframe 
                                                
                        src="https://www.youtube.com/embed/EMBED_HERE?controls=0"
                    
                    class="w-100" frameborder="0" style="position: absolute; top: -175px; bottom: 0; left: 0; height: 500px; opacity: 0.0001; z-index: 10;"></iframe>

                <div class="mb-1 font-weight-bold text-secondary" style="font-size: 90%;">

                    song name 2

                </div>
                <div class="mb-3 font-italic faded" style="font-size: 75%;">

                    artist

                </div>
                <span class="row no-gutters align-items-center" style="font-size: 80%;">
                    <span class="col-auto faded">
                        
                        0:00
                    
                    </span>
                    <span class="col px-3">
                        <span class="card border-0 progress bg-faded" style="overflow: hidden; height: 5px; border-radius: 7px;">
                        <span class="progress-bar bg-secondary" style="
                        
                            width: 50%; /* -- CHANGE NUMBER -- */;
                        
                        "></span>
                        </span>
                    </span>
                    <span class="col-auto faded">
                        
                        3:00
                    
                    </span>
                </span>
            </div>
            </div>
            </div>
            <!-- === END === -->


            <!-- == SONG 3 ========== -->
            <div id="SONG_THREE" class="tab-pane">
            <div class="d-flex flex-column h-100">
            <div class="card flex-fill d-flex p-4 text-center" style="border-radius: 20px; overflow: hidden;">

                    <!-- LINK TO SONG HERE -->
                    <!-- replace [ EMBED_HERE ] with the ID of your song ( seen after https://www.youtube.com/watch?v= )-->
                    <iframe 
                                                
                        src="https://www.youtube.com/embed/EMBED_HERE?controls=0"
                    
                    class="w-100" frameborder="0" style="position: absolute; top: -175px; bottom: 0; left: 0; height: 500px; opacity: 0.0001; z-index: 10;"></iframe>

                <div class="mb-1 font-weight-bold text-secondary" style="font-size: 90%;">

                    song name 3

                </div>
                <div class="mb-3 font-italic faded" style="font-size: 75%;">

                    artist

                </div>
                <span class="row no-gutters align-items-center" style="font-size: 80%;">
                    <span class="col-auto faded">
                        
                        0:00
                    
                    </span>
                    <span class="col px-3">
                        <span class="card border-0 progress bg-faded" style="overflow: hidden; height: 5px; border-radius: 7px;">
                        <span class="progress-bar bg-secondary" style="
                        
                            width: 50%; /* -- CHANGE NUMBER -- */;
                        
                        "></span>
                        </span>
                    </span>
                    <span class="col-auto faded">
                        
                        3:00
                    
                    </span>
                </span>
            </div>
            </div>
            </div>
            <!-- === END === -->


        </div>
        </div>
        <!------------------------ END ---->


    </div>
    <!-- ============================== -->
    <!-------------- END ----------------->



    <!-----------------------------
     ============================= 
    
        CHARACTERS/FRIENDS LIST
        
     =============================
    ------------------------------>
    <div class="ml-lg-n3 mt-lg-0 mt-3"><div class="mx-n3"><div class="w-100 row no-gutters">


        <!-- 1 =========== -->
        <div class="col-lg-4 px-3 pb-3 pt-lg-3 pt-2"><a 
            
            href="LINK_HERE"
            
        class="card p-2" style="border-radius: 20px; overflow: hidden;"><span style="height: 100px; border-radius: 20px; background-size: cover; background-position: center center; background-image: url(

            https://f2.toyhou.se/file/f2-toyhou-se/images/98168747_oXuR20ZEZgvTJxQ.png

        );"></span></a></div>
        <!-- == END == ------>


        <!-- 2 =========== -->
        <div class="col-lg-4 px-3 pb-3 pt-lg-3"><a 
            
            href="LINK_HERE"
            
        class="card p-2" style="border-radius: 20px; overflow: hidden;"><span style="height: 100px; border-radius: 20px; background-size: cover; background-position: center center; background-image: url(

            https://f2.toyhou.se/file/f2-toyhou-se/images/98168747_oXuR20ZEZgvTJxQ.png

        );"></span></a></div>
        <!-- == END == ------>


        <!-- 3 =========== -->
        <div class="col-lg-4 px-3 pb-3 pt-lg-3"><a 
            
            href="LINK_HERE"
            
        class="card p-2" style="border-radius: 20px; overflow: hidden;"><span style="height: 100px; border-radius: 20px; background-size: cover; background-position: center center; background-image: url(

            https://f2.toyhou.se/file/f2-toyhou-se/images/98168747_oXuR20ZEZgvTJxQ.png

        );"></span></a></div>
        <!-- == END == ------>


    </div></div></div>
    <!-- ============================== -->
    <!-------------- END ----------------->



    <!-----------------------------
     ============================= 
    
                LINKS
        
     =============================
    ------------------------------>
    <div class="ml-lg-n3 mt-n2"><div class="row no-gutters mx-n2">


        <!-- 1 ------------------> <!-- COMMISSIONS -->
        <div class="col-lg-4 p-2">
        <a 

            href="LINK_HERE"
        
        class="text-center card p-2 font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

            commissions

        </a>
        </div>
        <!-- << END // ---------->


        <!-- 2 ------------------> <!-- REQUESTS -->
        <div class="col-lg-4 p-2">
        <a 

            href="LINK_HERE"
        
        class="text-center card p-2 font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

            requests

        </a>
        </div>
        <!-- << END // ---------->


        <!-- 3 ------------------> <!-- TRADES -->
        <div class="col-lg-4 p-2">
        <a 

            href="LINK_HERE"
        
        class="text-center card p-2 font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

            trades

        </a>
        </div>
        <!-- << END // ---------->


            <!-- 4 ------------------> <!-- DISCORD SERVER -->
            <div class="col-12 p-2">
            <div class="row no-gutters">
            <div class="col-4 pr-2">
            <div class="h-100 justify-content-center align-items-center p-4 bg-secondary text-white" style="border-radius: 10px;">

                <i class="
                
                    fab fa-discord 
                    
                fa-lg"></i> <!-- ICON -->

            </div>
            </div>
            <div class="col-8 pl-2">
            <a 

                href="LINK_HERE"
            
            class="text-center card p-2 h-100 align-items-center justify-content-center font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

                My Discord Server

            </a>
            </div>
            </div>
            </div>
            <!-- << END // ---------->


            <!-- 5 ------------------> <!-- TWITTER -->
            <div class="col-12 p-2">
            <div class="row no-gutters">
            <div class="col-4 pr-2">
            <div class="h-100 justify-content-center align-items-center p-4 bg-secondary text-white" style="border-radius: 10px;">

                <i class="
                
                    fab fa-twitter 
                    
                fa-lg"></i> <!-- ICON -->

            </div>
            </div>
            <div class="col-8 pl-2">
            <a 

                href="LINK_HERE"
            
            class="text-center card p-2 h-100 align-items-center justify-content-center font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

                Twitter

            </a>
            </div>
            </div>
            </div>
            <!-- << END // ---------->


            <!-- 5 ------------------> <!-- EXTRA -->
            <div class="col-12 p-2">
            <div class="row no-gutters">
            <div class="col-4 pr-2">
            <div class="h-100 justify-content-center align-items-center p-4 bg-secondary text-white" style="border-radius: 10px;">

                <i class="
                
                    fas fa-sparkles
                    
                fa-lg"></i> <!-- ICON -->

            </div>
            </div>
            <div class="col-8 pl-2">
            <a 

                href="LINK_HERE"
            
            class="text-center card p-2 h-100 align-items-center justify-content-center font-weight-bold font-italic text-secondary" style="border-radius: 10px; text-decoration: none; font-size: 85%;">

                Extra

            </a>
            </div>
            </div>
            </div>
            <!-- << END // ---------->


    <!-- ADD MORE ABOVE THIS LINE -->
    </div></div>
    <!-- ============================== -->
    <!-------------- END ----------------->



<!-- CREDIT --> <div class="mt-5 mb-lg-0 mb-5 text-center"><a href="https://toyhou.se/acodingperson" class="text-muted" style="text-decoration: none; font-size: 70%;">CODE BY ACP</a></div>
</div>