Cabaran DEV: Serlahkan Liga Markup-Kriket saya

Ini ialah penyerahan untuk Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

Apa yang Saya Bina

Halaman Web Liga Kriket Fiksyen New York

Menggunakan Javascript, saya meletakkan bahagian tersebut ke dalam bekas div supaya saya boleh mengubah suainya seperti yang saya mahu dengan 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);

});

Saya menjana imej pengepala latar belakang menggunakan AI dan mengubah suainya dengan CSS.

Latar belakang bekas div mengandungi logo liga kriket rekreasi yang telah ditukar menjadi elemen hiasan dengan CSS.

Saya menggayakannya dengan warna New York untuk menjadikannya sesuai.

Demo

Perjalanan

Rasa pengakhirannya adalah sporty, aktif dan menyeronokkan tetapi tidak keterlaluan. Bahagian mempunyai cahaya sedikit di bahagian dalam pada tuding.

Terima kasih kerana melihat, github ada di sini:
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

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

Terima kasih kerana melihat!

Atas ialah kandungan terperinci Cabaran DEV: Serlahkan Liga Markup-Kriket saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!