Card using display flex

Hi ragilbuaj, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is and follow the sequence h1-h5

<h1>Improve your front-end skills by building projects</h1>

To make your project more like the example photo, we can do this:

body {
   background-color: #D6E1F0;
}

To remove the scrollbar, do this:

body {
    margin: 0;
    padding: 0;
}

The rest is great!

I hope it helps... 👍

Hi Ragilbuaj,

Hope you're keeping well man. Great job with the final product however, I to answer your question I would recommend using different HTML tags to allow the browser to better understand your site, it would also make your site more easily navigable for a screen reader. For example instead of using a div for the card I would recommend using an article (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), I would recommend using a picture tag instead of a div to wrap around the img (https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b), and finally I would also recommend using heading and paragraphs tags instead of divs.

I re-wrote how I think it would be written using semantic HTML, and sent you a pull request. Check it out and let me know what you think. I didn't change any of the class names so you shouldn't have to rewrite any of the CSS:)