DEV Community

Cover image for DEV Challenge: Glam up my Markup-Cricket League
Anna Villarreal
Anna Villarreal

Posted on

1

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);

});
Enter fullscreen mode Exit fullscreen mode

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

Cricket League webpage

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!

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more