A QR component using flexbox

Hi there! 👋

You have received some incredible feedback. I recommend improving your solution. This way, the feedback you already get will not be wasted.

One suggestion I have is to never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

I hope this little suggestion helps. Happy coding! 😄

Replace <div class="card"> with the main tag and <h3> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

For a responsive content,

• Give .container a fixed max-width value and a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em
• Give the img a max-width of 100% and a border-radius value, the rest are not needed.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

I would place your color variables in the global * instead of the html... this is my default.css for the resets.

/* ------- / / reset / / ------- / / https://piccalil.li/blog/a-modern-css-reset / / Box sizing */ *, *::before, ::after { box-sizing: border-box; } / Colors */

• { --color-white: #FFF; --color-black: #000; --color-purple: Purple; } /* Reset Margins / body, h1, h2, h3, h4, h5, p, figure, picture { margin: 0; } / Set core root defaults / html:focus-within { scroll-behavior: smooth; } / Set core body defaults / body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } / Make images easier to work with / img, picture { max-width: 100%; display: block; } / Inherit fonts for inputs and buttons / input, button, textarea, select { font: inherit; } .container { max-width: 1140px; } / Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); }