[F2U] Pocketbook (Code (Bootstrap))

<!--Pocketbook (Bootstrap)-->
<!--F2U HTML Code by TwoPuffins-->
<!--
    Do not remove credit
    Do not redistribute as is
    Do not sell this code or any code that uses parts of it
    Okay to change and frankenstein with credit
-->

<div class="row no-gutters p-1 rounded bg-light text-secondary mx-auto" style="width:600px; height:450px; font-family:bookman; word-wrap:break-word; border:solid 1px; overflow:hidden; text-align:center">
    <div class="col-6 bg-dark p-2" style="border-radius:6%; border:solid 1px">
        <div class="text-light" style="width:90%; height:12%; border-top:solid 1px; border-bottom:solid 1px; display:inline-block; font-size:30px">
            <span class="text-primary">Name</span>
        </div>
        <!--Image. example of good size for image (will not work with all images): ?width=280&height=370-->
        <div class="mt-1" style="width:100%; height:87%; border-radius:50%; border:solid 2px; background-image:url(IMGURL); background-position:center; background-repeat:no-repeat"></div>
    </div>
    <div class="col-6 bg-dark p-2" style="border-radius:6%; border:solid 1px">
        <div style="width:100%; height:45%; border-bottom:solid 1px">
            <table class="text-light" style="width:100%; height:100%; border:0px">
                <tr style="height:50%">
                    <!--Info boxes, don't put a lot in them. Examples provided-->
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Gender|</p>
                        <p>content</p>
                    </td>
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Species|</p>
                        <p>content</p>
                    </td>
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Age|</p>
                        <p>content</p>
                    </td>
                </tr>
                <tr style="height:50%">
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Info|</p>
                        <p>content</p>
                    </td>
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Info|</p>
                        <p>content</p>
                    </td>
                    <td style="width:33%">
                        <p class="text-primary" style="font-size:16px">|Info|</p>
                        <p>content</p>
                    </td>
                </tr>
            </table>
        </div>
        <!--Description box-->
        <div class="mt-2 text-light" style="width:100%; height:230px; text-align:left; overflow:auto;">
            <p>      <!--Indent-->
                Write something here. This box scrolls.
            </p>
            <p>     
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet volutpat consequat mauris nunc congue nisi. Quam quisque id diam vel quam elementum pulvinar etiam. Est ante in nibh mauris. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Donec enim diam vulputate ut pharetra sit amet aliquam. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper.
            </p>
        </div>
    </div>
</div>
<!--credit, DO NOT REMOVE-->
<div style="width:600px; margin:auto; text-align:right">
    <a target="_blank" href="https://toyhou.se/9830147.-f2u-pocketbook" title="Code by TwoPuffins">+</a>
</div>