DEV Community

Cover image for Glam Up Cricket League!
Tanulathika Deokule
Tanulathika Deokule

Posted on

1

Glam Up Cricket League!

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

What I Built

I have built a glammed up landing page for NY Recreational Cricket League to my best ability. With this exercise, I learnt some advanced CSS concepts like grid layout, animations and variables.

Demo

NYRCL Glamup page
LIVE DEMO
Code Repo - NYRCL GH

Journey

This was an interesting exercise for me to glam up the NY Recreational Cricket Landing Page. Usually I would use bootstrap to whip up something quickly, however this helped me immerse myself into pure JS and CSS.

  • I started with sports theme with a plain backdrop, while giving the front end part of it some light bluish theme, which I tried to align with the logo and page elements.
  • I have tried to make use of colors blue, red, white, and orange, extracting this palette from NY as well as USA flags.
  • I tried to surf and find the latest trends to make the webpage modern, which surprisingly was a bit of CSS, rendering my respect to bootstrap developers. :)
  • I made the navbar as smooth as possible while transitioning and looking at, and tried to bring the attention of users to Register showing the fee was at just 150$, as a grow shrink marketing label on the navbar.
  • It was fun to play around the animation parts for the register label, and the cards following header.
  • Setting up the Location as a map, and including the social media handle icons was an idea from the get go, although schedule section was something I would have liked to work on more.
  • I wish I had more time to glam up this page further, I would like to add more accessibility to the buttons, work on a hovering label for contact us, may be set up some better content into the cards, and brainstorm on the schedule section.

It has been a fun experience, time I spent learning and working on this project, after joining DEV community. Thank you DEV team.

Top comments (0)

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