[63] Big Muselist

[lina_trinch]

CODE

Active • Homeless

Active

Character Name

Canon Name

🟊 🟊 🟊 🟊 🞄

Character Name

Canon Name

🟊 🟊 🟊 🟊 🞄

Homeless

Character Name

Canon Name

🟊 🟊 🟊 🟊 🞄

Character Name

Canon Name

🟊 🟊 🟊 🟊 🞄

Code:
<div style="width: 800px; margin: 10px auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px; text-align: right;"> <a href="https://killthecake.dreamwidth.org/" style="color: #fcb7b5; text-decoration: none;"> CODE </a> </div> <div style="margin: 0 auto 50px; width: 800px; background: #fff; font-family: 'Courier New', Courier, monospace; font-size: 14px; font-weight: bold; border-radius: 0 0 15px 15px; border: 3px solid #fcb7b5; box-shadow: 3px 3px 0 #ffc9c7, 6px 6px #ffd9d7, 9px 9px #fcb7b5; padding: 5px 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: default; position: sticky; top: 0; text-align: center; color: #fcb7b5;"> <a href="#one" style="color: #fcb7b5;">Active</a> • <a href="#two" style="color: #fcb7b5;">Homeless</a> <!--ADD MORE LINKS ABOVE THIS LINE--> </div> <a name="one"></a> <div style="margin: 0 auto 50px; width: 800px; background: #fff; font-family: 'Courier New', Courier, monospace; font-size: 12px; border-radius: 15px; border: 3px solid #fcb7b5; box-shadow: 3px 3px 0 #ffc9c7, 6px 6px #ffd9d7, 9px 9px #fcb7b5; padding: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: default;"> <div style="text-align: center; font-size: 80px; font-weight: bold; text-shadow: 2px 2px 0 #fcb7b5, 3px 3px 0 #ffc9c7, 4px 4px 0 #ffd9d7, 5px 5px 0 #fcb7b5; color: #fff1f0; letter-spacing: 2px;"> Active </div> <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;"> <!--character block--> <div style="border: 1px solid #fcb7b5; box-shadow: 1px 1px 0 #ffc9c7, 2px 2px #ffd9d7, 3px 3px #fcb7b5; border-radius: 5px; width: 360px; display: flex; align-items: center; margin: 10px 0; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #eee; border-radius: 50px; width: 50px; height: 50px; margin-right: 10px;"></div> <!--info--> <div style="display: flex; flex-direction: column; width: 280px;"> <a href="URL" style="font-weight: bold; font-style: italic; color: #000; text-decoration: none; font-size: 22px;"> Character Name </a> <div style="color: #000;"> Canon Name </div> <div style="color: #000;"> 🟊 🟊 🟊 🟊 🞄 </div> </div> </div> <!--character block--> <div style="border: 1px solid #fcb7b5; box-shadow: 1px 1px 0 #ffc9c7, 2px 2px #ffd9d7, 3px 3px #fcb7b5; border-radius: 5px; width: 360px; display: flex; align-items: center; margin: 10px 0; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #eee; border-radius: 50px; width: 50px; height: 50px; margin-right: 10px;"></div> <!--info--> <div style="display: flex; flex-direction: column; width: 280px;"> <a href="URL" style="font-weight: bold; font-style: italic; color: #000; text-decoration: none; font-size: 22px;"> Character Name </a> <div style="color: #000;"> Canon Name </div> <div style="color: #000;"> 🟊 🟊 🟊 🟊 🞄 </div> </div> </div> <!--ADD MORE ABOVE THIS LINE--> </div> </div> <a name="two"></a> <details style="margin: 0 auto 50px; width: 800px; background: #fff; font-family: 'Courier New', Courier, monospace; font-size: 12px; border-radius: 15px; border: 3px solid #fcb7b5; box-shadow: 3px 3px 0 #ffc9c7, 6px 6px #ffd9d7, 9px 9px #fcb7b5; padding: 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: default;"> <summary style="text-align: center; font-size: 80px; font-weight: bold; text-shadow: 2px 2px 0 #fcb7b5, 3px 3px 0 #ffc9c7, 4px 4px 0 #ffd9d7, 5px 5px 0 #fcb7b5; color: #fff1f0; letter-spacing: 2px; cursor: pointer;"> Homeless </summary> <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;"> <!--character block--> <div style="border: 1px solid #fcb7b5; box-shadow: 1px 1px 0 #ffc9c7, 2px 2px #ffd9d7, 3px 3px #fcb7b5; border-radius: 5px; width: 360px; display: flex; align-items: center; margin: 10px 0; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #eee; border-radius: 50px; width: 50px; height: 50px; margin-right: 10px;"></div> <!--info--> <div style="display: flex; flex-direction: column; width: 280px;"> <a href="URL" style="font-weight: bold; font-style: italic; color: #000; text-decoration: none; font-size: 22px;"> Character Name </a> <div style="color: #000;"> Canon Name </div> <div style="color: #000;"> 🟊 🟊 🟊 🟊 🞄 </div> </div> </div> <!--character block--> <div style="border: 1px solid #fcb7b5; box-shadow: 1px 1px 0 #ffc9c7, 2px 2px #ffd9d7, 3px 3px #fcb7b5; border-radius: 5px; width: 360px; display: flex; align-items: center; margin: 10px 0; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <!--image--> <div style="background: center/cover url('IMAGE_URL'), #eee; border-radius: 50px; width: 50px; height: 50px; margin-right: 10px;"></div> <!--info--> <div style="display: flex; flex-direction: column; width: 280px;"> <a href="URL" style="font-weight: bold; font-style: italic; color: #000; text-decoration: none; font-size: 22px;"> Character Name </a> <div style="color: #000;"> Canon Name </div> <div style="color: #000;"> 🟊 🟊 🟊 🟊 🞄 </div> </div> </div> <!--ADD MORE ABOVE THIS LINE--> </div> </details>

❖ 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 top navigation box (as you've likely noticed by now) will stick to the top of the screen as you scroll, so that the links for each section are always present. ❖ This code uses anchor links to jump to each section! I tried to make the code itself as straightforward as possible to edit and customize, but to quickly sum up, you just match the keyword in the link (replacing the URL) to the name of the section (where it says name="keyword"). Avoid using the same keywords for different sections and don't use numerical characters only for a keyword. Everything else should be good! Ctrl+F & Replace: ❖ Active/Homeless - Link text and headers for each section they link to. The Homeless section is a dropdown menu, while the Active section is just a box. ❖ one/two - The links for each section. You can change these to whatever you want, but they can't be numerical characters or the same as another anchor link. ❖ IMAGE_URL - The URL for each character block's image. You can use journal icons here. ❖ URL - The journal URL of your character. Or link to a biosheet or navigation or something. ❖ Character Name/Canon Name - Self-explanatory. The header and subheader of each character block. ❖ 🟊 🞄 - A voice rating for your character. #fff Background of each box. #000 Text. #eee Default background color for the images. #fcb7b5 Credit text, main border color, link text. #ffc9c7 Border layers. #ffd9d7 Border layers. #fff1f0 Header text.