incogneto | CONTRACT TEMPLATE

live preview

INSTRUCTIONS.

Choose which layout you want (no sidebar, sidebar on left, or sidebar on right)
Copy the code for your respective layout into a new entry and make sure to check "Disable Auto-Formatting".
Replace anything in square brackets. There are 6 [ICON URL] (3 top/3 bottom), 1 [DOMINANT NAME], 1 [SUBMISSIVE NAME], 1 [INITIAL] (for the drop-case in the introductory text), 1 [INTRODUCTION TEXT], 4 [HEADER] & 4 matching [DESCRIPTION].
Anything marked  is a comment. They don't show up in the final post. You can delete them if you want, but they're useful if you want to make edits later.
Add headers as needed, or add images to the sidebar.
Check out the handy recolor guide if you would like.
That's all! Please link this post if someone asks you for the code as it comes with this guide.

NO SIDEBAR.

<div style="color: rgba(0,0,0,0.4); font: italic bold 40px arial; letter-spacing: -5px; font-family: georgia">[DOMINANT NAME] <font style="color: rgba(0,0,0,0.6); font-weight: bold; font-style: normal; letter-spacing: -8px;">&&</font> [SUBMISSIVE NAME]</div><center>

<div style="width:600px; text-align: justify; text-justify: inter-word; border-top: solid 1px; border-image: linear-gradient( to right, rgba(0,0,0,0), #bbb, rgba(0,0,0,0) ) 1; padding-top: 20px; margin-right: 10px; margin-left: -20px;">
<span style="float: left; font-size:30px; font-family: georgia; margin-top: 5px; padding-right: 5px; line-height: 70%">[INITIAL]</span>[INTRODUCTION TEXT]</div> <div style="clear: both;"/> <div style="width: 640px;"><div style="float: left; width: 600px; text-align: left; padding-top: 20px;">

<details open="open" style="border: 1px solid #bbb; padding: 3px; text-align: justify; text-justify: inter-word;"><summary style="font-family: georgia;font-size:20px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.9); background: #555; text-align: right; padding: 10px; padding-right: 5px; padding-bottom: 20px;"> [HEADER] </summary> [DESCRIPTION] </details>

<details style="border: 1px solid #bbb; padding: 3px; text-align: justify; text-justify: inter-word;"> <summary style="font-family: georgia;font-size:20px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.9); background: #555; text-align: right; padding: 10px; padding-right: 5px; padding-bottom: 20px;"> [HEADER] </summary> [DESCRIPTION] </details>

</div><div style="clear: both;" />  <br><div style="width: 313px; margin: auto;"><div style="float: left;"><img src="[ICON URL]" style="height: 67px; width: 67px; padding: 3px; margin: 5px; border: 1px solid #aaa; border-radius: 10px;"></div><div style="float: left; align: center;"><div style="float: left; margin-top: -7px; margin-right: 5px;"> <div style="border-left: 1px solid #aaa; border-top-left-radius: 50px; margin-left: 10px; height: 25px; width: 5px;"></div> <div style="border-right: 1px solid #aaa; border-bottom-right-radius: 50px; height: 25px; width: 5px;"></div> <div style="border-right: 1px solid #aaa; border-top-right-radius: 50px; height: 25px; width: 5px;"></div> <div style="border-left: 1px solid #aaa; border-bottom-left-radius: 50px; margin-left: 10px; height: 25px; width: 5px;"></div> </div> <img src="[ICON URL]" style="border-radius: 20px; margin-top: -7px;"></div> <div style="float: left; margin-top: -7px; margin-right: 5px;"> <div style="border-right: 1px solid #aaa; border-top-right-radius: 50px; height: 25px; width: 5px;"></div> <div style="border-left: 1px solid #aaa; border-bottom-left-radius: 50px; height: 25px; width: 5px; margin-left: 10px; "></div> <div style="border-left: 1px solid #aaa; border-top-left-radius: 50px; height: 25px; width: 5px; margin-left: 10px; "></div> <div style="border-right: 1px solid #aaa; border-bottom-right-radius: 50px; height: 25px; width: 5px;"></div> </div><div style="float: left; align: center;"> <img src="[ICON URL]" style="height: 67px; width: 67px; padding: 3px; border: 1px solid #aaa; margin: 5px; float: left; border-radius: 10px"> </div></div> <div style="clear: both;" />

<center><div style=" width: 560px; text-align: right; font-size: 8px; text-transform: uppercase;letter-spacing: 0; color: rgba(0,0,0,0.7)">coded by xy @ <user name="incogneto">.</div></center>

SIDEBAR ON LEFT.

<div style="width:620px; text-align: justify; text-justify: inter-word; border-top: solid 1px; border-image: linear-gradient( to right, rgba(0,0,0,0), #bbb, rgba(0,0,0,0) ) 1; padding-top: 20px; margin-left: 20px;">
<span style="float: left; font-size:30px; font-family: georgia; margin-top: 5px; padding-right: 5px; line-height: 70%">[INITIAL]</span>[INTRODUCTION TEXT]</div> <div style="clear: both;"/> <div style="width: 640px;">

<b>start.</b> <br>
<b>end.</b> <br>
<b>duration.</b> <br>
<b>residence.</b> <br>

</div><div style="float: left; width: 400px; text-align: left; padding-top: 20px;">

<details open="open" style="border: 1px solid #bbb; padding: 3px; text-align: justify; text-justify: inter-word;"><summary style="font-family: georgia;font-size:20px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.9); background: #555; text-align: right; padding: 10px; padding-right: 5px;"> [HEADER] </summary> [DESCRIPTION] </details>

<center><div style=" width: 600px; text-align: right; font-size: 8px; text-transform: uppercase;letter-spacing: 0; color: rgba(0,0,0,0.7)">coded by xy @ <user name="incogneto">.</div></center>

SIDEBAR ON RIGHT.

<div style="width:600px; text-align: justify; text-justify: inter-word; border-top: solid 1px; border-image: linear-gradient( to right, rgba(0,0,0,0), #bbb, rgba(0,0,0,0) ) 1; padding-top: 20px; margin-left: -20px;"><span style="float: left; font-size:30px; font-family: georgia; margin-top: 5px; padding-right: 5px; line-height: 70%">[INITIAL]</span>[INTRODUCTION TEXT]</div> <div style="clear: both;"/> <div style="width: 640px;"><div style="float: left; width: 400px; text-align: left; padding-top: 20px;">

</div><br><div style="float: left; width: 200px; padding: 20px; text-align: justify; text-justify: inter-word; margin-top: -20px;">

<b>start.</b> <br> 
<b>end.</b> <br>
<b>duration.</b> <br>
<b>residence.</b> <br>

</div><div style="clear: both;" />

<center><div style=" width: 600px; text-align: right; font-size: 8px; text-transform: uppercase;letter-spacing: 0; color: rgba(0,0,0,0.7)">coded by xy @ <user name="incogneto">.</div></center>

ADDING CONTRACT HEADERS.
Copy/paste this after all your other headers:

ADDING IMAGES TO SIDEBAR.
Copy/paste this somewhere after , replacing [IMG URL]:

COLOR GUIDE.
A handy guide for all those who prefer to have different colors! For information on how RGBA works, click here
#aaa - borders on the icons, the {}
rgba(0,0,0,0.4) - names
rgba(0,0,0,0.6) - &&
#bbb - borders on the headers and sidebar images, line underneath names
#555 - background color on the headers
rgba(255,255,255,0.9) - header title color