Four Card Feature Section using Grid and Flexbox

Solution retrospective
I was able to this design quick as I was practicing it from time to time. I have learned more about grid and flexbox properties from this challenge.
What challenges did you encounter, and how did you overcome them?I had challenge to fix the cards like in the design image for the desktop and mobile. I used grid method for the desktop and flexbox for the mobile screen. I found it easy to use both than using only one.
What specific areas of your project would you like help with?I could not figure out the shadows exactly like the design images. It was difficult for me as I have no much experience with figma. I want help with box shadows properties to make it look exactly like the design. Also, I have use max width and max height properties so that it does not exactly match with the design. The box looks bigger than the actual design. How do I fix it?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hi Suraj Khatri, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:
<h1>Reliable, efficient delivery</h1> <h1>Powered by Technology</h1>
The most appropriate in this case would be just an h1 tag! containing the two contents, to make them break a line, we can use a max-width, and for the styling we can use a span element with the content that will be changed!
The main tag must be present in every HTML document so that we can recognize the main content. To fix this, wrap the main content in the main tag. Users of assistive technology will have a better navigation experience on your site thanks to the use of HTML5 landmark elements.
The rest is amazing.
I hope this is helpful. 👍
Marked as helpful - @elijahraphael5
yes it does yes it is accessible yes it does very well structured no just slightly readable and concise
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