Design comparison
Solution retrospective
I had some trouble figuring out how to space the contents of the colored divs on the right side (in desktop view, bottom in mobile view) evenly, so it looks a little messy. If anyone sees this and knows how you're supposed to do that I'm all ears!
Community feedback
- @Zy8712Posted 12 months ago
Your site looks pretty good. I think a better way you could've organized the scores on the right side of the page is using flexbox (instead of the
right
andleft
properties you used). Other things I think I should mention is:- you should included a
<main>
tag to wrap around your page contents for accessbility purposes - the
<h1>
tag should be used for mainly the most important text on the page (e.g. the title of the page, which in this case is "Your result"). The headers have default font sizes which can be changed in css using thefont-size
property - you should also use flex box to center your card (instead of the
top: 150px
you have right now), it could look something like this:
body{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
Besides that I'd say it looks pretty good for your first challenge. Nice work 👍
Marked as helpful1@niko-niko-nomPosted 12 months ago@Zy8712
Thank you for the feedback, I genuinely learned a lot from it! :)
0 - you should included a
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