Design comparison
Solution retrospective
Hey all, my first project. Definitely not clean enough of code. If you have the time to look over and tell me what can be done better.
Thanks.
Community feedback
- @FluffyKasPosted about 3 years ago
Hey there,
Here's a list of things you could to improve:
-
Your card looks super small and hard to read. Not sure why you set a width of 280px on your card and on your image, but this is the source of your problem. You should also center it.
-
More semantic markup: instead of div you could use
main
for your box. I'd also avoid using class names that are referring to styles("bold900, etc"), try to be more descriptive of their content instead. And instead ofa
tags, you could use buttons where its appropriate. -
Background image: there are 2 separate background images for desktop and mobile devices, use them both with adding media queries. Also, I'd suggest using
background-size: contain
. I noticed you uploaded one of the background images in your css folder(not sure, why) and then both of them again in the images folder. Perhaps you should get rid of the incorrect one :) -
And finally: there's a box-shadow on the card itself that you missed.
I hope this helps, good luck! :)
Marked as helpful0 -
- @hafizanadliPosted about 3 years ago
To position the card in the middle of the screen you can set body min-height to 100vh, and then centering box element using flex
body { min-height:100vh; display: flex; justify-content:center; align:items:center; }
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