layout: wikimania

<div class="container">
    <div class="row">
        <!-- info column -->
        <div class="col-sm-3" style="display: flex; padding: 5px;">
            <div class="card card-block" style="border-width: 2px;">
                <!-- info column header- character profile picture and name/alias -->
                <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="rounded-circle" style="width: 150px; height: auto; margin: auto;">
                <div style="line-height: 0px; padding: 10px;">
                    <h1 class="text-primary" style="text-align: center;">Character Name</h1>
                    <h6 style="text-align: center; line-height: 0px;">character alias/AKA</h6>
                </div>

                <!-- colour pallet- edit the background-color attribute to change the colours -->
                <div style="margin: auto; padding: 5px;">
                    <div style="background-color: #ea9248; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
                    <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
                    <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
                    <div style="background-color: #9e54cd; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
                    <div style="background-color: #853ff9; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
                </div>

                <!-- basic info section -->
                <ul class="list-group list-group-flush" style="margin: 0 10px 0 10px; padding-bottom: 30px;">
                    <li class="list-group-item" style="border-top: 0; padding: 5px;"><p><span class="text-primary">Gender: </span>gender</p></li>
                    <li class="list-group-item" style="padding: 5px;"><p><span class="text-primary">Age: </span>age</p></li>
                    <li class="list-group-item" style="padding: 5px;"><p><span class="text-primary">DOB: </span>dd/mm/yyyy</p></li>
                    <li class="list-group-item" style="padding: 5px;"><p><span class="text-primary">Story: </span>story</p></li>
                    <li class="list-group-item" style="padding: 5px;"><p><span class="text-primary">Job/Role/Title: </span>job/role/title</p></li>
                    <li class="list-group-item" style="padding: 5px;"><p><span class="text-primary">Home: </span>home</p></li>
                </ul>
                <p style="text-align: center;">code by [<a href="https://toyhou.se/snail-legs"><b>snail-legs</b></a>]</p>
            </div>
        </div>

        <!-- bio content column -->
        <div class="col-sm-9" style="display: flex; padding: 5px;">
            <div class="card card-block" style="border-width: 2px; max-height: 550px; overflow-y: scroll;">
                <ul class="list-group list-group-flush">

                    <!-- contents -->
                    <li class="list-group-item" style="display: block;">
                        <div>
                            <h3 style="display: inline-block;">Contents</h3>
                            <a style="display: inline-block;" data-toggle="collapse" href="#contents" role="button" aria-expanded="false" aria-controls="contents">[show]</a>
                        </div>
                        <ol class="collapse" id="contents">
                            <li><a href="#summary">Summary</a></li>
                            <li><a href="#personality">Personality</a></li>
                            <li><a href="#story-role">Role in the Story</a></li>
                            <li><a href="#history">History</a></li>
                            <li><a href="#hobbies-interests">Hobbies and Interests</a></li>
                            <li><a href="#relationships">Relationships</a></li>
                            <li><a href="#trivia">Trivia</a></li>
                        </ol>
                    </li>

                    <!-- summary -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="summary" class="text-primary">Summary</h3>
                        <p>A brief summary of who your character is and what they're about. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </li>

                    <!-- personality -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="personality" class="text-primary">Personality</h3>
                        <p>A more detailed explaination of your character's personality. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </li>

                    <!-- story role -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="story-role" class="text-primary">Role in the Story</h3>
                        <p>An explaination of your character's role in the story/universe they live in.  Could be helpful to change the heading of this section to something more story-specific. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </li>

                    <!-- history -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="history" class="text-primary">History</h3>
                        <p>The backstory of your character- an explaination of what's happened in thier past. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </li>

                    <!-- hobbies -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="hobbies-interests" class="text-primary">Hobbies and Interests</h3>
                        <p>Some info on your character's hobbies and interests. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </li>

                    <!-- relationships -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="relationships" class="text-primary">Relationships</h3>
                        <p>Information about your character's relationships.  You could start with a short blurb like this or jump straight into talking about the relationships themselves.<br><br></p>

                        <div style="display: inline-block; margin: 5px;">
                            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="rounded-circle" style="width: 100px; height: auto; float: left; margin: 15px;">
                            <h6><a href="#">Other Character</a></h6>
                            <p>How your character feels about the other, what the nature of thier relationship is. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>

                        <div style="display: inline-block; margin: 5px;">
                            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="rounded-circle" style="width: 100px; height: auto; float: left; margin: 15px;">
                            <h6><a href="#">Other Character</a></h6>
                            <p>How your character feels about the other, what the nature of thier relationship is. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>

                        <div style="display: inline-block; margin: 5px;">
                            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="rounded-circle" style="width: 100px; height: auto; float: left; margin: 15px;">
                            <h6><a href="#">Other Character</a></h6>
                            <p>How your character feels about the other, what the nature of thier relationship is. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>

                    </li>

                    <!-- trivia -->
                    <li class="list-group-item" style="display: block;">
                        <h3 id="trivia" class="text-primary">Trivia</h3>
                        <p>Any other information you want to share about your character! Likes, dislikes, bad habits, design notes, etc. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>