muselist code | on file

[roximonoxide]

Here's simple black and white muselist code made with flex-box so it should work well on mobile or desktop browsers. There's two versions here so you can organize in rows or columns.

on file | muselist code

You can add more sections by copying everything between the <!-- SECTION A--> comments and pasting it above or below the other <!-- SECTION --> comments.

You can add more individual character listings to a section by copying everything between <!-- SINGLE CHAR LISTING --> comments and pasting it above or below any other any <!-- SINGLE CHAR LISTING --> comment.

on file : muselist code

Rows Version

copy the code below

<div style="display: flex; flex-flow: row wrap; border: 1px solid #000; justify-content: space-around; font-size: .8em; font-family: Courier New; font-weight: 300; color: #666; letter-spacing: -0.5px; text-transform: uppercase;"> <!-- Section A --> <div style="width: 100%; font-size: 2em; padding: 10px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <!-- Single Character Listing Starts | Duplicate to add more characters --> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/12991631/3271265" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <!-- Single Character Listing Starts | Duplicate to add more characters --> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/11720355/1349697" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763184/3764464" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763606/3717597" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="width: 100%; font-size: 2em; padding: 10px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14646162/3745653" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/11155353/2569937" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14621190/3742929" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/13977094/2536328" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="width: 100%; font-size: 2em; padding: 10px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14773154/3745653" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/13145897/3519836" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14717955/3760714" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="max-width: 200px; padding: 10px; margin: 10px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14110378/3663020" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="width: 100%; font-size: 2em; text-align: right; font-size: smaller; margin-right: 5px;">muselist by <user name="roximonoxide"></div> </div>

Columns Version

copy the code below

<div style="display: flex; flex-flow: row wrap; border: 1px solid #000; font-size: .8em; font-family: Courier New; font-weight: 300; color: #666; letter-spacing: -0.5px; text-transform: uppercase; justify-content: space-between;"> <!-- SECTION A--> <div style="display: inline-flex; flex-flow: column; margin: 5px; flex-grow: 1; flex-shrink: 1;"> <div style="font-size: 2em; padding: 5px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <!-- SINGLE CHAR LISTING --> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/12991631/3271265" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <!-- SINGLE CHAR LISTING --> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/11720355/1349697" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763184/3764464" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763606/3717597" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> </div> <!-- SECTION A--> <!-- SECTION B --> <div style="display: inline-flex; flex-flow: column; margin: 5px; flex-grow: 1; flex-shrink: 1;"> <div style="font-size: 2em; padding: 5px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14646162/3745653" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/11155353/2569937" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14621190/3742929" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/13977094/2536328" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> </div> <!-- SECTION B--> <!-- SECTION C --> <div style="display: inline-flex; flex-flow: column; margin: 5px; flex-grow: 1; flex-shrink: 1;"> <div style="font-size: 2em; padding: 5px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14773154/3745653" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/13145897/3519836" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14717955/3760714" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14110378/3663020" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> </div> <!-- SECTION C--> <!-- SECTION D --> <div style="display: inline-flex; flex-flow: column; margin: 5px; flex-grow: 1; flex-shrink: 1;"> <div style="font-size: 2em; padding: 5px; background-color: #000; color: #CCC;">// SECTION TITLE</div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/12991631/3271265" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/11720355/1349697" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763184/3764464" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> <div style="padding: 5px; margin: 5px; text-align: center;"> <div style="display: block;"><img src="https://v.dreamwidth.org/14763606/3717597" style="border-radius: 50%;"></div> <div style="display: block;"><user name="username"></div> <div style="display: block;"><b>Firstname</b> Lastname</div> <div style="display: block;">game or canon</div> </div> </div> <!-- SECTION D --> <div style="width: 100%; font-size: 2em; text-align: right; font-size: smaller; margin-right: 5px;">muselist by <user name="roximonoxide"></div> </div>

Comments

[nowhere]

these are fantastic! thanks for sharing! :)

[roximonoxide]

thanks! you're very welcome!

[loupnoir]

oh thank god, a flex box code that works on mobile! will be using this!

[roximonoxide]

that was the goal with this one! i hope it suits!

[iamhilarious]

This is lovely! Thanks for sharing!

[roximonoxide]

Welcome!