The latest articles on Forem by Tanulathika Deokule (@tanulathika_deokule). https://forem.com/tanulathika_deokule https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1848591%2Fb4923332-039e-4e22-9c7a-ef2437e386ab.jpg https://forem.com/tanulathika_deokule en Tanulathika Deokule Sun, 04 Aug 2024 10:39:49 +0000 https://forem.com/tanulathika_deokule/glam-up-cricket-league-2g8 https://forem.com/tanulathika_deokule/glam-up-cricket-league-2g8 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, Glam Up My Markup: Recreation</em></p> <h2> What I Built </h2> <p>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.</p> <h2> Demo </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlaamq59rrgr5g9ma9aw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlaamq59rrgr5g9ma9aw.png" alt="NYRCL Glamup page" width="800" height="1416"></a><br> <a href="https://lathika12.github.io/" rel="noopener noreferrer">LIVE DEMO</a><br> <a href="https://github.com/lathika12/lathika12.github.io" rel="noopener noreferrer">Code Repo - NYRCL GH</a></p> <h2> Journey </h2> <p>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.</p> <ul> <li>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.</li> <li>I have tried to make use of colors blue, red, white, and orange, extracting this palette from NY as well as USA flags.</li> <li>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. :) </li> <li>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.</li> <li>It was fun to play around the animation parts for the register label, and the cards following header. </li> <li>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.</li> <li>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.</li> </ul> <p>It has been a fun experience, time I spent learning and working on this project, after joining DEV community. Thank you DEV team.</p> devchallenge frontendchallenge css javascript