[70] Scaled Tiled Nav

[lina_trinch]

Code:
<div style="margin: auto; width: 800px; height: 400px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); gap: 10px; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 0 #000; letter-spacing: 1px; font-weight: bold; font-size: 12px; text-transform: uppercase;"> <!--header--> <div style="grid-area: 1 / 1 / 3 / 4; background: center/cover url('IMAGE_URL'), #eee; border: 5px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.4);"></div> <!--first row links--> <a href="URL" style="grid-area: 3 / 1 / 4 / 2; background: #3B77AD; transform: scale(0.9); border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 3 / 2 / 4 / 3; background: #6589a5; border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: #28405A; transform: scale(0.9); border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <!--second row links--> <a href="URL" style="grid-area: 4 / 1 / 5 / 2; background: #28405A; border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: #3B77AD; transform: scale(0.9); border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 4 / 3 / 5 / 4; background: #6589a5; border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <!--third row links--> <a href="URL" style="grid-area: 5 / 1 / 6 / 2; background: #6589a5; transform: scale(0.9); border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 5 / 2 / 6 / 3; background: #28405A; border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <a href="URL" style="grid-area: 5 / 3 / 6 / 4; background: #3B77AD; transform: scale(0.9); border: 5px solid #fff; color: #fff; text-decoration: none; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 4px rgba(0,0,0,0.4);">link</a> <!--footer--> <div style="grid-area: 6 / 1 / 7 / 4; background: center/cover url('IMAGE_URL'), #eee; border: 5px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.4);"></div> </div> <div style="width: 500px; text-align: center; margin: 10px 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. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ The image used in the example is from National Geographic. Ctrl+F & Replace: ❖ IMAGE_URL - GIF or image URL placeholder for the header and footer. ❖ URL - Link URLs. ❖ Link - Link text placeholder. #eee Background placeholders. #fff Borders, text color. #000 Text shadow, credit text. #28405A #3B77AD #6589a5 The different blues of the menu buttons. rgba(0,0,0,0.4) Box shadows.