html ,css, cards

Hey osochash great job on the conversion!

Here's my feedback:

• For the container .cards, I recommend you use display: grid. You'll be able to define your grid gaps and position cards easier where ever they need to be place on different breakpoints.
• I noticed inside a card you have a div that contains the image. You can get away from that by just defining your styles on the img itself. I recommend doing this so we're not introducing nodes to the DOM that aren't needed.
• For a card. I recommend using display: flex; flex-direction: column; Essentially, there are only 3 items in a card. Two are aligned to the left, the third (the image) is aligned to the right (using align-self: end).

Hi Gerardo,

Welcome here, well done :D

@enriquezm already mentioned important points but also I have checked your project, mainly HTML structure by the inspector in my browser and RWD => a few tips below:

• instead of div class="texto" I'd suggest to use the header tag;
• we can only use one the h1 tag on a page so in this project you can use the h1 and inside of it two spans: main-heading and sub-heading;
• instead of div class="cards" you can use the main tag just to indicate the main content on a page;
• names of the classes are not readable and descriptive so I'd recommend check the BEM naming convention;
• you have to reset the CSS styles;
• check a project in your browser by using the inspector on different devices => the flexbox doesn't work, cards are not growing and do not decrease according to the vwidth;
• Important: you have used an explicit width a few times => that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink;
• try to create RWD dedicated for tablets => one column for mobiles, then two rows with two boxes each, and finally desktop design pattern;
• try to make a project in accordance with the original design;

Ps. Don't forget to upvote any comments on here that you find helpful.

Greetings :D