QR code component

Hey Bruno,

I would also recommend removing all of the complex CSS reset style rules in your stylesheet to simplify your code.

If you want to use a simpler reset, you can use this.

:root {
  font-size: 62.5%;  // as I mentioned about previously
}

* {
box-sizing: border-box;
margin: 0;
}

To explore this more, take a look at Josh Comeau's Custom CSS Reset.

If this was helpful, let me know. 👍

Hi Bruno, 👋

Congratulations on submitting your first solution! 🥳 It looks really good.

A good HTML practice with a card component is to wrap your card content in a <div class="card"> element. Also, within the card element, you can have card__image and card__body elements. This is what I did for my solution.

It looks like you have a mix of px and rem font sizes. I would recommend using `rem' for all font sizing so as to be responsive to grow and shrink with different screen sizes.

A method I use to help me easily translate px to rem is to set font-size: 62.5% in the :root. This makes, 10px = 1rem. This way if you want to use a font size of 24px, all you have to do is move a decimal point and use 2.4rem instead. This also works great for margins, paddings, height, and width. However, em would be a better choice for those, but it is trickier to use.

Here is a good youtube video explaining this concept.

If this was helpful, let me know. 🙂

Hey bruno-candia, good job on completing this challenge. Keep up the good work

Your solution looks great however I think your card needs to be scaled up a bit using transform: scale()

I hope this helps

Cheers Happy coding 👍