[78] Nav Table

[lina_trinch]

Code:
<div style="width: 400px; height: 400px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 5px;"> <a href="URL" style="grid-area: 1 / 1 / 2 / 2; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 1 / 2 / 2 / 3; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 1 / 3 / 2 / 4; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 1 / 4 / 2 / 5; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 2 / 1 / 3 / 2; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 2 / 2 / 3 / 3; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 2 / 3 / 3 / 4; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 2 / 4 / 3 / 5; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 3 / 1 / 4 / 2; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 3 / 2 / 4 / 3; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 3 / 4 / 4 / 5; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 4 / 1 / 5 / 2; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 4 / 3 / 5 / 4; background: center/cover url('IMAGE'), #ddd; border-radius: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> <a href="URL" style="grid-area: 4 / 4 / 5 / 5; background: center/cover url('IMAGE'), #ddd; border-radius: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4);"></a> </div> <div style="width: 850px; margin: 20px auto; text-align: center; 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>

❖ This code was 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. ❖ Every "block" is a link! Feel free to play with the border-radius of each block to make your own neat designs, too! Ctrl+F & Replace: ❖ IMAGE - Image placeholder. You can use icons here, if you want. ❖ URL - Placeholder for links. #ddd Image placeholder for colors. #000 Credit link. rgba(0,0,0,0.4) Shadows.