This content originally appeared on DEV Community and was authored by Kiruthik Kumar
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
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💙
This content originally appeared on DEV Community and was authored by Kiruthik Kumar
Kiruthik Kumar | Sciencx (2024-08-04T11:42:53+00:00) Glam Up My Markup: Cricket League!. Retrieved from https://www.scien.cx/2024/08/04/glam-up-my-markup-cricket-league-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.