Design Notes

<!---------NOTES

Turn WYSIWYG off when editing.

I don't check @ arbitrarycodes often so please seek help from the Coding forums.

--------->

<!---------CODE STARTS--------->

<div class="container-fluid p-0" style="max-width: 1000px;">
        <div class="row no-gutters" style="column-gap: 35px">

            <!---Tab buttons--->

            <div class="col-md-5">
                <ul class="nav nav-tabs card-header-tabs row mb-1">
                    <li class="col-md-4 mb-2">
                        <a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#reg1" style="border-radius: 0px">1</a>
                    </li>
                    <li class="col-md-4 mb-2">
                        <a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg2" style="border-radius: 0px">2</a>
                    </li>
                    <li class="col-md-4 mb-2">
                        <a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#reg3" style="border-radius: 0px">3</a>
                    </li>
                </ul>

                <!---Tab content 1--->

                <div class="tab-content">
                    <div class="tab-pane active show" id="reg1">
                        <div class="card border-0 p-0" style="border-radius: 0px">
                            <img alt="ALT TEXT HERE" src="IMAGE LINK HERE" style="display:flex; margin: auto">
                            <div class="card card-outline-secondary p-3 bg-faded text-secondary text-uppercase" style="border-radius: 0px">
                                <div class="text-center">
                                    Outfit Name 1 <a href="ARTIST CREDIT HERE"><i class="fal fa-sun text-warning"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!---Tab content 2--->

                    <div class="tab-pane" id="reg2">
                        <div class="card p-0 border-0" style="border-radius: 0px">
                            <img alt="ALT TEXT HERE" src="IMAGE LINK HERE" style="display:flex; margin: auto">
                            <div class="card card-outline-secondary p-3 bg-faded text-secondary text-uppercase" style="border-radius: 0px">
                                <div class="text-center">
                                    Outfit Name 2 <a href="ARTIST CREDIT HERE"><i class="fal fa-sun text-warning"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!---Tab content 3--->

                    <div class="tab-pane" id="reg3">
                        <div class="card p-0 border-0" style="border-radius: 0px">
                            <img alt="ALT TEXT HERE" src="IMAGE LINK HERE" style="display:flex; margin: auto">
                            <div class="card card-outline-secondary p-3 bg-faded text-secondary text-uppercase" style="border-radius: 0px">
                                <div class="text-center">
                                    Outfit Name 3 <a href="ARTIST CREDIT HERE"><i class="fal fa-sun text-warning"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!---Right side--->

            <div class="col-md-6 col-sm-12 bg-none p-3 mt-4" style="display:flex; flex-direction: column">
                <div class="container mt-2">

                    <!---Namebox--->

                    <div class="card card-outline-secondary bg-faded p-3 text-center text-uppercase text-secondary mb-3" style="border-radius: 0px; font-size: 18px; letter-spacing:0.5px">
                        NAME HERE
                    </div>

                    <!---Table--->

                    <div class="container center mb-3" style="display: flex; flex-direction: column">
                        <table class="center">
                            <tr>
                                <th class="text-center text-uppercase text-secondary" style="width: 33%; letter-spacing:0.5px; font-weight:normal">Age</th>
                                <th class="text-center text-uppercase text-secondary" style="width: 33%; letter-spacing:0.5px; font-weight:normal">Height</th>
                                <th class="text-center text-uppercase text-secondary" style="width: 33%; letter-spacing:0.5px; font-weight:normal">Build</th>
                            </tr>
                            <tr>
                                <td class="text-center">AGE INFO</td>
                                <td class="text-center">HEIGHT INFO</td>
                                <td class="text-center">BUILD INFO</td>
                            </tr>
                        </table>
                    </div>

                    <!---Design notes box--->

                    <div class="card bg-faded card-outline-secondary p-3" style="border-radius: 0px">
                        <p class="text-center text-uppercase text-secondary mb-2" style="font-size: 16px; letter-spacing:0.5px">Design notes</p>

                        <!---Point notes--->

                        <p class="mb-0 ml-4 mr-4" style=""><i class="fal fa-sun"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p class="mb-0 ml-4 mr-4" style=""><i class="fal fa-sun"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p class="mb-0 ml-4 mr-4" style=""><i class="fal fa-sun"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                        <!---Text content--->

                        <p class="ml-3 mr-3 mt-3 mb-2">More text goes here. 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>
                    </div>
                </div>
            </div>
        </div>
    <a class="small text-secondary float-right" style="text-decoration: none" href="https://toyhou.se/arbitrarycodes">Theme</a>
</div>