DEV 챌린지: 마크업 크리켓 리그를 멋지게 꾸며보세요

Frontend Challenge v24.07.24, Glam Up My Markup: Recreation에 대한 제출물입니다

내가 만든 것

가상 뉴욕 크리켓 리그 웹페이지

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!