Skip to content
Submitted over 1 year ago

QR Code Component with hover animation

kmigel•40
@kmigel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This project was fairly easy for me to do, even though I'm a complete newbie in CSS.

The hardest part for me was to center the QR code container so it would be right in the middle of the screen, so I googled the solution.

But I'm happy to finally practice my CSS skills and even learn something new :D

Community feedback

  • Account deleted

    Hi kmigel! Congratulations on your first challenge and hard work.

    I'm Alberto and I have some suggestions about your HTML code that might interest you:

    1 - All content between the <body> and </body> tag could be between the <main> and </main> tag, so that search engines and screen readers could identify the main content of the page.

    2 - The QR code image could have a clear description for accessibility reasons, for example it would be: <img alt="QR code image of the first Frontend Mentor challenge" class="image" src="images/image-qr -code.png">

    3 - The code <h1 class="title"> <strong> Improve your front-end skills by building projects </strong> </h1> could be simplified to <h1 class="title"> Improve your front-end skills end building </h1> projects without the <strong> tag, because all content between the <h1> and </h1> tags is semantically already considered as the main title.

    So those are my suggestions, I sincerely hope they help you improve your solution, kmigel. If you have any doubt, question, or problem, know that I and other members of the platform would be happy to help you.

    Marked as helpful
    2
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Great work with the card!

    No need to use position absolute for this challenge as it complicate things. Instead try to use either flexbox or grid to center the card on the page like so:

    body { background-color: var(--light-gray); min-height: 100vh; display: grid; place-items: center; }

    Also try to avoid setting fixed heights for text containing elements as it can lead to accessibility issues.

    Hope you find this feedback helpful!

    Marked as helpful
    2
  • Bartosz Obliński•40
    @DJSO4Posted over 1 year ago

    Hi!

    Great idea with highlighting on hover! To center, you could try doing it as a flexbox. e.g:

    justify-content: center; align-items: center;

    It's a matter of finding the right font sizes and box size

    That's my observation

    But in my opinion, we will all become professionals, we just need to practice!

    Cheers!

    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

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