@Luizadebrito
Posted
Well, I struggled with the semantic of HTML equally, so I made some tests in my code. I did some changes in CSS and when it doesn't worket I'd some chenges in HTML.
So, I just took a look in your code and realised you don't necessary need to use the element <main>, istead you could put a <div class="container"> and inside you put another <div class="card">, so them inside of this card you will put de image and another <div class="text"> that would contain the elements <h2> and <p>. This div.text need to stay inside the div card like the image to work properly.
You could get some vertical padding between the <h2> and the <img> to git some space to look more beautiful.
This all is a some suggestion that would allow you to put a border-radius in the image and can be semantically correct too. I would increase spread in the shadow you put in de box to seem more natural and make the color more transparent.
If I'm wrong, please someone correct me, cause I'm a beginner too.
Marked as helpful
@alexstrauch
Posted
@Luizadebrito thank you very much, totally overlooked the rounded corners in the image, fixed that.
