@zhammersteinSubmitted 4 months ago
Latest solutions
Latest comments
- @valdi7913Posted 3 months ago
Great work! Your solution looks very similar to the design. However the only things I would change are the background colors and Preparation time color, adjust the line heights of some of the text and then tweak the spacing just a bit. Otherwise it looks great, keep it up :)
0 - @AndresOreVelSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I used a different way to organize the labels, but I liked how it turned out. I'm sure I have other things to fix.
What challenges did you encounter, and how did you overcome them?The main label got a little complicated so I applied a flex to better organize everything
What specific areas of your project would you like help with?A way to be able to do not only this exercise, but any responsive page
@valdi7913Posted 3 months agoYour solution is well put together. It only needs a tiny bit of adjustment to match the design better.
You can change the min-width of body from 100vsh to 100vh and that will center the design correctly. And then change the width of the card to something like 280px rather than 89%.
After these changes you solution should pretty much match the design.
As a shortcut for these simple designs, I prefer to use display: grid; and place-content: center; to perfectly center a div in only 2 lines of css. Although the body tag needs to have 100vh for this to work
As for your question about a way to be able to do not only this exercise, but any responsive page, I recommend looking into flexbox and grid css styles https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try to never use margin to displace html elements. Personally the only place I ever use margin is just at the start of my css file to set it to 0 everywhere like this
- { margin: 0; padding: 0; }
Keep up the good work, you clearly have an eye for this :)
0 - P@barterkampSubmitted 3 months ago@valdi7913Posted 3 months ago
Very nice touch to add your own details, somehow that didn't cross my mind when I solved this.
Visually your solution looks identical to the design which is amazing.
Your code is also very clean. You use very descriptive css classes.
Keep up the good work :)
0 - @alaa-mekibesSubmitted 3 months ago@valdi7913Posted 3 months ago
Wow, this is great, looks almost exactly like the design.
You are a pro, keep it up :)
1 - @ItaloDev-MarceloSubmitted 3 months ago@valdi7913Posted 3 months ago
Your solution looks great!
The only thing I would change is reducing the heading a bit so that it fits in one line, matching the design. You could also fix this by increasing the width of the card :)
Your code also looks good and uses descriptive html tags.
Keep up the good work!
Marked as helpful1 - @keemah03Submitted 3 months ago@valdi7913Posted 3 months ago
Your qr code component is nice and centered.
Visually, the only changes I would make would be the following
- Decrease font size to 24px for the heading
- Fix and set the padding so that all sides of the image are equal distance from the card edge.
- The background color also seem to be wrong
- The font is not the one specified in the styleguide
Other than that the code is nice and clean. You might get some aria accessibility warnings but otherwise nice work!
0
