[68] Windows & Tabs Navigation

[lina_trinch]

Code:
<div style="width: 700px; height: 400px; margin: auto; display: flex; flex-direction: row; box-sizing: border-box; border: 1px solid #070709; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #e1e1e1;"> <!--sidebar--> <div style="width: 25%; height: 100%; background: #323239; box-sizing: border-box; border-right: 1px solid #070709; padding: 10px; overflow-y: auto;"> <!--header--> <div style="font-weight: bold; font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; font-variant: small-caps; border-bottom: 1px solid #e1e1e1; color: #e1e1e1;">Navigation</div> <!--link--> <a href="URL" style="display: block; margin: 8px 0; color: #e1e1e1; text-decoration: none; font-weight: bold;"> ✦ Link </a> <!--link--> <a href="URL" style="display: block; margin: 8px 0; color: #e1e1e1; text-decoration: none; font-weight: bold;"> ✦ Link </a> <!--section--> <details open> <summary style="font-weight: bold; cursor: pointer; list-style: none; color: #e1e1e1;"> ⮮ Dropdown </summary> <div style="border-left: 1px solid #e1e1e1; padding-left: 8px; margin-left: 3px;"> <a href="URL" style="display: block; margin: 8px 0; color: #e1e1e1; text-decoration: none;"> + Link </a> <a href="URL" style="display: block; margin: 8px 0; color: #e1e1e1; text-decoration: none;"> + Link </a> <!--ADD MORE TO DROPDOWN ABOVE THIS LINE--> </div> </details> <!--ADD MORE SIDEBAR LINKS ABOVE THIS LINE--> </div> <div style="width: 75%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box;"> <!--tabs--> <div style="width: 100%; height: 30px; background: #323239; box-sizing: border-box; border-bottom: 1px solid #070709; display: flex; flex-direction: row;"> <div style="width: fit-content; height: 100%; border-right: 1px solid #070709; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid #178cf3; cursor: default; color: #e1e1e1;"> 🎔 Journal Name </div> <a href="URL" style="width: fit-content; height: 100%; border-right: 1px solid #070709; display: flex; align-items: center; padding: 0 8px; color: #e1e1e1; text-decoration: none;"> 🎔 Link </a> <a href="URL" style="width: fit-content; height: 100%; border-right: 1px solid #070709; display: flex; align-items: center; padding: 0 8px; color: #e1e1e1; text-decoration: none;"> 🎔 Link </a> <a href="https://killthecake.dreamwidth.org/" style="width: fit-content; height: 100%; border-right: 1px solid #070709; display: flex; align-items: center; padding: 0 8px; color: #e1e1e1; text-decoration: none;"> 🎔 Credit </a> <!--ADD MORE TAB LINKS ABOVE THIS LINE--> </div> <!--image--> <div style="width: 100%; height: 100%; background: center/cover url('IMAGE_URL'); box-sizing: border-box;"></div> </div> </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. ❖ The sidebar holds links and dropdowns while the top bar also has some links. I made the top bar mainly for external links, though, but you can do whatever you want with all this. And, of course, the main window houses a GIF or any image of your choice. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. Ctrl+F & Replace: ❖ URL - For the link URLs. ❖ Link - For link placeholder text. ❖ Dropdown - For the dropdown's title placeholder text. ❖ Journal Name - Placeholder text for the fake active tab. ❖ IMAGE_URL - For the GIF/image URL. #e1e1e1 Dividers and text. #323239 Backgrounds. #070709 Borders. #178cf3 Active tab's border.