isopods | [08] - info; employee badge (Reply)

federal bureau of coherence

THE DETECTIVE

NAME: NICK VERGHESE

PRONOUNS: HE/HIM

HEIGHT: 5'-06"

EYES: BROWN

DOB: 1/2/199X

ID: E14-3923489723

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Hendrerit dolor magna eget est lorem. Nascetur ridiculus mus mauris vitae. A arcu cursus vitae congue mauris rhoncus. Nec nam aliquam sem et tortor consequat id porta.

< isopods >

EMPLOYEE BADGE

A simple info page for a character.
Feel free to modify for your own needs!

INSTRUCTIONS:

→ The image can be any size, so long as it's square. If you want to play around with image sizes, the width is currently set to 200px.

→ This template uses variables for colors! Say goodbye to copying and pasting hex codes a million times over. To change the border/background color, just find --borderColor or --backgroundColor in the first div tag and put your new hex code. All of the appropriate elements will change color, accordingly!

→ Feel free to modify the fields as you see fit!

→ Mobile-friendly!

→ Need help or have any other questions? Let me know in the comments below!

COLOR PRESETS:

→ borderColor: #ffe36a

→ backgroundColor: #343a40

CODE:

<raw-code>
<center>

<div style="
  display: inline-block;
  margin: auto;
  font-family: 'MS Gothic'; 
  --borderColor: #ffe36a;
  --backgroundColor: #343a40;
  background: var(--backgroundColor);
  box-shadow: 8px 8px rgba(0, 0, 0, 0.5);">

<div style="display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; align-items: flex-start;">

<div style="padding-bottom: 10px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: var(--borderColor); min-width: 400px; min-height: 50px;">

<img src="IMAGE URL HERE" style="width: 35px; margin: 10px;">

EMPLOYER/ORGANIZATION NAME
</div>
</div>

<div style="
margin: 10px 10px 0px 10px;
color: white;
border: 2px dotted var(--borderColor);">

<div style="
font-size: 24px;
font-weight: 800;
padding: 5px;
border-bottom: 2px dotted var(--borderColor);">
TITLE OR SOMETHING
</div>

<div style="width: 50%;">
<B>PRONOUNS:</b> PRONOUNS
</div>
</div>

<div style="width: 50%;">
<B>EYES:</b> EYE COLOR
</div>
</div>

<div style="
display: flex;
flex-direction: row; 
justify-content: space-evenly;
font-size: 14px;
padding: 5px;">
<div style="width: 50%; border-right: 2px dotted var(--borderColor);">
<B>DOB:</b> DATE OF BIRTH
</div>

</div>

</div>

<div style="
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: var(--borderColor);">

</div>

</div>

Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Consequat ac felis donec et odio pellentesque diam volutpat commodo. Hendrerit dolor magna eget est lorem. Nascetur ridiculus mus mauris vitae. A arcu cursus vitae congue mauris rhoncus. Nec nam aliquam sem et tortor consequat id porta.

</div>

<span style="float: right; padding: 5px; margin-right: 10px; color: white; font-size: 10px;"><a style="text-decoration: none; color: var(--borderColor)" href="https://isopods.dreamwidth.org/7577.html">< isopods ></a>
        </span>

</div>

</center>
</raw-code>

[08] - info; employee badge

Post a comment in response: