Site Web de cricket Glamup

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

Bonjour à tous !!

Ce que j'ai construit

J'ai construit une animation de chargement sympa avec du HTML, du CSS et un peu de jQuery et une mise en page structurée de base pour le NYRLC ! Ce site attire l'attention de l'utilisateur lors de son chargement et l'incite à se demander ce qui va suivre.
Nous avons également fourni une structure au site Web en utilisant une image de bannière et en formatant le contenu en mode carte pour fournir des informations de manière concise et visuellement attrayante.

Démo

Voyage

Comme je joue régulièrement au cricket dans ma vie, les deux défis m'ont poussé à construire quelque chose dans ce sens, mais étant donné que le défi GlamUp m'a aboli d'ajouter du code HTML à partir d'un fichier, cela m'a mis un peu au défi. J'ai donc choisi celui-là et réfléchi à la manière de mieux structurer le site Web avec uniquement CSS et JS. C'est à ce moment-là que j'ai pensé pour la première fois à montrer le processus d'inscription à l'aide de cartes interactives. En réalité, elles peuvent être cliquables et amener l'utilisateur à l'action suivante. remplir le formulaire. Même après avoir terminé la structure et l'avoir rendue visuellement attrayante, j'avais toujours l'impression qu'il manquait un élément de cricket, c'est là que ça m'a frappé, je devrais probablement ajouter une animation de chargement. Au début, j'ai pensé ajouter une balle qui rebondissait assez verticalement sur la batte, puis j'ai pensé que ce serait un peu inactif/ennuyeux.
La chose la plus étrange s'est produite, je regardais les moments forts de la finale de la Coupe du monde Inde vs SA T20, et c'est à ce moment-là que j'ai senti que je me sentais le plus excité quand j'ai vu Jasprit Bumrah nettoyer Marco Jansen dans cette manche, c'est à ce moment-là que j'ai finalisé que je Je veux que l'animation de chargement soit les souches qui se font battre. Alors j’ai continué à créer et je ne me suis pas arrêté du tout. Finalement, j'étais satisfait de l'idée. J'avais encore quelques idées en tête, comme une balle de cricket comme bouton "faire défiler vers le haut" avec une animation. Mais c'est là que j'ai tracé la limite et j'ai choisi de soumettre la candidature telle quelle.
J'espère que vous l'aimerez.

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!