Skip to content
Submitted about 2 years ago

QR-code card using html & css

Jyotimoykathar•10
@Jyotimoykathar
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

please provide some basic standard value of boxshadow use in code of h-offset and y-offset and blur that works with different direction of card as placed.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Jyotimoykathar,

    Congratulation on completing your first frontend challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • You should use <footer> for attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.
    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor
    • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser. Then you can remove .main-content.
    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs.Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    Hopefully this feedback helps.

    Marked as helpful
    0
    Jyotimoykathar•10
    @JyotimoykatharPosted about 2 years ago

    @PhoenixDev22 Thankyou sir for your feedback, I will surely look into it.

    1
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @Jyotimoykathar Glad to hear that it was helpful. Happy coding!

    0
  • reza•60
    @rezaboxPosted about 2 years ago

    Hi Jyotimoykathar good job on this project . I think you can use box-shadow to container this project code : box-shadow: 0px 0px 5px black .I hope I could help you but if you dont understand ask me again

    Marked as helpful
    0
    Jyotimoykathar•10
    @JyotimoykatharPosted about 2 years ago

    @rezabox Thankyou sir

    0

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