Maison >interface Web >js tutoriel >DEV Challenge : Glam up ma ligue de balisage et de cricket

DEV Challenge : Glam up ma ligue de balisage et de cricket

王林
王林original
2024-07-30 08:04:23700parcourir

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

Ce que j'ai construit

Page Web fictive de la Ligue de cricket de New York

En utilisant Javascript, j'ai mis les sections dans un conteneur div afin de pouvoir les modifier comme je le voulais avec flex.

document.addEventListener("DOMContentLoaded", () => {
        const container = document.createElement('div');
        container.className = 'container';

        const sections = document.querySelectorAll('section');
        const parent = sections[0].parentNode;
        const footer = document.querySelector('footer');

        sections.forEach((section) => {
            container.appendChild(section);
        });

        parent.insertBefore(container, footer);

});

J'ai généré une image d'en-tête d'arrière-plan à l'aide de l'IA et je l'ai modifiée avec CSS.

L'arrière-plan du conteneur div contient le logo de la ligue de cricket récréatif qui a été converti en élément décoratif avec CSS.

Je l'ai porté avec des couleurs new-yorkaises pour qu'il soit approprié.

Démo

Cricket League webpage

Voyage

La sensation finale est sportive, active et amusante mais pas exagérée. Les sections ont une légère lueur à l’intérieur en survol.

Merci d'avoir cherché, le github est ici :
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

En direct : https://annavi11arrea1.github.io/Cricket-League-Markup/

Merci d'avoir cherché !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn