DEV 挑戰：讓我的標記板球聯賽更加精彩

這是前端挑戰 v24.07.24 的提交，Glam Up My Markup：娛樂

我建造了什麼

紐約的虛構板球聯盟網頁

使用 Javascript，我將這些部分放入 div 容器中，這樣我就可以使用 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);

});

我使用AI生成了背景標題圖像並使用CSS對其進行了修改。

div 容器的背景包含休閒板球聯賽徽標，該徽標已使用 CSS 轉換為裝飾元素。

我用紐約的顏色來設計它，讓它感覺合適。

示範

旅行

結局的感覺是運動、活躍和有趣，但不過分。懸停時，這些部分的內部會發出輕微的光芒。

感謝您的瀏覽，github在這裡：
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

直播：https://annavi11arrea1.github.io/Cricket-League-Markup/

感謝您的瀏覽！

以上是DEV 挑戰：讓我的標記板球聯賽更加精彩的詳細內容。更多資訊請關注PHP中文網其他相關文章！