NFT Responsive Project

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 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

  2
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 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!

  2

  ---

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @correlucas I used pseudo element to set the hover effect. It takes less code and easy to understand. https://codepen.io/pradeeps4ini/pen/yLKbRqB.

  2

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @pradeeps4ini Oh that's amazing, I'll take a look on it. I wasn't even thinking was possible to do the same thing with a pseudo-element due to the position. I'll check this codepen for sure. Thank you bro.

  1
• 

  tomatas95•50

  @tomatas95Posted over 2 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!

  0