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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay