QR code component challenge

Greeting @surigaoadrian,

I have few suggestions regarding your solution:

• To tackle the accessibility issues, you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

• In height: 490px;you would never want to set the height of the element. Let the content inside the card element dictate the height of it.

• You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

• General point , try to put classes directly on anything you want to style

Overall , your solution is good. Hopefully this feedback helps.

If you want to reduce your accessibility, Change this code. 😊

1. <div class="card"> to <main> ( Used main tag for main card design )
2. <div class="attribution"> to <footer> ( Used footer tag for footer design)

I hope you find this helpful & Nice Work Keep it up 👍👍

Your solution looks great on mobile Good work Keep coding👍

Good and Keep Coding 🚀