P
Lucas Marchesoti Franco• 240
@lmarchesoti
Submitted
I had a really tough challenge with this one's fluid images! I hope it all goes well in your screens too! :)
P
Lucas Marchesoti Franco
@lmarchesoti
All comments
- PLucas Marchesoti Franco• 240
@lmarchesoti
Posted
Left some acessibility errors because I changed some styling midway and didn't fix the markup properly. It is harmless anyway.
Too lazy to fix it now, might come back to it later if I have time ¯_(ツ)_/¯
0 - Leonardo Fernández• 360
@leodev9911
Submitted
PLucas Marchesoti Franco• 240@lmarchesoti
Posted
Hello @leodev9911,
Your solution looks great! I'd like to highlight 2 points you could improve:
- For the 4-card section, I see you have used flexbox with some absolute positioning. While that is correct, I think a cleaner solution is to use CSS Grid. You can use extra rows and make the cards span multiple ones, try it out!
- In the design file, the colored border at the top of the cards has straight corners. If you look closely, your solution has the color bend along with the border. To achieve this, you can use one of the pseudo-elements
::beforeor::afterto create a rectangle and position it at the top of the card. Then, just make the overflow hidden at the card and voilá, you're done! :)
Marked as helpful
0 - PLucas Marchesoti Franco• 240
@lmarchesoti
Submitted
This background was hell! I wonder how other people did it, or if I actually went too far...
PLucas Marchesoti Franco• 240@lmarchesoti
Posted
Is the reference design here different from the figma file? I seem to be getting a smaller image and a bolder font for the stats here.
0
