Glam Up My Markup: Earth Day Challenge
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-04-29 06:43:11

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), Glam Up My Markup: Earth Day Celebration Landing Page_

## What I Built

<!-- Tell us what you built and what you were looking to achieve. -->
I built a landing page and tried to enhance and make it more interactive and fun using JS and CSS.

.
## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

Demo: https://earth-day.onrender.com/

Code: https://github.com/itsmesrishti/earth-day

Project Gallery:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fwmhl5ktnufci95on13.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmiosaex3ena0ib1z8qy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zjm7mqp9qjettxmqik9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r444fnpfh15wh6s6k9ig.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghisueluq3jedjqsfrhe.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrozco4bp4xziqwtvbwv.png)

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
I wanted to participate in this challenge as I thought it would be a good way to refresh whatever I had learned in the past regarding JS and to learn some new things becuase watching/reading is only so much fun.

I learned how to make text circular and how to make and add animations! 

For accessibility, I tried to make sure that links can be navigated using tab and provided the aria-describedby for them. I wasn't sure what more I could do with accessibility so any tips are most welcome!

As far as responsiveness is concerened it should work fine on tablets and desktops (I tried to make them work even for large screen desktops so hopefully they will work!). It currently doesn't have a mobile version.

I think I might want to make the mobile version of this and maybe add a scrollspy feature for the circular animation.

References: 
https://stackoverflow.com/questions/17363164/how-could-i-alternate-background-color-between-odd-even-dd-rows
https://stackoverflow.com/questions/23455798/changing-color-of-letters-one-by-one-in-a-html-text-when-hovering
https://css-tricks.com/set-text-on-a-circle/
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://www.kirupa.com/animations/spinning_circular_text.htm
and then a bunch of MDN content related to animation


<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->