Card using HTML5, CSS3, and Flex

Hi Matt, good job! I took some time to look at your code and have some ideas for improving it:

• add descriptive text in the alt attribute of the image
• to make it look as close to the design as possible you can add img of eye inside overlay class
• add a little transition on the element with hover effect
• instead of using px try to use relative units of measurement -> read here
• using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative

Overall you did well 😉

Hope this help and happy coding!

Hello @brewaskew,

That looks good but It can be Improved.

1. The clock icon is stretched. stretch is the default value for align-items, so changing it would be the solution for it.

2. When you hover on the image there is no eye-icon. My solution is to add img element for the eye-icon in the html and set it to absolute and put it in the center and set the display to none: and when you hover it the display would be inline-block. you can try it.

but, better solution is to use pseudo element such as ::before and ::after. It was just suggested to me by someone here in frontendmentor and I will update my solution also.

have a good day, :)

Hello Matt,

This is how you can improve your code :

1- You didn't use the icon-view SVG when hovering the image. I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML. Also, for the other SVG icons you can use pseudo-elements like ::before or ::after, as the icons are all decorative.

2- The anchor tag for the heading should be inside a heading element.

3- You should have no text in spans alone. Always use meaningful elements, like paragraphs, headings, lists etc.

4- Don't forget to write a good "alt" text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

6- You can add a class to the anchor of the creator name and style it instead of styling the span.