!----CLCTRPII [CC]

Resources....
th.circlejourney.net <-- live code editor 

Palette....

#684D99 offwhite
#000000, rgba(0,0,0,.6) black
#865BB8 purple
#363280 blue
#634867 Yellow
#D66A97 red 

Assets....
https://f2.toyhou.se/file/f2-toyhou-se/images/87409876_Hkg2IUnCCqeelOf.png <--Moon bg
https://f2.toyhou.se/file/f2-toyhou-se/images/87411731_8Wy8vA3MTI6axEK.jpg <-- Avatar
https://f2.toyhou.se/file/f2-toyhou-se/images/87411872_GT2nmgORp6Vje1O.png <-- Pagedoll

Have fun!---->

<!----code start---->
<div class="col-12 row no-gutters p-lg-2 card border-0" style="flex-direction:row; background-color:rgba(0,0,0,.6);">
    
    <!----background start---->
    <div style="background-image:url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZWM4N2ZjNTFhODgxMjE3MDAyYWE4NDM0YzhkZTk3NDdhMDNjOWZiZiZjdD1z/c9J6sCu9HrChJUmzWs/giphy.gif'); background-size:cover; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;">
    </div><!----background end---->
    
    <!----left col start---->
    <div class="col-lg-3 hidden-md-down row no-gutters" style="z-index:0; margin-top:100px;">
        
        <!----moon start---->
        <div class="col-12 p-2 text-right">
            <div>
                <i class="fa fa-planet-ringed fa-spin fa-xl" style="color:#EDE0FD;"></i>
            </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 mr-auto" style="width:90px; height:90px;">
                    <a href="#" title="label" class="btn bg-transparent rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="color:#EDE0FD; opacity:.8;" data-toggle="tooltip"> 
                        <i class="fa fa-star-shooting fa-2x"></i>
                    </a>
                </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 mr-auto" style="width:90px; height:90px;">
                    <a href="#" title="label" class="btn bg-transparent rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="color:#EDE0FD; opacity:.6;" data-toggle="tooltip"> 
                        <i class="fa fa-star-shooting fa-3x"></i>
                    </a>
                </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 ml-auto" style="width:90px; height:90px;">
                    <a href="#" title="label" class="btn bg-transparent rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="color:#EDE0FD; opacity:.4;" data-toggle="tooltip"> 
                        <i class="fa fa-star-shooting fa-4x"></i>
                    </a>
                </div>
        </div><!----moon end---->
        
    </div><!----left col end---->
    
    <!----middle col start---->
    <div class="col-lg-6 p-2" style="z-index:1;">
        
        <!----pagedoll start---->
        <div class="col-12 text-center" style="position:relative; z-index:2;">
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/87411872_GT2nmgORp6Vje1O.png" style="max-height:325px; object-fit:contain;" class="tooltipster" title="art from the owl house">
        </div><!----pagedoll end---->
        
        <!----main content start---->
        <div class="col-12 p-0" style="position:relative; margin-top:-100px; z-index:1;">
            <div class="col-12 p-lg-2" style="height:500px; width:500px; border-radius:50%; background-color:#684D99;">
                <!----inner moon start---->
                <div style="height:100%; width:100%; border-radius:50%; background-color:#634867; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/87409876_Hkg2IUnCCqeelOf.png'); background-size:cover; background-repeat:no-repeat;" class="justify-content-center row no-gutters col-12 p-0">
                    
                    <!----tabs start---->
                    <div class="col-12 tab-content align-items-center" style="height:494px; margin-top:-44px; z-index:4;">
                        
                        <!----warning tab start---->
                        <div class="tab-pane fade text-center justify-content-center align-items-center col-12 p-0" id="WARNING">
                            
                            <!----header start---->
                            <div class="col12">
                                <h1 class="display-4 mb-0 mt-4" style="color:#D66A97; font-weight:bold;">Warnings</h1>
                                <p class="mb-2" style="color:#684D99; font-weight:bold; text-shadow:0 0 5px rgba(0,0,0,0.9);">
                                    Icons by <a href="https://toyhou.se/14383478.visual-content-warning-f2u-" style="text-decoration:none; color:#684D99;">Donut-Toast</a>
                                </p>
                            </div><!----header end---->
                            
                            <div class="col-12 px-2" style="height:200px; width:450px; overflow:auto; color:#684D99;">
                                <!----icon warnings start---->
                                <div class="row no-gutters px-2">
                                    <!----warning start---->
                                    <div class="col-lg-3 text-center">
                                        <!----warning icon start---->
                                        <div class="card bg-transparent rounded mx-auto border-0" style="height:75px;width:75px;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/44435212_sGSiJVCELHLcAWC.gif');background-size:cover; opacity:.5;">
                                        </div><!----warning icon end---->
                                        
                                        <h6 class="text-uppercase rounded m-1" style="color:#363280;background-color:#684D99;opacity:.7;">
                                            death
                                        </h6>
                                    </div><!----warning end---->
                                    
                                    <!----warning start---->
                                    <div class="col-lg-3  text-center">
                                        <!----warning icon start---->
                                        <div class="card bg-transparent rounded mx-auto border-0" style="height:75px;width:75px;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/44435212_sGSiJVCELHLcAWC.gif');background-size:cover; opacity:.5;">
                                        </div><!----warning icon end---->
                                        
                                        <h6 class="text-uppercase rounded m-1" style="color:#363280;background-color:#684D99;opacity:.7;">
                                            death
                                        </h6>
                                    </div><!----warning end---->
                                    
                                    <!----warning start---->
                                    <div class="col-lg-3  text-center">
                                        <!----warning icon start---->
                                        <div class="card bg-transparent rounded mx-auto border-0" style="height:75px;width:75px;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/44435212_sGSiJVCELHLcAWC.gif');background-size:cover; opacity:.5;">
                                        </div><!----warning icon end---->
                                        
                                        <h6 class="text-uppercase rounded m-1" style="color:#363280;background-color:#684D99;opacity:.7;">
                                            death
                                        </h6>
                                    </div><!----warning end---->
                                    
                                    <!----warning start---->
                                    <div class="col-lg-3  text-center">
                                        <!----warning icon start---->
                                        <div class="card bg-transparent rounded mx-auto border-0" style="height:75px;width:75px;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/44435212_sGSiJVCELHLcAWC.gif');background-size:cover; opacity:.5;">
                                        </div><!----warning icon end---->
                                        
                                        <h6 class="text-uppercase rounded m-1" style="color:#363280;background-color:#684D99;opacity:.7;">
                                            death
                                        </h6>
                                    </div><!----warning end---->
                                </div><!----icon warnings end---->
                            
                                <!----written warnings start---->
                                <p class="text-center mt-2">
                                    or<br> you<br> can<br> write<br> warnings
                                </p><!----written warnings end---->
                            </div>
                        </div><!----warning tab end---->
                        
                        <!----about tab start---->    
                        <div class="tab-pane fade col-12 active show" id="ABOUT">
                        
                            <!----basics start---->
                            <div class="col-12 text-center">   
                                <h1 class="display-4 mb-0" style="color:#D66A97; font-weight:bold;">NAME</h1>
                                <p class="mb-4" style="font-weight:bold; text-shadow:0 0 5px rgba(0,0,0,0.9)">
                                    <span style="color:#684D99;">(pro/nouns)</span> 
                                    <span style="color:#684D99;"> . gendore . bday</span>
                                </p>
                            </div><!----basics end----> 
                        
                            <!----row start---->
                            <div class="row no-gutters col-12 p-0 justify-content-between">
                                <!----avatar start---->
                                <div class="col-lg-4 hidden-md-down m-auto rounded-circle p-2" style="height:135px; width:135px; background-color: #634867; overflow:hidden;" data-toggle="tooltip" title="" data-original-title="Art from The Owl House">
                                    <img class="rounded-circle h-100 w-100" src="https://f2.toyhou.se/file/f2-toyhou-se/images/87411731_8Wy8vA3MTI6axEK.jpg" style="object-fit:cover; mix-blend-mode:luminosity;" alt="d6Fqbaq.jpg">
                                </div><!----avatar end---->
                            
                                <!----bio start---->
                                <div class="col-lg-8">
                                    <div class="col-12 px-2" style="height:200px; width:100%; overflow:auto; color:#684D99; word-break:break-all;">
                                        <p>
                                            I'm bored! Is the Draining Spell ready yet? I wanna play and see everything go all... OIAYHihjhbJKSHSIHAIOHJAIOj<br>
                                            Betrayed, beguiled, alone, deceived! We'll have our revenge on... ugh, "unity" is so hard to rhyme.<br>
                                            Ooooh, you were maaaad! I thought you were gonna go all... AUGHRFHSGDIUF ...on that kid. I'm starting to think you make those things just to destroy them. You have fun with it. Admit it!
                                            Hahahaha! Heheheh! Almost free... Almost free! I won't be alone! I won't be alone anymore! Hahahaha! Who said that? Who's there? Wait! Wait-wait-wait-wait-wait-wait! Don't leave! Come back!<br>
                                            Heh, heh, heh... You nervous? You haven't been home in like, how many hundreds of years? What if it's all changed? What if you changed? You got so used to eating Palismen, you can barely keep your human shape anymore! (Belos tries to attack the Collector and misses) I can't wait to get out of this prison! There are so many games I wanna play! If we need a third player, we can make another Grimwalker! Just free me already! You've proooomiiiised! You need to have more faith in pinky swears.<br>
                                            He's my friend, right? Uh, he-he wouldn't lie- he wouldn’t! He wouldn't! We've spent hundreds of years playing his game. I-I wanna play a new game. But you said we were friends! We pinky swore! You LIED! LIAR! LIAR, LIAR, LIAR, LIAR, LIAR, LIAR, LIAR!	„ I gave you the Draining Spell. I taught you magic stronger than anybody's! You look like that bully who put me in here. No. Way! Are you his little Titan baby!? I always wanted to play with you! But your dump pops hid you... Hey, do you like hide-and-seek? I'll hide first! Wait! If you're a Titan, you can let me out! I can stop the Spell! And we can play together! Wait. You're not tricking me into doing your chores like Philip? Are you? No, silly! Just follow my lead...As promised? I remember someone throwing me of a bridge... I'm not angry though. Say, you play tag? I'm it. Heheheheh! Too slow! (notices the teens) ...You guys look slow too. Do you need a head start? hmm kJGVSUIWETGRFUIEWFYHW EUIFGHWRGHFUIFGUIAE H <br> King! You promised you'd play with me! You pinky-swore!
                                        </p>
                                    </div>
                                </div><!----bio end---->
                            
                            </div><!----row end---->
                        </div><!----about tab end---->  
                        
                        <!----status tab start---->  
                        <div class="col-12 tab-pane fade text-center" id="STATUS">
                            <!----header start---->
                            <h1 class="display-4" style="font-weight:bold; position:relative; margin-top:44px; color:#D66A97;">
                                Status
                            </h1>
                            <!----header end---->
                            
                            <div class="col-12 text-center justify-content-center align-items-center">
                                <div class="col-12 p-0" style="height:200px; width:100%; overflow:auto;">
                                    
                                    <!----service start---->
                                    <div class="col-12 justify-content-between mb-1">
                                        <div class="btn btn-sm rounded" style="color:#684D99;background-color:#363280;font-weight:bold;">Commissions</div>
                                        <a href="#" style="color:#684D99;text-decoration:none;">Closed</a>
                                    </div><!----service end---->

                                    <!----service start---->                                    
                                    <div class="justify-content-between my-1">
                                        <div class="btn btn-sm rounded" style="color:#684D99;background-color:#363280;font-weight:bold;">Art Trades</div>
                                        <a href="#" style="color:#684D99;text-decoration:none;">Ask</a>
                                    </div><!----service end---->

                                    <!----service start---->                                     
                                    <div class="justify-content-between my-1">
                                        <div class="btn btn-sm rounded" style="color:#684D99;background-color:#363280;font-weight:bold;">Oc Trades</div>
                                        <a href="#" style="color:#684D99;text-decoration:none;">Closed</a>
                                    </div><!----service end---->

                                    <!----service start---->         
                                    <div class="justify-content-between my-1">
                                        <div class="btn btn-sm rounded" style="color:#684D99;background-color:#363280;font-weight:bold;">Code Customs</div>
                                        <a href="#" style="color:#684D99;text-decoration:none;">Open!</a>
                                    </div><!----service end---->

                                    <!----service start----> 
                                    <div class="justify-content-between my-1">
                                        <div class="btn btn-sm rounded" style="color:#684D99;background-color:#363280;font-weight:bold;">Code Rules</div>
                                        <a href="#" style="color:#684D99;text-decoration:none;">Click hERE</a>
                                    </div><!----service end---->

                                    <!----service links start---->
                                    <div class="row no-gutters mt-2">
                                        <!----service link start---->
                                        <a href="#" class="col-lg col-12 mr-1 my-1 btn btn-sm" style="background-color:#865BB8; color:#363280;">
                                            <b>Comm Info</b>
                                        </a><!----service link end---->
                                        
                                        <!----service link start---->
                                        <a href="#" class="col-lg col-12 mr-1 my-1 btn btn-sm" style="background-color:#865BB8;color:#363280;">
                                            <b>Customs Info</b>
                                        </a><!----service link end---->
                                        
                                        <!----service link start---->
                                        <a href="#" class="col-lg col-12 mr-1 my-1 btn btn-sm" style="background-color:#865BB8;color:#363280;">
                                            <b>Trade Folder</b>
                                        </a><!----service link end---->
                                        
                                        <!----service link start---->
                                        <a href="#" class="col-lg col-12 my-1 btn btn-sm" style="background-color:#865BB8;color:#363280;">
                                            <b>UFS Folder</b>
                                        </a><!----service link end---->
                                        
                                    </div><!----service links end---->
                                </div>
                            </div>
                        </div><!----status tab end----> 

                        <!----swag tab start---->
                        <div class="tab-pane fade text-center col-12" id="SWAG">
                            <!----header start---->
                            <h1 class="display-4 mb-4 mt-3 col-12" style="font-weight:bold; color:#D66A97;">
                                Swaggr
                            </h1><!----header end---->
                        
                            <!----chars start---->
                            <div class="col-12 row no-gutters px-2 justify-content-center align-items-center" style="height:230px; overflow:auto;">
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#634867; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://static.wikia.nocookie.net/disney/images/e/e2/Collector_-_Profile.jpeg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://static.wikia.nocookie.net/disney/images/e/e2/Collector_-_Profile.jpeg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://static.wikia.nocookie.net/disney/images/e/e2/Collector_-_Profile.jpeg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://static.wikia.nocookie.net/disney/images/e/e2/Collector_-_Profile.jpeg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#634867; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://pbs.twimg.com/media/FnCyhqgaEAE3jYg.jpg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://pbs.twimg.com/media/FnCyhqgaEAE3jYg.jpg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://pbs.twimg.com/media/FnCyhqgaEAE3jYg.jpg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                                <!----char start---->
                                <div class="col-lg-3 col-6 p-1">
                                    <div class="rounded-circle p-1" style="height:100px; width:100px; background-color:#363280; overflow:hidden;">
                                        <a href="#" data-toggle="tooltip" title="name">
                                            <img src="https://pbs.twimg.com/media/FnCyhqgaEAE3jYg.jpg" class="rounded-circle h-100 w-100" style="object-fit:cover; mix-blend-mode:luminosity;">
                                        </a>
                                    </div>
                                </div><!----char start---->
                            
                            </div><!----chars end---->
                            
                        </div><!----swag tab end---->
                        
                    </div><!----tabs end---->
                    
                    <!----nav start---->
                    <div class="col-12" style="position:relative; margin-top:-100px; z-index:5;">
                        <ul class="nav justify-content-center mb-4">
                            <!----warning button start---->
                            <li class="nav-item">
                                <a class="nav-link border-0 m-1 show" style="color:#363280; text-shadow:0 0 10px rgba(0,0,0,.6);" data-toggle="tab" href="#WARNING">
                                    <i class="fa fa-triangle-exclamation fa-fw fa-3x"></i>
                                </a>
                            </li><!----warning button end---->
                            
                            <!----about button start---->
                            <li class="nav-item">
                                <a class="nav-link border-0 m-1 show" style="color:#363280; text-shadow:0 0 10px rgba(0,0,0,.6);" data-toggle="tab" href="#ABOUT">
                                    <i class="fa fa-comet fa-fw fa-3x"></i>
                                </a>
                            </li><!----about button end---->
                            
                            <!----status button start---->
                            <li class="nav-item">
                                <a class="nav-link border-0 m-1 show" style="color:#634867; text-shadow:0 0 10px rgba(0,0,0,0.8);" data-toggle="tab" href="#STATUS">
                                    <i class="fa fa-hand-holding-skull fa-fw fa-3x"></i>
                                </a>
                            </li><!----status button end---->
                            
                            <!----swag button start---->
                            <li class="nav-item">
                                <a class="nav-link border-0 m-1 show" style="color:#634867; text-shadow:0 0 10px rgba(0,0,0,0.8);" data-toggle="tab" href="#SWAG">
                                    <i class="fa fa-solar-system fa-fw fa-3x"></i>
                                </a>
                            </li><!----swag button end---->
                        </ul>
                    </div><!----nav ed---->
                    
                </div><!----inner moon end---->
            </div>
        </div> <!----main content end---->
    </div><!----middle col end---->
    
    <!----right col start---->
    <div class="col-lg-3 hidden-md-down row no-gutters" style="z-index:0; margin-top:100px;">
        
        <!----moon start---->
        <div class="col-12 p-2 text-left">
            <div>
                <i class="fa fa-star fa-spin fa-spin-reverse fa-5x" style="color:#EDE0FD;"></i>
            </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 ml-auto" style="width:90px; height:90px;">
                    <a href="#" title="label" class="btn bg-transparent rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="color:#EDE0FD; opacity:.8;" data-toggle="tooltip"> 
                        <i class="fa fa-star-shooting fa-4x"></i>
                    </a>
                </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 ml-auto" style="width:90px; height:90px;">
                    <a href="#" title="label" class="btn bg-transparent rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="color:#EDE0FD; opacity:.6;" data-toggle="tooltip"> 
                        <i class="fa fa-star-shooting fa-3x"></i>
                    </a>
                </div>
        </div><!----moon end---->
        
        <!----moon start---->
        <div class="col-12 p-2">
            <div class="rounded-circle border-0 mr-auto" style="width:90px; height:90px;">
                <!----music player start---->
                <a href="#" class="my-auto rounded-circle p-0 btn rounded-circle border-0 h-100 w-100 justify-content-center align-items-center" style="text-decoration:none; height:100px; width:100px; color:#EDE0FD; opacity:.4">
                    <iframe style="position:absolute; height:20px; width:20px; opacity:.001;" src="https://www.youtube-nocookie.com/embed/gq2D1yn6J2M?controls=0" frameborder="0"></iframe>
                    <i class="fa fa-star-shooting fa-2x"></i>
                </a><!----music player end---->
            </div>
        </div><!----moon end---->
        
    </div><!----right col end---->
    
    <!----credit section start---->
    <div class="col-12 text-center text-muted" style="z-index:1;">
        <!----code credit start / don't remove---->
        <div class="col-12">
            <a href="https://toyhou.se/21168966.f2u-cllctrpii" class="tooltipster" title="code credit" style="color:#684D99;">
                <i class="fa fa-moon fa-fw" style="transform:rotate(110deg);"></i>
            </a>
        </div><!----code credit end---->
        
        <!----bg credit start---->
        <div class="col-12">
            <a href="https://giphy.com/stickers/nova-novasd-sd-c9J6sCu9HrChJUmzWs" class="tooltipster" title="background from Novasclub" style="color:#684D99;">
                <i class="fa fa-sun fa-fw" style="transform:rotate(110deg);"></i>
            </a>
        </div><!----bg credit end---->
    </div>
    
</div><!----code end---->