CSS - HTML - Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Fabio Romagnoli,

  Excellent work! Congratulation on completing this challenge. I have some suggestions regarding your solution if you don't mind:

  • The interactive element should around the equilibrium image. The icon view does not really need to be in the HTML as there is no need for an extra clutter in the HTML.

  • The link wrapping the equilibrium image (image-equilibrium ) should either have Sr-only text, an aria-label that indicates where the link navigate the user(not describes the image).

  • For any decorative images, each img tag should have empty alt="" and add aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in(icon-view, icon-ethereum, icon-clock ).

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. Remove the <div class="divider"><p></p></div>, you can use border-top: to the avatar's part.

  • You can use unordered list<ul> to wrap class="price". In each <li> should be <img> and <p>, then you may use flex properties to align them centrally.

  • The alternate of the avatar image should not be empty. You can use the creator's name Jules Wyvern. Read more how to write an alt text .

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover. There is no need for a extra clutter in the HTML. You can have a look at my solution here, it might help.

  Aside these, your solution is good. Hopefully this feedback helps

  Marked as helpful

  0