Hero's journey HTML (free+suggestions appreciated)

Posted 4 years, 4 months ago (Edited 3 years, 9 months ago) by Gattoleone

I've recently been studying Vogler's book for writers because it was part of a Uni course I'm currently waiting to finish off with the exam, and in doing so I tried to make my very first code while summarizing it. As I was doing it, however, I thought that not only other users might be studying the same subject, but they might find this template useful for their own stories, or might be curious to see if the ones they've already written fit this too!


So here's my attempt: FTU HTML: Hero's journey

5564121?1576423480


I'm very open to any suggestions about how to better it (both in wording and coding), and a few disclaimers:

First of all, thanks again toronnie for giving me permission to share this, since I mostly copy-pasted from one of their codes! (If someone wants to contribute to better this code, they will be credited too of course!)

Then, I've actually been studying from a translated edition of the original book, so I'm sorry if I made any mistakes with the terms and please let me know! I also suggest using this template as a quick revision way, but also actually buying the Christopher Vogler's book The Writer's Journey: Mythic Structure for Writers if you're interested (it's very heteronormative and binaristic in many points but otherwise I really liked it).

Just as the original book, then, this is not supposed to be a guide! It's just a set of recurring things that happen in fiction and people generally like when they're being told a story, but you can really do anything with it, like skipping parts, flipping them or adding them.


Hope this can be useful! I'd love to see what will come out of this, no pressure though!


EDIT: There's two new versions, one with stable plot text (better for shorter stories) and one with toggle plot text (better for longer stories). Thank youMelodyDrawz for the suggestion!

Stable: main page

Toggle: first tab

Older version: second tab

CrescentCaribou

LeoLeonis

Cool, I'm glad you took my suggestion! ^^ Here's some templates I found that might be helpful references to use:

I hope this helps, you said this was your first code so I thought you might like a couple refs! :3

Gattoleone

MelodyDrawz great ref links! I've changed the code around a little, and will be updating the thread with both options and updating the example. Thank you so much!

CrescentCaribou

LeoLeonis

Np, I'm happy to help! ^^  The HTML already looks a lot cooler in my opinion with the color change, and I like how you made the "Roles/Archetypes" section full of toggles!

Gattoleone

Edited to make it look better on larger screens or zoomed out screens, and I've changed the text color for the credit to make it visible on the default theme too. Let me know if you catch any errors.