008 — (code) tumblr blog profile cr chart

[vigilanting]

( fullsize • live preview )

A simple CR chart inspired by the classic Tumblr blog profile (circa 2008), featuring status bars and what I'm calling "badges" aka whatever random game-themed title / achievement / silly reputation award you want to include for your CR. The badge is pixel sized (20x20) and I've included some of my favorite pixel resources down below!

SPECIAL SHOUTOUTS

🗣️ The progress bars by 10billionghosts for helping me figure out how to make the stat bars work the way I wanted! 🫶

🗣️ Everyone on Plurk who has already used this and inadvertently became my body doubles for code testing and refining. 😂 I kiss you all!!


BASE CODE
<lj-raw><div style="max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;"> <!-- cards below this line --> <!-- cards above this line --> </div> <div style="max-width:250px;margin:0 auto;font-size:9px;text-transform:uppercase;text-align:center;font-family:helvetica,sans-serif;">code © <a href="https://metahumans.dreamwidth.org">miyou</a></div></lj-raw>
SINGLE CARD CODE
<!-- card start --> <div style="width:250px;min-height:530px;font:11px lucida sans, lucida sans unicode, sans-serif;color:#3b627e;background:#eee;padding:0 20px 1px;border-radius:10px;margin:50px 0 5px;"> <!-- profile img start --> <div style="width:146px;height:146px;padding:8px 0 0 9px;background:#fff url('https://placehold.co/146x146')center / cover;border:5px solid #fff;position:relative;top: -24px;filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));"></div> <!-- profile img end --> <!-- short name start; remove if using long name --> <div style="position:relative;top:-5px;text-transform:uppercase;font:900 21px arial;letter-spacing:1px;line-height:0.9;">char name</div> <!-- short name end --> <!-- long name start; remove if using short name --> <div style="position:relative;top:-5px;text-transform:uppercase;font:900 21px arial;letter-spacing:1px;line-height:0.9;"><span style="font-size:16px;">name</span><span style="font-size:16px;">lastname</span></div> <!-- long name end --> <!-- text descriptions start; remove this if you want to use an image --> <div style="position:relative;text-transform:uppercase;font:10px arial, sans-serif;letter-spacing:1px;">🛁 short description / quote / lyric / nickname etc</div> <div style="height:145px;position:relative;margin:15px 0;letter-spacing:0.5px;line-height:1.3;overflow:auto;scrollbar-width: none;">Detailed description, thoughts, feelings, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <!-- text descriptions end --> <!-- description with image start; remove this if you want to use text --> <div style="position:relative;text-transform:uppercase;font:10px arial, sans-serif;letter-spacing:1px;">🛁 short description / quote / lyric / nickname etc</div> <div style="height:145px;position:relative;margin:15px 0;letter-spacing:0.5px;line-height:1.3;overflow:auto;background:url('https://i.pinimg.com/1200x/23/9d/f6/239df6f09922363b22b6a206f7bb1433.jpg')center / cover;"></div> <!-- description with image end --> <!-- stats --> <div style="max-width:215px;margin:12px 0;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;color:#213545;"> <!-- bars below this line; change max-width %% to edit bar length --> <!-- bar start --> <div style="max-width:225px;width:100%;height:12px;margin:0 auto;padding:2px 3px;background:#fff;border:1px solid #3b627e;border-radius:4px;overflow:hidden;"> <div style="max-width:50%;height:100%;background:#749FBE;border-radius:3px;"></div> <div style="float:right;margin:-7px 0 0 0;font:700 7px arial, sans-serif;letter-spacing:1.3px;text-transform:uppercase;line-height:1;">affection 🤗</div> </div> <!-- bar end --> <!-- bar start --> <div style="max-width:225px;width:100%;height:12px;margin:0 auto;padding:2px 3px;background:#fff;border:1px solid #3b627e;border-radius:4px;overflow:hidden;"> <div style="max-width:50%;height:100%;background:#749FBE;border-radius:3px;"></div> <div style="float:right;margin:-7px 0 0 0;font:700 7px arial, sans-serif;letter-spacing:1.3px;text-transform:uppercase;line-height:1;">attraction 😳</div> </div> <!-- bar end --> <!-- bar start --> <div style="max-width:225px;width:100%;height:12px;margin:0 auto;padding:2px 3px;background:#fff;border:1px solid #3b627e;border-radius:4px;overflow:hidden;"> <div style="max-width:50%;height:100%;background:#749FBE;border-radius:3px;"></div> <div style="float:right;margin:-7px 0 0 0;font:700 7px arial, sans-serif;letter-spacing:1.3px;text-transform:uppercase;line-height:1;">love ❤️</div> </div> <!-- bar end --> <!-- bar start --> <div style="max-width:225px;width:100%;height:12px;margin:0 auto;padding:2px 3px;background:#fff;border:1px solid #3b627e;border-radius:4px;overflow:hidden;"> <div style="max-width:50%;height:100%;background:#749FBE;border-radius:3px;"></div> <div style="float:right;margin:-7px 0 0 0;font:700 7px arial, sans-serif;letter-spacing:1.3px;text-transform:uppercase;line-height:1;">protection 🛡️</div> </div> <!-- bar end --> <!-- bar start --> <div style="max-width:225px;width:100%;height:12px;margin:0 auto;padding:2px 3px;background:#fff;border:1px solid #3b627e;border-radius:4px;overflow:hidden;"> <div style="max-width:50%;height:100%;background:#749FBE;border-radius:3px;"></div> <div style="float:right;margin:-7px 0 0 0;font:700 7px arial, sans-serif;letter-spacing:1.3px;text-transform:uppercase;line-height:1;">trust 🤝</div> </div> <!-- bar end --> <!-- bars above this line --> </div> <!-- stats end --> <!-- badges start --> <div style="max-width:150px;display:grid;grid-template:20px / 20px 90px 20px auto;gap:10px;margin:15px 0;text-transform:capitalize;letter-spacing:0.5px;line-height:1;font-size:10.25px;"> <!-- row 1 --> <div style="grid-row-start:1;grid-row-end:2;height:20px;width:20px;background:url('https://placehold.co/20x20')center / cover;"></div> <div style="grid-row-start:1;grid-row-end:2;margin:auto 0;">title or achievement</div> <div style="grid-row-start:1;grid-row-end:2;height:20px;width:20px;background:url('https://placehold.co/20x20')center / cover;"></div> <div style="grid-row-start:1;grid-row-end:2;margin:auto 0;">shorter title</div> <!-- row 1 end --> <!-- row 2 --> <div style="grid-row-start:2;grid-row-end:3;height:20px;width:20px;background:url('https://placehold.co/20x20')center / cover;"></div> <div style="grid-row-start:2;grid-row-end:3;margin:auto 0;">title or achievement</div> <div style="grid-row-start:2;grid-row-end:3;height:20px;width:20px;background:url('https://placehold.co/20x20')center / cover;"></div> <div style="grid-row-start:2;grid-row-end:3;margin:auto 0;">shorter title</div> <!-- row 2 end --> </div> <!-- badges end --> </div> <!-- card end -->


INSTRUCTIONS + NOTES

✨ This code is 100% mobile friendly! Cards will stack automatically on smaller screens.

✨ Sections are noted with START and END for easy removal or copying.

✨ Copy the BASE code first, then add as many CARDS as you'd like.

✨ All images will scale to fit their containers.

✨ Options for short or long names are included in the card code, as well as text and image description sections.

✨ I'd suggest keeping names and short descriptions to the same number of lines or the cards in that row will look uneven. If you are not afflicted by meticulous evenness, then I can't stop you from doing whatever you want. 😮‍💨

✨ If all of your descriptions are relatively short, you can change height:145px and that will reduce the spacing between the description and the stat bars. Keep in mind, though, you'll also have to change min-height:530px for each individual card container or there will be lots of empty space at the bottom.

✨ This code comes with a built-in credit line. I don't mind if you edit or Frankenstein this code with another as long as you leave the original credit or give me a shoutout! ♥

✨ For any questions or troubleshooting, leave me a comment below!


REPLACEMENTS

CTRL+F for easy customization!

✨ #eee card background color

✨ #3b627e stat bar border color

✨ #749FBE stat bar fill color

✨ #213545 stat attributes font color

✨ #3b627e body text font color

✨ https://placehold.co/146x146 profile image

✨ https://placehold.co/20x20 badge pixel


PIXEL RESOURCES

These are a few of my go-to resources for finding cute pixels! You can also search Tumblr for [keyword] pixels and you'll usually get decent results.

NOTE that some of the following pages are very image heavy so they may take time to load!

✨ pixel safari • sorted by type

✨ sadthemes' smolpxl • sorted by color

✨ pixels carrd • sorted by color on each page + seasonal

✨ engram pixel • sorted by type

char name

🛁 short description / quote / lyric / nickname etc

Detailed description, thoughts, feelings, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

affection 🤗

attraction 😳

love ❤️

protection 🛡️

trust 🤝

title or achievement

shorter title

title or achievement

shorter title

name lastname

🛁 short description / quote / lyric / nickname etc

Detailed description, thoughts, feelings, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

affection 🤗

attraction 😳

love ❤️

protection 🛡️

trust 🤝

title or achievement

shorter title

title or achievement

shorter title

char name

🛁 short description / quote / lyric / nickname etc

affection 🤗

attraction 😳

love ❤️

protection 🛡️

trust 🤝

title or achievement

shorter title

title or achievement

shorter title

code © miyou

Comments

[panicstrickyn]

This is super cute!