Added a second user profile template!
HTML Character and User profiles
I started to play around a bit with HTML and bootstrap to get a bit more knowledge on how things work and made a few simple templates. So I thought why not offer them up on the forum? Feel free to use the coding though please keep the credits in, they might be simple but n00b me did put effort into finding things out and making it work.
I will add more to the list once I code more, who knows what else I gonna try out. Link to the coding is in the Template itself!
EDIT I'm not really updating any of these anymore but feel free to use them if you want. I just did them in the past when the ntire coding of TH changed to understand it a bit better. But there's a lot of cool coders out there anyway so it's okay, I think.
Rules
- You are allowed to change things but please keep the credits in. I coded this all myself and put work into the templates.
- You CAN change the credits to another place, but keep them visible.
- Do not sell or distribute the coding as your own in any way. If you want to sell a template then please code it yourself.
- Frankensteining is allowed as long as you keep my credits in and if whoever elses code you want to use is fine with frankensteining as well!
- You can ask me for help though I am by far no professional.
- Do NOT heavily reference my more detailed templates. I can't help things looking similar at some point with my more simple ones but as I progress on I will do more complicated ones so please code your things 100% yourself instead.
- I am always learning so it's alright if you might have found a bug or fuck-off of mine and know how to fix it! You can message me if you want.
Character profiles
User profiles
Ahh I love these HTMLs SO MUCH! I'll be using HTML #3 for some of my OCs! Thank you for making these free to use! <3
Greengrass @vitalitas DragonPriestess You're welcome! I'm glad you enjoy the templates I made!
You just change the entire row to the last one. its easily divided by <--!new section--> so you just need to switch the second to last one to a copy of the last one and make sure to not copy too many or too less of the </div>s!
You just need to switch all of this
<div class="col-6">
<div class="ui-accordion card h-100" style="background: url('https://s6.postimg.org/3o6sb2ab5/tumblr_m8pzhr_Cqms1qjm62do1_500.png') repeat; border: 1px solid #cba3dd;">
<h2 class="card-inverse card-header " style="background: #cba3dd; border: 1px solid #cba3dd;">
<i class="fa fa-heartbeat" aria-hidden="true"></i> Folders
</h2>
<div class="ui-accordion-content card-block" style="height:720px;">
<table class="border-0 mx-auto" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<span class="badge badge-danger" style="font-size: 12px; background: #cba3dd;">Foldername</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
<tr>
<td>
<span class="badge badge-danger" style="font-size: 12px; background: #cba3dd;">Foldername</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
<tr>
<td>
<span class="badge badge-danger" style="font-size: 12px; background: #cba3dd;">Foldername</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
<tr>
<td>
<span class="badge badge-danger" style="font-size: 12px; background: #cba3dd;">Foldername</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
<tr>
<td>
<span class="badge badge-danger" style="font-size: 12px; background: #cba3dd;">Foldername</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
to this
<div class="col-6">
<div class="ui-accordion card card-outline-danger h-100" style="background: #cba3dd; border: 1px solid #cba3dd;">
<div class="ui-accordion-content card-block" style="height:400px;">
<div class="row mb-3">
<div class="col">
<div class="ui-accordion card h-100" style="background: url('https://s6.postimg.org/3o6sb2ab5/tumblr_m8pzhr_Cqms1qjm62do1_500.png') repeat; border: 1px solid #cba3dd;">
<h2 class="card-inverse card-header " style="background: #cba3dd; border: 1px solid #cba3dd;">
<i class="fa fa-users" aria-hidden="true"></i>
Friends
</h2>
<div class="ui-accordion-content card-block " style="height:300px;">
<table class="w-100 border-0">
<tr>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
</tr>
<tr>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
</tr>
<tr>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
<td class="text-center w-25"><a href="URL"><img src="https://s6.postimg.org/qg0zooii9/sam2.png" class="img-thumbnail"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="ui-accordion card h-100" style="background: url('https://s6.postimg.org/3o6sb2ab5/tumblr_m8pzhr_Cqms1qjm62do1_500.png') repeat; border: 1px solid #cba3dd;">
<h2 class="card-inverse card-header " style="background: #cba3dd; border: 1px solid #cba3dd;">
<i class="fa fa-users" aria-hidden="true"></i>
Disclaimer
</h2>
<div class="ui-accordion-content card-block " style="height:300px;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
Added a new User profile!
Also, headsup, but PLEASE keep my credits in the coding, even if you change a few things. Despite them being simple I still coded them myself and put work into them.
@Vitalitas I know my templates are rather simple, but it would mean a lot to me if you'd keep the credits in as I put work into coding it ;w;
WeltDerAthanasie omg... i didn't realize the code wasn't there... holy shit oh my god i am so sorry. I must have done something wrong in the code when trying to edit something b/c i know i accidentally deleted half of it sometime... I will put it back in immediately!
so i acctually fucked up the code and idk where to put the sig. like, it's still there at the bottom, but i dont know how many < div >'s i need, so im going to try again and use #4! hopefully it doesnt cut out when i edit all the bg pictures and stuff ;w;