DEV Community

Cover image for Glam Up My Markup: Cricket League!
Kiruthik Kumar
Kiruthik Kumar

Posted on

Glam Up My Markup: Cricket League!

Hello again!,

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


What I Built

For the Frontend Challenge v24.07.24, I transformed the provided HTML markup into a visually appealing and interactive landing page for the New York Recreational Cricket League. I focused on enhancing the aesthetics and functionality using CSS and JavaScript, while keeping the original HTML structure intact, only modifying it through JavaScript when necessary.


Demo

Live link: https://rith1x.github.io/challenges/nyrcl/

Github Repository: https://github.com/rith1x/rith1x.github.io/tree/main/challenges/nyrcl

Note: Don't forget to interact with elements!!!


Screenshots

Image description

Image description

Image description


Journey

This challenge gave me the opportunity to explore broad DOM manipulation in JavaScript, which allowed me to add dynamic elements without altering the original HTML. I also learned how to style a timeline and create engaging entry animations that enhance the user experience. Additionally, I experimented with rise-up notes to highlight key information on the page. I'm particularly proud of how these elements came together to create a balanced design that is both functional and visually appealing. These new skills will definitely be useful in future projects.


Key Aspects

  • SVG CSS Animated Welcome Screen: A visually engaging welcome screen that draws users in with smooth, animated SVG graphics.
  • Animated Entry Header: An eye-catching entry header that animates as the page loads, setting the tone for an interactive experience.
  • Interactive Icon: A responsive and interactive icon that enhances user engagement through subtle animations and functionality.
  • CSS-Only Timeline: A sleek and informative timeline designed purely with CSS, providing a clean and accessible way to display chronological information.
  • Rise-Up Banner Animated to Scroll: A dynamic banner that animates as users scroll, highlighting important information in a visually appealing way.
  • Responsive Design: The entire page is designed to be fully responsive, ensuring a seamless experience across all devices.

Thank You💙

Top comments (7)

Collapse
 
jennavisions profile image
Jenna

Nice work @rith1x

Collapse
 
ravixalgorithm profile image
Mr. Algorithm

You nailed it bro

Collapse
 
jennavisions profile image
Jenna

Congrats on another win! 👏🎉

Collapse
 
mince profile image
Mince

⭐⭐⭐⭐⭐ 5/5
AMAZED BY THE EFFORT PUT INTO THIS. DEFINITELY ONE OF THE WINNERS ! Great work

Collapse
 
arndom profile image
Nabil Alamin

The attention to detail is amazing 🤩 Awesome work.

Collapse
 
banerjeeprodipta profile image
Prodipta Banerjee

Great job 👏🏽

Collapse
 
amy_ohare profile image
Amy O'Hare

This is an awesome project!