Using the code! Absolutely LOVE how it looks!! ^^
Oh, I love your codes! Quick question. I don't use deviant art, twitch or youtube, can I replace the little icons for other sites icons? Like the Furaffinity icon instead of the youtube icon? How would I do that?
Normally you can go search the desired icon in https://fontawesome.com/icons, but since furaffinity is not on there, you can just use a paw in it's place! Just change
<i class="fab fa-2x fa-youtube"></i></a></span>
into
<i class="fas fa-2x fa-paw"></i></a></span>
hope that helps!
Love this code! Although I am having an issue with the social media stuff, when I put specifically a link that leads to my tiktok profile, it just scrambles up that section with text 😭
can you send a screenshot how it scrambles the text? I'd be more than happy to help!
Hi! Sorry for the late reply :,D I'm guessing that there might be something missing in the code, like an end tag (ex. ) or a quotation mark in the code! You can double check it yourself but can you also send the full code text here? Just to make sure I can fix exactly what's wrong since it's easier for me to say what the problem is when I see the code itself!
Also, for your next reply, can you ping my main account Vsuvi pls? So I can have a faster reply to youI I unfortunately don't check this account very often T^T
Hi there! I'm having trouble with the Discord Tag section of the code. It won't let me edit the text. Can you help?
this code is so nice and i wanna use it on my profile, but i'm having a few problems
1. the icon over the name isn't showing up for me for some reason? all i can see is the link and some of the code
2. the about me, the can and can't do, and the friends/characters show the same thing, what i typed for the about me
3. the links and the folders aren't showing up
i have no experience in coding like this so i don't know what i did to break some things but i need some help fixing them
Hello there! Extremely sorry for the late response, I don't check this account very often.
That those sound like a handful of issues :0. Can you send me the code you have so far? It's easier to see what went wrong in the edited code because I tested the code just now and it worked alright. It's fine if you don't need help anymore though, seeing this is a 4 month old comment 😅
i love getting rick rolled while searching for codes mmmm ily though and am using this for my profile its perfect :)
Hi! I used this code and it's truly amazing <3
This is my first time using a code though, and I'm making a lot of edits, I hope you don't mind-
But I'm struggling on the feature part, I don't have many characters or friends I want to feature, so I'd like to add both and hopefully a third section to show off cool people's accounts too ! I'm having trouble making the sections, and the third link column keeps getting into the second column whenever I try to tweak it with my lack of coding knowledge, could you possibly help me? :,D
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
<!---
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>
hey!!! im act using ur code rn & its so cute!! i love ittt!! one issue thoooo, how do i link my discord acc to the discord icon thing?
This feels simple and neat enough for my tiny easily overwhelmed brain, thank you for making/sharing this!! Def will be using it
* HI THIS IS REALLY NICE CODE!! its very easy and nice to look at ^__^ just wanted to let know i used it :3 (and i dont have any characters posted yet thats why folders arent working yet dw)
This user is not visible to guests.
Hi! You can replace "LINK" with the folder url you wanna put in there!
<span class="nav-item m-2 bg-primary" style="border-radius: 8px; height:34px;">
<a href="LINK" class="nav-link btn btn-outline-secondary border-0" style="font-weight:500;
color:white; letter-spacing:0.5px; border-radius: 6px; height:34px;">Folder Name</a>
</span>
And then for the background images, you'll need the image url to replace the current image url in there! I'm not sure if that's what you're asking about, but please tell me if you're confused about something else
<div style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/34089533_GLNI7cdYOd33n7B.png);
background-size: cover; background-repeat: no-repeat; background-position: top; border-radius:15px;
background-attachment:fixed;">
THIS IS SO CUTEE, I was just wondering if you know how to change the hover color for buttons????? if not thats fine, still an amazing code!! :D
sadly the color can't really be freely customized using rgb or hex codes, only a set of colors can be chosen from!
in the code below you can replace "danger" into other bootstrap colors, such as secondary, primary, info, warning, danger, light, and others [you can see here how the bootstrap colors look :D]
<a href="LINK" class="nav-link btn btn-outline-danger border-0" style="font-weight:500;
color:white; letter-spacing:0.5px; border-radius: 6px; height:34px;">
buuuut! there's another way for more freedom from this colors, I suggest looking in here!
love the code!! just wanna point out that the art fight icon keeps deleting itself..? and every time I try to add it back it just. vanishes. same with trying to update any icons I don't need and want to replace ^^'
edit!: I figured it out! I dont know much about coding but the icon for artfight didn't have "fab" before it and i didnt realize i had to add those in for new ones qwq
[F2U] Basic Profile Code's Comments