Le défi Frontend Glam Up My Markup : loisirs

Ceci est une soumission pour Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

Ce que j'ai construit

Après une petite pause, je suis revenu pour ce défi, j'ai vraiment aimé le principe et j'ai essayé de créer un design fluide et dynamique, c'est une page de sport après tout. Ce n'est pas aussi réactif et accessible que je le souhaitais, mais c'est le mieux que je puisse faire avec mes contraintes de temps actuelles et toutes les situations difficiles dans mon pays.

Bien sûr, j'essaie toujours de respecter les règles du défi mais cette fois j'ai tout mis en œuvre avec les animations, celles-ci sont la star du spectacle, notamment l'animation de défilement.

Démo

Pour cette démo, je recommande de toujours la voir en pleine page, spécialement dans un nouvel onglet (s'il vous plaît) et bien sûr, elle sera fonctionnelle sur ordinateur (la meilleure expérience) et sur mobile (la manière la plus courante).

Voyage

Je peux continuer à améliorer le code avec quelques principes arides, notamment avec l'animation de défilement susmentionnée, j'ai répété beaucoup de logique dans le code mais j'ai fait de mon mieux pour le garder aussi propre et clair que possible. Le processus de conception de cette soumission a été ma partie préférée, il n'a pas été facile de choisir une bonne palette de couleurs, mais je suis heureux d'avoir atterri sur cette combinaison rouge, gris et crème et j'espère que vous la trouverez également jolie à regarder.

Trouver de "vraies" images de cricket a été facile grâce à ma nouvelle connaissance de la Commons Creative License, et j'ai trouvé de bonnes icônes dans un outil que j'ai découvert dans un récent article DEV (j'essaierai de trouver l'article pour le créditer dans le commentaires). Mais j'ai aussi réalisé quelques éléments comme le motif de la balle de cricket dans la section planning et bien sûr, l'image de couverture sur ce post.

Et c'est tout pour celui-ci. Si vous participez au défi, j'espère que vous tirerez autant de satisfaction de votre travail que moi du mien. Sinon, peut-être que le prochain défi sera pour vous le moment de briller.

Et comme toujours, si vous avez des retours, vous pouvez écrire un commentaire ou m'envoyer un DM. L'anglais est ma deuxième langue, alors soyez gentil avec moi ❣️ Merci d'avoir lu jusqu'à présent, et à la prochaine fois, au revoir !

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!