Glam Up My Markup: Winter Solstice

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

I've used the original HTML to create an interactive page where each topic is showing individually like a single page for a newspaper.

Inspiration

The content of the text provided reminded me of those that appear in school newspapers. With that in mind I decided to made the page in newspaper format. I set a serif font, put a paper texture in background and split the content in pages, showing each one while the user navigate from the main menu. Finally, I included some images (all licensed under creative commons) to illustrate what was being said.

Features

• 100% Responsive;
• Dark mode;
• Hight contrast text;
• Dynamic content.

Demo

Links

• Live demo;
• Code;

Screenshots

Example page

Dark mode

Mobile example

Journey

I've used pure CSS and JS. No frameworks, which made the code lighter.

For me, the most dificult challenge was not change the html file. This push me to learn a buch of things to manipulate the DOM.

License

The content are under a creative commons by-nc-sa 4.0 license.

Conclusion

I hope this content be useful for you. For me certainly was... pratice always wellcome.

I'd love to hear any feedback or suggestions you might have. Thank to read!

🖖

Comments

[Govind Vyas]

Loved the concept :-)

[Wantu]

Thanks! 😁