killthecake | [34] Flashy CR Chart (Reply)

Yuna

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue posuere enim, in interdum ipsum feugiat semper. Nam efficitur volutpat dui, in iaculis sem dictum et. Nunc non arcu a lorem dapibus interdum sit amet eu nisi. Donec erat quam, facilisis eget sapien non, vestibulum laoreet felis. Maecenas nec finibus felis. Fusce posuere quam eros. Suspendisse auctor enim magna, vel ultricies lectus tincidunt vitae. Nullam vestibulum orci ex, nec volutpat nulla sollicitudin in. Nam fringilla erat ut diam rutrum, non sollicitudin diam congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue posuere enim, in interdum ipsum feugiat semper. Nam efficitur volutpat dui, in iaculis sem dictum et. Nunc non arcu a lorem dapibus interdum sit amet eu nisi. Donec erat quam, facilisis eget sapien non, vestibulum laoreet felis. Maecenas nec finibus felis. Fusce posuere quam eros. Suspendisse auctor enim magna, vel ultricies lectus tincidunt vitae. Nullam vestibulum orci ex, nec volutpat nulla sollicitudin in. Nam fringilla erat ut diam rutrum, non sollicitudin diam congue.

Lulu

Auron

Rikku

credit

Code:

<div style="width: 700px; height: 200px;background: url(BG_URL);background-position:center;background-size:cover;box-shadow: 3px 3px 3px rgba(0,0,0,0.5);margin-bottom: 20px;"><div style="width: 670px; height: 170px;position:relative; top: 15px;background: rgba(255,255,255,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -moz-backdrop-filter: blur(4px); -o-backdrop-filter: blur(4px);overflow-y: auto;"><div style="padding: 5px;text-align:justify;color: #000;font-family:helvetica;">

<span style="font-size: 22px;font-variant:small-caps;">
<a href="URL" style="font-weight:normal;text-decoration:none;color: #000;">
Character
</a></span>

Lorem ipsum

</div></div></div>

<div style="width: 700px; text-align:right;"><a href="https://killthecake.dreamwidth.org/" style="color: #000;text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 15px;">credit</a></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ You can c/p as many blocks into your page as you want. I left indicators and a space in the code for you to do just that.

❖ If the blocks look kind of messy or don't align right on your screen, you can change the width values. Naturally, this one doesn't look amazing on mobile because it's so large.

❖ The background dimensions are 700x200. That said, any size image will fit. If it's larger, it'll squeeze itself in like it did in my examples. If it's smaller, it'll stretch to fit the box. Pick your images accordingly. Or, if that's too much of a hassle, just replace the URL section of the background with a color.

❖ These are supposed to have a blurry overlay effect. If you're not seeing that, don't worry. It doesn't work on all browsers even with my tweaking. That said, the chart itself will work for everyone even if you don't get the blurry thing.

❖ If you have any trouble, let me know! I'll try to help.

Ctrl+F & Replace:
❖ BG_URL - Background image url
❖ url(BG_URL) - If you want to change the image to a color, replace this whole bit
❖ URL - Url to journal or whatever you want

❖ Character - Character name
❖ Lorem ipsum - Blurb text

#000 Text, link, and divider color

rgba(255,255,255,0.6) Blurb background
rgba(0,0,0,0.5) Box shadow

[34] Flashy CR Chart

Post a comment in response: