My question is about the view icon when hovering the NFT image.
NOTE: I didn't use any figma files, i've only use the given assets.
I didn't succeed to make it fully white as expected on the active state design, any feedback / best practices about the hover state is appreciated.
Hi N40h,
congratulations on completing this challenge! : )
I had a took at your code, I am a newbe but I guess that the problem is in these lines:
.nft-container:hover .overlay {
cursor: pointer;
opacity: 0.5;
}
Try to separate the background-color and the image, so you can set the hover aquamarine color to opacity: 0.5, and the image to opacity: 1
This way, the image will be white, on a semi-transparent background color.
What are the best practices to make a website responsive?
All feedback is welcome.
Hi Alpesh,
I have seen the Live site and your design is responsive and accurate, well done! All it's missing are the icons, you might want to add them : )
I took a look at your repository on Github, and I'd like to share a few suggestions.
The README.md file is very important, because you can share your thoughts about the project. I would invite you to write your README.md file using the guidelines included in the README-template.md file provided by Frontend Mentor. Once you have your README.md file, you can delete the README-template.md file.
push the /assets folder up to your main branch, or the icons will never be displayed.
Keep up the good work!
When it comes to css I'm not the best and this project was done with the intention of improving my design skills. I plan to do more such projects along this trajectory so if you have any constructive criticism about what to change regarding this or ways to approach things differently in the vein of "get better at css and design in general", I would love to hear them. Thanks!
Hi Shaun,
well done in completing the project!
For future projects I would suggest to :
learn CSS Flexbox, here you can find the Modzilla's guide. By visiting the Live site of your project, I saw that at different width of the viewport the content is not displayed as it should. Flexbox is very useful to layout content while taking care of the responsiveness.
use the developer tools in Chrome or Firefox, not only they help you analyze the page you're building, but you can even test if the page is responsive or not.
in your .css file always add the font you're using, and it's better include the font file in /assets too.
font-family: 'font name', 'back up font name';
Keep up the good work!