NFT preview card component challenge hub using HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @dawidPoznanski ,

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the NFT card ) and a footer (which will be the attribution).<Footer> should be in the <main >

    • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image Equilibrium #3429, Jules Wyvern .

  • 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 in( icon-view, icon-ethereum, icon-clock ).

  • the icon-view 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.

  • I would leave the equilibrium main img in html and use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo on hover.

  • The avatar 's alt shouldn't be "empty " , you can set Jules Wyvern to it .

  • Alt text for the profile image shouldn't be empty . Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • You can use an unordered list<ul> to wrap class="section-price" and in each <li>, there would be <img > and<p> .

  • No need for an <hr> , you can use border-top to the class="creator"

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Never use px for font size.

    • height: 600px ; It's rarely ever a good practice to set heights on elements.

  • width: 350px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • min-height: 100vh; to the body using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page. You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

  Overall, your solution is good, Hopefully this feedback helps.

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  I hope i solve your problem 👍🚀 (I have a problem with :hover with img. I don't know how to replace it with other background color, opacity and img.) HTML Code

  <div class="viewbox1"> <img src="images/image-equilibrium.jpg" alt="Equilibrium" class="equilibrium"> <div class="viewbox2"> <img src="images/icon-view.svg" alt="viewimage"> </div> </div>

  CSS Code /* Inner card iamge and content css code */ .card{ display: flex; flex-direction: column; }

  /* ACtive states img design css code */ .viewbox1 { position: relative; width: 302px; height: 302px; }

  /* ViewBox1 Image CSS Code */ .viewbox1 img.equilibrium { width: 100%; height: 100%; border-radius: 10px; }

  /* Viewbox1, viewbox2 CSS Code */ .viewbox1 .viewbox2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 247, 0.8); border-radius: 10px; display: flex; justify-content: center; align-items: center; opacity: 0; cursor: pointer; }

  .viewbox1 .viewbox2:hover { opacity: 1; }

  I hope you find this helful

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  in Card Design CSS Code used this property: align-self: center;

  I hope you find this helpful 😊

  0