CR: Ship Breakdown

[tesscodes]

❤

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

Section

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;"> <!--CHAR #1--> <section style="width:calc(100% / 3);box-sizing:border-box;"> <!--NAME - CAN DELETE IF USING OTHER NAME--> <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> <!--IMG--> <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;"> <!--ALT NAME - CAN DELETE--> <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> <!--GENDER--> <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> <!--SEXUALITY--> <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> <!--CHARS HEIGHT & AGE--> <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-1;"> <legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Age</legend> 00 </fieldset> <fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:age-2;"> <legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Age</legend> 00 </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> <!--CHAR #2--> <section style="width:calc(100% / 3);text-align:right;box-sizing:border-box;"> <!--NAME - CAN DELETE IF USING OTHER NAME--> <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> <!--IMG--> <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;"> <!--ALT NAME - CAN DELETE--> <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> <!--GENDER--> <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> <!--SEXUALITY--> <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> <!--CHAR METERS--> <section style="width:calc(100% - 33%);margin:30px 0 0 0;padding:0 60px 0 0;box-sizing:border-box;"> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <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> <!--TROPES--> <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> <!--SONGS--> <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> <!--CHAR LEVELS--> <section style="width:33%;margin:30px 0 0 0;box-sizing:border-box;"> <!--REALISTIC FIGURES--> <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> <!--FEMME--> <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> <!--MASC--> <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> <!--SIGN FIGURES--> <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> <!--FEMME--> <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> <!--MASC--> <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> <!--CHIBI FIGURES--> <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> <!--LEFT--> <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> <!--RIGHT--> <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> <!--CARTOON FIGURES--> <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> <!--LEFT--> <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> <!--RIGHT--> <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

<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;"> <!--CHAR #1--> <section style="width:calc(100% / 3);box-sizing:border-box;"> <!--NAME - CAN DELETE IF USING OTHER NAME--> <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> <!--IMG--> <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;"> <!--ALT NAME - CAN DELETE--> <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> <!--GENDER--> <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> <!--SEXUALITY--> <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> <!--CHARS HEIGHT & AGE--> <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-1;"> <legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Age</legend> 00 </fieldset> <fieldset style="margin:10px 0 0 0;border:1px solid rgba(0,0,0,0.1);grid-area:age-2;"> <legend style="font-weight:bold;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:#222;">Age</legend> 00 </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> <!--CHAR #2--> <section style="width:calc(100% / 3);text-align:right;box-sizing:border-box;"> <!--NAME - CAN DELETE IF USING OTHER NAME--> <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> <!--IMG--> <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;"> <!--ALT NAME - CAN DELETE--> <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> <!--GENDER--> <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> <!--SEXUALITY--> <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> <!--CHAR METERS--> <section style="width:calc(100% - 33%);margin:30px 0 0 0;padding:0 60px 0 0;box-sizing:border-box;"> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--SECTION TITLES--> <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> <!--SECTION SLIDER--> <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;"> <!--CHAR #1 MARKER--> <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> <!--CHAR #2 MARKER--> <div style="padding:0 0 0 5%;color:lightblue;-webkit-text-fill-color:lightblue;-webkit-text-stroke-color:#000;-webkit-text-stroke-width:1px;box-sizing:border-box;">❤</div> </div> <!--TROPES--> <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> <!--SONGS--> <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> <!--CHAR LEVELS--> <section style="width:33%;margin:30px 0 0 0;box-sizing:border-box;"> <!--REALISTIC FIGURES--> <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> <!--FEMME--> <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> <!--MASC--> <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> <!--SIGN FIGURES--> <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> <!--FEMME--> <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> <!--MASC--> <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> <!--CHIBI FIGURES--> <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> <!--LEFT--> <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> <!--RIGHT--> <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> <!--CARTOON FIGURES--> <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> <!--LEFT--> <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> <!--RIGHT--> <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="https://www.tessisamess.com/codes?search=ship+breakdown" style="color:#bbb;text-decoration:none;">CODING</a></div></lj-raw>

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

calibri,sans-serif - All text
font-size:13px; - Body text
font-size:10px; - Section labels
font-size:20px; - Slider markers
font-size:25px; - Name option #1 heart

COLORS

#fff

Container background

#FFC0CB

First character's color

#ADD8E6

Second character's color

#333

Text

#222

Labels

rgba(0,0,0,0.1)

Borders

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!