Earth Day Markup Challenge

#devchallenge #frontendchallenge #css #javascript

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!