RP Resources

transilience

rpresources

Semigloss

NAME: Character Middle McName

A.K.A.: Char, My Character, Doofus

AGE: ∞

GENDER: Other

OCCUPATION: Muse

ORIENTATION: North by northeast

RESIDENCE: Bikini Atoll

STATUS: Unknown

HOUSE: Crumplebottom

MOTTO: Always wear underwear

Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a sodales nulla. Donec ullamcorper ante massa, non euismod tortor viverra non. Sed porta, ligula at volutpat facilisis, ipsum orci faucibus leo, ullamcorper fermentum leo ante eget velit. Aenean ut leo elit. Donec eu ornare ex, nec vestibulum nisl. In turpis tellus, iaculis at consectetur nec, pulvinar quis mauris. Integer nisi ligula, pulvinar sit amet ex quis, pellentesque fringilla elit. Ut eget ligula quis metus gravida auctor ut ac nisi. Pellentesque ullamcorper, ligula non gravida tincidunt, neque diam fringilla ligula, sed tristique urna nunc ac neque. Curabitur egestas pellentesque metus, lobortis sollicitudin metus ullamcorper varius. Donec molestie tempus tortor non consequat. Integer lacinia risus id nunc consectetur, eu fermentum nisi interdum.

Personality

Fusce vehicula purus ut ultricies varius. Maecenas a lacus sit amet lectus commodo euismod. Aenean laoreet, sapien at porttitor egestas, magna felis dictum diam, sed maximus sapien diam a mauris. Sed ullamcorper ut ligula nec eleifend. Sed eu pretium risus, eu venenatis lacus. Nunc eget hendrerit arcu. Mauris congue imperdiet leo, in suscipit massa feugiat eget. Cras sagittis lorem quis imperdiet hendrerit. Nulla venenatis, eros ut lobortis volutpat, ipsum justo gravida libero, at mollis dui nisi sit amet enim. Sed eu est augue. In et faucibus risus, vel imperdiet lacus. Aliquam dapibus nunc sed odio placerat tempus. In pulvinar dictum justo sed tempus. Nam eu ligula placerat, pharetra metus a, hendrerit est. Duis quis lorem nisi.

Abilities

Cras malesuada commodo magna non hendrerit. Suspendisse potenti. Pellentesque ac nisi fermentum, fringilla mi non, varius leo. Etiam nibh purus, fringilla ac semper a, suscipit sed nisi. Etiam volutpat dui sed quam molestie dictum. Donec id erat sapien. Etiam condimentum odio nec sem suscipit condimentum. Duis ex augue, consequat vitae bibendum ac, pretium at felis. Maecenas eleifend orci a neque ullamcorper consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fermentum nibh vel erat pellentesque, ut venenatis nulla tincidunt. Etiam diam justo, finibus vel tortor sit amet, egestas commodo purus. Aliquam pretium sem lorem, ut placerat justo sollicitudin quis.

Etiam vel feugiat nisi, vel sodales dui. Aliquam commodo pharetra leo, et efficitur tellus aliquam et. Donec tellus ipsum, posuere vitae eleifend at, varius non ligula. Fusce consectetur risus non lorem faucibus, dignissim ultricies nisl cursus. Phasellus efficitur, enim ornare lobortis viverra, felis elit dictum turpis, non condimentum elit dui ac tortor. Mauris pulvinar elit orci, eget laoreet mi maximus sed. Morbi quis finibus lacus. Nullam purus libero, imperdiet ac porta vel, commodo nec nisi. Donec pellentesque erat a tortor elementum, porttitor fermentum est cursus. Phasellus vestibulum tempor nisi eget faucibus. Proin sed lorem at augue commodo posuere vitae non mauris. Vestibulum congue tellus vel tellus mollis, a sodales odio congue. Aliquam faucibus elit ut ornare porta.

Player: My Name ★ Age: 18+ ★ Timezone: GMT ★ Contact: me@memail.com ★ Code by transilience

copy & paste

<div style="grid-column: 1 / 4; display: flex; justify-content: center; align-items: center; padding: 10px; border-radius: 5px; background: #ee3333; background-image:-moz-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background-image:-webkit-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background: linear-gradient(to right, #741110 0%, #ee3333 50%, #7F1413 100%); color: #fff; font-size: 5em; font-style: italic; text-shadow: -1px -1px 3px #444; text-transform: uppercase;"> [YOURTITLETEXTHERE] </div>

<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">NAME:</b> [YOURCHARACTERNAMEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">A.K.A.:</b> [YOURNICKNAMEHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">AGE:</b> [YOURAGEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">GENDER:</b> [YOURGENDERHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">OCCUPATION:</b> [YOURJOBHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">ORIENTATION:</b> [YOURORIENTATIONHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">RESIDENCE:</b> [YOURHOMEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">STATUS:</b> [YOURSTATUSHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">HOUSE:</b> [YOURHOUSEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ee3333;">MOTTO:</b> [YOURMOTTOHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ee3333; background-image:-moz-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background-image:-webkit-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background: linear-gradient(to right, #741110 0%, #ee3333 50%, #7F1413 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Background </div>
<div style="background: #ddd; color: #333; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERBACKGROUNDHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ee3333; background-image:-moz-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background-image:-webkit-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background: linear-gradient(to right, #741110 0%, #ee3333 50%, #7F1413 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Personality </div>
<div style="background: #ddd; color: #333; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERPERSONALITYHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ee3333; background-image:-moz-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background-image:-webkit-linear-gradient(left, #741110 0%, #ee3333 50%, #7F1413 100%); background: linear-gradient(to right, #741110 0%, #ee3333 50%, #7F1413 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Abilities </div>
<div style="background: #ddd; color: #333; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERABILITIESHERE] </div>

<div style="background: #741110; background: linear-gradient(to left, #741110 0%, #ee3333 50%, #7F1413 100%); color: #fff; grid-column: 1 / 4; padding: 10px; text-align: right; text-transform: uppercase; border-radius: 5px;">
Player: [YOURNAME]
★ Age: [YOURAGE]
★ Timezone: [YOURTIMEZONE] 
★ Contact: [YOURCONTACTINFO]
★ Code by transilience</div>
</div>

find & replace

gradient colors: #741110, #ee3333, #7F1413 • title text: white • main text: #333 • stat background: #fff • section background: #ddd

notes

You can change the fields beside the picture to anything you like; changing the number of them is outside the scope of this post. Duplicate the "abilities" row to add more sections there.

Here's the other style:

copy & paste

<div style="grid-column: 1 / 4; display: flex; justify-content: center; align-items: center; padding: 10px; font-size: 5em; background: #ef8fbe; background-image:-moz-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background-image:-webkit-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background: linear-gradient(to right,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); color: white; font-style: italic; text-shadow: -1px -1px 1px #999; border-radius: 5px;"> [YOURTITLETEXTHERE] </div>

<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">NAME:</b> [YOURCHARACTERNAMEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">A.K.A.:</b> [YOURNICKNAMEHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">AGE:</b> [YOURCHARACTERAGEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">GENDER:</b> [YOURGENDERHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">OCCUPATION:</b> [YOURJOBHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">ORIENTATION:</b> [YOURORIENTATIONHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">RESIDENCE:</b> [YOURHOMEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">STATUS:</b> [YOURSTATUSHERE] </div>
<div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">HOUSE:</b> [YOURHOUSEHERE] </div>     <div style="padding: 10px; border-radius: 5px; border: 1px dotted #444; background-color: #fff;"><b style="color: #ef8fbe;">MOTTO:</b> [YOURMOTTOHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ef8fbe; background-image:-moz-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background-image:-webkit-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background: linear-gradient(to right,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Background </div>
<div style="background: #fef; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERBACKGROUNDHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ef8fbe; background-image:-moz-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background-image:-webkit-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background: linear-gradient(to right,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Personality </div>
<div style="background: #fef; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERPERSONALITYHERE] </div>

<div style="padding: 10px; border-radius: 5px; background: #ef8fbe; background-image:-moz-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background-image:-webkit-linear-gradient(left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); background: linear-gradient(to right,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); color: transparent; -webkit-background-clip:text; background-clip:text; font-size: 2.5em; font-weight: bold; font-style: italic; text-align: right;">Abilities </div>
<div style="background: #fef; grid-column: 2 / 4; padding: 10px; text-align: justify; line-height: 1.7em; border-radius: 5px;"> [YOURCHARACTERABILITIESHERE] </div>

<div style="background: #ef8fbe; background: linear-gradient(to left,  #a782ce 0%, #e0d2ef 50%, #ef8fbe 100%); color: #333; grid-column: 1 / 4; padding: 10px; text-align: right; text-transform: uppercase; border-radius: 5px;">
Player: [YOURNAME]
★ Age: [YOURAGE]
★ Timezone: [YOURTIMEZONE] 
★ Contact: [YOURCONTACTINFO]
★ Code by transilience</div>
</div>

find & replace

gradient colors: #a782ce, #e0d2ef, #ef8fbe • title text: white • main text: #333 • stat background: #fff • section background: #fef

Tags: code: bio, maker: transilience

Codes + Layouts + Tutorials + More

Community Rules

Tagging Guide

Banners & Buttons

Search by Tag

Layout By

bio sheet: semigloss / semimatte

copy & paste

find & replace

notes

copy & paste

find & replace