Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Ping single column page using SVG images/filters, flexbox, & JS events

Galen White•190
@JudasThePriest
A solution to the Ping single column coming soon page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I used this project as an opportunity to start getting in the habit of writing comments on my code to distinguish which parts of my code served which functions, and make it all-around easier to read. I've only annotated my CSS so far, but will dabble in the future with doing so on my HTML/JS as well.

I ran into some difficulty with styling the SVG images correctly. Initially I had the images just on their own, but found that once I added borders onto images, the borders took the same color filter that I'd applied to the images themselves. I then tried wrapping each image in a <div> but found the images would disappear once I tried to style them. Being honest, I don't remember what I tried that ended up working, but it worked and I'm overall satisfied with the final product.

I found I was unsure about whether to add alt text for the main image on the page, and ended up doing it anyway just to be on the safe side. Would this image be considered more decorative or should it receive alt text? For that matter, should I have added alt text on my share buttons?

Thanks all :)

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Galen White's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License