[38] Blocky CR Chart (or Muselist)

[lina_trinch]

Code:
<!--CREDIT--> <div style="width: 900px; margin: 40px auto -1px; text-align: right; font-variant: small-caps; font-weight: bold; letter-spacing: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <a href="https://killthecake.dreamwidth.org/" style="text-decoration: none; color: hotpink;">killthecake</a> </div> <!-- CONTAINER --> <div style="width: 900px; margin: 40px auto; display: flex; justify-content: space-between; flex-wrap: wrap; font-family: Arial, Helvetica, sans-serif;"> <!--BLOCK WITH BAR--> <div style="width: 30%; margin-bottom: 50px; max-height: 180px;"> <!--ICON--> <div style="width: 75px; height: 75px; background: center/cover url(IMAGE_URL); border: 10px solid hotpink; position: relative; bottom: 20px; right: 20px; box-shadow: 3px 3px 4px rgba(0,0,0,0.4); z-index: 1;"></div> <!--INFO--> <div style="width: 85%; height: 150px; background: #b45fb4; float: right; position: relative; bottom: 70px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8); z-index: 0;"> <span style="display: block; float: right; width: 80%; padding: 5px 0; font-size: 20px; font-weight: bold; font-variant: small-caps;"> CHARACTER </span> <!--BAR--> <div style="width: 78%; float: right; border: 2px solid #000; margin-right: 5px; background: #333;"> <div style="background: hotpink; height: 5px; width: ##%; border-radius: 0 1px 1px 0;"></div> </div> <!--TEXT--> <div style="width: 95%; height: 81px; position: relative; top: 16px; overflow-y: auto; padding: 5px; font-size: 15px; text-align: justify;"> Lorem ipsum </div> </div> </div> <!--BLOCK WITH LINKS--> <div style="width: 30%; margin-bottom: 50px; max-height: 180px;"> <!--ICON--> <div style="width: 75px; height: 75px; background: center/cover url(IMAGE_URL); border: 10px solid hotpink; position: relative; bottom: 20px; right: 20px; box-shadow: 3px 3px 4px rgba(0,0,0,0.4); z-index: 1;"></div> <!--INFO--> <div style="width: 85%; height: 150px; background: #b45fb4; float: right; position: relative; bottom: 70px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8); z-index: 0;"> <span style="display: block; float: right; width: 80%; padding: 5px 0; font-size: 20px; font-weight: bold; font-variant: small-caps;"> CHARACTER </span> <!--LINKS--> <div style="width: 78%; float: right; display: flex; justify-content: space-around; font-size: 12px; font-weight: bold;"> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">J</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">K</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">L</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">M</a> </div> <!--TEXT--> <div style="width: 95%; height: 81px; position: relative; top: 12px; overflow-y: auto; padding: 5px; font-size: 15px; text-align: justify;"> Lorem ipsum </div> </div> </div> <!--BLOCK W/ BAR & LINKS, NO TEXT--> <div style="width: 30%; margin-bottom: 50px; max-height: 180px;"> <!--ICON--> <div style="width: 75px; height: 75px; background: center/cover url(IMAGE_URL); border: 10px solid hotpink; position: relative; bottom: 20px; right: 20px; box-shadow: 3px 3px 4px rgba(0,0,0,0.4); z-index: 1;"></div> <!--INFO--> <div style="width: 85%; height: 80px; background: #b45fb4; float: right; position: relative; bottom: 70px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8); z-index: 0;"> <span style="display: block; float: right; width: 80%; padding: 5px 0; font-size: 20px; font-weight: bold; font-variant: small-caps;"> CHARACTER </span> <!--BAR--> <div style="width: 78%; float: right; border: 2px solid #000; margin-right: 5px; background: #333;"> <div style="background: hotpink; height: 5px; width: ##%; border-radius: 0 1px 1px 0;"></div> </div> <!--LINKS--> <div style="width: 90%; float: right; display: flex; justify-content: space-around; font-size: 12px; font-weight: bold; margin-top: 10px;"> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">J</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">K</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">L</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">M</a> </div> </div> </div> <!--BLOCK W/ BAR, LINKS, & TEXT--> <div style="width: 30%; margin-bottom: 50px; max-height: 180px;"> <!--ICON--> <div style="width: 75px; height: 75px; background: center/cover url(IMAGE_URL); border: 10px solid hotpink; position: relative; bottom: 20px; right: 20px; box-shadow: 3px 3px 4px rgba(0,0,0,0.4); z-index: 1;"></div> <!--INFO--> <div style="width: 85%; height: 175px; background: #b45fb4; float: right; position: relative; bottom: 70px; box-shadow: 1px 1px 4px rgba(0,0,0,0.8); z-index: 0;"> <span style="display: block; float: right; width: 80%; padding: 5px 0; font-size: 20px; font-weight: bold; font-variant: small-caps;"> CHARACTER </span> <!--BAR--> <div style="width: 78%; float: right; border: 2px solid #000; margin-right: 5px; background: #333;"> <div style="background: hotpink; height: 5px; width: ##%; border-radius: 0 1px 1px 0;"></div> </div> <!--LINKS--> <div style="width: 90%; float: right; display: flex; justify-content: space-around; font-size: 12px; font-weight: bold; margin-top: 10px;"> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">J</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">K</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">L</a> <a href="URL" style="text-decoration: none; color: hotpink; text-shadow: 1px 1px 0px rgba(0,0,0,0.4);">M</a> </div> <!--TEXT--> <div style="width: 95%; height: 81px; position: relative; top: 16px; overflow-y: auto; padding: 5px; font-size: 15px; text-align: justify;"> Lorem ipsum </div> </div> </div> <!--ADD MORE ABOVE THIS LINE--> </div>

❖ This was made for my Patreon's early access! Which just means they got it a bit earlier than you guys. More content will be coming in the future. :) ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ There are four different styles, each one labelled in the code itself. You can mix and match to your heart's content. ❖ When using the links, make sure you don't use long words. It gets a little squished. Ctrl+F & Replace: ❖ IMAGE_URL - chosen image for each one ❖ CHARACTER - character name ❖ ##% - percentage of the stat bar ❖ URL - link url ❖ J, K, L, or M - link name (or a little icon) ❖ Lorem ipsum - text blurb hotpink credit, image border, status bar, links #b45fb4 block background #000 status bar border #333 status bar background rgba(0,0,0,0.4) shadows