DEV Challenge: Glam up my Markup-Cricket League

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

Fictional New York Cricket League Web Page

Using Javascript, I put the sections into a div container so I could modify them how I wanted with 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);

});

I generated a background header image using AI and modified it with CSS.

The background of the div container contains the recreational cricket league logo that was converted into a decorative element with CSS.

I styled it with New York colors to make it feel appropriate.

Demo

Journey

The ending feel is sporty, active and fun but not overdone. The sections have a slight glow on the inside on hover.

Thanks for looking, the github is here:
https://github.com/AnnaVi11arrea1/Cricket-League-Markup

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

Thanks for looking!

The above is the detailed content of DEV Challenge: Glam up my Markup-Cricket League. For more information, please follow other related articles on the PHP Chinese website!