Tessisamess

S	M	T	W	T	F	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

❤

Firstly Lastname

Gender Cis lady

Sexuality Fluid

Height 5'0"

Height 6'1"

Difference 1'1"

Age 22

Age 25

Difference 3

❤

Nameward Lastington

Gender Trans man

Sexuality Heterosexual

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Text Here Text Here

❤

Tropes & Clichés

Trope
Trope
Trope
Trope

Our Songs

Song Title Song Artist Another Song Title Artist A Really Really Long Song Title Seriously Calm Down Fallout Boy A Song Title A Song Artist This is a Song An Artist

Section

CODING

Information

Hey guys! And now time for something completely different. Inspired by the template made by Gibbarts, here's a relationship breakdown sheet for all the shipper trash out there (Me. It's for me.) You can see another version from Helmie here for even more ideas for slider info options.

To swap the body types (or change them both to one type), you can just rearrange them or cut and copy over the one you want to change; nothing else needs to be done there. There are four silhouette options: Realistic, door signs, chibi, and cartoon. Delete the ones you don't want to use and copy/paste the one you're using for as many character meters you need.

To fill your body silhouette levels, change the percentages on their background gradient fill. Each character has two background percentages, and they should be the same percentage for a hard line cut. (Make sure you aren't accidentally editing width:50%;)

To use the sliders, swap the order of them if needed (ie. if character B's marker should be closer to the lefthand side than character A's), and then futz with the percentage on each of them until you're happy with the placement.

Enjoy! 💖

UPDATE 7.25.2024! Changed how the outlined hearts work to account for mobile forcing unicode into emojis, haha. If you don't care about mobile, you can leave your code as-is, but otherwise the color-coded sliders both end up as red heart emojis, defeating the purpose asdfghj.

The Coding

<lj-raw><article style="max-width:800px;margin:0 auto;display:flex;flex-wrap:wrap;padding:30px;background:#fff;border:1px solid rgba(0,0,0,0.1);font-family:calibri,sans-serif;font-size:13px;color:#333;box-sizing:content-box;line-height:1;">

<section style="width:calc(100% / 3);box-sizing:border-box;">

<div style="text-align:center;margin:0 0 10px 0;font-weight:bold;text-transform:uppercase;letter-spacing:2px;"><div style="color:transparent;text-shadow:0 0 #FFC0CB,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 1px 0 #000,1px 0 0 #000;font-size:25px;">❤</div><b>NAME HERE</b></div>

<div style="height:calc(800px / 3);background:#eee url()center;background-size:cover;border:10px solid #fff;outline:1px solid rgba(0,0,0,0.1);outline-offset:-1px;display:flex;align-items:flex-end;justify-content:center;padding:20px;box-sizing:border-box;">

<center style="width:100%;background:#fff;padding:8px 0;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);"><b>NAME HERE</b></center>

</div>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Gender</legend>
			Gender Here
		</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Sexuality</legend>
			Sexuality Here
		</fieldset>

</section>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:height-1;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Height</legend>
			0'0"
		</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:height-2;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Height</legend>
			0'0"
		</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:height-diff;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Difference</legend>
			0'0"
		</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:age-diff;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Difference</legend>
			00
		</fieldset>

</section>

<section style="width:calc(100% / 3);text-align:right;box-sizing:border-box;">

<div style="text-align:center;margin:0 0 10px 0;font-weight:bold;text-transform:uppercase;letter-spacing:2px;"><div style="color:transparent;text-shadow:0 0 #ADD8E6,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 1px 0 #000,1px 0 0 #000;font-size:25px;">❤</div><b>NAME HERE</b></div>

<center style="width:100%;background:#fff;padding:8px 0;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);"><b>NAME HERE</b></center>

</div>

</section>

<section style="width:calc(100% - 33%);margin:30px 0 0 0;padding:0 60px 0 0;box-sizing:border-box;">

<div style="display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;margin:0 0 5px 0;">
			<b>Text Here</b>
			<b>Text Here</b>
		</div>

<div style="height:20px;border-left:2px solid #999;border-right:2px solid #999;background:linear-gradient(to bottom,transparent 9px,#999 9px, #999 11px,transparent 11px);display:flex;padding:0 2px;margin:0 0 20px 0;font-size:20px;box-sizing:border-box;">

<div style="padding:0 0 0 5%;color:transparent;text-shadow:0 0 #FFC0CB,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 1px 0 #000,1px 0 0 #000;box-sizing:border-box;">❤</div>

<div style="padding:0 0 0 5%;color:transparent;text-shadow:0 0 #ADD8E6,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 1px 0 #000,1px 0 0 #000;box-sizing:border-box;">❤</div>

</div>

<fieldset style="margin:20px 0 0 0;border:1px solid rgba(0,0,0,0.1);">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Tropes & Clichés</legend>

<ul style="list-style:circle inside;padding:0 0 0 10px;margin:0;line-height:2;">
				<li>Trope
				<li>Trope
				<li>Trope
				<li>Trope
			</ul>

</fieldset>

<fieldset style="margin:20px 0 0 0;border:1px solid rgba(0,0,0,0.1);">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Our Songs</legend>

<div style="display:flex;flex-wrap:wrap;line-height:3;">
				<b style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);">Song Title</b>
				<i style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);text-align:right;">Song Artist</i>
				<b style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);">Song Title</b>
				<i style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);text-align:right;">Song Artist</i>
				<b style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);">Song Title</b>
				<i style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);text-align:right;">Song Artist</i>
				<b style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);">Song Title</b>
				<i style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);text-align:right;">Song Artist</i>
				<b style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);">Song Title</b>
				<i style="width:50%;border-bottom:1px solid rgba(0,0,0,0.1);text-align:right;">Song Artist</i>
			</div>

</fieldset>

</section>

<section style="width:33%;margin:30px 0 0 0;box-sizing:border-box;">

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);display:flex;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Section</legend>

<div style="width:50%;background:linear-gradient(to top,pink 50%,#fff 50%);mask:url(https://i.imgur.com/PULR6uZ.png)center no-repeat;mask-size:auto 100%;"><div style="height:350px;background:#000;mask:url(https://i.imgur.com/5Kkbenq.png)center no-repeat;mask-size:auto 100%;"></div></div>

<div style="width:50%;background:linear-gradient(to top,lightblue 50%,#fff 50%);mask:url(https://i.imgur.com/af2ronv.png)center no-repeat;mask-size:auto 100%;"><div style="height:350px;background:#000;mask:url(https://i.imgur.com/mNcaQV6.png)center no-repeat;mask-size:auto 100%;"></div></div>

</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);display:flex;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Section</legend>

<div style="width:50%;background:linear-gradient(to top,pink 50%,#fff 50%);mask:url(https://i.imgur.com/e4Jf0g7.png)center no-repeat;mask-size:auto 100%;"><div style="height:250px;background:#000;mask:url(https://i.imgur.com/jEtacmw.png)center no-repeat;mask-size:auto 100%;"></div></div>

<div style="width:50%;background:linear-gradient(to top,lightblue 50%,#fff 50%);mask:url(https://i.imgur.com/rFLGbMN.png)center no-repeat;mask-size:auto 100%;"><div style="height:250px;background:#000;mask:url(https://i.imgur.com/lig72Xa.png)center no-repeat;mask-size:auto 100%;"></div></div>

</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);display:flex;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Section</legend>

<div style="width:50%;background:linear-gradient(to top,pink 50%,#fff 50%);mask:url(https://i.imgur.com/MzObXaI.png)center no-repeat;mask-size:auto 100%;"><div style="height:200px;background:#000;mask:url(https://i.imgur.com/2seumQl.png)center no-repeat;mask-size:auto 100%;"></div></div>

<div style="width:50%;background:linear-gradient(to top,lightblue 50%,#fff 50%);mask:url(https://i.imgur.com/MzObXaI.png)center no-repeat;mask-size:auto 100%;"><div style="height:200px;background:#000;mask:url(https://i.imgur.com/2seumQl.png)center no-repeat;mask-size:auto 100%;"></div></div>

</fieldset>

<fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);display:flex;">
			<legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Section</legend>

<div style="width:50%;background:linear-gradient(to top,pink 50%,#fff 50%);mask:url(https://i.imgur.com/kJgktG2.png)center no-repeat;mask-size:auto 100%;"><div style="height:250px;background:#000;mask:url(https://i.imgur.com/UDElnF9.png)center no-repeat;mask-size:auto 100%;"></div></div>

<div style="width:50%;background:linear-gradient(to top,lightblue 50%,#fff 50%);mask:url(https://i.imgur.com/kJgktG2.png)center no-repeat;mask-size:auto 100%;"><div style="height:250px;background:#000;mask:url(https://i.imgur.com/UDElnF9.png)center no-repeat;mask-size:auto 100%;"></div></div>

</fieldset>

</section>

</article><div style="max-width:860px;margin:5px auto 0 auto;text-align:right;font-size:10px;font-family:calibri,sans-serif;"><a href="" style="color:#bbb;text-decoration:none;">CODING</a></div></lj-raw>

Old Version

<section style="width:calc(100% / 3);box-sizing:border-box;">

<div style="text-align:center;margin:0 0 10px 0;font-weight:bold;text-transform:uppercase;letter-spacing:2px;"><div style="color:pink;-webkit-text-fill-color:pink;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;font-size:25px;">❤</div><b>NAME HERE</b></div>

<center style="width:100%;background:#fff;padding:8px 0;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);"><b>NAME HERE</b></center>

</div>

</section>

</section>

<section style="width:calc(100% / 3);text-align:right;box-sizing:border-box;">

<div style="text-align:center;margin:0 0 10px 0;font-weight:bold;text-transform:uppercase;letter-spacing:2px;"><div style="color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;font-size:25px;">❤</div><b>NAME HERE</b></div>

<center style="width:100%;background:#fff;padding:8px 0;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);"><b>NAME HERE</b></center>

</div>

</section>

<section style="width:calc(100% - 33%);margin:30px 0 0 0;padding:0 60px 0 0;box-sizing:border-box;">

<div style="padding:0 0 0 5%;color:pink;-webkit-text-fill-color:pink;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div>