Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @Chrisesbueno, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
1.I saw that for some properties you’ve used
rem
and for otherspx
. In this case, it is better to use only one kind of unit to have a better organization for your code.relative units
asrem
orem
have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well. 2.The box-shadow is a bit too strong, this is due theopacity
andblur
. The secret to create a perfect and smooth shadow is to have low values foropacity
and increaseblur
try this value instead:box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);
If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @VCaramesPosted about 2 years ago
Hey there! Here are some suggestions to help improve your code:
- To give your HTML code structure, you want to set up your code in the following manner:
<body> <header></header> <main> <section> <div class="supervisor-card"></div> <div class="team-card"></div> <div class="karma-card"></div> <div class="calculator-card"></div> </section> </main> </body>
The Header Element represents introductory content.
The Main Element identifies the main content of the document.
The Section Element can be used to wrap content that is related to each other.
And since none of the cards make sense on their own, a simple Div will do for each card.
-
The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
-
Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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