Basic Imageless Character Desc | Custom Colors | TH

<!--
    BASIC IMAGELESS CHARACTER DESC
    BY CONNORHEDGEHOG

    title says it all :)

    crtl+f and 'replace all' these to replace colors
    back background color: #e6e9ef
    front background color: #eff1f5
    text color: #4c4f69
-->


<!-- main box -->
<div class="container" style="max-width:850px;font-size:1.1em;color:#4c4f69;">
    <div class="card p-2 mx-auto" style="background-color: #e6e9ef">
        <!-- the basic info boxes
             copy and paste this for more :)
             change col-md-4 to col-md-6 for two next to each other instead of three

        <div class="col-md-4 p-1">
                <div class="bg-faded p-2 justify-content-between">
                    <strong>LABEL</strong>
                    <p>Value</p>
                </div>
            </div>
        -->

        <div class="row no-gutters">
            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>NAME</strong>
                    <p>Name</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color: #eff1f5">
                    <strong>PRONOUNS</strong>
                    <p>Pro/nouns</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>GENDER</strong>
                    <p>Gender</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>SEXUALITY</strong>
                    <p>Sexuality</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>HEIGHT</strong>
                    <p>Height</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>BODY TYPE</strong>
                    <p>Body type</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>SPECIES</strong>
                    <p>Species</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>SOURCE</strong>
                    <p>Source SMP</p>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="p-2 justify-content-between" style="background-color:#eff1f5;">
                    <strong>SUBMISSION</strong>
                    <a href="https://zombo.com">Link</a>
                </div>
            </div>
        </div>

        <!-- all of the other info :)
             copy and paste this for another section


        <h1 style="font-size:1.5em;">Section Title</h1>
            <hr align="left" class="mt-1 mb-2" style="width:25%">
            <p>Description!</p>
             -->
        <div class="ml-1 mr-1 mt-1 p-3" style="background-color:#eff1f5;">
            <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>

            <h1 style="font-size:1.5em;">Appearance</h1>
            <hr align="left" class="mt-1 mb-2" style="width:25%">
            <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>

            <h1 style="font-size:1.5em;">History</h1>
            <hr align="left" class="mt-1 mb-2" style="width:25%">
            <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>
        </div>
    </div>
</div>

<!-- relations box, remove this comment and everything below it if you don't want the relations-->
<div class="container mt-3" style="max-width:850px;font-size:1.1em;color:#4c4f69;">
    <div class="card p-2 mx-auto" style="background-color: #e6e9ef">
        <div class="ml-1 mr-1 p-3" style="background-color:#eff1f5;">
            <!-- they're over here!
                 copy and paste this for more
                 the <hr> is the seperator, get rid of it if you'd like

            <div class="justify-content-between" style="font-size:1.2em;">
                <strong>NAME</strong>
                <p>Relation</p>
            </div>
            <p>Description!</p>

            <hr>
                 -->
            <div class="justify-content-between" style="font-size:1.2em">
                <strong>NAME</strong>
                <p>Relation</p>
            </div>
            <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>

            <div class="justify-content-between" style="font-size:1.2em;background-color:#eff1f5">
                <strong>NAME</strong>
                <p>Relation</p>
            </div>
            <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>
        </div>
    </div>
</div>