[69] Blueprint Map

[lina_trinch]

Code:
<div style="display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); gap: 1px; border: 5px solid #245694; background: #d0d7db; width: 683px; height: 379px; padding: 1px; margin: auto;"> <div style="grid-area: 1 / 1 / 2 / 2; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 2 / 2 / 3; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 3 / 2 / 4; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 4 / 2 / 5; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 5 / 2 / 6; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 6 / 2 / 7; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 7 / 2 / 8; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 8 / 2 / 9; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 9 / 2 / 10; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 1 / 3 / 2; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 2 / 3 / 3; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 3 / 3 / 4; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 4 / 3 / 5; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 5 / 3 / 6; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 6 / 3 / 7; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 7 / 3 / 8; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 8 / 3 / 9; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 2 / 9 / 3 / 10; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 1 / 4 / 2; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 2 / 4 / 3; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 3 / 4 / 4; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 4 / 4 / 5; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 5 / 4 / 6; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 6 / 4 / 7; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 7 / 4 / 8; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 8 / 4 / 9; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 3 / 9 / 4 / 10; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 1 / 5 / 2; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 2 / 5 / 3; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 3 / 5 / 4; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 4 / 5 / 5; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 5 / 5 / 6; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 6 / 5 / 7; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 7 / 5 / 8; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 8 / 5 / 9; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 4 / 9 / 5 / 10; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 1 / 6 / 2; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 2 / 6 / 3; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 3 / 6 / 4; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 4 / 6 / 5; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 5 / 6 / 6; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 6 / 6 / 7; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 7 / 6 / 8; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 8 / 6 / 9; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 5 / 9 / 6 / 10; background: center/cover url('IMAGE'), #245694;"></div> <div style="grid-area: 1 / 1 / 6 / 10; color: #d0d7db; display: flex; align-items: center; justify-content: center; font-size: 150px; font-family: 'Courier New', Courier, monospace; -webkit-text-stroke: 2px #2a5f9b; text-stroke: 2px #2a5f9b;">Header</div> </div> <div style="width: 400px; text-align: center; margin: 5px auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px;"> <a href="https://killthecake.dreamwidth.org/" style="color: #000; text-decoration: none;"> CODE </a> </div>

❖ These codes were released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content. ❖ This weird little code is based heavily on the game Blue Prince, which I've been obsessed with for quite awhile. The idea here is that you use the squares to create a "floorplan" of GIFs, icons, colors, or whatever you want along with a custom header. I'm not sure how useful you guys will find it, but I thought it was neat! ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. Ctrl+F & Replace: ❖ IMAGE - GIF or image URL placeholder for each box. You could just use the color, though, and skip the image if you want. ❖ Header - Header text! Feel free to remove this if you want. #245694 backgrounds #d0d7db borders (this is actually the background, but the grid is laid out in such a way that this looks like box borders) #000 credit