Moodboard

<!--
    TOU:
    -Don't remove credit/links at the bottom (explanation below)
    -If you make small edits keep the credit (image arrangement, size)
    -Free to use as reference, credit in this case isn't required but appreciated!
    -Use on Toyhou.se only, do not redistribute.

    CODE INFO BELOW
    Go to https://toyhou.se/6614375.useful-websites for more resources and https://toyhou.se/2621177.color-references-bs-pkmn- for colors (for changing the faded/dark backgrounds).
    The images are <div>'s, but you can change them into <img src="url">.
    In this template they automatically resize/adjust to 250x250, but if you change to <img>, it won't happen.
    For changing the focus of the image, put the side you want (top, bottom, center, left, right, or pixels in the format 'Xpx Ypx').

    Remember, TH requires links to the source of the pictures used, which is why I put links on the bottom. A good website to use for pictures is Unsplash!

    -SparklyLightus
-->

<div class="card p-2 border-default mx-auto" style="width: 830px;"> <!-- CARD BEGIN -->
    <div class="card-header border-0 text-uppercase text-muted text-center mx-auto"><u><h2>[character]'S MOODBOARD</h2></u></div>
    <!-- bg image/color: optional - remove this line to make it visible
    image: <div style="background-image: url(link); background-size: cover; background-position: center;">
    color: <div style="background: #ffffff;">
    -->
        <!-- ROW 1 -->
        <div class="row no-gutters mx-auto">
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
        </div> <!-- ROW END -->
        <!-- ROW 2 -->
        <div class="row no-gutters mx-auto">
            <div class="p-2">
                <div class="card bg-faded rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-faded rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-faded rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
        </div> <!-- ROW END -->
        <!-- ROW 3 -->
        <div class="row no-gutters mx-auto">
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
            <div class="p-2">
                <div class="card bg-dark rounded-1 p-1" style="height: 250px; width: 250px;">
                    <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position: center; height: 250px; width: 250px;" class="rounded img-thumbnail"></div>
                </div>
            </div>
        </div> <!-- ROW END -->
        <!-- put any extra rows here -->
    <!-- </div> delete this one if you don't have a bg, keep it if you have (take the <!-- out) -->
</div> <!-- CARD END -->
<div class="text-muted font-italic"> <!-- CREDIT, DON'T MOVE -->
    <p class="text-center">src:
        <a href="link">1</a><a href="link">2</a><a href="link">3</a> |
        <a href="link">4</a><a href="link">5</a><a href="link">6</a> |
        <a href="link">7</a><a href="link">8</a><a href="link">9</a>
    </p>
    <p class="text-right text-monospace"><small><a href="/SparklyLightus">Credit</a></small></p>
</div>