[40] Visuals & Nav

[lina_trinch]

Code:
<div style="margin: auto; width: 350px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #eee; font-variant: small-caps; letter-spacing: 2px;"> <!--IMAGES--> <div style="display: grid; gap: 10px; width: 350px; height: 350px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); margin-bottom: 10px;"> <!--Top Banner--> <div style="grid-area: 1 / 1 / 2 / 4; background: center/cover url('URL'), #bbb;"></div> <!--Right Banner--> <div style="grid-area: 1 / 4 / 4 / 5; background: center/cover url('URL'), #bbb;"></div> <!--Left Banner--> <div style="grid-area: 2 / 1 / 5 / 2; background: center/cover url('URL'), #bbb;"></div> <!--Bottom Banner--> <div style="grid-area: 4 / 2 / 5 / 5; background: center/cover url('URL'), #bbb;"></div> <!--Center--> <div style="grid-area: 2 / 2 / 4 / 4; background: center/cover url('URL'), #bbb;"></div> </div> <!--NAVIGATION--> <!--DROPDOWN--> <details style="background: #777; margin: 10px 0; padding: 3px 10px 0;"> <summary style="cursor: pointer; padding-bottom: 5px;"> game </summary> <!--Link--> <a href="URL" style="display: block; color: inherit; text-decoration: none; width: 100%; border-top: 1px solid; margin-bottom: 2px; padding: 4px 0;"> link text </a> <!--ADD MORE LINKS ABOVE THIS LINE--> </details> <!--END DROPDOWN--> <!--DROPDOWN--> <details style="background: #777; margin: 10px 0; padding: 3px 10px 0;"> <summary style="cursor: pointer; padding-bottom: 5px;"> game </summary> <!--Link--> <a href="URL" style="display: block; color: inherit; text-decoration: none; width: 100%; border-top: 1px solid; margin-bottom: 2px; padding: 4px 0;"> link text </a> <!--ADD MORE LINKS ABOVE THIS LINE--> </details> <!--END DROPDOWN--> <!--ADD MORE DROPDOWNS ABOVE THIS LINE--> </div>

❖ Before we get started, just a disclaimer that this code was released a month early over on the Patreon to my subscribers. c: ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ There are two sections to this code: the visuals and the navigation itself. All of the images are marked in the code, as are the little dropdown boxes & links. ❖ Feel free to add as many dropdowns as you desire. One of my patrons made this code into a permissions thing and even added an extra dropdown above the images. It looked really cool. What I'm saying is, get creative with it and have fun! ❖ Lastly, I forgot to add a credit link, so credit is not required, I guess! Don't worry about that, lol. Ctrl+F & Replace: ❖ URL - in the visuals section, the image url ❖ URL - in the links section, the link url ❖ game - placeholder text for the dropdown menus ❖ link text - placeholder text for the links #eee text #bbb color background of visuals (that's right, you can just put colors) #777 background of text/dropdowns/links