Klovni commission v2

<div class="container-fluid" style="padding: 60px 55px; background-image: url(https://i.imgur.com/iqV0WBR.jpg); background-size: cover; background-attachment: fixed; margin-left: -15px; width: calc(100% + 30px); margin-top: -16px">
    <ul class="nav nav-pills d-flex text-center mb-1">
        <li class="nav-item flex-grow-1 mr-1">
            <a class="nav-link active bg-faded" href="#basics" data-toggle="tab">basics</a>
        </li>
        <li class="nav-item flex-grow-1">
            <a class="nav-link bg-faded" href="#story" data-toggle="tab">story</a>
        </li>
        <li class="nav-item flex-grow-1 ml-1">
            <a class="nav-link bg-faded" href="#relationships" data-toggle="tab">relationships</a>
        </li>
    </ul>

    <div class="tab-content bg-faded rounded">
        <div class="tab-pane table-responsive fade show active" id="basics" style="height: 600px;">
            <div class="p-4 my-4">
                <h1 class="display-4 text-center"><i class="fas fa-user-circle"></i></h1>
                <h1 class="display-4 text-center text-uppercase" style="letter-spacing: 0.1em">Basics</h1>

                <hr class="w-50">

                <div style="letter-spacing: 0.1em; font-size: 12pt;">
                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted">Name</div>
                        <div class="col">Tacitus Olor</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Called</div>
                        <div class="col">Taci</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Age</div>
                        <div class="col">20+</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Gender</div>
                        <div class="col">Male</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Race</div>
                        <div class="col">Elf</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Job</div>
                        <div class="col">Farmhand</div>
                    </div>

                    <div class="row">
                        <div class="col font-weight-bold text-right text-muted" style="letter-spacing: 0.1em">Alignment</div>
                        <div class="col">Chaotic Good</div>
                    </div>

                </div>

                <hr>

                <p>Tacitus has spent the majority of his life working as a courier and merchant alongside his mother and father. Being mute, his socialization skills are less than great, and he greatly prefers the company of animals over other people.</p>

                <hr>

                <div class="row justify-content-center">
                    <div class="col">
                        <h2 class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">Likes</h2>
                        <ul>
                            <li>Animals</li>
                            <li>Leatherworking</li>
                            <li>Food</li>
                        </ul>
                    </div>
                    <div class="col">
                        <h2 class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">Dislikes</h2>
                        <ul>
                            <li>Pompousness</li>
                            <li>Crowds</li>
                            <li>Sweet tasting food</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane table-responsive fade" id="story" style="height: 600px;">
            <div class="p-4 my-4">
                <h1 class="display-4 text-center text-uppercase" style="letter-spacing: 0.1em"><i class="fas fa-book-spells"></i> Story</h1>

                <hr class="w-50">

                <div class="p-4">
                    <h2 class="display-4 mb-3 text-muted" style="font-size: 20pt;">Heading</h2>
                    <p>Pellentesque hendrerit ornare lectus. Integer sodales, velit id suscipit rhoncus, dolor diam tincidunt dolor, quis auctor est massa ac arcu. Proin magna nunc, vulputate in nibh et, pretium tincidunt sapien. Phasellus convallis ultricies elit id convallis. Aenean gravida nibh vel purus facilisis sagittis. Maecenas quam erat, finibus in efficitur in, suscipit a odio. Donec a iaculis diam. In aliquam et mi vitae rutrum. Duis volutpat lectus ante, non eleifend leo pulvinar a. Maecenas sed placerat diam.</p>

                    <h2 class="display-4 mb-3 text-muted" style="font-size: 20pt;">Heading</h2>
                    <p>Phasellus convallis ultricies elit id convallis. Aenean gravida nibh vel purus facilisis sagittis. Maecenas quam erat, finibus in efficitur in, suscipit a odio. Donec a iaculis diam. In aliquam et mi vitae rutrum. Duis volutpat lectus ante, non eleifend leo pulvinar a. Maecenas sed placerat diam.</p>
                </div>
            </div>
        </div>

        <div class="tab-pane table-responsive fade" id="relationships" style="height: 600px;">
            <div class="p-4 my-4">
                <h1 class="display-4 text-center text-uppercase" style="letter-spacing: 0.1em"><i class="fas fa-heartbeat"></i> Relationships</h1>

                <hr class="w-50">

                <!-- Start of relationship row: duplicate this section for > 4 relationships -->
                <div class="row">

                    <div class="col text-center">
                        <h5><a href="LINK" class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">
                            Elliot Fossey
                        </a></h5>
                        <div class="font-weight-light text-muted mb-3">[ lover ]</div>
                        <img src="https://i.imgur.com/Nlltl41.png">

                        <div class="my-3" style="font-size: 10pt;">
                            <p>Pellentesque vel euismod libero, vitae maximus sapien. Fusce sit amet metus ut velit porttitor sollicitudin. Nunc at varius risus, a vestibulum diam. Quisque nisl diam, placerat in congue et, eleifend nec elit.</p>
                            <p>Praesent non varius orci. Maecenas interdum ornare dolor nec hendrerit. Curabitur id leo diam. Praesent viverra risus ipsum, et porta ligula molestie eget. In sodales eu massa non semper.
                            </p>
                        </div>
                    </div>

                    <div class="col text-center">
                        <h5><a href="LINK" class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">
                            Robin Nobles
                        </a></h5>
                        <div class="font-weight-light text-muted mb-3">[ lover ]</div>
                        <img src="https://i.imgur.com/ApQG4T6.png">

                        <div class="my-3" style="font-size: 10pt;">
                            <p>Pellentesque vel euismod libero, vitae maximus sapien. Fusce sit amet metus ut velit porttitor sollicitudin. Nunc at varius risus, a vestibulum diam. Quisque nisl diam, placerat in congue et, eleifend nec elit.</p>
                            <p>Praesent non varius orci. Maecenas interdum ornare dolor nec hendrerit. Curabitur id leo diam. Praesent viverra risus ipsum, et porta ligula molestie eget. In sodales eu massa non semper.
                            </p>
                        </div>
                    </div>

                    <!-- Start of relationship box -->
                    <div class="col text-center">
                        <h5><a href="LINK" class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">
                    CHARACTER
                </a></h5>
                        <div class="font-weight-light text-muted mb-3">[ relationship ]</div>
                        <img src="https://dummyimage.com/150x250/000/fff">

                        <div class="my-3" style="font-size: 10pt;">
                            <p>Pellentesque vel euismod libero, vitae maximus sapien. Fusce sit amet metus ut velit porttitor sollicitudin. Nunc at varius risus, a vestibulum diam. Quisque nisl diam, placerat in congue et, eleifend nec elit.</p>
                            <p>Praesent non varius orci. Maecenas interdum ornare dolor nec hendrerit. Curabitur id leo diam. Praesent viverra risus ipsum, et porta ligula molestie eget. In sodales eu massa non semper.</p>
                        </div>
                    </div>
                    <!-- End of relationship box -->

                    <!-- Start of relationship box -->
                    <div class="col text-center">
                        <h5><a href="LINK" class="text-uppercase font-weight-bold text-muted" style="letter-spacing: 0.1em">
                    CHARACTER
                </a></h5>
                        <div class="font-weight-light text-muted mb-3">[ relationship ]</div>
                        <img src="https://dummyimage.com/150x250/000/fff">

                        <div class="my-3" style="font-size: 10pt;">
                            <p>Pellentesque vel euismod libero, vitae maximus sapien. Fusce sit amet metus ut velit porttitor sollicitudin. Nunc at varius risus, a vestibulum diam. Quisque nisl diam, placerat in congue et, eleifend nec elit.</p>
                            <p>Praesent non varius orci. Maecenas interdum ornare dolor nec hendrerit. Curabitur id leo diam. Praesent viverra risus ipsum, et porta ligula molestie eget. In sodales eu massa non semper.
                            </p>
                        </div>
                    </div>
                    <!-- End of relationship box -->

                </div>
                <!-- End of relationship row -->

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