squish

<!--

squish by cheurbix

accent: #E654A1
bg    : #fff
text  : #888

-->

<div class="container p-0" style="max-width:250px;">
    <div class="row no-gutters">

        <!-- character image -->
        <div class="col-8" style="height:100px;background:url(https://data.whicdn.com/images/331475184/original.jpg) center;background-size:cover;border-radius:25px 0px 0px 0px;"></div>
        <!-- nav -->
        <div class="col-4 p-1 justify-items-center pt-3" style="height:100px;border-radius:0px 25px 0px 0px;background:#E654A1">
            <ul class="nav row no-gutters h-100">

                <li class="col-lg-12 nav-item text-center">
                    <a class="border-0 active d-flex font-weight-bold" style="color:#fff;border-radius:0px 25px 0px 0px;font-size:.75em;font-family:courier" data-toggle="tab" href="#one">
                        <span class="m-auto">01</span>
                </a></li>

                <li class="col-lg-12 nav-item text-center">
                    <a class="border-0 d-flex font-weight-bold" style="color:#fff;border-radius:0px;font-size:.75em;font-family:courier" data-toggle="tab" href="#two">
                        <span class="m-auto">02</span>
                </a></li>

                <li class="col-lg-12 nav-item text-center">
                    <a class="border-0 d-flex font-weight-bold" style="color:#fff;border-radius:0px;font-size:.75em;font-family:courier" data-toggle="tab" href="#three">
                        <span class="m-auto">03</span>
                </a></li>

            </ul>
        </div>
        <!-- quote -->
        <div class="col-6 p-1 text-center align-items-center font-italic font-weight-bold" style="height:130px;background:#E654A1;font-family:times;font-size:1em;color:#fff;border-radius:0px 0px 0px 25px;">
            im gonna be your bubblegum bitch!
        </div>
        <!-- content box -->
        <div class="col-6 p-2 font-weight-bold" style="font-size:.75em;font-family:courier new;background:#fff;height:130px;overflow:auto;color:#888;border-radius:0px 0px 25px 0px;">
            <div class="tab-content">
                <!-- page 1 -->
                <div id="one" class="tab-pane fade active show">
                    <div style="font-size:1em">basic info</div>
                    <hr class="my-1" style="background:#E654A1;opacity:0.25">
                    <div class="justify-content-between">
                        <span style="color:#E654A1">name</span>
                        <span>content</span>
                    </div>
                    <div class="justify-content-between">
                        <span style="color:#E654A1">alias</span>
                        <span>content</span>
                    </div>
                    <div class="justify-content-between">
                        <span style="color:#E654A1">age</span>
                        <span>content</span>
                    </div>
                    <div class="justify-content-between">
                        <span style="color:#E654A1">d.o.b</span>
                        <span>content</span>
                    </div>
                    <div class="justify-content-between">
                        <span style="color:#E654A1">gender</span>
                        <span>content</span>
                    </div>
                    <div class="justify-content-between">
                        <span style="color:#E654A1">orient.</span>
                        <span>content</span>
                    </div>
                </div>
                <!-- page 2 -->
                <div id="two" class="tab-pane fade text-justify">
                    <div style="font-size:1em">backstory</div>
                    <hr class="my-1" style="background:#E654A1;opacity:0.25">
                    <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>
                <!-- page 3 -->
                <div id="three" class="tab-pane fade">
                    <div style="font-size:1em">relations</div>
                    <hr class="my-1" style="background:#E654A1;opacity:0.25">
                    <a href="CHAR_LINK" style="color:#E654A1;">name surname</a> <i class="far fa-angle-right"></i> relationship

                    <br><br>

                    <a href="CHAR_LINK" style="color:#E654A1;">name surname</a> <i class="far fa-angle-right"></i> relationship

                    <br><br>

                    <a href="CHAR_LINK" style="color:#E654A1;">name surname</a> <i class="far fa-angle-right"></i> relationship
                    <!-- add more above here -->
                </div>
            </div>
        </div>
    </div>

    <!-- credit // DO NOT REMOVE -->
    <a class="pull-right text-muted tooltipster" href="/cherubix" title="code by cherubix">
        <i class="far fa-heart fa-xs"></i>
    </a>
</div>