All solutions

What are you most proud of, and what would you do differently next time?

I'm proud of how closely my solution matches the requested design, and of how clamp was implemented to shift the card between its minimum and maximum sizes. (Also, clicking the profile image will toggle a secret "Light Mode" color scheme I included for fun.)

Next time, I would perhaps give more consideration to how the card looks on mobile landscape orientations.

What challenges did you encounter, and how did you overcome them?

I'm not as familiar with using rem units as I should be. I started this challenge using pixel values for everything, but ended up using an online conversion tool to get the rem values that corresponded to the pixel values I wanted to replace.

What specific areas of your project would you like help with?

Regarding semantic HTML, I am wondering if using h2 for the "London, United Kingdom" text was appropriate, if p would have been better, or if it's merely a matter of preference. I also used an unordered list for the card links and am wondering if that was a proper use of that element.

What are you most proud of, and what would you do differently next time?

I like that it ended up looking very close to the initial design. It may not technically be "pixel perfect", but I believe the requested design and my solution are at least indistinguishable at a glance. Also, I implemented a slightly different styling for mobile displays in landscape orientation, and I like how that turned out as well.

Next time, I would perhaps remember to check the image and see if it could be compressed for optimization purposes.

What challenges did you encounter, and how did you overcome them?

Creating unordered lists with vertically-centered bullet points was one challenge. I overcame it by using "display: flex" and "align-items: center" on the list items, and then using the "::before" selector on the list items to insert custom bullet points.

Shifting the text in the first column of the table towards the right without affecting the positioning of the text in the second column was a challenge as well. My solution involved wrapping each of the entries in the cells of the first column in their own div elements, and then using "position: relative" on those div elements to shift the contents away from their original positions.

What specific areas of your project would you like help with?

I am wondering if I should have included an "article" tag within the "main" tag (or perhaps elsewhere); I excluded it because I figured that it was redundant in this case.

What are you most proud of, and what would you do differently next time?

I am happy that the card layout switches from being vertical to being horizontal after a certain height decrease is reached on the desktop view, and that the card works on smartphones with a landscape orientation. Next time, I would remember to implement SASS/SCSS for a pre-processor scripting language.

What challenges did you encounter, and how did you overcome them?

Trying to make the image for the QR code change size properly along with the rest of the card was a challenge. Using "object-fit: cover" helped to keep the QR code square as the card shrinks and expands.

What specific areas of your project would you like help with?

I would like to know if there are better ways to use the "height", "width", "max-height", "max-width", "min-height", and "min-width" properties to make layouts that match the original design.