Frontend Challenge : édition de décembre : Glam Up My Markup : Solstice d'hiver

Ceci est une soumission pour Frontend Challenge - Édition de décembre, CSS Art : décembre.

Inspiration

Dans ce défi, j'ai essayé de créer une expérience différente pour chaque section, tout en essayant de raconter l'histoire du solstice d'hiver. Le défi est de ne pas pouvoir modifier du tout la page HTML avec des balises div supplémentaires et j'ai donc dû découvrir comment utiliser javascript pour insérer des balises supplémentaires.

Non seulement mes compétences CSS sont un peu rouillées, mais mes compétences en conception visuelle le sont aussi.

Démo

Voici ma démo live
(https://december24-glamup.vercel.app/christmas.html)

Et voici mon code
https://github.com/aislinngreycat/December-Dress-Up-CSS

Les images proviennent d'Unsplash et j'ai utilisé ChatGpt pour échafauder une partie du code. Il est intéressant de voir à quel point il est facile de rechercher des exemples de code à l'aide de ChatGPT.

Voyage

C'est mon premier défi global et ma première édition CSS depuis environ 5(?) ans. Beaucoup de choses ont changé depuis et je suis heureux de savoir que de nombreux effets visuels sont désormais possibles même sans javascript.

Le solstice d'hiver est souvent associé à la « neige » mais ce n'est pas forcément le cas. Il ne s’agit même pas vraiment de Noël. Il existe de nombreux endroits dans le monde où le 21 décembre se déroule sans neige et de nombreuses cultures ne célèbrent pas Noël.
Il s’agit en réalité du mouvement de la terre et du soleil, et de la façon dont la lumière du jour change. C'est ce que je voulais transmettre.

La section Célébrations et Traditions est quelque chose que j'ai négligé jusqu'à présent. C'est quelque chose sur lequel j'aimerais encore travailler si j'ai un peu de temps au cours des prochains jours entre les fêtes et les événements sociaux -

1. Carte révélée pour la section Célébration. J'aimerais que les cartes soient révélées au survol.

2. La section Tradition peut être mieux réalisée mais j'ai encore besoin d'un peu d'inspiration.

Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!