code: Killthecake's Information Booth code

[in_sufficientdata]

Use this code to house all the information you might want people to learn when they come to your character journal: application data, character permissions, character inventory, and more!

home

information

application

permissions

links & notes

CHARACTER NAME

SOME KIND OF FUNNY QUOTE OR WHATEVER

• Housing:
  
• Roommate:
  
• Etc.

Character Information

Personal:

Canon:

Physical:

• Vital statistics:
   ◦ Height:
   ◦ Weight:
   ◦ Hair:
   ◦ Eyes:
   ◦ Gender:
   ◦ Race:
  
• Voice, appearance, etc, etc.

Abilities:

Application

APPLICATION GOES HERE

Permissions

Character name:
Canon:
Canon point:
Age:
Pronouns:

Character details:
Warnings:

[OOC]

Backtagging:
Threadhopping:
Fourthwalling:
Off limits:
Warn first:

[IC]

Physical affection:
Physical violence:
Romance:
Use of telepathy/mind reading:
CRAU recognition:
Facetwins:

[Opt Out/Plotting]
Comments to this entry are screened. Feel free to use the following form to opt out of interactions with them or aspects of their character, or use it for plotting.

<b>Name:</b> <b>Character(s) you play:</b> <b>Journal(s):</b> <b>Questions/comments/etc:</b>

Links

Notes

from a code by killthecake

This code was custom-made by killthecake for in_sufficientdata at her request and specifications, and later edited by her to make it mobile-responsive. Please do not remove the attribution for this code.

You can snag the code for this here:

<cut><center><raw-code><div style="max-width: 100%; width:800px; height: auto;"> <div style="max-width: 100%; width: 800px; height: auto; padding: 4px; background: rgb(200,200,200) linear-gradient(120deg, #c7c7c7, #f5f5f5, #c7c7c7);border-radius: 15px;box-shadow: 2px 2px 5px rgba(0,0,0,0.5);"> <div style="justify-content: center; box-sizing:content-box; max-width: 100%; width: 800px; height: auto; border-radius: 25px; display: flex;flex-wrap:wrap;"> <div style="box-sizing:content-box; display:inline-block; background: rgba(200,200,200,0.5); border: 1px solid #fff;border-radius:5px;width: auto;padding:2px 0; margin:2px;"><a href="#home" style="color: #fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">home</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(200,200,200,0.5); border: 1px solid #fff;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#1" style="color: #fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">information</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(200,200,200,0.5); border: 1px solid #fff;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#2" style="color: #fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">application</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(200,200,200,0.5); border: 1px solid #fff;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#3" style="color: #fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">permissions</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(200,200,200,0.5); border: 1px solid #fff;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#4" style="color: #fff;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">links & notes</a></div> </div></div> <div style="max-width: 100%; width:800px; height: 500px; background: #fff; margin-top: 5px;border-radius: 20px;box-shadow: 2px 2px 5px rgba(0,0,0,0.7);border: 2px solid #e0e0e0;overflow:hidden;"> <!----COVER ART----> <a name="home"></a> <div style="background:url(IMAGE_URL_HERE);background-position:center;background-size:cover;max-width: 100%; width: 800px; height: 500px;"> <div style="position:relative; top: 40px;left: 50px;text-align:left;height: auto;"><h2 style="text-transform:uppercase; letter-spacing: 0.4em;color: #fff; text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> CHARACTER NAME </h2></div> <div style="position:relative; top: 50px;left: 50px;text-align:left;height: auto; margin: -15px 0px 0px 0px;"><h3 style="text-transform:uppercase; font-size: 0.8em;letter-spacing: 0.4em;color: #fff;text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> SOME KIND OF FUNNY QUOTE OR WHATEVER </h3></div> <div style="position:relative; top: 300px;left: 50px;text-align:left;"></raw-code><span style="margin:0 5px;color:#fff;letter-spacing:1px;text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> <ul><li><b>Housing:</b> <li><b>Roommate:</b> <li><b>Etc.</b></ul> </span></div></div><raw-code> <!----INFORMATION----> <a name="1"></a><div style="background: linear-gradient(120deg, #c7c7c7, #f5f5f5, #c7c7c7);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Character Information </div> <div style="background: rgba(255,255,255,0.6); max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <!----RIGHT IMAGE----> <raw-code><div style="width: 200px; height: 200px;float: right;background: url(IMAGE_URL_HERE);background-position:center;background-size:cover;margin-left: 6px;border-radius:15px;box-shadow: 1px 1px 2px rgba(0,0,0,0.7);"></div></raw-code> <!----RIGHT IMAGE END----> <!----LEFT IMAGE----> <raw-code><div style="width: 200px; height: 200px;float: left;background: url(IMAGE_URL_HERE);background-position:center;background-size:cover;margin-right: 16px;border-radius:15px;box-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> </raw-code></div><!----LEFT IMAGE END----> <b>Personal:</b> <ul><li></ul> <b>Canon:</b> <ul><li></ul> <b>Physical:</b> <ul><li>Vital statistics:  ◦ Height:  ◦ Weight:  ◦ Hair:  ◦ Eyes:  ◦ Gender:  ◦ Race: <li>Voice, appearance, etc, etc.</ul> <b>Abilities:</b> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code></div></div> <!-----APPLICATION-------> <a name="2"></a><div style="background: linear-gradient(120deg, #c7c7c7, #f5f5f5, #c7c7c7);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Application </div> <div style="background: rgba(255,255,255,0.6); max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> APPLICATION GOES HERE <!----ADD MORE ABOVE THIS LINE----> <raw-code></div></div> <!----PERMISSIONS----> <a name="3"></a><div style="background: linear-gradient(120deg, #c7c7c7, #f5f5f5, #c7c7c7);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Permissions </div> <div style="background: rgba(255,255,255,0.6); max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <b>Character name:</b> <b>Canon:</b> <b>Canon point:</b> <b>Age:</b> <b>Pronouns:</b> <b>Character details:</b> <b>Warnings</b>: <b>[OOC]</b> <b>Backtagging:</b> <b>Threadhopping:</b> <b>Fourthwalling:</b> <b>Off limits:</b> <b>Warn first:</b> <b>[IC]</b> <b>Physical affection:</b> <b>Physical violence:</b> <b>Romance:</b> <b>Use of telepathy/mind reading:</b> <b>CRAU recognition:</b> <b>Facetwins:</b> <b>[Opt Out/Plotting]</b> Comments to this entry are screened. Feel free to use the following form to opt out of interactions with them or aspects of their character, or use it for plotting. <textarea><b>Name:</b> <b>Character(s) you play:</b> <b>Journal(s):</b> <b>Questions/comments/etc:</b></textarea> <raw-code></div></div> <!------LINKS & NOTES-------> <a name="4"></a> <div style="background: linear-gradient(120deg, #c7c7c7, #f5f5f5, #c7c7c7);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Links </div> <div style="background: rgba(255,255,255,0.6); max-width: 100%; width: 785px; height: 165px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code></div> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Notes </div> <div style="background: rgba(255,255,255,0.6); max-width: 100%; width: 785px; height: 238px;margin: 5px 3px 0;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code> </div></div> </div></div> <div style="font-variant:small-caps;text-transform:lowercase;letter-spacing: 2px;position:relative; top: 40%;"><span style="background: rgba(255,255,255,0.5);border-radius: 8px;border: 1px solid #808080;padding: 0 2px 1px;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color:#808080;">from a code by killthecake</a> </span></div> </center> </raw-code>
I also whipped up a dark mode version of this at the request of a commenter:

<cut><center><raw-code><div style="max-width: 100%; width:800px; height: auto;"> <div style="max-width: 100%; width: 800px; height: auto; padding: 4px; background: rgb(200,200,200) linear-gradient(120deg, #222, #666, #222);border-radius: 15px;box-shadow: 2px 2px 5px rgba(0,0,0,0.5);"> <div style="justify-content: center; box-sizing:content-box; max-width: 100%; width: 800px; height: auto; border-radius: 25px; display: flex;flex-wrap:wrap;"> <div style="box-sizing:content-box; display:inline-block; background: rgba(0,0,0,0.5); border: 1px solid #eee;border-radius:5px;width: auto;padding:2px 0; margin:2px;"><a href="#home" style="color: #eee;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">home</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(0,0,0,0.5); border: 1px solid #eee;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#1" style="color: #eee;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">information</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(0,0,0,0.5); border: 1px solid #eee;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#2" style="color: #eee;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">application</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(0,0,0,0.5); border: 1px solid #eee;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#3" style="color: #eee;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">permissions</a></div> <div style="box-sizing:content-box; display:inline-block; background: rgba(0,0,0,0.5); border: 1px solid #eee;border-radius:5px;width: auto;padding:2px 0;margin:2px;"><a href="#4" style="color: #eee;text-decoration:none;text-transform:uppercase;letter-spacing:2px;font-size: 0.75em;font-weight:bold;">links & notes</a></div> </div></div> <div style="max-width: 100%; width:800px; height: 500px; background: #eee; margin-top: 5px;border-radius: 20px;box-shadow: 2px 2px 5px rgba(0,0,0,0.7);border: 2px solid #e0e0e0;overflow:hidden;"> <!----COVER ART----> <a name="home"></a> <div style="background:url(IMAGE_URL_HERE);background-position:center;background-size:cover;max-width: 100%; width: 800px; height: 500px;"> <div style="position:relative; top: 40px;left: 50px;text-align:left;height: auto;"><h2 style="text-transform:uppercase; letter-spacing: 0.4em;color: #eee; text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> CHARACTER NAME </h2></div> <div style="position:relative; top: 50px;left: 50px;text-align:left;height: auto; margin: -15px 0px 0px 0px;"><h3 style="text-transform:uppercase; font-size: 0.8em;letter-spacing: 0.4em;color: #eee;text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> SOME KIND OF FUNNY QUOTE OR WHATEVER </h3></div> <div style="position:relative; top: 300px;left: 50px;text-align:left;"></raw-code><span style="margin:0 5px;color:#eee;letter-spacing:1px;text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;"> <ul><li><b>Housing:</b> <li><b>Roommate:</b> <li><b>Etc.</b></ul> </span></div></div><raw-code> <!----INFORMATION----> <a name="1"></a><div style="background: linear-gradient(120deg, #222, #666, #222);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #eee;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Character Information </div> <div style="background: rgba(80,80,80,0.6); color: #eee;max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <!----RIGHT IMAGE----> <raw-code><div style="width: 200px; height: 200px;float: right;background: url(IMAGE_URL_HERE);background-position:center;background-size:cover;margin-left: 6px;border-radius:15px;box-shadow: 1px 1px 2px rgba(0,0,0,0.7);"></div></raw-code> <!----RIGHT IMAGE END----> <!----LEFT IMAGE----> <raw-code><div style="width: 200px; height: 200px;float: left;background: url(IMAGE_URL_HERE);background-position:center;background-size:cover;margin-right: 16px;border-radius:15px;box-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> </raw-code></div><!----LEFT IMAGE END----> <b>Personal:</b> <ul><li></ul> <b>Canon:</b> <ul><li></ul> <b>Physical:</b> <ul><li>Vital statistics:  ◦ Height:  ◦ Weight:  ◦ Hair:  ◦ Eyes:  ◦ Gender:  ◦ Race: <li>Voice, appearance, etc, etc.</ul> <b>Abilities:</b> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code></div></div> <!-----APPLICATION-------> <a name="2"></a><div style="background: linear-gradient(120deg, #222, #666, #222);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #eee;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Application </div> <div style="background: rgba(80,80,80,0.6); color: #eee;max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> APPLICATION GOES HERE <!----ADD MORE ABOVE THIS LINE----> <raw-code></div></div> <!----PERMISSIONS----> <a name="3"></a><div style="background: linear-gradient(120deg, #222, #666, #222);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #eee;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Permissions </div> <div style="background: rgba(80,80,80,0.6); color: #eee;max-width: 100%; width: 785px; height: 450px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <b>Character name:</b> <b>Canon:</b> <b>Canon point:</b> <b>Age:</b> <b>Pronouns:</b> <b>Character details:</b> <b>Warnings</b>: <b>[OOC]</b> <b>Backtagging:</b> <b>Threadhopping:</b> <b>Fourthwalling:</b> <b>Off limits:</b> <b>Warn first:</b> <b>[IC]</b> <b>Physical affection:</b> <b>Physical violence:</b> <b>Romance:</b> <b>Use of telepathy/mind reading:</b> <b>CRAU recognition:</b> <b>Facetwins:</b> <b>[Opt Out/Plotting]</b> Comments to this entry are screened. Feel free to use the following form to opt out of interactions with them or aspects of their character, or use it for plotting. <textarea><b>Name:</b> <b>Character(s) you play:</b> <b>Journal(s):</b> <b>Questions/comments/etc:</b></textarea> <raw-code></div></div> <!------LINKS & NOTES-------> <a name="4"></a> <div style="background: linear-gradient(120deg, #222, #666, #222);max-width: 100%; width: 800px; height: 498px;border-radius: 18px"> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #eee;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Links </div> <div style="background: rgba(80,80,80,0.6); color: #eee;max-width: 100%; width: 785px; height: 165px;margin: 5px 3px;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code></div> <div style="text-align:left;padding-left: 15px;font-size: 1.8em; font-weight:bold;font-variant:small-caps;letter-spacing: 2px;color: #eee;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);"> Notes </div> <div style="background: rgba(80,80,80,0.6); color: #eee;max-width: 100%; width: 785px; height: 238px;margin: 5px 3px 0;border-radius: 0 0 16px 16px;overflow-y:scroll;text-align:justify;padding: 6px 16px 6px 6px;"></raw-code> <ul><li></ul> <!----ADD MORE ABOVE THIS LINE----> <raw-code> </div></div> </div></div> <div style="font-variant:small-caps;text-transform:lowercase;letter-spacing: 2px;position:relative; top: 40%;"><span style="background: rgba(255,255,255,0.5);border-radius: 8px;border: 1px solid #808080;padding: 0 2px 1px;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color:#808080;">from a code by killthecake</a> </span></div> </center> </raw-code>
Please note the Permissions page includes an opt-out; if you intend to use this section, make sure to screen the comments to the post.

[ Note there are several gradients in the code that include rgba code. You can use this color picker to choose colors for your edit of this code. ]

Comments

[in_sufficientdata]

I have an example on my Agent North account here. You can change the headings to be anything you wish, however.