DEV Community

Cover image for Earth Day Markup Challenge
Chris Jarvis
Chris Jarvis

Posted on

4 1 1

Earth Day Markup Challenge

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I took the markup and added a gradient background. The light to dark blue is meant to copy the color changes of the sea depth.

I added the links to the Earth Day site. The starter code had anchor links. The links change color and expand a bit on user hover. The link text for Earth Day.org was all capital letters. A screen reader reads that one letter at a time so I changed the text.

The paragraphs have been indented for easier reading. The list has globe icons and the text is centered on the globes.

Blockquote was used to make the quote stand out more.

Demo

Here it is on Codepen.

Journey

I spent a lot of time playing with background colors. I didn't quite get what I wanted but may revisit it someday. As with many frontend projects, there's always something that can be changed.

Cover is from our trip to Sedona, AZ years ago.

Thanks for reading!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (2)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Nice one, Chris! 🙌

Collapse
 
meg_gutshall profile image
Meg Gutshall

BEAUTIFUL!!!

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

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

Okay