Very well done! 🎊🎉🚀
Use should look into semantic HTML instead of plain <div> elements for better accessibility. I have some suggestions on how you can help your project. First, the <main> element represents the dominant content of the <body> and expands on the central topic of the document. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content. Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. Button are usually represented with semantic <button> element. With that being said, I would redo your code as so:
<body>
<main>
<article class="card">
<section class="profile">
<img
src="./assets/images/avatar-jessica.jpeg"
alt="avatar"
class="profile__img"
/>
<h1 class="profile__name">Jessica Randall</h1>
<p class="profile__location">London, United Kingdom</p>
<p class="profile__description">
"Front-end developer and avid reader."
</p>
</section>
<section class="socials">
<button class="button">GitHub</button>
<button class="button">Frontend Mentor</button>
<button class="button">LinkedIn</button>
<button class="button">Twitter</button>
<button class="button">Instagram</button>
</section>
</article>
</main>
</body>
Learn more about semantic HTML elements here
Aside from minor pixel-perfect imperfections in gaps and margins, your project looks fantastic! Kudos to your styling skills! Very well done! 🤩 Congratulations! 🎊 Keep it up!👍
Marked as helpful
@JaimeOsorioSalazar
Posted
Thank you so much for your suggestions @solvman. I appreciate your comment, I will have in count to improve.
