Tabless & Imageless | TH

<!--
    TABLESS & IMAGELESS
    BY CONNORHEDGEHOG

    title says it all!
    comments are strewn about the place with all of the info and copy&pastes you need
-->

<!-- main box -->
<div class="container" style="max-width:850px;font-size:1.1em;">
    <div class="card p-2 mx-auto bg-faded">
        <!-- 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="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>LABEL</strong>
                        <p>Value</p>
                    </div>
                </div>
            </div>
        -->

        <div class="row no-gutters mx-2">
            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>NAME</strong>
                        <p>Name</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>PRONOUNS</strong>
                        <p>Pro/nouns</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>GENDER</strong>
                        <p>Gender</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>SEXUALITY</strong>
                        <p>Sexuality</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>HEIGHT</strong>
                        <p>Height</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 p-1">
                <div class="card border-0 p-2">
                    <div class="d-flex justify-content-between">
                        <strong>BODY TYPE</strong>
                        <p>Body type</p>
                    </div>
                </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-0 mb-2" style="width:25%">
            <p>Description!</p>
             -->
        <div class="mt-2 mx-2 p-3 card border-0">
            <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-0 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-0 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;">
    <div class="card p-2 mx-auto bg-faded">
        <div class="card border-0 ml-1 mr-1 p-3">
            <!-- 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;">
                <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>

<a href="https://toyhou.se/connorhedgehog">
    <p align="center">
        <i class="fas fa-cow tooltipster" target="_blank" data-toggle="tooltip" title="CODE: CONNORHEDGEHOG" data-placement="bottom"></i>
    </p>
</a>