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

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

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!