[49] Visuals Box!

[lina_trinch]

Code:
<div style="background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4)), center/cover url(BG_IMAGE); width: 700px; min-height: 450px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 15px; margin: auto; padding: 10px; overflow: hidden;"> <div style="width: 710px; height: 450px; overflow-y: auto; overflow-x: hidden;"> <!--title--> <div style="width: 100%; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 150px 0 130px; font-size: 80px; font-family: Georgia, 'Times New Roman', Times, serif; color: #f7f7f7; font-weight: bold; font-style: italic; cursor: default;"> Title </div> <div style="width: 100%; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: default; margin-bottom: 20px;"> <img src="https://img.icons8.com/material/50/FFFFFF/double-down.png"> </div> <div style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; width: 97%;"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <img src="IMAGE_URL" style="width: 100%; margin-bottom: 5px; border: 4px solid rgba(255, 255, 255, 0.2);"> <!--ADD MORE IMAGES ABOVE THIS LINE--> </div> </div> </div> <div style="width: 700px; margin: auto; text-align: right; font-variant: small-caps; font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size: 11px; padding-right: 15px; font-weight: bold;"> <a href="https://killthecake.dreamwidth.org/" style="color: #ccc; text-decoration: none;"> code </a> </div>

❖ This is another code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content. ❖ You can also check out this live preview I've been using. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Personally, I think it'd be great for environments more than aesthetics, like showing off your character's new apartment or something. But that's just me! Go crazy with it. ❖ And, of course, add/remove as many images as you want. Ctrl+F & Replace: ❖ BG_IMAGE - main background image ❖ IMAGE_URL - visual images, six in by default but add as many as you want ❖ Title/Plurk - title or character name #f7f7f7 title color #ccc credit link FFFFFF in the image url for the arrow, you can change the color of it with hex codes so long as there are six characters rgba(0,0,0,0.4) gradient to make the main background darker rgba(255, 255, 255, 0.2) borders for visual images