suisui profile

Character Name

TYPE
type

AGE
##

HEIGHT
##

PRONOUNS
:)

Appearance + Pings

notes go here

Permissions

SHIPPING
yes/maybe/no

SMUT
yes/maybe/no

VIOLENCE
yes/maybe/no

KILLING
yes/maybe/no

Player Comfort Notes

Copy from the comfort sheet + expand if necessary

code by puddings

Character Canon
Canon Goes Here

Player
Player Name

Contact
plurk | discord

Kinklist
Here

Inbox/Extras
IC Inbox

NOTES

- All sections are marked with notes
- Your profile image should be at least 250x300, but it's set to cover so it doesn't have to be exact
- The permissions section gets slightly fucky on mobile so please forgive me
- If you need help with the code plz ping Cleo (@gralsritter) on discord TY!!

CODE HERE:
<div style="max-width: 800px; width:100%; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:25px; line-height:1.5; font-family: helvetica, sans serif;"> <!-- PROFILE CONTAINER START--!> <div style="width:100%; padding: 3px; display:grid; grid-template-columns:30% 1fr; grid-template-rows: minmax(5px, 50px) minmax(5px, 60px) minmax(5px, 30px) 1fr; grid-column-gap:5px; background:#fff; border:1px solid #EA6A91; box-shadow: 3px 3px 3px #9b9b9b; border-radius:5px;"> <!-- PROFILE PIC --!> <div style="min-height:250px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 5; background:#eee url('https://puddings.dreamwidth.org/file/15752.jpg')center; background-size:cover; border-radius: 5px 0px 0px 5px;"> </div> <!-- NAME HEADER --!> <div style="padding:7px; max-height:50px; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background:#ffebef; border-bottom: 2px dashed #ffd2db; font-size:1.8em; font-weight:bold; color:rgba(238,174,202,1); text-align:center; border-radius: 0px 5px 0px 0px; font-family: cambria, serif;">Character Name</div> <!-- BASIC STATS --!> <div style="max-height:60px; padding:7px; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background:#fff; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:stretch; gap:5px; font-size:0.9em;"><div style="max-height:60px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">TYPE</span><br />type</div> <div style="max-height:60px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">AGE</span><br />##</div> <div style="max-height:60px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">HEIGHT</span><br />##</div> <div style="max-height:60px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">PRONOUNS</span><br />:)</div> </div> <!-- NOTES --!> <div style="padding:7px; max-height:30px; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; border-bottom: 1px dashed #ffd2db; font-size:1.3em; font-weight:bold; color:rgba(238,174,202,1); text-align:center; border-radius: 0px 5px 0px 0px; font-family: cambria, serif;">Appearance + Pings</div> <div style="padding:10px; grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; background:#fff;"> notes go here</div> </div> <!-- END PROFILE --!> <!-- PERMISSIONS START--!> <div style="width:100%; padding: 3px; min-height:200px; display:grid; grid-template-columns:1fr 30%; grid-template-rows: minmax(5px, 50px) minmax(5px, 60px) minmax(5px, 30px) 1fr 3px minmax(5px, 15px); grid-column-gap:5px; background:#fff; border:1px solid #EA6A91; box-shadow: 3px 3px 3px #9b9b9b; border-radius:5px;"> <div style="padding:7px; max-height:50px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; background:#ffebef; border-bottom: 2px dashed #ffd2db; font-size:1.8em; font-weight:bold; color:rgba(238,174,202,1); text-align:center; border-radius: 5px 0px 0px 0px; font-family: cambria, serif;">Permissions</div> <!-- BASIC PERMISSIONS --!> <div style="padding:7px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; background:#fff; display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:stretch; gap:5px; font-size:0.9em;"><div style="max-height:50px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">SHIPPING</span><br />yes/maybe/no</div> <div style="max-height:50px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">SMUT</span><br />yes/maybe/no</div> <div style="max-height:50px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">VIOLENCE</span><br />yes/maybe/no</div> <div style="max-height:50px; width:25%; flex-basis:0; flex-grow:1; padding:3px; border-radius:5px; text-align:center; border:1px solid #ffd2db; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:rgba(238,174,202,1);">KILLING</span><br />yes/maybe/no</div> </div> <!-- COMFORT NOTES --!> <div style="padding:7px; max-height:30px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; border-bottom: 1px dashed #ffd2db; font-size:1.3em; font-weight:bold; color:rgba(238,174,202,1); text-align:center; border-radius: 0px 5px 0px 0px; font-family: cambria, serif;">Player Comfort Notes</div> <div style="padding:10px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; background:#fff;">Copy from the comfort sheet + expand if necessary </div> <!-- CREDIT --!> <div style="grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; background:#fff;"> </div> <div style="padding:3px; grid-column-start: 1; grid-column-end: 3; grid-row-start: 6; grid-row-end: 7; background:#ffebef; border-radius: 0px 0px 5px 5px; text-align: right; color:rgba(238,174,202,1); font-weight:bold; font-size:0.7em;">code by <a href="http://puddings.dreamwidth.org" style="text-decoration:none; font-weight:bold; color:#ea6a91;">puddings</a></div> <!-- SIDEBAR --!> <div style="grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 5; background:#fff; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:space-evenly; align-items:center; gap:5px; text-align:center; font-size:0.9em;"> <div style="padding:3px; width:100%; flex-basis:0; flex-grow:1; padding:3px; border-radius:0px 5px 0px 0px; text-align:center; background:#ffe8e2; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:#fc9483;">Character Canon</span><br />Canon Goes Here</div> <div style="padding:3px; width:100%; flex-basis:0; flex-grow:1; padding:3px; text-align:center; background:#ffe8e2; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:#fc9483;">Player</span><br />Player Name</div> <div style="padding:3px; width:100%; flex-basis:0; flex-grow:1; padding:3px; text-align:center; background:#ffe8e2; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:#fc9483;">Contact</span><br />plurk | discord</div> <div style="padding:3px; width:100%; flex-basis:0; flex-grow:1; padding:3px; text-align:center; background:#ffe8e2; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:#fc9483;">Kinklist</span><br /><a href="KINKLIST URL" style="color:#ea6a91;">Here</a></div> <div style="padding:3px; width:100%; flex-basis:0; flex-grow:1; padding:3px; text-align:center; background:#ffe8e2; "><span style="font-size:1em; font-weight:bold; text-decoration:underline; color:#fc9483;">Inbox/Extras</span><br /><a href="INBOX URL" style="color:#ea6a91;">IC Inbox</a></div> </div> </div> <!-- END PERMISSIONS --!> </div>