DEV-Herausforderung: Verschönere meine Markup-Cricket-Liga

Dies ist eine Einreichung für Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

Was ich gebaut habe

Fiktive Webseite der New York Cricket League

Mit Javascript habe ich die Abschnitte in einen Div-Container gestellt, damit ich sie mit Flex nach meinen Wünschen ändern konnte.

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);

});

Ich habe mithilfe von KI ein Hintergrund-Headerbild generiert und es mit CSS geändert.

Der Hintergrund des div-Containers enthält das Logo der Freizeit-Cricket-Liga, das mit CSS in ein dekoratives Element umgewandelt wurde.

Ich habe es mit New Yorker Farben gestylt, damit es angemessen wirkt.

Demo

Reise

Das Endgefühl ist sportlich, aktiv und unterhaltsam, aber nicht übertrieben. Beim Schweben leuchten die Abschnitte innen leicht.

Danke fürs Schauen, der Github ist hier:
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

Live: https://annavi11arrea1.github.io/Cricket-League-Markup/

Danke fürs Zuschauen!

Das obige ist der detaillierte Inhalt vonDEV-Herausforderung: Verschönere meine Markup-Cricket-Liga. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!