@Victor-Nyagudi
Posted
Hello, Reza.
Good effort on this one.
Number 1. I believe you centered the three cards on the page correctly. There are other ways, but yours works just fine. However, for the content inside each card, you used a mix of margin and padding, which works, but can break easily.
If you wanted to increase/decrease the space around all the items, you'd have to manually change them for the heading, image, text, etc.
I'd recommend turning each card into a flexbox container and using align-items: center; and justify-content: center;.
Here's an example of how the code would look.
.left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2em; // <- This padding is applied to the container, so this is the only place you'll need to change the padding for it to affect all elements inside it
}
Number 2. This is a fairly simple solution of just HTML and CSS, so I don't see much you can do to use less code.
Number 3. You used a <p> tag for headings instead of an <h2> for each card, but you've been told this already in the previous comment.
Number 4. I'd make the changes mentioned above and use more descriptive class names for the cards e.g. .left-card or .sedan-card instead of just .left which is ambiguous.
I hope this helps.
All the best with future solutions.
Marked as helpful
@rezajaber
Posted
@Victor-Nyagudi hey vicktor, thank you for such a detailed and perfectly explained feedback, everything you mentioned makes perfectly sense and I will do my best to adapt these changes :)
Have a great day and happy coding!
