Profile
Profile Code: Bubble Pop
A profile code themed around bubbles, which makes use of transparency options! This code is fully custom-colored, mobile-friendly, and has quick replacement options using Ctrl + F! Check the tabs for the live preview, and give it a favorite if you like it!
<!--- * DISABLE WYSIWYG WHEN EDITING! CIRCLEJOURNEY ENCOURAGED * This code uses a mixture of hex codes and RGBA codes for transparency options! All custom colors, no bootstrap! Feel free to edit and Frankenstien! QUICK REPLACE (Use CTRL+F to find and replace!) COLORS Main Background: #AEDFDB Title Background, Header Background 1: #25D0BB Info Background 1: #2AB8B1 Main Box Background, Header Background 2: #C18CF0 Info Background 2: ##a774dd Design Note Popup: rgba(37, 208, 182 , 0.8) PALETTE Square 1: #548B7B Square 2: #67A67A Square 3: #6F5F99 Square 4: #5B5C70 Square 5: #A8BAC8 Square 6: #e7f1ff Square 7: #E8E4E4 Square 8: #e4b0ad IMAGES Bubble: https://f2.toyhou.se/file/f2-toyhou-se/characters/17404667?1710964202 Upper Info Box Image: https://f2.toyhou.se/file/f2-toyhou-se/watermarks/60940729_mFrnXQJk8.png Lower Info Box Image: https://f2.toyhou.se/file/f2-toyhou-se/watermarks/69819048_YzC3LVh6Q.png --> <div class="row mx-auto col-11 p-3 px-4 m-2" style=background-color:#AEDFDB;background-size:cover;border-radius:5px;> <!-- To replace the color with a background image, replace the line above with the following: <div class="row mx-auto col-11 p-3 px-4 m-2" style=background-image:url(IMAGE LINK);background-size:cover;border-radius:5px;> --> <!---LEFTSIDE ITEMS--> <div class="col-sm-9 col-12" style="float:left;"> <!---TITLE--> <div class="row px-3 pb-2"> <div class="card col-sm-8 p-2 mt-4 mx-auto" style="background-color:#25D0BB;color:white;border-radius:5px;font-size:25px;text-align:center;font-weight:bold;font-family:'ms gothic';border-color:white;border-radius:5px;">Ace Capacitor</div> <div class="col"></div> <div class="card col-sm p-2 mt-4 mx-auto" style="background-color:#25D0BB;color:white;border-radius:5px;font-size:25px;text-align:center;font-weight:bold;font-family:'ms gothic';border-color:white;border-radius:5px;">He/They</div> </div> <!---BIG INFOBOX--> <div class="card p-3" style="background-color:#C18CF0;border-radius:5px;"> <div class="mx-auto" style="color:white;font-style:italic;font-size:20px;height:40px;">"Quote goes here!"</div> <div class=row> <div class="m-3 pl-3 pt-3" style="background-color:rgba(255,255,255,0.85);color:black;border-radius:5px;height:300px;overflow-y:auto;width:480px;"> <!---Put infobox info below here!--> <p>Text goes here! This textbox scrolls!</p> <!---Put infobox info above here!--> </div> <div class="col-11" style="background-color:rgba(255,255,255,0.5);border-radius:250px;height:250px;width:250px;position:absolute;bottom:120px;right:15px;"></div> <div class="col-sm-3 col-8"> <!---IMAGES Adjust image layering by adjusting z-index (larger number: on top) Adjust image placement with top:10px, left:10px; (bigger number = further away from the top//left of the screen! Can use neg numbers!) Adjust angle with transform:rotate(350deg) (change degree number to change rotation angle) --> <!---UPPER IMAGE--> <div style="z-index:2;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/60940729_mFrnXQJk8.png');width:120px;height:170px;background-size:contain;background-repeat:no-repeat;border-radius:5px;position:relative;top:40px;left:0px;transform:rotate(350deg);"></div> <!---LOWER IMAGE--> <div style="z-index:3;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/69819048_YzC3LVh6Q.png');width:120px;height:170px;background-size:contain;background-repeat:no-repeat;border-radius:5px;position:relative;top:-10px;left:70px;transform:rotate(10deg);"></div> </div> </div> <div class="py-2 px-1 justify-content-around" style="background-color:rgba(255,255,255,0.5);border-radius:10px;"> <!---PALETTE BOXES Add more with the comment below! <div style="background-color:#000000;border-radius:12px;height:40px;width:40px;"></div> --> <div style="background-color:#548B7B;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#67A67A;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#6F5F99;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#5B5C70;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#A8BAC8;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#e7f1ff;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#E8E4E4;border-radius:12px;height:40px;width:40px;"></div> <div style="background-color:#e4b0ad;border-radius:12px;height:40px;width:40px;"></div> <!---Add more palette boxes above!--> </div> </div> </div> <!---RIGHTSIDE ITEMS--> <div class="col-sm-3 col-12"> <!---BUBBLES--> <div style="height:330px;position:relative;top:20px;"> <!---BUBBLE 1: IMAGE Square images work best!--> <div class="card p-2" style="z-index:3;background-color:blue;border-radius:150px;width:240px;height:240px;float:right;background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/17404667?1710964202);background-size:contain;background-position:center;background-repeat:no-repeat;border-width:10px;background-color:#AEDFD7;border-color:white;"> </div> <!---BUBBLE 2: NOTES Links to the popup! Feel free to swap the paintbrush with another fontawesome icon by replacing "fa-paintbrush"!--> <a class="btn" href=#notes data-toggle="collapse"> <div style="z-index:3;background-color:white;border-radius:120px;width:90px;height:90px;position:absolute;top:200px;right:12px;text-align:center;" data-toggle="tooltip" title="Design Notes"> <i style="position:absolute;bottom:45px;right:30px;color:#AEDFD7;" class="fa fa-2xl fa-paintbrush"></i> </div> </a> <!---BUBBLE 3: CREDIT Don't remove my credit!--> <a href="https://toyhou.se/RogueIdea"> <div data-toggle="tooltip" title="Code by RogueIdea" style="z-index:3;background-color:rgba(255,255,255,0.7);border-radius:120px;width:50px;height:50px;position:absolute;top:265px;right:100px;text-align:center;"> <i style="position:absolute;bottom:24px;right:14px;color:#AEDFD7;" class="fa fa-xl fa-microchip"></i> </div> </a> <div style="z-index:3;background-color:rgba(255,255,255,0.5);border-radius:100px;width:30px;height:30px;position:absolute;top:245px;left:60px;text-align:center;"> </div> </div> <!---POPUP --> <div id="notes" class="collapse p-2" style="z-index:3;background-color:rgba(37, 208, 182 , 0.8);font-size:12px;height:90px;width:180px;position:absolute;left:80px;top:80px;border-radius:5px;line-height:1.5;color:white;"> <!---Put design notes/trivia/etc below here! --> <center> <i class="fa fa-triangle-exclamation"></i> <p><b>Design Notes!</b></p> </center> <p>This box can be used to mention specific traits, notes, or trivia about the character!</p> <center> <p><i>Click the bubble to close this box!</i></p> </center> <!---Put design notes/trivia/etc above here! --> </div> <!---HEADER/INFO TABS--> <div class=row style="color:white;position:relative;top:10px;"> <div class="col-5" style="margin:0px;padding:0px;font-weight:bold;text-align:center;"> <div class="p-2" style="background-color:#25D0BB;border-top-left-radius:5px;border-bottom-left-radius:5px;"> Header </div> <div class="p-2" style="background-color:#C18CF0;border-top-left-radius:5px;border-bottom-left-radius:5px;"> Header </div> <div class="p-2" style="background-color:#25D0BB;border-top-left-radius:5px;border-bottom-left-radius:5px;"> Header </div> <div class="p-2" style="background-color:#C18CF0;border-top-left-radius:5px;border-bottom-left-radius:5px;"> Header </div> <div class="p-2" style="background-color:#25D0BB;border-top-left-radius:5px;border-bottom-left-radius:5px;"> Header </div> </div> <div class="col" style="margin:0px; padding: 0px;"> <div class="p-2" style="background-color:#2AB8B1;border-top-right-radius:5px;border-bottom-right-radius:5px;"> Info </div> <div class="p-2" style="background-color:#a774dd;border-top-right-radius:5px;border-bottom-right-radius:5px;"> Info </div> <div class="p-2" style="background-color:#2AB8B1;border-top-right-radius:5px;border-bottom-right-radius:5px;"> Info </div> <div class="p-2" style="background-color:#a774dd;border-top-right-radius:5px;border-bottom-right-radius:5px;"> Info </div> <div class="p-2" style="background-color:#2AB8B1;border-top-right-radius:5px;border-bottom-right-radius:5px;"> Info </div> </div> </div> <div style="background-color:rgba(255,255,255,0.5);border-radius:100px;width:40px;height:40px;position:relative;top:20px;left:230px;"></div> <div style="background-color:rgba(255,255,255,0.3);border-radius:100px;width:30px;height:30px;position:relative;top:-10px;left:190px;"></div> </div> <div class="col-11 mx-auto" style="background-color:rgba(37, 208, 182, 0.5);border-radius:6px;height:25px;"></div> </div>
Comments