Teeny Weeny

<!-- BACKGROUND - if you don't want this, delete the 'style' attribute -->
<div class="mx-auto col-lg-7 col-9 m-2 p-4" style="background-image: url('//via.placeholder.com/1000x1000'); background-size: cover; background-position: center;">
    <div class="card rounded-0 bg-faded m-0 p-0">

        <!-- ICON USED: fas fa-star - look at fontawesome.com to get even cuter icons!! (replace using ctrl+H)
            if you get another one, replace only the 'star' part unless you know what you're doing!! -->

        <h3 class="m-1 font-weight-light text-secondary text-center">
            <i class="fas fa-star"></i> Nickname <i class="fas fa-star"></i>
        </h3>
        <div class="row m-0 p-0">
            <!-- LEFT INFO -->
            <div class="col-lg-5 card rounded-0 m-1 p-0">
                <div class="justify-content-center">
                    <!-- AVATAR - LINK YOUR IMAGE HERE -->
                    <img class="img-thumbnail rounded-circle mt-2 mb-2" src="//via.placeholder.com/200x200" style="height: 170px; width: 170px;">
                </div>
                <!-- BASIC INFO -->
                <ul class="list-group list-group-flush card rounded-0 border-bottom-0 border-left-0 border-right-0" style="height:232px; overflow:auto;">
                    <li class="list-group-item p-1 d-flex justify-content-between border-0">
                        <span class="text-secondary">FULL NAME</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0 bg-faded">
                        <span class="text-secondary">AGE</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0">
                        <span class="text-secondary">GENDER</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0 bg-faded">
                        <span class="text-secondary">RACE</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0">
                        <span class="text-secondary">ORIENTATION</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0 bg-faded">
                        <span class="text-secondary">STATUS</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0">
                        <span class="text-secondary">MBTI</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0 bg-faded">
                        <span class="text-secondary">HEIGHT</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0">
                        <span class="text-secondary">OCCUPATION</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-between border-0 bg-faded">
                        <span class="text-secondary">RELATIONSHIP</span>
                        <span>INFO</span></li>
                    <li class="list-group-item p-1 d-flex justify-content-center border-0">
                        <!-- CREDITS -->
                        <span>
                            <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
                            <a data-toggle="tooltip" title="Background Image" href="SOURCE_LINK"><i class="far fa-image-polaroid"></i></a>
                        </span></li>
                </ul>
            </div> <!-- end left -->

            <!-- RIGHT INFO -->
            <div class="col-lg card rounded-0 m-1 p-0" style="height:420px; overflow:auto;">
                <div class="m-2 p-0">
                    <!-- DIVIDER -->
                    <hr class="m-1 bg-secondary">
                    <p class="m-0 pb-1 text-center"><i class="fas fa-star"></i> <i class="fas fa-star fa-2x"></i> <i class="fas fa-star"></i></p>
                    <hr class="m-1 bg-secondary">


                    <p class="m-1"><i class="fas fa-star"></i> This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vestibulum nunc. Mauris a nunc et augue gravida hendrerit. Sed dictum gravida nibh volutpat dictum. Nullam pellentesque nulla ac volutpat pretium. Fusce efficitur dignissim massa. Integer volutpat aliquam lorem ut tincidunt. In id vestibulum lectus.</p>
                    <p class="m-1"><i class="fas fa-star"></i> Morbi ullamcorper mi rutrum, volutpat mi ut, tincidunt orci.</p>
                    <p class="m-1"><i class="fas fa-star"></i> Quisque dignissim lobortis tellus, sed euismod leo venenatis quis.</p>
                    <p class="m-1"><i class="fas fa-star"></i> Integer libero ipsum, tincidunt feugiat turpis nec, convallis efficitur ipsum. Sed et dignissim nulla.</p>


                    <!-- DIVIDER -->
                    <hr class="m-1 bg-secondary">
                    <p class="m-0 pb-1 text-center"><i class="fas fa-star"></i> <i class="fas fa-star fa-2x"></i> <i class="fas fa-star"></i></p>
                    <hr class="m-1 bg-secondary">


                    <p class="m-1"><i class="fas fa-star"></i> Cras ac scelerisque mauris. Nam sed tincidunt neque. Nulla tellus risus, accumsan eget mollis ac, interdum sit amet mi.</p>
                    <p class="m-1"><i class="fas fa-star"></i> Morbi interdum sodales nisl, in suscipit orci iaculis in.</p>
                    <p class="m-1"><i class="fas fa-star"></i> Praesent elementum in dolor in porta. Suspendisse potenti.</p>


                    <!-- DIVIDER -->
                    <hr class="m-1 bg-secondary">
                    <p class="m-0 pb-1 text-center"><i class="fas fa-star"></i> <i class="fas fa-star fa-2x"></i> <i class="fas fa-star"></i></p>
                    <hr class="m-1 bg-secondary">
                </div>
            </div> <!-- end right -->
        </div> <!-- END ROW -->
    </div>
</div>