<!--
CHARACTER HTML: MINI TABS
F2U BY OWLHARÌ
DO NOT REMOVE CREDIT
-->

<div class="row no-gutters">

<div class="col-md-2"></div>

<div class="col-md-8 container m-0 text-break">

<!-- CONTAINER -->
<div class="row container tab-content px-0 py-3 bg-secondary">

    <div class="col-sm-4" style="font-size:13px;">

    <!-- STATS -->
    <div class="card px-3 py-4 m-0 bg-body" style="border:0; border-radius:20px;">
        <table class="table m-0" style="border:0;"><tbody>
            <tr>
                <td class="w-50"><b>FULL NAME</b></td>
                <td class="w-50">name</td>
            </tr>
            <tr>
                <td><b>NICKNAME(S)</b></td>
                <td>nicknames</td>
            </tr>
            <tr>
                <td><b>GENDER</b></td>
                <td>gender</td>
            </tr>
            <tr>
                <td><b>PRONOUNS</b></td>
                <td>pro/nouns</td>
            </tr>
            <tr>
                <td><b>ORIENTATION</b></td>
                <td>orientation</td>
            </tr>
            <tr>
                <td><b>AGE</b></td>
                <td>age</td>
            </tr>
            <tr>
                <td><b>OCCUPATION</b></td>
                <td>occupation</td>
            </tr>
            <tr>
                <td><b>RESIDENCE</b></td>
                <td>residence</td>
            </tr>
            <tr>
                <td><b>STATUS</b></td>
                <td>status</td>
            </tr>
            <tr>
                <td><b>THEME</b></td>
                <td><a href="">song link</a></td>
            </tr>

        </tbody></table>

        <div class="text-center">
            <a href="https://toyhou.se/20702796.f2u-html-mini-tabs" data-toggle="tooltip" data-placement="left" title="get the code!"><i class="fa-solid fa-code"></i></a>
            <a href="/owlhari" data-toggle="tooltip" data-placement="left" title="code by owlharì"><i class="fa-solid fa-crow"></i></a>
        </div>
    </div>

    </div>

    <div class="col-sm">

    <!-- NAVIGATION -->
    <div class="card mb-3 bg-body" style="border:0;border-radius:10px;">
        <ul class="nav nav-pills nav-justified">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" data-toggle="tab" href="#summary">SUMMARY</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#design">DESIGN</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#stats">STATS</a>
          </li>
        </ul>
    </div>

    <div class="tab-content">

        <!-- SUMMARY TAB -->
        <div class="tab-pane active show card p-4 bg-body" style="border:0; border-radius:20px;" id="summary">

            <h1 class="text-center text-uppercase">character name <i class="fa-solid fa-star"></i> subtitle</h1>
            <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>
            <h3 class="text-center text-uppercase">subheader</h3>
            <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>

        <!-- DESIGN TAB -->
        <div class="tab-pane card p-4 bg-body" style="border:0; border-radius:20px;" id="design">

            <img src="IMAGE LINK HERE" class="d-block mx-auto mb-3" style="border-radius:20px;">
            <ul class="list-unstyled ml-5">
                <!-- to add more items, copy and paste from <li> to </li> on a new line -->
                <li><i class="fa-solid fa-star"></i> one</li>
                <li><i class="fa-solid fa-star"></i> two</li>
                <li><i class="fa-solid fa-star"></i> three</li>
            </ul>
        </div>

        <!-- STATS TAB -->
        <div class="tab-pane card p-4 bg-body text-center" style="border:0; border-radius:20px;" id="stats">

            <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                  <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>
            <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                    <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>
            <div class="d-inline p-2" data-toggle="tooltip" title="desc">
                  <img src="https://file.toyhou.se/images/15986423_VWgwxgMTmNxkkVu.png?1565834541" /></div>

            <div><a href="https://toyhou.se/4739396.-ribbons">ribbons</a></div>

        <div class="row text-left mt-3">
            <div class="col-sm"><b>DESIGN</b>
                <ul class="list-unstyled">
                    <li><b>creator:</b> <a href="">username</a></li>
                    <li><b>designer:</b> <a href="">username</a></li>
                    <li><b>made on:</b> <a href="">website</a></li>
                    <li><b>created:</b> date</li>
                    <li><b>acquired:</b> date</li>
                    <li><b>purchased for:</b> $0.00</li>
                    <li><b>redesigned:</b> date</li>
                </ul>
            </div>
            <div class="col-sm"><b>WRITING</b>
                <ul class="list-unstyled">
                    <li><a href="">story link</a></li>
                    <li><a href="">story link</a></li>
                    <li><a href="">story link</a></li>
                </ul>
            </div>
        </div>

        </div>

    </div>

</div>
</div>

<div class="col-md-2"></div>

</div>
</div>