Submitted 10 months ago

Card QR using with responsive

Jaime•80

@JaimeOsorioSalazar

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

solvman•1,650

@solvmanPosted 10 months ago

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

Jaime•80

@JaimeOsorioSalazarPosted 9 months ago

Thank you so much for your suggestions @solvman. I appreciate your comment, I will have in count to improve.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord