I'm very inexperienced in coding, and your code is actually the first code I've ever filled in and tweaked bits of!
Everything is perfect for me, except, for the section where you can feature your characters and friends !
So, let's say that if I wanted to show off both my characters, my friends, and some cool design creators but I want them to show up in three separate sections
Basically, I'd like a title saying "Featured Characters" ( or anything of the sort) above the divider and a row to add the small profiles, and I do hope you can only add one or two there as well
And then another section at the bottom, just another title saying "Friends" above a divider and another row where I can add users (I currently only have one-)
Same goes for the last section for cool creators !
I hope this makes sense and not too complicated :,D
ok i added headers you can check yourself because the format gets screwed in comments if i try to show you a preview xD hopefully this is what you meant tho!
Sorry! I'll try to explain it more simply ðŸ˜
I'm very inexperienced in coding, and your code is actually the first code I've ever filled in and tweaked bits of!
Everything is perfect for me, except, for the section where you can feature your characters and friends !
So, let's say that if I wanted to show off both my characters, my friends, and some cool design creators but I want them to show up in three separate sections Basically, I'd like a title saying "Featured Characters" ( or anything of the sort) above the divider and a row to add the small profiles, and I do hope you can only add one or two there as well And then another section at the bottom, just another title saying "Friends" above a divider and another row where I can add users (I currently only have one-) Same goes for the last section for cool creators !
I hope this makes sense and not too complicated :,D
1 year, 4 months ago
OH! ok I understand now! I'll try to whip something up for ya tomorrow!
1 year, 4 months ago
Thank you!!! 💞 Take your time ! <3
1 year, 4 months ago
<!--- My first ever profile code ;0; I'm still a beginner though, so there' bound to be mistakes haha- but feel free to ask me questions :D - Put links URLs on parts where it says "LINK" - This version of the code uses custom colors, use find & replace to change them into your desired color pallet ---> <!--- background [you can just remove this part if you want to] ---> <div style="background-image:url('https://e1.pxfuel.com/desktop-wallpaper/733/655/desktop-wallpaper-cottagecore-aesthetic-posted-by-sarah-walker-cottagecore-computer.jpg');background-size:cover;background-repeat:no-repeat;background-position:top;border-radius:15px;background-attachment:fixed;"> <div class="container col-lg-10 py-5"> <div class="row no-gutters my-4"> <div class="col-lg-3 p-1"> <div class="bg-faded p-3 text-center" style="background-color:#DFD8C6;height:395px;border-radius:8px;overflow-y:auto;box-shadow:0 0 5px #DFD8C6;"> <img class="mx-auto mt-1 mb-2" src="https://media.discordapp.net/attachments/860418226995200014/1039555359725060136/Untitled1102.png" style="height:130px;width:130px;border-radius:8px;" alt="Untitled1102.png"> <p class="mb-0" style="font-size:20px;"><b style="color:#655244;">Charm</b></p> <i style="color:#655244; font-size: 12px;">Your local amateur feral artist</i> <div class="card border-0" style="height:1px;margin:10px;background-color:#718F6D;"></div> <p class="mb-0" style="color:#443427; font-size:13px">They/them • Minor • Ace</p> <div class="col-12 row no-gutters px-2 mt-3" style="font-size:13px;color:#655244;"> <div class="col-auto pt-1"><i> Requests </i></div> <div class="col mt-2 p-1"><div class="card border-0 m-1" style="height:1px;background-color:#718F6D;"></div></div> <div class="col-auto py-1"> closed </div> </div> <div class="col-12 row no-gutters px-2" style="font-size:13px;color:#655244;"> <div class="col-auto pt-1"><i> Art trades </i></div> <div class="col mt-2 p-1"><div class="card border-0 m-1" style="height:1px;background-color:#718F6D;"></div></div> <div class="col-auto py-1"> closed </div> </div> <div class="col-12 row no-gutters px-2" style="font-size:13px;color:#655244;"> <div class="col-auto pt-1"><i> Design trades </i></div> <div class="col mt-2 p-1"><div class="card border-0 m-1" style="height:1px;background-color:#718F6D;"></div></div> <div class="col-auto py-1"> closed </div> </div> <div class="col-12 row no-gutters px-2" style="font-size:13px;color:#655244;"> <div class="col-auto pt-1"><i> Commissions </i></div> <div class="col mt-2 p-1"><div class="card border-0 m-1" style="height:1px;background-color:#718F6D;"></div></div> <div class="col-auto py-1"> closed </div> </div> </div> </div> <div class="col-lg-8 p-1"> <div class="bg-faded pb-3 px-3 text-center" style="background-color:#e6e0d3;height:395px;border-radius:8px;overflow-y:auto;box-shadow:0 0 5px #e6e0d3;"> <div class="card py-3 border-right-0 border-left-0 border-top-0 sticky-top" style="position:sticky;background-color:#e6e0d3;border-color:#718F6D;"> <ul class="nav nav-fill m-n2"> <li class="nav-item m-2" style="background:#718F6D;border-radius:8px;"> <a href="#ONE2" data-toggle="tab" class="nav-link active btn btn-outline-secondary border-0" style="border-radius:8px;color:#FFFFFF;"> <i class="fas fa-user-circle"></i> </a> </li> <li class="nav-item m-2" style="background:#718F6D;border-radius:8px;"> <a href="#TWO2" data-toggle="tab" class="nav-link btn btn-outline-secondary border-0" style="border-radius:8px;color:#FFFFFF;"> <i class="fas fa-paintbrush"></i> </a> </li> <li class="nav-item m-2" style="background:#718F6D;border-radius:8px;"> <a href="#THREE2" data-toggle="tab" class="nav-link btn btn-outline-secondary border-0" style="border-radius:8px;color:#FFFFFF;"> <i class="fas fa-user-friends"></i> </a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade active show" id="ONE2"> <div class="col-12 text-center mt-1 p-2 pb-n5"> <span style="font-size:24px;font-weight:bold;color:#443427;">Welcome to my Toyhouse<i class="fas fa-stars fa-fw ml-2" style="color:#718F6D;"></i></span> <p style="color:#655244;"><br>Ello! I'm BadLuckCharm, known as Charm for short :D</p> <p style="color:#655244;">I'm here to store my characters and get proper credit for my art and designs !!</p> <p style="color:#655244;">I'm more active on discord, so commissions and art trades will have to go there when they're open!</p> <p style="color:#655244;">I like to keep a small amount of ocs so that I can give enough love to all of them. But I'm never motivated to draw any of them anyways, pfft. All my ocs are ferals, mostly felines because I prefer cats and also because I still can't figure out how to draw canine snouts ! But overall just a cat enjoyer because Warrior cats changed my life, haha</p> </div> </div> <div class="tab-pane fade" id="TWO2"> <div class="col-12 row no-gutters mt-1 pt-2 mb-n5"> <div class="order-1 col-lg-8 p-1"> <p class="mb-0 text-uppercase" style="font-size:20px;font-weight:bold;color:#718F6D;">you may <i class="fad fa-check-square mr-1" style="color:#718F6D;"></i></p> <ul style="color:#718F6D;"> <li>Draw my characters</li> <li>Offer for my characters except for my mains</li> </ul> <div class="card border-0" style="height:1px;margin:10px;background-color:#e7d0f0;"></div> <p class="text-uppercase" style="font-size:20px;font-weight:bold;color:#872733;">You may not <i class="fad fa-times-square mr-1" style="color:#872733;"></i></p> <ul style="color:#872733;"> <li>Claim my art and/or designs as your own</li> <li>Resell my designs without extra art of them</li> <li>Advertise on my wall</li> </ul> </div> <div class="col-4 pr-2 tooltipster hidden-md-down my-2" title="" style="height:240px;" data-original-title="credit to artist"> <img src="https://cdn.shopify.com/s/files/1/0586/4266/1551/products/tiny-amanita-mushroom-figurine-aesthetic-room-cottagecore-roomtery1.jpg?v=1632934942" style="object-fit:cover;height:275px;border-radius:10px;" alt="tiny-amanita-mushroom-figurine-aesthetic"> </div> </div> </div> <div class="tab-pane fade" id="THREE2"> <div class="row no-gutters container justify-content-center"> <!--- section1 ---> <div class="mt-2"> <p style="color:#718F6D;">Header 1</p> <div class="card border-0 mb-3 mt-2" style="height:1px;margin:10px;background-color:#718F6D;"></div> <!--- profile 1 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- profile 2 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- if you wanna add more profiles here, you can copy & paste one of the profiles below ---> </div> <!--- section2 ---> <div class="mt-2"> <p style="color:#718F6D;">Header 2</p> <div class="card border-0 mb-3 mt-2" style="height:1px;margin:10px;background-color:#718F6D;"></div> <!--- profile 1 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- profile 2 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- if you wanna add more profiles here, you can copy & paste one of the profiles below ---> </div> <!--- section3 ---> <div class="mt-2"> <p style="color:#718F6D;">Header 3</p> <div class="card border-0 mb-3 mt-2" style="height:1px;margin:10px;background-color:#718F6D;"></div> <!--- profile 1 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- profile 2 ---> <div class="d-inline-flex card border-1 p-1 m-1" style="width:130px;height:130px;border-radius:8px;background-color:#f5f5f5;"> <div class="card border-0 h-100" style="background-size:cover;background-position:center;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34089512_zqO1UV0V2xlUdD5.png');"> <a class="btn btn-outline-secondary border-0 btn-block h-100 tooltipster" title="" href="LINK" target="_blank" data-original-title="Name"></a> </div> </div> <!--- if you wanna add more profiles here, you can copy & paste one of the profiles below ---> </div> </div> </div> </div> </div> </div> <div class="col-lg-1 no-gutters p-1"> <div class="bg-faded p-2 justify-content-center" style="background-color:#DFD8C6;max-height:395px;border-radius:8px;box-shadow:0 0 5px #DFD8C6;overflow:hidden;"> <div class="row no-gutters"> <a href="https://toyhou.se/~r?q=https%3A%2F%2Fwww.deviantart.com%2Fbadluckcharm22" target="_blank"> <span class="btn btn-outline-secondary px-0 border-0 mt-lg-1 tooltipster" title="" style="border-radius:8px;height:45px;width:45px;" data-original-title="Deviantart"> <i class="fab fa-2x fa-deviantart" style="color:#718F6D;"></i> </span> </a> <a href="https://toyhou.se/~r?q=https%3A%2F%2Fartfight.net%2F~UnluckyCharm" target="_blank"> <span class="btn btn-outline-secondary px-0 border-0 tooltipster" title="" style="border-radius:8px;height:45px;width:45px;" data-original-title="Artfight"> <i class="fa-solid fa-2x fa-paintbrush-pencil" style="color:#718F6D;"></i> </span> </a> <span class="btn btn-outline-secondary px-0 border-0 tooltipster" title="" style="border-radius:8px;height:45px;width:45px;" data-original-title="BadLuckCharm#8208"> <i class="fab fa-2x fa-discord" style="color:#718F6D;"></i> </span> <hr class="hidden-lg-down" style="margin:30px 0px;"> <a href="https://toyhou.se/16987356.-f2u-basic-profile-code" target="_blank"> <span class="btn btn-outline-secondary px-0 border-0 tooltipster" title="" style="border-radius:8px;height:45px;width:45px;" data-original-title="Code by Vsuvi"> <i class="far fa-2x fa-code" style="color:#718F6D;"></i> </span> </a> <hr class="hidden-md-down" style="margin:200px 0px;"> </div> </div> </div> </div> </div> </div>1 year, 4 months ago Edited 3:37 am
ok i added headers you can check yourself because the format gets screwed in comments if i try to show you a preview xD
hopefully this is what you meant tho!
1 year, 4 months ago