USER OO2

<div class="row no-gutters" style="color:#777;">
    <div class="col-lg-9 p-0 mx-auto">

        <h1 class="card-block rounded-0 border-0 display-2 mb-0 text-uppercase text-white text-center" style="background:#222;letter-spacing:2px;">fly me to the moon</h1>
        <div class="card border-0 rounded-0">
            <div class="card-block d-block rounded-0 border-top-0" style="background:url('https://i.imgur.com/WQXRvp7.png') fixed;height:280px;border:5px solid #222;">
                <br>
            </div>
            <div class="card-block rounded-0 mt-0" style="background:#222;">
                <div class="row no-gutters">
                    <!------------------------------left stars------------------------------------>
                    <div class="col-sm-4 hidden-md-down text-center text-muted p-0 mx-auto" style="margin-top:-20px;font-size:3em;">
                        <!----------->
                        <i class="fal fa-star fa-rotate-180 mx-3 tooltipster" title="Male"></i>
                        <!----------->
                        <i class="fal fa-star fa-rotate-90 mx-3 tooltipster" title="Seoul, KR"></i>
                        <!----------->
                        <i class="fal fa-star fa-rotate-270 mx-3 tooltipster" title="Cat Enthusiast"></i></div>
                    <!------------------------------250 x 250------------------------------------>
                    <div class="col-sm-4 col-sm p-0 d-flex">
                        <div class="card rounded-circle d-block mx-auto" style="background-image:url('https://i.imgur.com/r6m3neu.png');margin-top: -150px;height:280px;width:280px;border:15px solid #222;">
                            <br>
                        </div>
                    </div>
                    <!------------------------------right stars------------------------------------>
                    <div class="col-sm-4 hidden-md-down text-center text-muted p-0 mx-auto" style="margin-top:-20px;font-size:3em;">
                        <!----------->
                        <i class="fal fa-star fa-rotate-90 mx-3 tooltipster" title="ISFP"></i>
                        <!----------->
                        <i class="fal fa-star fa-rotate-270 mx-3 tooltipster" title="Capricorn"></i>
                        <!----------->
                        <i class="fal fa-star fa-rotate-180 mx-3 tooltipster" title="Extremely Tired"></i></div>
                </div>
                <!----------------------------------------------------------------------->
                <div class="row no-gutters">
                    <div class="col-lg-8 p-1">
                        <!------------------------------bio title------------------------------------>

                        <h1 class="text-uppercase display-4 text-muted" style="letter-spacing:2px;">bio</h1>
                        <hr class="mt-0" style="background:#9b61bd;">
                        <!------------------------------bio------------------------------------>

                        <p class="pb-lg-2">This kind of box will just grow, if you want it to scroll, give it a fixed height and add overflow:auto; in the style tag!</p>

                        <p class="pb-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper, lorem et volutpat placerat, eros orci maximus augue, non commodo est massa nec lorem. Aliquam efficitur lectus in quam volutpat, ut sodales odio pharetra. Sed vulputate commodo tellus, vel eleifend sem pellentesque sit amet. Aliquam et efficitur odio. Suspendisse potenti.&nbsp;</p>
                    </div>
                    <div class="col-lg-4 p-1">
                        <!------------------------------links title------------------------------------>

                        <h1 class="text-uppercase display-4 text-muted" style="letter-spacing:2px;">Links</h1>
                        <hr class="mt-0" style="background:#9b61bd;">
                        <!------------------------------links------------------------------------>
                        <!----------->
                        <a class="btn btn-block rounded-0 btn-outline-secondary p-1 text-uppercase" href="http://DA_LINK" id="" rel="noopener noreferrer" style="letter-spacing:1px;" target="_blank">deviantart</a>
                        <!----------->
                        <a class="btn btn-block rounded-0 btn-outline-secondary p-1 text-uppercase" href="http://TWITTER_LINK" id="" rel="noopener noreferrer" style="letter-spacing:1px;" target="_blank">twitter</a>
                        <!----------->
                        <a class="btn btn-block rounded-0 btn-outline-secondary p-1 text-uppercase" href="http://TUMBLR_LINK" id="" rel="noopener noreferrer" style="letter-spacing:1px;" target="_blank">tumblr</a>
                        <!----------->
                        <a class="btn btn-block rounded-0 btn-outline-secondary p-1 text-uppercase" href="http://FA_LINK" id="" rel="noopener noreferrer" style="letter-spacing:1px;" target="_blank">furaffinity</a>
                        <!----------->
                        <a class="btn btn-block rounded-0 btn-outline-secondary p-1 text-uppercase tooltipster" href="#" title="Discord#0000" style="letter-spacing:1px;">discord</a></div>
                </div>
            </div>
            <!------------------------------divider img------------------------------------>
            <div class="card-block d-block rounded-0 border-top-0" style="background:url('https://i.imgur.com/WQXRvp7.png') fixed;height:50px;border:5px solid #222;">
                <br>
            </div>
            <!------------------------------your characters------------------------------------>
            <div class="card-block rounded-0 mt-0" style="background:#222;">

                <h1 class="text-uppercase display-4 text-muted" style="letter-spacing:2px;">my children</h1>
                <hr class="mt-0" style="background:#9b61bd;">
                <div class="row no-gutters">
                    <!------------------------------------char 1------------------------------------>
                    <div class="col-lg-3 p-1">
                        <!--------200 x 200-------->
                        <div class="card card-block rounded-0" style="background:url('https://i.imgur.com/AqVst8R.png');background-position:center;border:5px solid #212121;outline:solid 1px #555;height:200px;">
                            <br>
                        </div>
                        <!--------btn link here-------->
                        <a class="btn btn-block mt-2 rounded-0 border--0 text-white text-uppercase" href="CHARACTER_LINK" style="background:#63329d;letter-spacing:1px;">Character</a></div>
                    <!------------------------------------char 2------------------------------------>
                    <div class="col-lg-3 p-1">
                        <!--------200 x 200-------->
                        <div class="card card-block rounded-0" style="background:url('https://i.imgur.com/AqVst8R.png');background-position:center;border:5px solid #212121;outline:solid 1px #555;height:200px;">
                            <br>
                        </div>
                        <!--------btn link here-------->
                        <a class="btn btn-block mt-2 rounded-0 border--0 text-white text-uppercase" href="CHARACTER_LINK" style="background:#63329d;letter-spacing:1px;">Character</a></div>
                    <!------------------------------------char 3------------------------------------>
                    <div class="col-lg-3 p-1">
                        <!--------200 x 200-------->
                        <div class="card card-block rounded-0" style="background:url('https://i.imgur.com/AqVst8R.png');background-position:center;border:5px solid #212121;outline:solid 1px #555;height:200px;">
                            <br>
                        </div>
                        <!--------btn link here-------->
                        <a class="btn btn-block mt-2 rounded-0 border--0 text-white text-uppercase" href="CHARACTER_LINK" style="background:#63329d;letter-spacing:1px;">Character</a></div>
                    <!------------------------------------char 4------------------------------------>
                    <div class="col-lg-3 p-1">
                        <!--------200 x 200-------->
                        <div class="card card-block rounded-0" style="background:url('https://i.imgur.com/AqVst8R.png');background-position:center;border:5px solid #212121;outline:solid 1px #555;height:200px;">
                            <br>
                        </div>
                        <!--------btn link here-------->
                        <a class="btn btn-block mt-2 rounded-0 border--0 text-white text-uppercase" href="CHARACTER_LINK" style="background:#63329d;letter-spacing:1px;">Character</a></div>
                    <br>
                </div>
            </div>
        </div><a class="pull-left text-muted tooltipster" href="https://toyhou.se/Hitoshi" title="code"><i class="fal fa-coffee"></i></a></div>
</div>