code: (stories) achilles - a flier/game ad/nav code

[10billionghosts]

WHAT HAS HECTOR EVER DONE TO ME?

premise taken wanted app holds contact

I could recognize him by touch alone, by smell; I would know him blind, by the way his breaths came and his feet struck the earth. I would know him in death, at the end of the world.

Code number 2 in the Stories set is Achilles. This is perhaps the simplest of the three codes, modeled after your standard email/instagram marketing copy. It, like the other two codes, was made as a game ad for comms, but works as a nav page for a bio journal, game, or psl, as well.

Achilles is a more minimalist code that has room for more navigation buttons and less text. A little bit of punchy copy goes a long way, though, huh?

Credit for the background images for this code are here (figs) and SquareEnix for the FFT art.

Here is the base code:

<lj-raw><div style="max-width:450px;width:100%;height:525px;background:#fff url('IMG_URL')center;background-size:cover;margin:0 auto;display:flex;justify-content:center;align-items:center;font-family:arial, helvetica, sans serif;"> <div style="max-width:275px;width:100%;min-height:375px;background:#fff;padding:10px;display:flex;justify-content:center;align-items:center;"> <div style="max-width:255px;width:100%;min-height:355px;background:#fff;border:2px solid #000;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;"> <div name="GameName" style="max-width:215px;width:100%;font-size:25px;color:#000;letter-spacing:-2.5px;font-weight:bold;text-align:center;line-height:.9;border-bottom:1px solid #000;padding:75px 0 5px;">GAME NAME HERE</div> <div name="Navigation" style="max-width:215px;width:100%;min-height:50px;margin:-35px 0 10px;font-size:11px;color:#000;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:5px;"> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> <a href="#URL_HERE" style="min-width:55px;padding:2px;background:#eee;color:#000;text-decoration:none;border:1px solid #ddd;border-radius:3px;font-variant:small-caps">link</a> </div> <div name="Blurb" style="max-width:215px;width:100%;font-size:11px;color:#000;text-align:justify;line-height:1;"></lj-raw>// space for a few sentences. make it punchy! //<lj-raw></div> </div></div></div></lj-raw>

HOW TO USE:

❣️ Mind the lj-raw tags!! Keep them in place and be sure to write around them.

❣️ This code is mobile friendly and insanejournal friendly!

❣️ There is one spot for an image. Replace IMG_URL with the picture you'd like to use.

❣️ Replace any instance of #URL_HERE with an appropriate URL.

❣️ hex code #000 controls the font color.

❣️ hex code #ddd controls the border around the link buttons.

❣️ hex code #eee controls the background of the link buttons.

❣️ Info blurb goes // where the forward slashes are // and is appropriate for a few lines of text! Not intended for an entire premise!

As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

This code is compatible with InsaneJournal.

DEATH IN OBSCURITY

profile mood music game cr contact

Do you truly believe you can change the world? Not even I am so naive as that.

GAME NAME HERE

link link link link link link

// space for a few sentences. make it punchy! //

Comments

[myrmidon]

This is stunning, thank you so much!

[10billionghosts]

💜💜 Thank you! I'm so glad folks are enjoying these codes c:

[thevelvetglove]

Hi! I adore this code and really want to use it as a nav on my profile, but I'm having an issue. The text appears totally unformatted, although the links are still links, and there's no sign of any other styling. Literally just

SORA YUMURA
link link link
Quote

However, when I paste the exact same code into the journal entry form and preview it, it works perfectly. I haven't touched the code at all except to add a background image/add links/add text in the right places, and to remove the second row of links. I asked my friend to try, and they had the same results as me. Is there something I need to change in the code to get it to work on profile pages?

[10billionghosts]

Heya! Unfortunately this code won't work on profile pages as-is because journal site profile pages won't read and process certain things that are crucial for this design to work as intended.

That said, I've been interested in making a profile code for a while now, and I may be able to reproduce this code in a way that'll work on journal profile pages. I'm out of town atm but will give it a shot this weekend. If it works, I'll reply to you here when I make the release post. If it's not possible, I'll let you know here, too.

[thevelvetglove]

Thank you for your response :D It did seem like that was what was happening but I don't know anything about coding anything haha.

If this code doesn't work on profile pages, though, then this wording in its description is maybe a little unclear: "works as a nav page for a profile, game, or psl" When I started wondering if the code was just incompatible with profile pages, that was the thing that made me think I had to be wrong.

[10billionghosts]

Ah yeah, my apologies! And sorry for the inconvenience. Thanks for pointing that out. Definitely confusing, looking now. I think my original intent was profile as synonymous with a bio page for an original character. I will correct that as soon as I am able!

[10billionghosts]

Hello! Took a crack at rewriting this code to work on userinfo pages, and it did not work.

I still haven't ruled out the possibility that it can be reproduced, but it looks like I'm going to need to do some research into what HTML and styling actually work on userinfo pages (not much apparently lmao). So, I'm going to shuffle this project into my to-do list, but I don't have any sort of eta for it. Just wanted to let you know so you didn't think I'd forgotten!

[thevelvetglove]

No worries, thank you for giving it a try and for letting me know :) Good luck with the bio page research!