#my-code

Here's to all those weirdo layouts I am absolutely in love with. I'm back with a brand-new wallpost, and wouldn't ya know it, I'm obsessed. It's heavily inspired by a Carrd design I found on Pinterest, although I have added my own touches and edits.

As usual, WoX wallposts are supremely finnicky, so against my wishes, I must advise not to play around with the layout and code unless you know exactly what you're doing. The code is commented throughout, and I've also included instructions on how to easily change the colour scheme of the wallpost.

Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

I made two versions, partially to test out the very editing instructions I've included in the code, so here you go!

Codepen: Sunset Haze Code

I am back from a vacation, a cold, and a very long dilemma (of deciding what to code) with... this!

It's a very overly-neat-newspaper coded design, and it can be used as both an article or a book. Essentially, it has a page system for books, and the comments (very extensively) explain how to remove the page-ification to turn it into an article.

It's extremely easy to use and edit:

Change three variables at the beginning of the CSS (the section in the markers) as explained in the comments to change the entire colour scheme

use tags to make things stand out or divide boxes into different sections, as explained in the comments

Also explained in the comments (how very surprising), is how the page and box system works (including the alternating sizes and how to override them)

If I missed anything, rest assured, they're explained in the comments :D

Please don't steal my credits (feel free to add your own, though), and go forth and ✨edit✨

Tada! My best work yet! This code might not look like much, but I'm extremely proud of it, not least because I changed directions halfway through on how to code it, and had to revamp the whole thing.

It's a backstory code in the form of a vertical timeline, more for people who want to showcase multiple events rather than describe the character's life in long paragraphs. The backstory starts on a simple name/image page, but as you scroll, a spine appears, with cards (events) appearing to either side.

The main aspect of this code is the ease of editing though. A few variables in the beginning of the code, and you can change everything from font to layout to colours.

Each event is assigned its own theme (which are, again, defined at the very top)

The themes decide the card's colour, and the colour of the part of the spine it corresponds to.

Since the cards aren't directly connected to the spine, coloured circles correspond to the card's place on the timeline, with an icon inside.

Hovering makes the card and its corresponding icon-circle to glow, so its easy to tell which icon belongs to which card.

The cards have options for titles, subtitles, dates, and participant orbs.

Participant orbs are little circular images at the bottom of the card that showcase people that particular event may have involved or been connected to. They can be turned into links, should someone wish to link them to user profiles.

Please don't steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

Since I particularly wanted to display the flexibility of the design, I've made two versions, both linked below.