Home > Web Front-end > CSS Tutorial > DEV&#s Frontend challenge: Winter Solstic!

DEV&#s Frontend challenge: Winter Solstic!

Mary-Kate Olsen
Release: 2025-01-01 13:48:10
Original
393 people have browsed it

DEV

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

What I Built

The website is built by only basic html, css, and javascript.
In website i tried to maintain two themes one as night theme and one as day.
First half is on night which starts by ice particles and another half starts with clouds and sun.
I tried to add many images and elements to represent how i feel winter season.
Also the website is not responsive at all.

Demo

here is live demo of website
https://medium-winter-solstice.vercel.app/
and here is my github repo if website
https://github.com/Sami3160/Medium-Winter-Solstice

Journey

I learned more creativity, i usually work on backend, but now after long timer creating a frontend website i feel satisfied, the favorite part of website is that, Santa flying through mountains and their are clouds and moon.

And as we scroll the theme changes like night to midnight to dawn to bright white midday and then again evening.

I just wanted to add more effects like more snowfall effect, and more animation, elements and cool parallex effect, but i manages to this much only.

And one more fun part is that "Solstice Across Hemispheres" section, their is one earth hemisphere image which rotates and its description changes.

The above is the detailed content of DEV&#s Frontend challenge: Winter Solstic!. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template