templates
These are some templates I made using HTML and CSS. Feel free to use them! Copy the box of code to copy it to your clipboard. Please do not remove my attribution.
Basic User Profile
A basic user profile template with a username space, basic description, and top 3 characters.
Azura Zar
Name: Ray | Gender: awesomegender | Pronouns: he/him
view code
click to copy
<!--
Basic user profile template
Feel free to change the colors being used to better match your aesthetic.
Colors used:
#e3cadf = main background
white = main text and image border
#d6a0ff = purple outer border
#f6f6f6 = title text
#f8b4ed = character box
#ff99cc = pink character box border
#ec6f6f = blue character link
#df3838 = red credit icon
Replace "your_text_here" with your own text.
Replace "Character_name" with each character's name.
Replace the image links with your own image links.
Replace href="#" with the link to your character page.
Keep href="#" if you do not want the link to go anywhere yet.
-->
<center>
<!-- This is the main box for the whole template. -->
<div style="max-width: 600px; background: #e3cadf; color: white; border: 3px solid #d6a0ff; padding: 15px; font-family: monospace;">
<h1 style="font-size: 32px; font-weight: bold; letter-spacing: 5px; text-transform: uppercase; margin: 0; color: #f6f6f6;">
<!-- Put your username here --> Name
</h1>
<!-- Fill in your infomation here. -->
<p style="font-size: 14px; margin-top: 8px;">
<b>Name:</b> your_text_here | <b>Gender:</b> your_text_here | <b>Pronouns:</b> your_text_here
</p>
<hr>
<!-- This grid holds the three character boxes. -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px;">
<!-- Character one starts here. -->
<div style="background: #f8b4ed; border: 2px solid #ff99cc; padding: 8px;">
<!-- Put character one's image link after src=" -->
<img src="https://hanabihenki.github.io/resources/assets/HI7G.gif" alt="character image" style="width: 100%; height: 120px; object-fit: cover; border: 2px solid white;">
<!-- Put character one's name here. -->
<p style="margin: 8px 0 4px;"><b>Character_name</b></p>
<!-- Put character one's page link in href. Keep # if you do not have a link yet. -->
<a href="#" style="color: #ec6f6f;">view character</a>
</div>
<!-- Character one ends here. -->
<!-- Character two starts here. -->
<div style="background: #f8b4ed; border: 2px solid #ff99cc; padding: 8px;">
<!-- Put character two's image link in src. -->
<img src="https://hanabihenki.github.io/resources/assets/HI7G.gif" alt="character image" style="width: 100%; height: 120px; object-fit: cover; border: 2px solid white;">
<!-- Put character two's name here. -->
<p style="margin: 8px 0 4px;"><b>Character_name</b></p>
<!-- Put character two's page link in href. Keep # if you do not have a link yet. -->
<a href="#" style="color: #ec6f6f;">view character</a>
</div>
<!-- Character two ends here. -->
<!-- Character three starts here. -->
<div style="background: #f8b4ed; border: 2px solid #ff99cc; padding: 8px;">
<!-- Put character three's image link in src. -->
<img src="https://hanabihenki.github.io/resources/assets/HI7G.gif" alt="character image" style="width: 100%; height: 120px; object-fit: cover; border: 2px solid white;">
<!-- Put character three's name here. -->
<p style="margin: 8px 0 4px;"><b>Character_name</b></p>
<!-- Put character three's page link in href. Keep # if you do not have a link yet. -->
<a href="#" style="color: #ec6f6f;">view character</a>
</div>
<!-- Character three ends here. -->
</div>
<!-- Do not remove the credit below this line. -->
<div style="text-align: right; margin-top: 10px;">
<a href="https://hanabihenki.github.io/resources/index.html" style="color: #df3838;" title="Code by azurazar">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
</center>
Basic WIP Character
Simple HTML template to indicate a character's profile is a work in progress. You can customize text and background color and image in the background.
This character profile is still a wip!
view code
click to copy
<!--
Colors used, feel free to change the color to whatever you'd like.
background-color: #000033;
text-color: #ea151c;
-->
<div style="display: flex; justify-content: center;"> <div style="max-width: 600px; width: 100%;">
<!-- Replace URL_HERE with your image -->
<div style="background-image:
url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcmR2aDR0c2ozdjRoanU1aG93N2MzYXplamV4NHpqZWFlOThwdjlrMiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Z91qpcTGqUTcrlmWwI/giphy.gif);
background-size: cover;background-position: center;background-color: #000033;padding: 10px;border: 0;">
<!-- Change the padding number from 30px to a higher number if you want the image to be bigger. -->
<div style="margin: 0 auto; max-width: 90%; padding: 30px;">
<div style="padding: 15px; background-color: #000033; border: 0;">
<div style="text-align: center; text-transform: uppercase; color: #ea151c;margin-bottom: 8px;margin-top: 4px;font-size: 1.25em; letter-spacing: 1px;">
<!-- Feel free to change the text below to whatevr you want. -->
This character profile is still a wip!
</div> </div> </div></div>
<!-- Don't delete or change anything below this line-->
<div style="text-align: right; margin-top: 10px;">
<a href="https://hanabihenki.github.io/resources/index.html" style="color: #df3838; text-decoration: none;" title="Code by azurazar">
<i class="fa-solid fa-code"></i>
</a> </div> </div> </div>
Simple character info
A small character information template with a picture, name, pronouns, sexuality, age, and species.
Dingle T. Frisk
Pronouns: they/them
Sexuality: bisexual
Age: 192,321
Species: Unicorn
view code
click to copy
<!-- This is where the character profile starts -->
<!-- You're free to modify the colors and the pixel values to change the size of the box. Decreasing the padding will make the box smaller and text closer together. -->
<!-- This template uses 5 main colors:
background: #101336;
main text: white;
border: #d6a0ff;
title text: #ffcc66;
credit icon: #df3838;
-->
<div style="
max-width: 320px;
background: #101336;
color: white;
border: 3px solid #d6a0ff;
padding: 12px;
font-family: monospace;">
<!-- Insert your character image link below. -->
<img src="your_link_here" alt="character image"
style="width: 100px; height: 100px; object-fit: cover; border: 2px solid white; float: left; margin-right: 12px;">
<h2 style="margin-top: 0; color: #ffcc66;">your_text_here</h2>
<hr>
<br><br>
<p><b>Pronouns:</b> your_text_here</p>
<p><b>Sexuality:</b> your_text_here</p>
<p><b>Age:</b> your_text_here</p>
<p><b>Species:</b> your_text_here</p>
<div style="clear: both;"></div>
<!-- Do not remove anything below this line -->
<div style="text-align: right;">
<a href="https://hanabihenki.github.io/resources/index.html" style="color: #df3838;" title="Code by azurazar">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
<!-- This is where the character profile ends -->
Mini character card
A mini profile card that can be used for the user or character. It includes a horizontally long image, name, quote and a listed section for more infomation.
John Quincy Adams
"I like America or whatever the guy said."
Pronouns: he/him/his
Job: Former U.S. President
Likes: Apples, ice cream
view code
click to copy
<!-- This is where the mini character card starts -->
<!-- You're free to modify the colors and the pixel values to change the size of the box. Decreasing the padding will make the box smaller and text closer together. -->
<!-- This template uses 7 main colors:
background: #120f2f;
main text: #fff7d6;
border: #ff99cc;
image border: #ffcc66;
title text: #ffcc66;
quote text: #99ddff;
inner dotted border: #ffffff;
-->
<div style="
max-width: 340px;
background: #120f2f;
color: #fff7d6;
border: 3px double #ff99cc;
padding: 10px;
font-family: monospace;">
<!-- Insert your character image link below. This image is wide and short. -->
<img src="your_link_here" alt="character image"
style="width: 100%; height: 120px; object-fit: cover; border: 2px solid #ffcc66; background: black;">
<h2 style="color: #ffcc66; text-align: center; margin: 8px 0 4px;">
your_text_here
</h2>
<!-- Insert a quote or short description below. -->
<p style="text-align: center; color: #99ddff; margin: 0 0 10px;">
"your_text_here"
</p>
<!-- Replace the labels and text below with your own character information. -->
<div style="border: 2px dotted #ffffff; padding: 8px;">
<p><b>Pronouns:</b> your_text_here</p>
<p><b>Role:</b> your_text_here</p>
<p><b>Likes:</b> your_text_here</p>
</div>
<!-- Do not remove anything below this line -->
<div style="text-align: right;">
<a href="https://hanabihenki.github.io/resources/index.html" style="color: #df3838;" title="Code by azurazar">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
<!-- This is where the mini character card ends -->
Character notes box
A simple character notes template with a small image, basic info, and a notes section.
Firestar
Age: 42
Species: Feline
Clan: Starclan
About:
Firestar was a great leader for Thunderclan. His arrival was foretold in a prophecy.
view code
click to copy
<!-- This is where the character notes box starts -->
<!-- You're free to modify the colors and the pixel values to change the size of the box. Decreasing the padding will make the box smaller and text closer together. -->
<!-- This template uses 7 main colors:
background: #0b1040;
main text: white;
main border: #99ddff;
title text: #ffcc66;
image border: white;
notes box background: #18245c;
notes box dotted border: #ffcc66;
-->
<div style="
max-width: 360px;
background: #0b1040;
color: white;
border: 3px solid #99ddff;
padding: 12px;
font-family: monospace;">
<div style="display: flex; gap: 10px;">
<!-- Insert your character image link below. This image is a small square icon. -->
<img src="your_link_here" alt="character image"
style="width: 90px; height: 90px; object-fit: cover; border: 2px solid white; background: black;">
<!-- Fill in the character name and basic info below. -->
<div style="width: 100%;">
<h2 style="color: #ffcc66; margin: 0;">your_text_here</h2>
<p style="margin: 4px 0;"><b>Age:</b> your_text_here</p>
<p style="margin: 4px 0;"><b>Species:</b> your_text_here</p>
<p style="margin: 4px 0;"><b>Theme:</b> your_text_here</p>
</div>
</div>
<hr>
<!-- Fill in your own infomation below. -->
<div style="background: #18245c; border: 2px dotted #ffcc66; padding: 8px;">
<b>About:</b>
<p style="margin-bottom: 0;">
your_text_here
</p>
</div>
<!-- Do not remove anything below this line -->
<div style="text-align: right;">
<a href="https://hanabihenki.github.io/resources/index.html" style="color: #df3838;" title="Code by azurazar">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
<!-- This is where the character notes box ends -->
