☃️❄️Web sur le solstice d'hiver : une page Web inspirée du solstice d'hiver❄️☃️

Ceci est une soumission pour Frontend Challenge - Édition de décembre, Glam Up My Markup: Winter Solstice

☀️❄️ Une brève introduction (à propos de ce que j'ai construit)

Bienvenue sur « Winter Solstice Web », un site Web magnifiquement conçu avec un thème hivernal qui offre un design glacial et quelque peu céleste. Ceci est inspiré du thème du Solistice d’hiver, de l’esprit de Noël et des chutes de neige. Ce site allie défilement fluide et fonctionnalités interactives pour les utilisateurs.

? Démo en direct

Mon lien de code - https://github.com/Divya4879/winter-solistice_web-glam.git

Site en direct - https://divya4879.github.io/winter-solistice_web-glam

Un aperçu de mon site de code :-
https://codepen.io/divya-2002/pen/xbKgYZY

J'espère que vous aimerez celui-ci, que vous ressentirez le temps glacial, le froid de cette saison et que vous découvrirez les faits sur l'événement du solstice d'hiver, ici.

???‍??? Conception

Ce site Web est conçu autour du thème du Solistique d'hiver, avec sa palette de couleurs cool (au sens propre et figuré ??) de bleus givrés, de blancs et de fonds sombres. J'ai ajouté un fond de neige animé dans son ensemble ainsi que des chutes de neige sur toutes les sections pour ajouter à son charme, et j'ai également équipé les sections de superpositions transparentes et les titres d'ombres de texte pour assurer la lisibilité et améliorer le contraste.

?️?️ Principales fonctionnalités

Certaines des fonctionnalités clés de mon site Web que j'ai vraiment appréciées et sur lesquelles j'ai travaillé dur sont :-

1. Défilement fluide et effet de parallaxe : j'ai utilisé la fonctionnalité de défilement continu GSAP pour celui-ci. Il permet à l'utilisateur de bénéficier d'un comportement de défilement fluide pour les sections lorsqu'elles défilent vers le bas ou vers le haut.

2. En-tête et navigation : j'ai ajouté un en-tête collant pour garantir que la barre de navigation reste fixe/bloquée en place lorsque les utilisateurs se déplacent sur mon site. Quant à la navigation, je l'ai rendue réactive et elle présente différentes mises en page pour différentes tailles d'écran. J'ai également utilisé des effets de survol sur la barre de navigation pour y ajouter une petite touche encore plus attrayante.

3. Réactivité mobile : j'ai utilisé Flexbox et une barre de navigation verticale pour que mon site soit réactif pour différentes tailles d'écran.

4. Animations/effets sur le thème de l'hiver : j'ai ajouté une animation de neige comme arrière-plan pour créer tout le thème hivernal du site. J'ai également ajouté des "chutes de neige" un peu décalées mais amusantes sur toutes mes sections individuellement.

5. Typographie et couleurs : j'ai essayé et utilisé de nouvelles polices comme "Cinzel" "Itim", "Montagnes de Noël" pour ce défi des polices Google. Le thème de couleurs global du site Web contient des couleurs sur le thème de l'hiver comme le bleu et le blanc, ainsi que le violet et leurs différentes nuances.

6. Animations et effets personnalisés : j'ai également ajouté des animations, des effets de défilement, etc. sur tout le site, pour lui donner une ambiance moderne et inviter les gens à tout explorer.

?️?☹️ Mon parcours - Les apprentissages, les hauts et les bas

Pour être honnête, cela m’a fait apprendre beaucoup de choses. Je n'avais jamais utilisé GSAP auparavant, j'ai donc dû revoir quelques bases et fondations, rechercher si ce que je voulais était possible, et oui, alors comment, l'essayer, le changer autant de fois que possible pour qu'il fonctionne correctement.

Ce fut une formidable expérience d'apprentissage et de création pour moi, j'ai tellement appris, je suis resté éveillé toute la nuit pour le terminer et le soumettre, j'ai essayé beaucoup de choses et j'ai finalement construit cela.

?? Qu'est-ce que j'ai appris de ce défi ??

Grâce à ce défi, j'ai pu :-

1. Développer mes compétences en animation de défilement (GSAP).

2. Enrichissez, améliorez et pratiquez la partie "interactive" des sites Web.

3. J'ai découvert de nombreux faits amusants sur le solstice d'hiver, ainsi que des recherches sur les polices et les palettes de couleurs selon le thème spécifique.

4. J'ai mis en pratique mes compétences CSS, pratiqué et appris les parties JS-> les chutes de neige, les animations de défilement, la manipulation du DOM.

5. Utilisez les bases du développement Web : HTML, CSS et JS pour créer une ambiance esthétique et un site Web interactif et fonctionnel.

Je sais que nous avions déjà le contenu principal comme modèle HTML, mais ma conception a également été répétée à plusieurs reprises au cours de ma création. Cela a été une expérience formidable pour moi.

?️? Pourquoi le nom « Web du solstice d'hiver » ?

Honnêtement, c'est un peu évident, mais parce que c'est basé sur la veille du solstice d'hiver et que c'est un site Web sur ses informations de base.

❄️☃️Conclusion

J'ai commencé ce défi simplement parce que je voulais mettre en pratique mes compétences de base en frontend et parce que j'ai toujours voulu participer aux "défis Dev.to". Durant cette période j'étais hyper enthousiaste, joyeuse, anticipée, heureuse, frustrée, déçue, satisfaite. Ce "Winter Solstice Web" n'est pas simplement un autre projet pour moi, c'est un rappel du voyage que j'ai fait tout au long de sa réalisation, et une belle de mes créations basées sur un événement Web Solistice sur le thème glacial.

J'espère que ce n'était pas une grimace, c'est la première fois que j'écris un blog sur mon projet sur n'importe quelle plateforme.
De plus, j'ai vécu un voyage incroyable en réalisant ceci, j'espère que vous l'apprécierez autant que moi.

?️? Retour

Comme je l'ai déjà mentionné, je soumets un projet pour la première fois ici sur cette plateforme et je n'ai jamais écrit de blog de ce type auparavant.

Vos commentaires concernant mon Web du solstice d'hiver et/ou mon blog sont sincèrement appréciés. Veuillez me faire part de vos réflexions dans la section commentaires ci-dessous.

Merci à celui qui a lu jusqu'ici. Merci d'avoir donné à mon blog, et j'espère aussi à mon site Web, un peu de votre temps précieux.

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!