Frontend Challenge: December Edition : Glam Up My Markup: Winter Solstice

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

In this challenge, I tried to create a different experience for every section, while trying to tell the story of Winter Solstice. The challenge is not being able to edit the HTML page at all with additional div tags and so I had to find out how to javascript to insert additional tags.

Not only is my CSS skills a little rusty, so are my visual design skills.

Demo

Here is my live demo
(https://december24-glamup.vercel.app/christmas.html)

And here is my code
https://github.com/aislinngreycat/December-Dress-Up-CSS

Images come from Unsplash and I did use ChatGpt to scaffold some of the code. It is interesting how easy it is to look for sample code using ChatGPT.

Journey

This is my first overall challenge and my first css edit in about 5(?) years. A lot has changed since then and I am happy to know that a lot of visual effects are now possible even without javascript.

Winter Solstice is often associated with "snow" but that is not necessarily the case. It is not even really about Christmas at all. There are many places in the world where Dec 21st passes without snow and there are many cultures which do not celebrate Christmas.
It is really about the movement of the earth and the sun, and how daylight changes. That is what I wanted to convey.

The Celebrations and Traditions section are something that I have neglected so far. It is something that I would still like to work on if I have some time over the next couple of days in between the feasting and social events -

1. Card reveals for Celebration section. I would like the cards to be revealed upon hover.

2. The Tradition section can be better done but I still need a little inspiration.

Thanks for reading!

The above is the detailed content of Frontend Challenge: December Edition : Glam Up My Markup: Winter Solstice. For more information, please follow other related articles on the PHP Chinese website!