Toyhou.se Character Template 3

<div class="container-fluid" style="text-align: center;">
    <div class="card card-block  rounded" style="background-color:#AAA;border-color:#aaa;color: #fff;text-align:center;margin-bottom:30px;">

        <h2><strong><span style="font-size: 30px;">NAME</span></strong>
            <br><span style="font-size: 14px;">SPECIES | AGE | GENDER</span></h2>
    </div>
    <div class="row">
        <div class="col-sm-3"><a class="btn btn-success w-100" href="" style="background-color: #AAA;border:none;"><strong>Link</strong></a></div>
        <br>
        <br>
        <div class="col-sm-3"><a class="btn btn-success w-100" href="" style="background-color: #AAA;border:none;"><strong>Link</strong></a></div>
        <br>
        <br>
        <div class="col-sm-3"><a class="btn btn-success w-100" href="" style="background-color: #AAA;border:none;"><strong>Link</strong></a></div>
        <br>
        <br>
        <div class="col-sm-3"><a class="btn btn-success w-100" href="" style="background-color: #AAA;border:none;"><strong>Link</strong></a></div>
    </div>

    <p>
        <br>
    </p>
    <div class="row">
        <div class="col-sm-6">
            <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;margin-bottom: 30px;">

                <h2 class="card-inverse card-info card-header" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>Details</strong></h2>
                <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:220px;">

                    <table class="w-100 border-0">
                        <tbody>
                            <tr>
                                <td class="align-top  font-weight-bold" style="width: 25%; text-align: left;"><strong>Height</strong>
                                    <br>
                                </td>
                                <td style="width: 75%;">words</td>
                            </tr>
                            <tr>
                                <td class="align-top  font-weight-bold" style="width: 25%; text-align: left;"><strong>Weight</strong>
                                    <br>
                                </td>
                                <td style="width: 83.6165%;">words</td>
                            </tr>
                            <tr>
                                <td class="align-top  font-weight-bold" style="width: 25%; text-align: left;">Gender</td>
                                <td style="width: 83.6165%;">words</td>
                            </tr>
                            <tr>
                                <td class="align-top  font-weight-bold w-25" style="width: 25%; text-align: left;"><strong>Sexuality</strong>
                                    <br>
                                </td>
                                <td style="width: 83.6165%;">words</td>
                            </tr>
                            <tr>
                                <td class="align-top  font-weight-bold" style="width: 25%; text-align: left;">Birthday</td>
                                <td style="width: 83.6165%;">words</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;">

                        <h2 class="card-inverse card-info card-header" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>Likes</strong></h2>
                        <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:158px;">

                            <p>a thing, thing, thing, thing, thing, thing, thing, thing, thing, thing, and a thing</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;">

                        <h2 class="card-inverse card-info card-header" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>Dislikes</strong></h2>
                        <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:158px;">

                            <p>a thing, thing, thing, thing, thing, thing, thing, thing, thing, thing, and a thing</p>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <div class="col-sm-6">
            <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;margin-bottom: 30px;">

                <h2 class="card-inverse card-info card-header" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>About</strong></h2>
                <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:100px;">

                    <p>Just like a basic about. Like a description of the character or their key features. Can be long or short. Just needs to help tell the reader who the character is and how to draw them.</p>
                </div>
            </div>
            <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;margin-bottom: 30px;">

                <h2 class="card-inverse card-info card-header" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>Personality</strong></h2>
                <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:100px;">

                    <p>Just like a basic description of the character&#39;s mental description. Can be long or short. Just needs to help tell the reader who the character is and how they act.</p>
                </div>
            </div>
            <div class="ui-accordion card card-outline-info bg-faded" style="background-color:#aaa; border-color:#aaa;">

                <h2 class="card-inverse card-info card-header rounded" style="background-color: rgb(170, 170, 170); border-color: rgb(170, 170, 170); text-align: left; color: rgb(255, 255, 255);"><strong>Backstory</strong></h2>
                <div class="ui-accordion-content card-block bg-faded rounded" style="background-color:#fff;border-color:#aaa;color: rgb(0, 0, 0);text-align:center; height:100px;">

                    <p>You can put your character&#39;s backstory here. It can be long or short, it&#39;s all up to you! You could also use this box for anything really.</p>
                </div>
            </div>
        </div>
    </div>

    <p style="text-align: right;"><a href="https://toyhou.se/2022007.character-template-3-wip" id="">HTML Profile</a> by @Coywolfy</p>
</div>