neon jungle » muselist edit (@withnails)

[marwood]

Boro

Brand New Cherry Flavor

links · go · here

Jesse Pinkman

Breaking Bad

links · go · here

Cornelius Hickey

The Terror

links · go · here

GRACE MARKS

Alias Grace, with a new font

times · new · roman

John Watson

Sherlock Holmes, but here is how it would look with extra lines if you want to add some extra text here! Also the font is different just for funsies.

font · is · georgia

this is an edit of my code neon jungle @ withnails !
major edits:
- added flexbox styling to make multiple versions of the box tile next to each other (max. 3 per row, and they'll centre themselves as above if there's fewer than 3 in a row!)
- added a line for the character's canon and reworked the subtitle so it can now hold 3 links
- readjusted the icon so it'll prompt the hovering profile info if you hover over it
- some super boring edits to the inside box so the content should stay vertically centred if you add/remove lines

codes:

full code (with neon):
<lj-raw><div style="margin: 0 auto; width: 850px; box-sizing: content-box; display: flex; flex-wrap: wrap; justify-content: center;"> <!----START BOX----> <div style="margin: 5px; box-sizing: content-box; width: 230px; height: 350px; padding: 15px; border: 1px solid #888888; color: white; font-family: arial; line-height: 120%; text-align: center;"> <div style="width: 230px; height: 350px; background-image: url(BG_IMAGE_URL_HERE); background-size: 300px;"> <div style="position: relative; box-sizing: content-box; top: 35px; margin: 0 auto; width: 170px; height: 280px; box-shadow: 0px 0px 10px 0px #01FF00, inset 0px 0px 10px 1px #01FF00; border: 1px solid #a4faa4; display: flex; align-items: center; justify-content: center;"> <div> <div style="margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid white; box-shadow: 1px 1px 2px #000000; -webkit-filter: grayscale(50%); box-sizing: content-box;"><img src="ICON_URL_HERE" style="border-radius: 100px;"></div> <div style="margin-top: 20px; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000000;">Name Here</div> <div style="margin-top: 10px; font-size: 12px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased;"> Canon Here </div> <div style="margin-top: 5px; font-size: 10px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased; letter-spacing: 1px; text-transform: uppercase;"> <a href="LINKHERE" style="color: #fff; text-decoration: none;">links</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">go</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">here</a> </div> </div> </div> </div> </div> <!----END BOX----> </div> </lj-raw>

full code (no neon):
<lj-raw><div style="margin: 0 auto; width: 850px; box-sizing: content-box; display: flex; flex-wrap: wrap; justify-content: center;"> <!----START BOX----> <div style="margin: 5px; box-sizing: content-box; width: 230px; height: 350px; padding: 15px; border: 1px solid #888888; color: white; font-family: arial; line-height: 120%; text-align: center;"> <div style="width: 230px; height: 350px; background-image: url(BG_IMAGE_URL_HERE); background-size: 300px;"> <div style="position: relative; box-sizing: content-box; top: 35px; margin: 0 auto; width: 170px; height: 280px; display: flex; align-items: center; justify-content: center;"> <div> <div style="margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid white; box-shadow: 1px 1px 2px #000000; -webkit-filter: grayscale(50%); box-sizing: content-box;"><img src="ICON_URL_HERE" style="border-radius: 100px;"></div> <div style="margin-top: 20px; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000000;">Name Here</div> <div style="margin-top: 10px; font-size: 12px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased;"> Canon Here </div> <div style="margin-top: 5px; font-size: 10px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased; letter-spacing: 1px; text-transform: uppercase;"> <a href="LINKHERE" style="color: #fff; text-decoration: none;">links</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">go</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">here</a> </div> </div> </div> </div> </div> <!----END BOX----> </div> </lj-raw>

add extra box (with neon):
<!----START BOX----> <div style="margin: 5px; box-sizing: content-box; width: 230px; height: 350px; padding: 15px; border: 1px solid #888888; color: white; font-family: arial; line-height: 120%; text-align: center;"> <div style="width: 230px; height: 350px; background-image: url(BG_IMAGE_URL_HERE); background-size: 300px;"> <div style="position: relative; box-sizing: content-box; top: 35px; margin: 0 auto; width: 170px; height: 280px; box-shadow: 0px 0px 10px 0px #01FF00, inset 0px 0px 10px 1px #01FF00; border: 1px solid #a4faa4; display: flex; align-items: center; justify-content: center;"> <div> <div style="margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid white; box-shadow: 1px 1px 2px #000000; -webkit-filter: grayscale(50%); box-sizing: content-box;"><img src="ICON_URL_HERE" style="border-radius: 100px;"></div> <div style="margin-top: 20px; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000000;">Name Here</div> <div style="margin-top: 10px; font-size: 12px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased;"> Canon Here </div> <div style="margin-top: 5px; font-size: 10px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased; letter-spacing: 1px; text-transform: uppercase;"> <a href="LINKHERE" style="color: #fff; text-decoration: none;">links</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">go</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">here</a> </div> </div> </div> </div> </div> <!----END BOX---->

add extra box (no neon):
<!----START BOX----> <div style="margin: 5px; box-sizing: content-box; width: 230px; height: 350px; padding: 15px; border: 1px solid #888888; color: white; font-family: arial; line-height: 120%; text-align: center;"> <div style="width: 230px; height: 350px; background-image: url(BG_IMAGE_URL_HERE); background-size: 300px;"> <div style="position: relative; box-sizing: content-box; top: 35px; margin: 0 auto; width: 170px; height: 280px; display: flex; align-items: center; justify-content: center;"> <div> <div style="margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid white; box-shadow: 1px 1px 2px #000000; -webkit-filter: grayscale(50%); box-sizing: content-box;"><img src="ICON_URL_HERE" style="border-radius: 100px;"></div> <div style="margin-top: 20px; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000000;">Name Here</div> <div style="margin-top: 10px; font-size: 12px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased;"> Canon Here </div> <div style="margin-top: 5px; font-size: 10px; text-shadow: 1px 1px 2px #000000; -webkit-font-smoothing: antialiased; letter-spacing: 1px; text-transform: uppercase;"> <a href="LINKHERE" style="color: #fff; text-decoration: none;">links</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">go</a> · <a href="LINKHERE" style="color: #fff; text-decoration: none;">here</a> </div> </div> </div> </div> </div> <!----END BOX---->