<!--

!!! DO NOT USE WYSIWYG WITH THIS CODE !!!

topbar bg: 151320

blue button: 00B3FE

pink button: FE00FE

background/text dark: 353536

background/text light: e9e9f2

text font: simsun

topbar font: monospace

-->

<div class="container px-0 pt-4" style="font-family:simsun; background:url(https://wallpapercave.com/wp/wp10548234.jpg); border:4px outset">

    <div class="row mx-0 px-4 my-3">

        <!-- basic info -->

        <div class="col-md-4 ml-md-n3 mt-md-n3 p-0" style="background:#353536; color: #e9e9f2;border:2px solid #151320">

            <!-- topbar -->

            <div class="p-2 w-100 text-monospace text-white" style="background: #151320;">

                <!-- right buttons -->

                <div class="float-right flex-row">

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-minimize"></i> </div>

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-restore"></i> </div>

                    <div class="px-1 mr-1" style="background: #FE00FE"> <i class="fa-fw fa-solid fa-window-close"></i> </div>

                </div>

                <p class="m-0">Basic Information</p>

            </div>

            <div class="p-2">

                <div class="card my-2 p-2 rounded-0 bg-dark" style="letter-spacing:1px; border:1px inset">

                    <p>NAME: content</p>

                </div>

                <div class="card my-2 p-2 rounded-0 bg-dark" style="letter-spacing:1px; border:1px inset">

                    <p>PRONOUNS: content</p>

                </div>

                <div class="card my-2 p-2 rounded-0 bg-dark" style="letter-spacing:1px; border:1px inset">

                    <p>ORIENTATION: content</p>

                </div>

                <div class="card my-2 p-2 rounded-0 bg-dark" style="letter-spacing:1px; border:1px inset">

                    <p>AGE: content</p>

                </div>

                <div class="card my-2 p-2 rounded-0 bg-dark" style="letter-spacing:1px; border:1px inset">

                    <p>SPECIES: content</p>

                </div>

            </div>

        </div>

        <!-- divider -->

        <div class="col-auto"></div>

        <!-- history -->

        <div class="col-md mr-md-n3 mb-md-n4 p-0" style="background:#e9e9f2; color:#353536; border:2px solid #151320">

            <!-- topbar -->

            <div class="p-2 w-100 text-monospace text-white" style="background: #151320;">

                <!-- right buttons -->

                <div class="float-right flex-row">

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-minimize"></i> </div>

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-restore"></i> </div>

                    <div class="px-1 mr-1" style="background: #FE00FE"> <i class="fa-fw fa-solid fa-window-close"></i> </div>

                </div>

                <p class="m-0">History</p>

            </div>

                <div class="p-2" style="height:300px; overflow-y:auto;">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

                    </p>

                    <hr style="border-top:1px solid #353536; width:100%;">

                </div>

            </div>

        <!-- divider -->

        <div class="col-auto"></div>

        <!-- image -->

        <div class="col-md-2 p-5" style="background:url(IMAGE_URL_HERE) center no-repeat; background-size:contain;"></div>

    </div>

    <div class="row mx-0 px-4 my-4">

        <!-- chat -->

        <div class="col-md-4 ml-md-4 mt-n5 mr-md-n3 mb-md-n3 p-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/82267560_WgWKATBVGBmQtmW.png) center repeat; background-size:cover; color: #e9e9f2;border:2px solid #151320">

            <!-- topbar -->

            <div class="p-2 w-100 text-monospace text-white" style="background: #151320;">

                <!-- right buttons -->

                <div class="float-right flex-row">

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-minimize"></i> </div>

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-restore"></i> </div>

                    <div class="px-1 mr-1" style="background: #FE00FE"> <i class="fa-fw fa-solid fa-window-close"></i> </div>

                </div>

                <p class="m-0">Chat</p>

            </div>

            <div class="p-2" style="height:300px; overflow-y:auto;">

                <!-- msg 1 -->

                <div class="row mx-0">

                    <div class="col-md-2 p-0 align-items-center justify-content-center">

                        <a href="https://toyhou.se/21884096.heath/"><img src="IMAGE_URL_HERE"></a>

                    </div>

                    <div class="col-md">

                        <div class="card my-2 p-2 bg-dark">

                            some text here - make it a commentary from another character, maybe?

                        </div>

                    </div>

                </div>

                <!-- msg 2 -->

                <div class="row mx-0">

                    <div class="col-md-2 p-0 align-items-center justify-content-center">

                        <a href="https://toyhou.se/22078482.jan-aksamit"><img src="IMAGE_URL_HERE"></a>

                    </div>

                    <div class="col-md">

                        <div class="card my-2 p-2 bg-dark">

                            text here

                        </div>

                    </div>

                </div>

            </div>

            </div>

        <!-- divider -->

        <div class="col-auto"></div>

        <!-- webcam -->

        <div class="col-md mt-n2 p-0" style="background:#353536; color: #e9e9f2;border:2px solid #151320">

            <!-- topbar -->

            <div class="p-2 w-100 text-monospace text-white" style="background: #151320;">

                <!-- right buttons -->

                <div class="float-right flex-row">

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-minimize"></i> </div>

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-restore"></i> </div>

                    <div class="px-1 mr-1" style="background: #FE00FE"> <i class="fa-fw fa-solid fa-window-close"></i> </div>

                </div>

                <p class="m-0">Webcam</p>

            </div>

            <div style="height:300px; background:url(IMAGE_URL_HERE) center no-repeat; background-size:cover;"></div>

        </div>

        <!-- divider -->

        <div class="col-auto"></div>

        <!-- playlist -->

        <div class="col-md p-0 mb-n5 mt-n3 mr-n3" style="z-index:100; background:#353536; color: #e9e9f2;border:2px solid #151320">

            <!-- topbar -->

            <div class="p-2 w-100 text-monospace text-white" style="background: #151320;">

                <!-- right buttons -->

                <div class="float-right flex-row">

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-minimize"></i> </div>

                    <div class="px-1 mr-1" style="background: #00B3FE"> <i class="fa-fw fa-solid fa-window-restore"></i> </div>

                    <div class="px-1 mr-1" style="background: #FE00FE"> <i class="fa-fw fa-solid fa-window-close"></i> </div>

                </div>

                <p class="m-0">Playlist</p>

            </div>

            <div class="p-2" style="height:355px; overflow-y:auto;">

<!-- song 1 -->

<div class="row my-2 mx-0">

<div class="col-md-2 justify-content-center align-items-start" style="position:relative">

    <div class="btn btn-outline-secondary border-0 align-items-center justify-content-center">

        <div class="p-1" style="overflow:hidden; position:relative">

        <!--

           replace 1OkQFbajU0M with the youtube video ID, found after watch?v=

        -->

        <iframe class="m-0" style="position:absolute; height:135px; width:155px; left:-10px; top:-55px; z-index:1000; opacity:0.00001" frameborder="0" allowfullscreen

            src="https://www.youtube.com/embed/1OkQFbajU0M"></iframe>

            <!--==== FONTAWESOME ICON ====-->

            <i class="fa-thin fa-play" style="font-size:1.5rem; color:#e9e9f2"></i>

        </div>

    </div>

    </div>

<div class="col-md-10 my-auto"> song name -- artist</div>

</div>

<hr>

<!-- song 2 -->

<div class="row my-2 mx-0">

<div class="col-md-2 justify-content-center align-items-start" style="position:relative">

    <div class="btn btn-outline-secondary border-0 align-items-center justify-content-center">

        <div class="p-1" style="overflow:hidden; position:relative">

        <!--

           replace 1OkQFbajU0M with the youtube video ID, found after watch?v=

        -->

        <iframe class="m-0" style="position:absolute; height:135px; width:155px; left:-10px; top:-55px; z-index:1000; opacity:0.00001" frameborder="0" allowfullscreen

            src="https://www.youtube.com/embed/1OkQFbajU0M"></iframe>

            <!--==== FONTAWESOME ICON ====-->

            <i class="fa-thin fa-play" style="font-size:1.5rem; color:#e9e9f2"></i>

        </div>

    </div>

    </div>

<div class="col-md-10 my-auto"> song name -- artist</div>

</div>

<hr>

<!-- song 3 -->

<div class="row my-2 mx-0">

<div class="col-md-2 justify-content-center align-items-start" style="position:relative">

    <div class="btn btn-outline-secondary border-0 align-items-center justify-content-center">

        <div class="p-1" style="overflow:hidden; position:relative">

        <!--

           replace 1OkQFbajU0M with the youtube video ID, found after watch?v=

        -->

        <iframe class="m-0" style="position:absolute; height:135px; width:155px; left:-10px; top:-55px; z-index:1000; opacity:0.00001" frameborder="0" allowfullscreen

            src="https://www.youtube.com/embed/1OkQFbajU0M"></iframe>

            <!--==== FONTAWESOME ICON ====-->

            <i class="fa-thin fa-play" style="font-size:1.5rem; color:#e9e9f2"></i>

        </div>

    </div>

    </div>

<div class="col-md-10 my-auto"> song name -- artist</div>

</div>

<hr>

<!-- song 4 -->

<div class="row my-2 mx-0">

<div class="col-md-2 justify-content-center align-items-start" style="position:relative">

    <div class="btn btn-outline-secondary border-0 align-items-center justify-content-center">

        <div class="p-1" style="overflow:hidden; position:relative">

        <!--

           replace 1OkQFbajU0M with the youtube video ID, found after watch?v=

        -->

        <iframe class="m-0" style="position:absolute; height:135px; width:155px; left:-10px; top:-55px; z-index:1000; opacity:0.00001" frameborder="0" allowfullscreen

            src="https://www.youtube.com/embed/1OkQFbajU0M"></iframe>

            <!--==== FONTAWESOME ICON ====-->

            <i class="fa-thin fa-play" style="font-size:1.5rem; color:#e9e9f2"></i>

        </div>

    </div>

    </div>

<div class="col-md-10 my-auto"> song name -- artist</div>

</div>

<hr>

<!-- song 5 -->

<div class="row my-2 mx-0">

<div class="col-md-2 justify-content-center align-items-start" style="position:relative">

    <div class="btn btn-outline-secondary border-0 align-items-center justify-content-center">

        <div class="p-1" style="overflow:hidden; position:relative">

        <!--

           replace 1OkQFbajU0M with the youtube video ID, found after watch?v=

        -->

        <iframe class="m-0" style="position:absolute; height:135px; width:155px; left:-10px; top:-55px; z-index:1000; opacity:0.00001" frameborder="0" allowfullscreen

            src="https://www.youtube.com/embed/1OkQFbajU0M"></iframe>

            <!--==== FONTAWESOME ICON ====-->

            <i class="fa-thin fa-play" style="font-size:1.5rem; color:#e9e9f2"></i>

        </div>

    </div>

    </div>

<div class="col-md-10 my-auto"> song name -- artist</div>

</div>

            </div>

        </div>

    </div>

    <div class="row mt-4 mx-0" style="background:#00B3FE; color:#e9e9f2">

        <!-- start -->

        <div class="col-md-1 p-2">

            <div class="p-1 text-center" style="border:1px outset"> START </div>

        </div>

        <!-- credit -->

        <div class="col-md-auto p-2 align-items-center justify-content-center">

            <a href="https://toyhou.se/yaboisonne"><i class="fas fa-code text-success" style="text-shadow:0 0 5px #000000;"></i></a>

        </div>

        <!-- basic info -->

        <div class="col-md-2 p-2">

            <div class="p-1 text-left" style="border:1px inset">

            <i class="fas fa-square fa-fw text-light"></i>

            Basic Info </div>

        </div>

        <!-- history -->

        <div class="col-md-2 p-2">

            <div class="p-1 text-left" style="border:1px inset">

            <i class="fas fa-square fa-fw text-light"></i>

            History </div>

        </div>

        <!-- chat -->

        <div class="col-md-1 p-2">

            <div class="p-1 text-left" style="border:1px inset">

            <i class="fas fa-square fa-fw text-light"></i>

            Chat </div>

        </div>

        <!-- webcam -->

        <div class="col-md-2 p-2">

            <div class="p-1 text-left" style="border:1px inset">

            <i class="fas fa-square fa-fw text-light"></i>

            Webcam </div>

        </div>

        <!-- playlist -->

        <div class="col-md-2 p-2">

            <div class="p-1 text-left" style="border:1px inset">

            <i class="fas fa-square fa-fw text-light"></i>

            Playlist </div>

        </div>

    </div>

</div>