Responsive NFT Preview Card SCSS Grid and Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  hello @ProdByTENSHI , I have some suggestion:

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And alt in the avatar img shouldn't be empty and more descriptive (not only avatar) . read more about alt for informative or decorative images..

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in `this challenge is an anchor tag <a>.

  • You can use unordered list <ul> to wrap <div class="info-container">and in each list item would have <img > and <p>.

  • The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • Element <p >not allowed as child of element< span> in this context.

  • box-shadow is very dark (not matching the design).

  • It's better not to style on the ID'S . The best way to do that is single class selectors.

  • I would recommend to check @vanzasetia solution and read the read me file as he explained a lot. I' m sure it helps.

  Hopefully this feedback helps.

  Marked as helpful

  2

  ---

  

  Leon•50

  @ProdByTENSHIPosted almost 3 years ago

  @PhoenixDev22 Hello, Thank you for the detailed Feedback.

  How would you make the Eye hover Effect in css only? I tried to put the SVG as the Background.

  With adding Interactive Elements do you mean adding an <a> to those?

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  @ProdByTENSHI Definitely there are different ways you can use pseudo element to the image container

      content: url(images/icon-view.svg);
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: hsl(178deg 100% 50% / 60%);
      width: 100%;
      height: 100%;
      border-radius: 10px;
      opacity: 0;
      cursor: pointer;
      transition: opacity .3s;
  

  Or as @vanzasetia solution did.

  Yes I mean <a> tags .Read more about interactive elements hopefully this helps.

  Marked as helpful

  2

  

  Leon•50

  @ProdByTENSHIPosted almost 3 years ago

  @PhoenixDev22 I started another Challenge and tried to apply the things you pointed out here.

  The Pseudo Elements are still a very confusing topic for me.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  @ProdByTENSHI You can read more about pseudo elements here .

  Marked as helpful

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome job. Viewing your solution you did great with coding the design. I would suggest the following for you.

  • Inside the avatar-display rule set you could have refactor the HTML structure into something like this....

  HTML:
  <p id="creation-of-text">Creation of  <span>Jules Wyern </span></p>
  

  Then add style like this...

  p #creation-of-text {
      color: #8bacda;
  }
  
  #creation-of-text span {
       color: white;
  }
  
  #creation-of-text span:hover {
      color: #00fff7;
  }
  
  

  Hope this helps and keep up the good work!

  Marked as helpful

  1

  ---

  

  Leon•50

  @ProdByTENSHIPosted almost 3 years ago

  @RioCantre I wanted to do it like this but than it gave me a Line Break. I didnt know how to put them in one line so I skipped this part.

  0

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @ProdByTENSHI span doesn't give a line break except if you use div

  If it does give a line break you could use display: inline-flex

  Marked as helpful

  0

  

  Leon•50

  @ProdByTENSHIPosted almost 3 years ago

  @RioCantre Oh I used 2 <p> Tags. So Span would be the better solution here? Because I often have this type of Situation.

  Thank you for the quick response!

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @ProdByTENSHI Yes, you should look out for duplicated tag because they can be the reason why other tag is not working.

  I would appreciate it if you could mark it as helpful. Cheers!

  Marked as helpful

  0