@moi21dev
@N40h
Submitted
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.
@moi21dev
Posted
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.
Marked as helpful
@RitikRocky2002
Submitted
What are the best practices to make a website responsive?
@moi21dev
Posted
@savaliyaalpesh
Submitted
All feedback is welcome.
@moi21dev
Posted
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!
@ShaunPour
Submitted
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!
@moi21dev
Posted
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!