Design comparison
Solution retrospective
I started by creating all the HTML elements and assigning them classes. I then moved on to the CSS, beginning with importing fonts and adding a background color for the entire webpage. Next, I focused on designing the top card, paying attention to details such as padding, margins, and font sizes. Afterwards, I worked on the left and right bottom cards, applying their respective background colors, text styles, and padding amounts. Moving on to the layout, I centered the entire container and spent some time trying to position the two cards next to each other. Furthermore, I used knowledge from prior projects and applied it to this one to achieve the design I was looking for by adding a bottom class and then adding margin: auto, display: flex, and some heigh and width. Overall, this project allowed me to revist some old things that I haven't used much and further improve my flexbox 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