DEV チャレンジ: マークアップ クリケット リーグを華やかにしましょう

これはフロントエンド チャレンジ v24.07.24、Glam Up My Markup: Recreation への提出です

私が作ったもの

架空のニューヨーク クリケット リーグの Web ページ

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 中国語 Web サイトの他の関連記事を参照してください。