All solutions

EDITS: Max-width of the card container lowered from 63.75rem to 30rem for mobile screen sizes

A margin of 1.5rem is applied to the main element.

Mix-blend-mode is applied to the image and opacity of 0.75.

Thanks @solracss !!

Thank you for checking out my solution to this challenge. I believe some areas need to be refractored in order to have a smoother transition between mobile and desktop versions.

I am not sure I am on the right path to properly setting the color overlay to the image.

Always looking for new knowledge regarding best practices and accessibility.

Positioning the profile picture was the most difficult part of this challenge for me. I think there are some improvements to be made with how it responds when tested down to 320px. I would like to know how I could have better solved the problem of the responsive background images. Thank you for viewing my code.

I just completed my 5th Frontend Mentor beginner challenge. I am looking for feedback on accessibility, responsiveness and overall best practices. Thank you for looking!

EDIT:

Added anchor tags for the interactive elements. Removed media query for desktop version and added max-width to card container. Found solution to improve box-shadows.

-I'm finding the box shadows behind the preview card to be a huge challenge. I can't figure out how to change their border radii to be different than the border radius of the card. Also, the lighter and wider box shadow extends beyond the top of the card in the design. I haven't figured out how to do that yet. -In devtools, at 375px it looks fine, but on my actual phone, which is large, the 0.041 ETH and the 3 days left elements are breaking into 2 rows -Overall, I know there must be a lot of things that can be done better. I appreciate all feedback.

Thank you for viewing my attempt at this challenge. I struggled the most with alternating the mobile and desktop background patterns, and centering my component properly within them. I'm wondering how others have managed to solve this problem. I welcome your feedback.

Thanks for checking out my second challenge on Frontend Mentor. The hardest challenge for me in this project was getting the 2 columns in the desktop size to be equal widths. I wasn't able to achieve it using Flexbox, but with grid I managed to do it. I would be extremely grateful for any feedback and criticism.

EDIT: Added margin to card component in addition to changes below.

This is an updated solution. I have made changes to the html code to include semantic html tags for <main> and <footer>. I added alt text for my img tag. I changed font sizes from the px format to responsive rem. I added :root pseudo class to determine color and typography styles. I made several layout adjustments. Finally, I added drop shadow to the card.