Reponsive NFT preview component

@nirvayathapa Thanks for checking out my work and also for the compliment :) I don't use the Figma design files since I'm not a Pro member (yet lol), but I think it's actually better not knowing because it forces me to pay attention to all the details, and that to me is part of the challenge. What I normally do is, I just line up my browser with the design image from the top and then just try to see which sizes work; I'd compare the designs by resizing the browser both vertically and horizontally as I'm working on it. What helps me is to use rem for almost everything, including font-sizes. Good luck!

@elaineleung Damn .You r really hardworking and cool !Keep it up and thank u for answering!

@nirvayathapa also you can use some image comparison slider (like here in front end mentor) on internet like this one: image compare slider

or you can made an image compare slider for yourself as challenge.(recommended) and another way is using Perfect Pixel browser extension.

@CyrusKabir Thank you for your comment and suggestions! I only used --clr-cyan because it is the only cyan style in this challenge; if there had been another cyan, then I would add in a number for sure. With these FEM challenges I don't normally use the primary/secondary/accent naming system, as sometimes there are lot of different colors given and I find it a lot less confusing just to stick to the names listed in the challenge since my focus is on coding and not design conventions. I'm mainly using this as practice, so I'm inclined to use what makes most sense to me; it would definitely be different if I was working on a team.

@elaineleung Hi Elaine, Your website is so perfect, it's like god's work. I am a novice to web dev. does taking everything inside the main component resolves the accessibilitiy issues.why did you apply grid to main component? does it have anything to do with the growing and shrinking of the card with screen size.

@viraj308 Hi Viraj, thank you for your compliment 🙂

About your questions:

1. Putting all the main content inside the main tag can help with resolving some accessibility issues related to HTML semantic tags because main helps the screen reader identify where the main important contents are.

2. I used display: grid on the main element mainly for centering the component; because I have a footer, I didn't want to use display:grid on the body to center everything, otherwise the footer would be centered too with the card, and I only want the footer at the bottom. It doesn't really have anything to do with the card growing and shrinking; the responsive card size has to do with the responsive width properties I'm using.