Cards

<div class="container-fluid" style="color:#333;">
    <div class="row" style="background-color:#eee;padding:10px;">
        <div class="col col-lg-5" style="margin-bottom:10px;">
            <div class="row" style="background-color:white;padding:10px;margin-bottom:10px;">

                <!-- THUMBNAIL: Change the URL to your preferred image, > 300px in height for best results -->
                <div style="height:300px;width:35%;display:inline-block;background-size:cover;background-repeat:no-repeat;background-color:white;background-position:center; background-image:url(https://i.imgur.com/YyO6Iwa.png)"
                ><br></div>

                <!-- INFO BOXES -->
                <div style="width:63%;margin-left:2%;display:inline-block;float:right;">
                    <!-- Change the URL below to change the card's background -->
                    <div class = "card" style="padding:20px;background-image:url(https://i.imgur.com/fkbahHA.jpg); background-color:#333;font-size:24pt;color:white;text-align:center;"><div class = "card-body">Character's name</div></div>
                    <div style="margin-top:8px; background-color:white;">

                        <table style="border:none;font-size:9pt;width:100%;border-collapse:separate;border-spacing:3px;">
                            <tbody>
                                <tr style="margin-top:5px;">
                                    <td style="text-align:right;padding:5px;">Also known as</td>
                                    <td style="background-color:#666;color:white;text-align:left;padding:5px;">Character's aliases</td>
                                </tr>

                                <tr style="margin-top:5px;">
                                    <td style="text-align:right;padding:5px;">Age</td>
                                    <td style="background-color:#666;color:white;text-align:left;padding:5px;">Character's age</td>
                                </tr>

                                <tr style="margin-top:5px;">
                                    <td style="text-align:right;padding:5px;">Pronouns</td>
                                    <td style="background-color:#666;color:white;text-align:left;padding:5px;">Character's pronouns</td>
                                </tr>

                                <tr style="margin-top:5px;">
                                    <td style="text-align:right;padding:5px;">Detail</td>
                                    <td style="background-color:#666;color:white;text-align:left;padding:5px;">Insert additional detail here</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- CHARACTER SHEET -->
            <div class="row text-center" style="background-color:white;padding:10px;margin-bottom:10px;">
                <div class = "col">
                    <!-- CHANGE THESE URLS TO LINK TO YOUR PREFERRED IMAGE -->
                    <a href="LINK"><img alt="Insert moodboard or character sheet here" src = "LINK" style = "height:400px;"/></a>
                </div>
            </div>

            <div class = "row text-center" style="background-color:white;padding:10px;margin-bottom:10px;text-align:center;">
                <div class = "col">
                    <p style = "text-align: center;">Profile template by <a href="/orchestrator">Circlejourney</a></p>
                </div>
            </div>

        </div>

        <div class="col col-lg-7 tab-content" style="padding:0 0 0 10px;">

            <!-- ALERT -->
            <div class = "alert alert-primary text-center" style = "border:none;background-color:#ddd;color: #333;">
                    Put additional notes/warnings about the character here if you like. You can also delete this div if you have nothing to include.
            </div>


            <!--- NAVIGATION --->
            <div role="navigation">
              <ul class="nav nav-tabs" style = "border-bottom:none;">
                <li class = "nav-item"><a class = "nav-link active" data-toggle="tab" href="#personality" style = "border:none;">Personality</a></li>
                <li class = "nav-item"><a class = "nav-link" data-toggle="tab" href="#story" style = "border:none;">Story</a></li>
                <li class = "nav-item"><a class = "nav-link" data-toggle="tab" href="#relationships" style = "border:none;">Relationships</a></li>
                <li class = "nav-item"><a class = "nav-link" data-toggle="tab" href="#facts" style = "border:none;">Facts</a></li>
              </ul>
            </div>

            <!-- PERSONALITY TAB -->
            <div id="personality" class="tab-pane show active" style="box-sizing:border-box;width:100%;background-color:white;padding:10px;">
                <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#666;">Personality</div>
                <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
                    <p>Describe the character's personality here. I tend to think of it as a place to describe first impressions, but feel free to change the header to something like "summary" if you prefer.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices.</p>
                    <p>Curabitur interdum diam justo. Nulla lacinia elementum enim, at molestie nisi accumsan eget. Fusce at sem viverra, volutpat mauris sit amet, imperdiet diam. Aenean metus ante, consequat eu enim ut, tristique placerat magna. Vestibulum nec tempus nibh.</p>
                </div>
            </div>

            <div id="story" class="tab-pane" style="box-sizing:border-box;width:100%;background-color:white;padding:10px;">
                <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#666;">Story</div>
                <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
                    <p>A tab for a more detailed description of the character and their past. As always, feel free to change the header.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices.</p>
                    <p>Curabitur interdum diam justo. Nulla lacinia elementum enim, at molestie nisi accumsan eget. Fusce at sem viverra, volutpat mauris sit amet, imperdiet diam. Aenean metus ante, consequat eu enim ut, tristique placerat magna. Vestibulum nec tempus nibh.</p>
                </div>
            </div>

            <div id="relationships" class="tab-pane" style="box-sizing:border-box;width:100%;background-color:white;padding:10px;">
                <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#666;">Relationships</div>
                <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">

                    <!-- RELATIONSHIP TABLE -->
                    <table>
                        <tbody>
                            <tr>
                                <td style="background-color:#888;padding:10px;"><a href="Link to related character 1" style="color:white;">Related character 1</a></td>
                                <td style="padding:10px;">Include a brief description of the relationship here.</td>
                            </tr>
                            <tr>
                                <td style="background-color:#888;padding:10px;"><a href="Link to related character 2" style="color:white;">Related character 2</a></td>
                                <td style="padding:10px;">Include a brief description of the relationship here.</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

            <div id="facts" class="tab-pane" style="box-sizing:border-box;width:100%;background-color:white;padding:10px;">
                <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#666;">Facts</div>
                <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">

                    <ul style="margin:5px 0;">
                        <li>Trivia 1</li>
                        <li>Trivia 2</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>