NFT Responsive Project

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4ini

  Posted almost 3 years ago

  Hi, @tomatas95. Well done on completing your first project.

  Your live project doesn't load, because of some misconfiguation. Please follow the advice of @correlucas to rectify that.

  • You should wrap the main content (card) in a <main> element. Using semantic elements is better for accessibility and make the code ease to read. You use <article> when you want to wrap content which doesn't need context of other content on the page and can be reused somewhere else. So, don't nest <article> with in <article>.

  • For the image hover effect, i wrote this small demo code. You can modify and learn from it. https://codepen.io/pradeeps4ini/pen/yLKbRqB

  20
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  Hello Tomatas, Welcome to the Frontend Mentor community and congratulations for your first challenge:

  I'll give you some tips as I see is your first time applying for a challenge:

  Your solution live site isn't displaying due a problem of configuration in Github Pages, isn`t? You can consider use Vercel or Netlify that are websites that let you connect your Github accounts and repositories. I recommend vercel.com because its easier to use and you'll get your solution page online in a matter of minutes.

  Since I cannot see your live page, I cannot help you much about the solution and the hover issue. I did this challenge too and an article from W3 Schools helped me a lots to understand how this kind of complex hover-image-icon works. Link below:

  https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp\

  If you want to see how I've applied these W3 Schools concepts for image icon hover, you can check my solution:

  https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  One time you've your site live, just update your solution and also the screenshot, this way you can compare your solution to the design file. Using the slider in the challenge HUB.

  Feel free to do me further questions, I'll be happy to help you!

  22
• 

  tomatas95•50

  @tomatas95

  Posted almost 3 years ago

  thank you for checking my code! I''ll try my best to fix all mistakes youve all pointed out, the overlay thingy has gotten much more easier to understand thanks to the examples given!

  00