Character Template 5 (plain)

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm-1">
            <br>
        </div>
        <div class="col-sm-10">
            <div class="card card-block ui-accordion card rounded-0" style="text-align: right; padding-bottom: 5px;">
                <div class="row">
                    <div class="col-sm-4" style="padding-right: 5px;">
                        <div class="card card-block rounded-0 bg-faded" style="text-align: center; height: 450px;"><img src="https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png" alt="..." class="fr-fil fr-dib" width="228" height="228">

                            <h2><span style="font-size: 32px;">Name</span></h2>species | age | pronouns</div>
                    </div>
                    <div class="col-sm-8" style="padding-left: 5px;">
                        <div class="card border-0 bg-transparent" style="text-align: center; height: 50px;">

                            <p class="h4 text-right"><em>Any text...</em></p>
                            <hr width="98%">
                        </div>
                        <div class="card border-0 bg-transparent ui-accordion-content" style="text-align: center; height: 190px;">

                            <p>all the info you want about your oc. It can be enormous paragraphs of extreme detail. Or tiny short details. It&rsquo;s really up to your wants or needs!</p>

                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
                        </div>
                        <div class="card border-0 bg-transparent" style="text-align: center; height: 10px;">
                            <br>
                        </div>
                        <div class="row">
                            <div class="col-sm-6" style="padding-right: 5px;">
                                <div class="card rounded-0 border bg-faded" style="text-align: center; height: 200px;">

                                    <p class="h4 text-center" style="padding:9px;">Box one</p>
                                    <div class="card border-0 bg-faded bg-transparent w-100 ui-accordion-content">

                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6" style="padding-left: 5px;">
                                <div class="card rounded-0 border bg-faded" style="text-align: center; height: 200px;">

                                    <p class="h4 text-center" style="padding:9px;">Box two</p>
                                    <div class="card border-0 bg-faded ui-accordion-content">

                                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><small><a href="https://toyhou.se/4379480.character-template-5" id="">HTML code</a> by @coywolfy</small></div>
            <div class="col-sm-1">
                <br>
            </div>
        </div>
    </div>
</div>