[17] Hyperion City...

[lina_trinch]

Juno Steel and the Case of the Murderous Mask


Live Previews Here!

<center> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;box-shadow: 5px 5px 2px rgba(0,0,0,0.7);"> <div style="background: rgba(255,255,255,0.2)"> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 10%);margin left: 50px;"> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 40px;font-variant: small-caps;font-style: italic;padding-top: 20px;padding-left: 230px;text-shadow: 2px 2px 1px #000;"> Character </div> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 30px;font-variant: small-caps;font-style: italic;padding-left: 360px;text-shadow: 2px 2px 1px #000;"> Canon </div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 20%, 0% 40%, 60% 30%);margin-top: -550px;margin left: -30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 145px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 30%, 100% 50%, 40% 40%);margin-top: -550px;margin left: 50px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 200px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 40%, 0% 60%, 60% 50%);margin-top: -550px;margin left: -30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 255px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 50%, 100% 70%, 40% 60%);margin-top: -550px;margin left: 50px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 310px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 60%, 0% 80%, 60% 70%);margin-top: -550px;margin left: -30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 365px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 70%, 100% 90%, 40% 80%);margin-top: -550px;margin left: 50px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 420px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 80%, 0% 100%, 100% 100%);margin-top: -550px;margin left: -30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 485px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="https://killthecake.dreamwidth.org/" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Credit </a></div> </div> </div></div>



Juno Steel and the Monster's Reflection


Live Previews Here!

<center> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 10%, 100% 30%, 40% 40%, 100% 50%, 40% 60%, 100% 70%, 40% 80%, 100% 90%, 100% 100%, 0% 80%, 60% 70%, 0% 60%, 60% 50%, 0% 40%, 60% 30%, 0% 20%);"></div> <div style="width: 500px; height: 550px;margin-top: -550px"> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 10%);margin-left: 10px;"> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 40px;font-variant: small-caps;font-style: italic;padding-top: 20px;padding-left: 230px;text-shadow: 2px 2px 1px #000;"> Character </div> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 30px;font-variant: small-caps;font-style: italic;padding-left: 360px;text-shadow: 2px 2px 1px #000;"> Canon </div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 20%, 0% 40%, 60% 30%);margin-top: -550px;margin-left: -30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 145px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 30%, 100% 50%, 40% 40%);margin-top: -550px;margin-left: 20px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 200px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 40%, 0% 60%, 60% 50%);margin-top: -550px;margin-left: -50px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 255px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 50%, 100% 70%, 40% 60%);margin-top: -550px;margin-left: 30px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 310px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 60%, 0% 80%, 60% 70%);margin-top: -550px;margin-left: -40px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 365px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(100% 70%, 100% 90%, 40% 80%);margin-top: -550px;margin-left: 15px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 420px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;clip-path: polygon(0% 80%, 0% 100%, 100% 100%);margin-top: -550px;margin-left: -20px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 485px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="https://killthecake.dreamwidth.org/" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Credit </a></div> </div></div>



Juno Steel and the Soul of the People


Live Previews Here!

<center> <div style="width: 500px;height: 550px;background: url(URL), #9c9c9c; background-size:cover;background-position:center;overflow:hidden;box-shadow: 5px 5px 2px rgba(0,0,0,0.7);"> <div style="background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.2));"> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 10%);margin-left: 5px;"> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 40px;font-variant: small-caps;font-style: italic;padding-top: 20px;padding-left: 230px;text-shadow: 2px 2px 1px #000;"> Character </div> <div style="font-family:monospace;color: rgba(255,255,255,0.9);font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: px;padding-left: 360px;text-shadow: 2px 2px 1px #000;"> Canon </div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(0% 20%, 0% 40%, 60% 30%);margin-top: -550px;margin-left: -10px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 145px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(100% 30%, 100% 50%, 40% 40%);margin-top: -550px;margin-left: 20px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 200px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(0% 40%, 0% 60%, 60% 50%);margin-top: -550px;margin-left: -5px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 255px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(100% 50%, 100% 70%, 40% 60%);margin-top: -550px;margin-left: 15px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 310px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(0% 60%, 0% 80%, 60% 70%);margin-top: -550px;margin-left: -9px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 365px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(100% 70%, 100% 90%, 40% 80%);margin-top: -550px;margin-left: 5px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 420px;padding-left: 340px;text-shadow: 2px 2px 1px #000;"> <a href="LINK_URL" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Link </a></div> </div> <div style="width: 500px;height: 550px;background: url(URL), #bfbfbf; background-size:cover;background-position:center;clip-path: polygon(0% 80%, 0% 100%, 100% 100%);margin-top: -550px;margin-left: -15px;"> <div style="font-family:monospace;font-size: 30px;font-variant: small-caps;font-style: italic;padding-top: 485px;padding-right: 340px;text-shadow: 2px 2px 1px #000;"> <a href="https://killthecake.dreamwidth.org/" style="color: rgba(255,255,255,0.9);text-decoration:none;"> Credit </a></div> </div> </div></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ These codes are meant to work with one or two images and the examples above reflect that. Of course, you can fool around with it however you want. ❖ Sometimes, the Soul of the People code will start showing borders in a really glitchy way if you use a light background. I have no idea why it happens but refreshing the page fixes it. (It's probably just my connection not loading fast enough...? Maybe the image is too hi-def???) If anyone figures out why, lmk. ❖ If you want to use that last link instead of it linking here, feel free to re-purpose it. Just credit me elsewhere. ❖ What do you mean you haven't heard of Juno Steel? Ctrl+F & Replace: ❖ URL - Url of your image(s). ❖ LINK_URL - Url for your links. ❖ Link - Text for your link. ❖ Character - Character name (header). ❖ Canon - Canon name (subheader). #9c9c9c Colored background of the images. #bfbfbf Colored background of some images in Soul of the People. #000 Text shadows. rgba(0,0,0,0.7) Box shadows for Murderous Mask & Soul of the People. rgba(255,255,255,0.9) Text color. rgba(0,0,0,0) Transparent gradient background in Soul of the People. rgba(0,0,0,0.2) Gradient background in Soul of the People. rgba(255,255,255,0.2) Light background in Murderous Mask.