F2U TH Code: Stabled Dark

<!--Do Not Remove Credit
Feel free to frankenstein and edit as you please, provide credit
Do Not Redistribute Code as is
Do Not Sell any code that uses my (TwoPuffins) code in any way for currency, virtual or real
Do NOT USE THE IMAGES CREATED BY ME IN THIS CODE OUTSIDE OF THIS CODE
This includes the stall back, front (both colours), chain details, and horse sketch-->

<div style="width: 1000px; height: 733px; margin:auto; padding: 0px; position: relative;">

    <!--stall back-->
    <div style="width:100%; height:100%; background:#6f5448">
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
        <div style="height:10%; border-bottom:solid 1px #45362c"></div>
    </div>

    <!--character image-->
    <img style="position: absolute; left: 0px; top: 0px; width:1000px; height:733px" src="https://media.discordapp.net/attachments/771842678370336799/962907463454183544/filler_horse.png" />

    <!--stall front-->
    <img style="position: absolute; left: 0px; top: 0px;" src="https://64.media.tumblr.com/3fd04f55e63158b572b42c0cfca711b3/2044170b3269c53e-d7/s1280x1920/cf09ee62b6c3eb2f20d9383aaec742b5d6b1c10d.png" />

    <!--Chalkboard, optional, can be removed or commented out, will scroll, DON'T USE TOP DIV-->

    <!--comment start to remove chalkboard pt. 1
    <div style="height: 315px; width: 558px; background-color: #3e4b49; position: absolute; right: 42px; top: 42px;"></div>

    <!--USE THIS ONE-->

    <!--comment start to remove chalkboard pt. 2
    <div style="height: 315px; width: 558px; position: absolute; right: 42px; top: 42px; overflow: auto; text-align: center;">
        <h3 class="mt-2" style="font-family: arial; letter-spacing: 0.5px; color: #ebebeb;">Info (Care, Background, Family/relations, Etc)</h3>
        <p class="mt-2" style="font-family: arial; letter-spacing: 0.5px; color: #ebebeb;">
            What you put here is entirely up to you! <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing tristique risus nec feugiat in fermentum posuere. Turpis egestas integer eget aliquet nibh
            praesent tristique magna. Aliquet risus feugiat in ante. Quis eleifend quam adipiscing vitae proin. Id diam maecenas ultricies mi eget mauris pharetra et. Eu scelerisque felis imperdiet proin. Volutpat commodo sed egestas
            egestas fringilla phasellus faucibus scelerisque. Sociis natoque penatibus et magnis dis parturient. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Aenean sed adipiscing diam donec adipiscing tristique.
            Eu mi bibendum neque egestas congue quisque egestas diam.
        </p>
        <ul class="mt-2" style="font-family: arial; letter-spacing: 0.5px; color: #ebebeb;">
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
    end comment to remove chalkboard-->
    <!--End Chalkboard-->

    <!--nameplate-->
    <div class="card p-1" style="border: 2px solid #bdbdbd; background-color: #262626; color: #bdbdbd; text-align: center; font-family: calibri; font-size: 20px; width: 220px; position: absolute; top: 367px; left: 83px;">
        Name (~20 Characters)
    </div>
    <!--info, this box scrolls. use <br> to break up text so that it doesn't scroll horizontally-->
    <div
        class="card p-1"
        style="border: 2px solid #bdbdbd; background-color: #262626; color: #bdbdbd; text-align: center; font-family: calibri; font-size: 15px; width: 200px; height: 220px; position: absolute; top: 440px; left: 93px; overflow: auto;"
    >
        <p class="text-uppercase mt-1" style="font-size: 17px; padding: 0px; margin: 0px;">Breed/Species</p>
        <p style="padding: 0px; margin: 0px;">Info</p>

        <p class="text-uppercase mt-1" style="font-size: 17px; padding: 0px; margin: 0px;">Age</p>
        <p style="padding: 0px; margin: 0px;">Info</p>

        <p class="text-uppercase mt-1" style="font-size: 17px; padding: 0px; margin: 0px;">Gender</p>
        <p style="padding: 0px; margin: 0px;">Info</p>

        <p class="text-uppercase mt-1" style="font-size: 17px; padding: 0px; margin: 0px;">Class/Occupation</p>
        <p style="padding: 0px; margin: 0px;">Info</p>
    </div>
    <!--chains-->
    <div style="position: absolute; top: 402px; left: 100px;"><img src="https://media.discordapp.net/attachments/771842678370336799/962896978256199720/stabledchain.png" /></div>
    <div style="position: absolute; top: 402px; left: 273px;"><img src="https://media.discordapp.net/attachments/771842678370336799/962896978256199720/stabledchain.png" /></div>
    <!--shelf-->
    <div style="position: absolute; top: 367px; right: 120px; width: 400px; height: 120px; border-bottom: solid 5px #0c292d;">
        <img style="position: absolute; bottom: 0px;" src="https://media.discordapp.net/attachments/771842678370336799/796081751755718726/angelribbon.png" title="Angel Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081749284618270/heart_ribbon.png" title="Heart Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081754444005396/ballofsunshineribbon.png" title="Ball of Sunshine Ribbon" />
        <img style="position: absolute; bottom: 0px; left: 30px; z-index: 5;" src="https://media.discordapp.net/attachments/771842678370336799/796081751755718726/angelribbon.png" title="Angel Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081749284618270/heart_ribbon.png" title="Heart Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081754444005396/ballofsunshineribbon.png" title="Ball of Sunshine Ribbon"/>
        <img style="position: absolute; bottom: 0px; left: 60px;" src="https://media.discordapp.net/attachments/771842678370336799/796081751755718726/angelribbon.png" title="Angel Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081749284618270/heart_ribbon.png" title="Heart Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081754444005396/ballofsunshineribbon.png" title="Ball of Sunshine Ribbon"/>
        <img style="position: absolute; bottom: 0px;" src="https://media.discordapp.net/attachments/771842678370336799/796081751755718726/angelribbon.png" title="Angel Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081749284618270/heart_ribbon.png" title="Heart Ribbon"/>
        <img src="https://media.discordapp.net/attachments/771842678370336799/796081754444005396/ballofsunshineribbon.png" title="Ball of Sunshine Ribbon"/>
        <img style="position: absolute; bottom: 0px; right: 10px;" src="https://media.discordapp.net/attachments/771842678370336799/796081751755718726/angelribbon.png" title="Angel Ribbon"/>
    </div>
    <!--papers-->
    <div class="card p-1" style="background-color: #ebedf0; color: #6a7fa1; text-align: left; font-family: calibri; font-size: 15px; width: 150px; height: 175px; position: absolute; top: 500px; right: 410px; overflow: auto;">
        <p class="h2 text-uppercase" style="text-align: center; color: #262626; font-family: calibri; border-bottom: solid 1px #6a7fa1;">Temper</p>
        <p style="text-align: center; color: #262626;">This box scrolls! Write something, but keep it short for best results.</p>
        <ul style="text-align: left; color: #262626;">
            <li>Personality traits here</li>
            <li>Info</li>
            <li>Info</li>
        </ul>
    </div>
    <div class="card p-1" style="background-color: #ebedf0; color: #6a7fa1; text-align: center; font-family: calibri; font-size: 15px; width: 150px; height: 175px; position: absolute; top: 500px; right: 245px; overflow: auto;">
        <p class="h2 text-uppercase" style="color: #262626; font-family: calibri; border-bottom: solid 1px #6a7fa1;">Likes</p>
        <p style="text-align: center; color: #262626;">This box scrolls! Write something, but keep it short for best results.</p>
        <ul style="text-align: left; color: #262626;">
            <li>Could also be design notes</li>
            <li>Info</li>
            <li>Info</li>
        </ul>
    </div>
    <div class="card p-1" style="background-color: #ebedf0; color: #6a7fa1; text-align: center; font-family: calibri; font-size: 15px; width: 150px; height: 175px; position: absolute; top: 500px; right: 80px; overflow: auto;">
        <p class="h2 text-uppercase" style="color: #262626; font-family: calibri; border-bottom: solid 1px #6a7fa1;">Dislikes</p>
        <p style="text-align: center; color: #262626;">This box scrolls! Write something, but keep it short for best results.</p>
        <ul style="text-align: left; color: #262626;">
            <li>Or character notes</li>
            <li>Info</li>
            <li>Info</li>
        </ul>
    </div>
</div>

<!--Credit, DO NOT REMOVE-->
<div class="mx-auto" style="width:50px;">
    <a class="text-muted" style="font-size: small;" title="Code by TwoPuffins" href="https://toyhou.se/9467934.-f2u-stabled">+</a>
</div>