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中文网其他相关文章！