beast character

<!--
custom colors:
misc: #efefef
accent: #636363
bg: #dbdbdb
text i suppose: #4c4c4c
link color: #2f6a8f
control + f to replace :D
-->

<!-- if you want a solid bg replace linear-gradient(320deg, #dbdbdb, #4c4c4c) with just one hex code -->
<div class="col-md-8 col-sm-12 mx-auto p-0" style="background: linear-gradient(320deg, #dbdbdb, #4c4c4c); border: #636363 solid 1px">

    <!-- bg pattern, delete if you dont want one. if you want another one go to transparenttextures.com -->
    <div class="h-100 w-100" style="background-image: url(https://transparenttextures.com/patterns/ps-neutral.png); position: absolute;"></div>

    <div class="row no-gutters p-2">

        <!-- stats -->
        <div class="col-lg-4 col-md-6 col-sm-12 p-0 ml-md-n5 my-1">

            <!-- deco -->
            <hr class="my-0" style="border-color: #636363;">

            <hr class="mt-1 mb-2" style="border-color: #636363; border-width: 3px">

            <!-- pfp -->
            <div class="col-12 p-2 mb-2" style="border: solid 1px #636363; background: #dbdbdb">
                <div style="background-image: url(IMGURLHERE); min-height: 200px; background-size: cover"></div>
            </div>

            <!-- stats -->

            <!-- name -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">NAME</div>
                </div>

                <!-- name here -->
                <div class="col p-0 text-right">
                   NAME HERE
                </div>
            </div>

            <!-- prns -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">PRONOUNS</div>
                </div>

                <!-- pronouns -->
                <div class="col p-0 text-right">
                   prns/prns
                </div>
            </div>

            <!-- gender, i used this 4 the flag https://toyhou.se/21030925.f2u-mini-pride-flags -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">GENDER</div>
                </div>

                <!-- if text wanted remove the style="" and the insides -->
                <div class="col p-0 text-right" style="line-height: 1.387">
                   <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/63559453_7GNMyi0EJPiXzjH.png">
                </div>
            </div>

            <!-- sexuality, i used this https://toyhou.se/21030925.f2u-mini-pride-flags -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">SEXUALITY</div>
                </div>

                <!-- note, if you just want it to be text remove the style="line-height: 1.387" -->
                <div class="col p-0 text-right" style="line-height: 1.387">
                   <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/63559345_Wp8AZWT2fz980ME.png">
                </div>
            </div>

            <!-- personality -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">PERSONALITY</div>
                </div>

                <!-- write stuff here it can be as long as you want -->
                <div class="col p-0 text-right">
                   some words here
                </div>
            </div>

            <!-- dont remove this its my credit -->
            <div class="col-12 p-1 mb-2 justify-content-between" style="border: solid 1px #636363; background: #dbdbdb; color: #4c4c4c">
                <div class="col-auto p-0 font-weight-bold align-items-center mr-1">
                    <div class="badge rounded-0" style="background: #636363; color: #efefef">CODE</div>
                </div>

                <div class="col p-0 text-right">
                   <a href="https://toyhou.se/micro-wave" target=_blank style="color: #1589d2">micro-wave</a>
                </div>
            </div>

            <!-- end stats -->

            <hr class="mt-2 mb-1" style="border-color: #636363; border-width: 3px">

            <hr class="my-0" style="border-color: #636363;">

        </div>

        <!-- aes stuff -->
        <div class="col-lg-auto col-md col-12 mx-lg-2 ml-md-2 d-block d-md-flex flex-column">

            <!-- i recommend unsplash.com for imgs -->
            <div class="col-12 mb-1 py-5 px-md-0 px-xl-5" style="background-image: url(IMGURLHERE);background-size: cover; background-position: center; flex: 1 1 0; border: solid 1px #636363"></div>

            <!-- but pinterest works too -->
            <div class="col-12 mb-1 py-5 px-md-0 px-xl-5" style="background-image: url(IMGURLHERE);background-size: cover; background-position: center; flex: 1 1 0; border: solid 1px #636363"></div>

            <!-- so do what you want -->
            <div class="col-12 py-5 px-md-0 px-xl-5" style="background-image: url(IMGURLHERE);background-size: cover; background-position: center; flex: 1 1 0; border: solid 1px #636363"></div>
        </div>

        <!-- uhh other stuff -->
        <div class="col-lg col-md col-sm-12 d-block d-md-flex flex-column">

            <div class="mb-1 mt-md-1 mt-sm-0 mt-lg-0" id="accordion" style="border: 1px solid #636363;">

            <!-- dont change -->
            <div class="card-block border-0 p-1 font-weight-bold" style="overflow: auto; background: #636363">
                <a class="p-0 pull-left w-100" data-toggle="collapse" data-target="#bstory" aria-expanded="true" aria-controls="bstory" style="cursor: pointer; color: #efefef">
                   <i class="fas fa-book-open-alt"></i> story
                </a>
            </div>

            <!-- BOXES -->

            <div id="bstory" class="collapse show" data-parent="#accordion">
                <div class="col-12 p-1 overflow-auto" style="background: #efefef; color: #4c4c4c; height: 150px">

                    <!-- the box thing -->
                    <div class="row no-gutters">
                        <div class="col-auto mr-2">
                            <div class="p-2" style="border: solid 1px #636363; background: #efefef; color: #636363; position: sticky; top: 0; z-index: 1;"><i class="fas fa-book mx-1"></i></div>
                            <div class="h-100" style="width: 1px; background: #4c4c4c; position: absolute; top: 0; z-index: 0; margin-left: 50%"></div>
                        </div>

                        <!-- the alter lore. can be as long or as short as you want -->
                        <div class="col text-justify">
                            <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>
                            <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>
                            <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>
                            <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>
            </div>

            <!-- box 2 -->
            <div id="triv" class="collapse" data-parent="#accordion">
                <div class="col-12 p-1 overflow-auto" style="background: #efefef; color: #4c4c4c; max-height: 150px;">
                    <div class="row no-gutters flex-row-reverse">

                        <!-- the box thing on the side -->
                        <div class="col-auto ml-2">
                            <div class="p-2" style="border: solid 1px #636363; background: #efefef; color: #636363; position: sticky; top: 0; z-index: 1;"><i class="fas fa-list mx-1"></i></div>
                            <div class="h-100" style="width: 1px; background: #4c4c4c; position: absolute; top: 0; z-index: 0; margin-left: 50%"></div>
                        </div>

                        <!-- list off some trivia -->
                        <div class="col text-justify p-2">
                            <ul class="px-3">
                                <li>list</li>
                                <li>bullet points</li>
                                <li>list</li>
                                <li>liszt</li>
                                <li>franz liszt</li>
                                <li><img src="https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcTh_RQzC2AUxhVLHjsOIckvBqJfNwwDFjgDiLGw_KvKz_37QU4MP0T3GMIjwX8hKFq51iqXBdL1O0vjF9s"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- end -->

            <!-- dont change -->
            <div class="card-block border-0 text-white p-1" style="background: #636363; height: auto; overflow: auto">
                <a class="p-0 pull-right w-100 text-right" data-toggle="collapse" data-target="#triv" aria-expanded="true" aria-controls="triv" style="cursor: pointer; color: #efefef">
                    trivia <i class="fas fa-list"></i>
                </a>
            </div>

            </div>

            <!-- likes nd dislikes -->

            <div class="mb-1">

                <div class="row no-gutters">

                    <!-- likes -->
                    <div class="col-xl col-6 mr-xl-1 mr-sm-0 p-1" style="border: solid 1px #636363; background: #dbdbdb; color: #636363">
                        <div class="row no-gutters">
                            <div class="col-auto p-1"><i class="fas fa-thumbs-up"></i></div>

                            <!-- put the likes here. this scrolls -->
                            <div class="col p-1 overflow-auto" style="white-space: nowrap">thing, thing, another thing</div>
                        </div>
                    </div>

                    <!-- dislikes -->
                    <div class="col-xl col-6 ml-xl-1 ml-sm-0 p-1" style="border: solid 1px #636363; background: #dbdbdb; color: #636363">
                        <div class="row no-gutters">
                            <div class="col-auto p-1"><i class="fas fa-thumbs-down"></i></div>

                            <!-- put dislikes here ykno -->
                            <div class="col p-1 overflow-auto" style="white-space: nowrap">thing, thing, another thing</div>
                        </div>
                    </div>
                </div>

                <!-- remove above this line if no source. appearance box will expand if you do so -->
            </div>

            <!-- appearance -->

                <div class="p-1 font-weight-bold" style="background: #636363; color: #efefef; border: 1px solid #636363"> <i class="fas fa-person"></i> APPEARANCE</div>
                <div class="p-1 overflow-auto" style="background: #efefef; color: #636363; flex: 1 1 100px; min-height: 200px;">

                <!-- write notes here. can be as many or as little as you want -->
                    <div class="w-50 pull-left">
                        <ul class="px-3">
                                <li>uhhh ummmm design notes</li>
                                <li>design notes? not really but idk what else to call them</li>
                                <li>people notes??</li>
                                <li>uhhhh anyways yeah just list some stuff off abt them and their appearance</li>
                                <li>that should work</li>
                                <li>gimme gimme gimme a man after midniight</li>
                            </ul>
                    </div>

                    <!-- alter img -->
                    <div class="w-50 sticky-top pull-right h-100" style="background-image: url(IMGURLHERE); background-size: cover; border: 1px solid #636363;"></div>

                </div>

            <!-- end -->

        </div>


    </div>

</div>