Skip to content
OverviewSolutions
3
Comments
4

moi21dev

@moi21dev50 points

Hi 🙂 I am currently learning HTML, CSS and JavaScript to hopefully become a Full Stack Developer someday. I am interested in technology, especially Computer Science, and I love programming.

Latest solutions

Latest comments

  • moi21dev•50
    @moi21dev

    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
  • moi21dev•50
    @moi21dev

    Hi Ritik,

    to make responsive designs I would suggest to use CSS Flexbox, here is a useful guide.

    You can also use media queries, you can read more here.

  • moi21dev•50
    @moi21dev

    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!

  • moi21dev•50
    @moi21dev

    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!