Earth Day Markup Challenge

jarvisscript

Chris Jarvis

Posted on April 25, 2024

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!

πŸ’– πŸ’ͺ πŸ™… 🚩
jarvisscript
Chris Jarvis

Posted on April 25, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Glam up my markup: Space
devchallenge Glam up my markup: Space

September 15, 2024

Glam Up My Markup: Solar System
devchallenge Glam Up My Markup: Solar System

September 14, 2024

[Frontend Challenge] Space Markup πŸš€
devchallenge [Frontend Challenge] Space Markup πŸš€

September 13, 2024

Alien Signals β€” 2-in-1 Challenge
devchallenge Alien Signals β€” 2-in-1 Challenge

September 12, 2024

Solar System Challenge
devchallenge Solar System Challenge

September 16, 2024