tesscodes | CR Code: Versus

Information

Hey guys! IT'S THAT TIME AGAIN, MY FAVORITE MONTH OF THE YEAR!!! 🎃 To kick things off, let's do a cute ship code! It was really meant to be more of a 'versus' type deal, but realistically no one has much of a use for that, so we're going CR chart instead!

I've added an alternate version for those of you who may want to use this as a CR chart instead since the HTML heart outline is very specifically placed so that the backgrounds don't show behind it haha. If using icons to depict relationship status, use the second version to save yourself a headache! ♥ Enjoy!

Frankenstein's Monster

@username

♡

Bride of Frankenstein

@username

CODE BY TESSISAMESS

Coding: Heart cutout

<lj-raw><div style="margin:0 auto;width:750px;height:300px;background:#ddd;font-family:arial black;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#111;line-height:1.5;">

<div style="width:50%;background:#ddd url(YOUR_PIC)center;background-size:cover;">
		</div>

<div style="width:50%;background:#eee url(THEIR_PIC)center;background-size:cover;">
		</div>
	</div>

<div style="width:calc(50% - 8%);text-align:right;">
			<div style="background:#111;color:#fff;font-size:15px;padding:0 15px 0 0;clip-path:polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%);margin:0 11px 0 0;">YOUR_NAME</div>
			<div style="background:#CF1E1E;padding:0 20px 0 0;clip-path:polygon(0 0%, 95% 0%, 100% 100%, 7% 100%);">@YOUR_USERNAME</div>
		</div>

<div style="font-size:100px;line-height:0;position:relative;z-index:4;margin:0 -22px;color:#fff;text-shadow:2px 2px 1px rgba(0,0,0,0.3);">
			♡
		</div>

<div style="width:calc(50% - 8%);text-align:left;">
			<div style="background:#111;color:#fff;font-size:15px;padding:0 0 0 15px;clip-path:polygon(0% 0, 93% 0, 100% 100%, 0% 100%);margin:0 0 0 11px;">THEIR_NAME</div>
			<div style="background:#CF1E1E;padding:0 0 0 25px;clip-path:polygon(5% 0, 100% 0, 93% 100%, 0% 100%);">@THEIR_USERNAME</div>
		</div>
	</div>

</div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

Frankenstein's Monster

@username

Bride of Frankenstein

@username

CODE BY TESSISAMESS

Coding: Icon circle

<lj-raw><div style="margin:0 auto;width:750px;height:300px;background:#ddd;font-family:arial black;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#111;line-height:1.5;">

<div style="width:50%;background:#ddd url(YOUR_PIC)center;background-size:cover;">
		</div>

<div style="width:50%;background:#eee url(THEIR_PIC)center;background-size:cover;">
		</div>
	</div>

<div style="height:50px;width:55px;position:relative;z-index:4;margin:0 -22px;background:#fff;border-radius:100%;border:3px solid #111;display:flex;justify-content:center;align-items:center;">
			<img src="https://i.imgur.com/taiW94r.png" width="40px">
		</div>

Installation Guide

Paste into an entry and fill in the following!

YOUR_PIC and THEIR_PIC - Picture blocks
YOUR_NAME and THEIR_NAME - Title fields
YOUR_USERNAME and THEIR_USERNAME - Subtitle fields

Editing Guide

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

FONTS

arial black - Overall font

IMAGES

https://i.imgur.com/taiW94r.png - Center icon (icon circle version only)

COLORS

#fff Name text, heart, icon background

#CF1E1E Subtitle/username background

#111 Name background, subtitle/username text, icon border

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!