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!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

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

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay