[52] Modular Navigation

[lina_trinch]

Code:
<div style="width: 600px; margin: auto; font-size: 11px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;"> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #062743; width: 100%; height: 200px; margin-bottom: 8px;"></div> <!--palette--> <div style="width: 100%; height: 25px; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 8px;"> <div style="background: #113A5D; width: 24%; height: 100%;"></div> <div style="background: #062743; width: 24%; height: 100%;"></div> <div style="background: #113A5D; width: 24%; height: 100%;"></div> <div style="background: #062743; width: 24%; height: 100%;"></div> </div> <!--links--> <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center;"> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #113A5D; color: #fff; text-decoration: none; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> </div> <!--dropdown--> <details style="background: #113A5D; color: #fff; padding: 6px 0; margin-bottom: 8px; border: 2px solid #062743; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <summary style="text-align: center; list-style: none; cursor: pointer;"> Game / Header </summary> <div style="width: 95%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center; margin: auto;"> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; width: 49%; background: #062743; color: #fff; text-decoration: none; padding: 6px 0; margin: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> </div> </details> <!--gradient--> <div style="background: linear-gradient(90deg, #113A5D, #062743, #113A5D, #062743); width: 100%; height: 15px; margin-bottom: 8px;"></div> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #062743; width: 100%; height: 15px; margin-bottom: 8px;"></div> <!--credit--> <div style="width: 100%; margin: 8px 0; text-align: center; font-size: 10px;"> <a href="https://killthecake.dreamwidth.org/" style="color: #bbb; text-decoration: none;"> code </a> </div> </div>

❖ This is a 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. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ It's very customizable if you wanted to move things around, but that's not necessary. As for defaults left inside the code, it's everything that you see in the example. Six links hanging around outside with one dropdown hiding another six links. ❖ I labelled the gradient, palette, and images in the code so that you can remove them, change their positions, adjust their heights, etc. Have fun with it. ❖ If you want to create a palette from an image, might I suggest using Coolors' Image Picker tool. ❖ The image used in the example is a tarot deck made by 13th Press. I just thought it was a really cool deck. Ctrl+F & Replace: ❖ IMAGE_URL - This is at the top and bottom of the code for the header and footer. ❖ Link - The link text. ❖ Game / Header - Header of the dropdown. #062743 Placeholder color. It's behind the images, is every other color in the palette and gradient, the borders of the links/dropdown, and backgrounds of the links in the dropdown. #113A5D Placeholder color. It's every other color in the palette and gradient, and the backgrounds of the links/dropdown. #bbb Credit link color.