DEV Community

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

Posted on

11 4 3 2 6

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πŸ’™

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

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!

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

πŸ‘‹ Kindness is contagious

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

Okay