DEV Community

Cover image for Frontend Challenge: December Edition : Glam Up My Markup: Winter Solstice
ATSunnyCat
ATSunnyCat

Posted on

4 2 3 4 3

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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
sami3160 profile image
Sami3160

the best submission i have seen till now

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more