yuff | Character-Specific Kink List

Hi everyone! Just here with a character-specific kink list. Essentially a great option if you play characters with a differing kink preferences.

Live Example

Code:

<raw-code>
<div class="container" style="width: 75%; min-width: 350px; max-width: 700px; margin: auto;">

<div class="TOP-INFO" style="height: 210px; display: block; width: 100%;">

<div style="display: inline-block; width: 68%; margin-left: 1%;  height: 200px; background-color: white; box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;">
<div style="display: block; font-family: century gothic; font-size: 18pt; color: #1f1c1e; letter-spacing: 0.1em; letter-spacing: 0.1em; margin: 0% 3% 0% 3%; border-bottom: 1px solid #d9d9d9;">
Name Here
</div>
<div style="display: block; height: 160px; width: 100%; overflow: auto; "><div style="padding: 0% 3% 0% 3%;">
<table style="width: 100%; font-family: calibri; text-align: justify;"><tr>
<td width="33%"><span style="font-weight: bold;">Age:</span> ##</td>
<td width="33%"><span style="font-weight: bold;">Gender:</span> Enter Gender</td>
<td width="33%"><span style="font-weight: bold;">Orientation:</span> Enter Label</td>
</tr></table>
<table style="width: 100%; font-family: calibri; text-align: justify;"><tr>
<td><span style="font-weight: bold;">Species:</span></td><td>Enter Species</td>
</tr><tr>
<td><span style="font-weight: bold;">Availability</span></td>
<td>Talk about character's intimacy preference such as monogamy versus one-night stands, gender preferences if complicated, etc. Feel free to be wordy.  </td></tr><tr>
<td><span style="font-weight: bold;">Turn-Ons:</span></td><td>List, List, List</td></tr><tr>
<td><span style="font-weight: bold;">Turn-Offs:</span></td><td>List, List, List</td></tr><tr>
<td><span style="font-weight: bold;">Other:</span></td><td>Any other notes that'd be relevant to the character</td></tr><tr>
<td><span style="font-weight: bold;">OOC:</span></td><td>Player-based requests when doing a smut thread</td></tr></table>
</div></div></div>

		

<div style="float: right; display: inline-block; width: 30%">
<img src="IMG-URL-200x200-FOR-BEST-RESULT" style="max-width: 100%; box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;"></div></div>

<div style="height: 300px; display: block; width: 100%;">

<div style="display: inline-block; height: 300px; width: 32%; background-color: #FFF; box-shadow: rgba(0,0,0,0.25) 1px 1px 1px; vertical-align:top;">
<div style="display: block; vertical-align:top; font-family: century gothic; font-size: 18pt; letter-spacing: 0.1em; letter-spacing: 0.1em; margin: 0% 3% 0% 3%; border-bottom: 1px solid #d9d9d9; text-align: center; font-variant: small-caps;"><span style="color: #004d00;">Yes</span></div>
<div style="display: block; height: 260px; width: 100%; overflow: auto;">
<div style="padding: 1% 3% 0% 3%; font-family: calibri;"><span style="font-size: 85%;">(♥ Indicates fave.)</span><br/>
✔ Kink <br/>
✔ Kink <br/>
✔ Kink <br/>
														
</div></div></div>

		

<div style="display: inline-block; width: 32%; height: 300px; margin-right: .8%; margin-left: 1.4%;  background-color: #FFF; box-shadow: rgba(0,0,0,0.25) 1px 1px 1px; vertical-align: top;"><div style="display: block; vertical-align:top; font-family: century gothic; font-size: 18pt; letter-spacing: 0.1em; letter-spacing: 0.1em; margin: 0% 3% 0% 3%; border-bottom: 1px solid #d9d9d9; text-align: center; font-variant: small-caps;"><span style="color: #cc9900;">Maybe</span></div>
<div style="display: block; height: 260px; width: 100%; overflow: auto;">
<div style="padding: 1% 3% 0% 3%; font-family: calibri;">
◌ Kink<br/>
◌ Kink<br/>
◌ Kink<br/>	
</div></div></div>

		

<div style="display: inline-block; width: 32%; height: 300px;  background-color: #FFF; box-shadow: rgba(0,0,0,0.25) 1px 1px 1px; float: right; vertical-align: top;">
<div style="display: block; vertical-align:top; font-family: century gothic; font-size: 18pt; letter-spacing: 0.1em; letter-spacing: 0.1em; margin: 0% 3% 0% 3%; border-bottom: 1px solid #d9d9d9; text-align: center; font-variant: small-caps;"><span style="color: #b30000;">No</span></div>
<div style="display: block; height: 260px; width: 100%; overflow: auto;">
<div style="padding: 1% 3% 0% 3%; font-family: calibri;"><span style="font-size: 85%;">(* Indicates a character-specific No)</span><br/>
✘ Kink<br/>
✘ Kink<br/>
✘ Kink*<br/>

</div></div></div>

	
</div>

</div>
<div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
</raw-code>

HTML-Editor Version

Notes

For best image result, use a 200 x 200 image.

Change the fave symbol to whatever you'd like.

If you want more sections in the info area, simply add another table row.

Kink lists and info area will scroll.

Layout has been made with mobile devices in mind, but there might be some quirks.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Character-Specific Kink List

no subject

/too lazy to change journals

no subject