Mobile first landing page using Gatsby and styled components
Design comparison
Solution retrospective
Still needs some work for very wide screens (32 inch monitors, etc.).
Used this nifty property for the image with phone and keyboard with the orange overlay:
mix-blend-mode: multiply;
How I did the orange overlay was that I wrapped the image inside a container and gave the container and background color of rgb(241, 103, 24). I then applied the above CSS property to the image and gave it an opacity of 0.75.
Viewing the website on a 32 inch screen is not a pretty site (no pun intended), but I'll work to patch that up eventually.
Todos:
- The Gatsby plugin for breakpoints are loading the wrong images for their devices. Tablet image is showing instead of the desktop image when viewing on a screen that is 1440px or greater. Definitely going to fix this on Monday.
- Fix accessibility and HTML issues.
As a keyboard enthusiast, I was very delighted about this challenge. As always, please feel free to give any feedback.
Community feedback
- @grace-snowPosted over 3 years ago
Well done on this, it looks great! (viewing on mobile)
The only tiny thing I spotted was to remove the inline styles in the footer and put them up inside the footer styled component (nested p tag in there would still be better than inline styles)
Good work, and FAST! 😂
0@vincitaylaranPosted over 3 years ago@grace-snow Thanks, Grace!
Yeah, the footer was the last thing I worked on and I was pretty exhausted and lazy at that point hahaha. Will take your advice once I'm back on Monday 😁
0@grace-snowPosted over 3 years agoI just tested this with Talk back and found some accessibility issues.
The logo - very important for a brand obviously - was announced as "image, this image does not have a description"
No other images were announced at all on the page. I would expect the image of the actual product to be really important to the page content so should be readable by screenreaders and search engines
Because you've written the h1 in capitals it doesn't read them as words, but spells out the heading like it's an acronym.
I hope these pointers are helpful ☺
2
Please log in to post a comment
Log in with GitHub
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