ONE TWO THREE FOUR DAY BY DAY.

Previous | Memories | Tell Someone | Next

08 December 2018 @ 04:10 pm

𝑒𝓃𝒹𝒾𝓃𝑔 𝓅𝒶𝑔𝑒;
an info page with hidden divs.
permissions | personality

A comprehensive info page which uses hidden divs to keep everything compact.
Note: to prevent the textarea code from breaking, the </textarea> tag in the permissions page code has been formatted using square brackets. Please change these back to < and > when using!

For easy CTRL+F purposes—
headers / #ad4171
links / #e888b0
text / #91888c
div border / #696969

Comments are loved, and credit to

isanghae if you use.

CODE:

<raw-code><center><div style="height: 462px; width: 710px; overflow: hidden;">
<a name="basics"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
basics. 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">BASICS. 
<div style="width: 280px; height: 380px; float: left;">NAME: First Name Surname 
CANON: Canon Title 
CANON POINT: Canon Point 
AGE: 000 
GENDER: Gender 
SPECIES: Species 
BIRTH DATE: 00/00/0000 
HOMETOWN: Town, Country 
OCCUPATION: Job 
EDUCATION: Level 
LANGUAGES: Language, Language, Language 
POWERS: Powers </div>
<div style="width: 240px; height: 380px; float: right;">PLAYER: Name 
TIMEZONE: TMZ 
DISCORD: name#0000 
PLURK: <user name="PUSERNAME" site="plurk.com"> 
DREAMWIDTH: <user name="USERNAME">
</div>
</div>

<a name="permissions"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
permissions. 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">PERMISSIONS. 
<div style="width: 260px; height: 180px; float: left;">BACKTAGGING: Y / N 
4TH WALLING: Y / N 
CANON TRIGGERS: Triggers present in your character's tags. 
KISSING: Y / N, notes. 
FIGHTING: Y / N, notes. 
INJURY: Y / N, notes.</div>
<div style="width: 260px; height: 180px; float: right;">THREADJACKING: Y / N 
TRIGGERS: List any here! 
HUGGING: Y / N, notes. 
SEX: Y / N, notes. 
ROMANCE: Y / N, notes. 
POWERS: Y / N, notes. 
DEATH: Y / N, notes.
</div>
Have a permissions form you want filling out? Add it here: 
<textarea style="height: 150px; width: 380px;">a theoretical permissions form goes here[/textarea]</div>

<a name="appearance"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions. 
appearance. 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">APPEARANCE. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>

<a name="personality"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
personality. 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">PERSONALITY. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>

<a name="history"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
history.
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">HISTORY. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>
</div>
</center></raw-code>

Tags: layout: info page