Tessisamess

Information

Hey guys! The last round of color palette codes was a standalone to go into other codes or to post your own palettes for other people to use, but this time we're doing character-specific palette boards, yay! There are four different options here, so hopefully you find something you like. I can't wait to make another set (I have A Vision, you see.) Enjoy! 💖

Coding: Square

<lj-raw><div style="width:570px;height:450px;margin:0 auto;display:flex;font-family:georgia,serif;font-size:8px;letter-spacing:4px;text-transform:uppercase;color:#222;text-align:center;"> <!--MAIN--> <div style="width:450px;background:#ddd url(PIC_HERE)center;background-size:cover;display:flex;align-items:center;justify-content:center;padding:50px;box-sizing:border-box;"> <!--TITLES--> <div style="background:#fff;padding:10px;min-width:200px;"> <b>NAME_HERE</b> <hr style="margin:10px 20px;border:none;height:1px;background:#ddd;"> SUBTITLE_HERE </div> </div> <!--COLOR PALETTE--> <div style="width:120px;display:flex;align-items:flex-end;justify-content:center;flex-direction:column;"> <div style="width:80px;height:80px;background:#777;border-radius:100%;margin:5px 0;"></div> <div style="width:80px;height:80px;background:#666;border-radius:100%;margin:5px 0;"></div> <div style="width:80px;height:80px;background:#555;border-radius:100%;margin:5px 0;"></div> <div style="width:80px;height:80px;background:#444;border-radius:100%;margin:5px 0;"></div> <div style="width:80px;height:80px;background:#333;border-radius:100%;margin:5px 0;"></div> </div> </div></lj-raw>

Coding: Portrait

<lj-raw><div style="width:400px;margin:0 auto;font-family:georgia,serif;font-size:8px;letter-spacing:4px;text-transform:uppercase;color:#222;text-align:center;"> <!--MAIN--> <div style="height:550px;background:#ddd url(PIC_HERE)center;background-size:cover;display:flex;align-items:flex-end;justify-content:center;padding:50px;box-sizing:border-box;"> <!--TITLES--> <div style="background:#fff;padding:10px;box-sizing:border-box;min-width:100%;"> <b>NAME_HERE</b> <hr style="margin:10px 20px;border:none;height:1px;background:#ddd;"> SUBTITLE_HERE </div> </div> <!--COLOR PALETTE--> <div style="display:flex;align-items:center;justify-content:center;margin:20px 0 0 0;"> <div style="width:70px;height:70px;background:#777;border-radius:100%;margin:5px;"></div> <div style="width:70px;height:70px;background:#666;border-radius:100%;margin:5px;"></div> <div style="width:70px;height:70px;background:#555;border-radius:100%;margin:5px;"></div> <div style="width:70px;height:70px;background:#444;border-radius:100%;margin:5px;"></div> <div style="width:70px;height:70px;background:#333;border-radius:100%;margin:5px;"></div> </div> </div></lj-raw>

Coding: Round

<lj-raw><div style="width:350px;margin:0 auto;font-family:georgia,serif;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#222;text-align:center;"> <!--MAIN--> <div style="height:350px;background:#ddd url(PIC_HERE)center;background-size:cover;display:flex;align-items:center;justify-content:center;border-radius:100%;padding:50px;box-sizing:border-box;"> <!--TITLES--> <div style="background:#fff;padding:10px;"> <b>NAME_HERE</b> <hr style="margin:10px 20px;border:none;height:1px;background:#ddd;"> SUBTITLE_HERE </div> </div> <!--COLOR PALETTE--> <div style="display:flex;align-items:center;justify-content:center;margin:10px 0 0 0;"> <div style="background:#333;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#444;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#555;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#666;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#777;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> </div> </div></lj-raw>

Coding: Card

<lj-raw><div style="width:250px;margin:0 auto;font-family:georgia,serif;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#222;text-align:center;"> <!--MAIN--> <div style="height:300px;background:#ddd url(PIC_HERE)center;background-size:cover;"> </div> <!--TITLES--> <div style="background:#fff;padding:10px 10px 30px 10px;border:1px solid #ddd;border-top:none;margin:0 0 -22px 0;"> <b>NAME_HERE</b> <hr style="margin:10px 20px;border:none;height:1px;background:#ddd;"> SUBTITLE_HERE </div> <!--COLOR PALETTE--> <div style="display:flex;align-items:center;justify-content:center;"> <div style="background:#333;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#444;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#555;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#666;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#777;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> </div> </div></lj-raw>

Using each color as a link

I'm anticipating this being asked, so here's a quick guide on how to turn each color block into a link to use these as navigation codes!

1. Turn the div the color is created with into a link instead by changing the opening and closing div to a
2. Add href="URL" title="Linktitle" before the style portion of the tag.
3. Fill in the above info and you're done! Using a color from the CARD code, here's roughly what you should end up with:

   <div style="background:#333;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div>
   
   Becomes:
   
   <a href="URL" title="Linktitle" style="background:#333;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></a>

Editing Guide

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

FONTS

georgia,serif - Overall font

COLORS

#fff

Text background; overlapping color swatch background

#ddd

All title separators and "Card" title border

#ccc

Overlapping color swatch borders

#777

First color

#666

Second color

#555

Third color

#444

Fourth color

#333

Fifth color

#222

Text color

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!