isopods | [05] info; id card profile

👤 lieutenant columbo

"Just one more thing...."

The Detective

Height

5'6"

Weight

165 lbs

Age

Species

Human

Occupation

LAPD Officer

Likes

Cigars, his wife, dogs

Dislikes

Heights, hospitals, blood

Trivia

Columbo's favorite food is chili with a lot of crackers in it.

code @

isopods

ID Card / Profile Template

A simple, DR-inspired profile/info template. Designed for murdergame, specifically, but use it for whatever you want. The info part of the card automatically adds a scrollbar if it gets too long.

INSTRUCTIONS:

→ The image can be any size, just make sure it's bigger than 140px by 200px. It will automatically resize and crop to fit the element.

→ To change the color, CTRL + F #fcc23c and replace with your desired color.

→ Feel free to swap around and add fields as you like.

→ Columbo picture courtesy of

holo-tape

CODE:

<raw-code>
<center>
<!-- START OF CHARACTER --!>

<!-- CHARACTER NAME --!>

👤 Character Name

</div>

<div style="text-align: center; padding: 5px; color: white;">"Quote Here"</div>

<!--INFO START--!>
<div style="flex: 70%; overflow: auto; scrollbar-width: thin; color: white">

Character Title

</div>

<!--HEIGHT--!>
<div style="margin-bottom: 2px;">
<div style="background: #fcc23c; width: 80px; display: inline-block; color: black; padding: 3px; text-align: center;">Height</div>
<div style="width: 60px; display: inline-block; padding: 3px;">

100 cm

</div>

<!--WEIGHT--!>
<div style="background: #fcc23c; width: 60px; display: inline-block; color: black; padding: 3px; text-align: center;">Weight</div>
<div style="width: 60px; display: inline-block; padding: 3px;">

75 kg

</div>
</div>

<!--AGE--!>
<div style="margin-bottom: 2px;">
<div style="background: #fcc23c; width: 80px; display: inline-block; color: black; padding: 3px; text-align: center;">Age</div>
<div style="width: 60px; display: inline-block; padding: 3px;">

</div>

<!--SPECIES--!>
<div style="background: #fcc23c; width: 60px; display: inline-block; color: black; padding: 3px; text-align: center;">Species</div>
<div style="width: 60px; display: inline-block; padding: 3px;">

Human

</div>
</div>

<!--OCCUPATION--!>
<div style="margin-bottom: 2px; display: flex;">
<div style="background: #fcc23c; min-width: 80px; max-width: 80px; color: black; padding: 3px; text-align: center;">Occupation</div>
<div style="padding: 3px; margin-left: 5px;">

Unemployed

</div>
</div>

<!--LIKES--!>
<div style="margin-bottom: 2px; display: flex;">
<div style="background: #fcc23c; min-width: 80px; max-width: 80px; color: black; padding: 3px; text-align: center;">Likes</div>
<div style="padding: 3px; margin-left: 5px;">

Various Things

</div>
</div>

<!--DISLIKES--!>
<div style="margin-bottom: 2px; display: flex;">
<div style="background: #fcc23c; min-width: 80px; max-width: 80px; color: black; padding: 3px; text-align: center;">Dislikes</div>
<div style="padding: 3px; margin-left: 5px;">

Stuff

</div>
</div>

<!--TRIVIA--!>
<div style="display: flex;">
<div style="background: #fcc23c; min-width: 80px; max-width: 80px; color: black; padding: 3px; text-align: center; border-radius: 0px 0px 0px 10px;">Trivia</div>
<div style="padding: 3px; margin-left: 5px;">

something something something something something something something something something something something something

</div>
</div>

</div>
<!-- INFO END --!>

<!--PICTURE HERE--!>
<div style="flex: 30%; height: 100%;

background: url('IMAGE URL HERE');

background-size: cover; background-position: center; border-radius: 0px 0px 10px 0px;"></div>

</div>

<!---CREDIT, DO NOT DELETE--!>
<div style="float: right; font-family: 'MS Gothic'; font-size: 10px;"><a href="https://isopods.dreamwidth.org/4204.html">code</a> @ <user name=isopods></div>
</center></raw-code>
<!-- END OF CHARACTER --!>