Design comparison
Solution retrospective
I started by creating all the HTML elements and assigning them classes. I moved onto the CSS, and started by importing fonts, and adding small visual details to the two cards. Next, I started to design the of the total results card, and spent some time trying to get the small details right (such as padding, border radius, font sizes etc). I then moved to styling elements like text, the circle Next, I spent some time working on the individual results card. I used knowledge from prior projects and applied it to this one to create separate containers for each side, and spent some time trying to get the design I was looking for. Lastly, I went over the entire design, added some padding, changed the margins, and added a hover effect to the button. Overall, this project allowed me to learn some new things and further improve my vanilla CSS skills. Once I finished, I tested the website on multiple browsers and used the built-in device size emulation feature to view what the website would look like on different devices.
Community feedback
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