Design comparison
Solution retrospective
Dimensions may not be accurate as I'm using a .jpg file to copy designs and not sketch or figma.
When completing the card layout for the desktop screen size I wasn't able to use the "align-content" property to centre the outer cards vertically how I would've liked as this was a wrapped flexbox row within the same div... Instead, I set the "top" property to the outer cards to solve this. If there is a better practice for this scenario please comment as I can implement this in future projects.
Thanks :)
Community feedback
- @SzymonRojekPosted almost 4 years ago
** Hi Mike again**
According to your question: check this article - you will find an answer.
I have commented on Single Price Grid Component. Lot's of points you can apply in this project.
- Your hero area can become a header or even aside (as a last resort). Now, you can check this solution with the content of the header (your hero):
<h1 class="heading-primary"> <span class="heading-primary-main">....</span> <span class="heading-primary-sub">....</span> </h1>- below you can use the main tag, each box can become a section or article (generally we can have many solutions here but step by step you will gain a proper one);
Final conclusion: please read about semantic tags (especially headings), height and width (viewport height, viewport width => vh, vw).
Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.
Greetings :D
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