css, html,media query

Hi there!

You solution turned out great! But your CSS could use a little help.

Think of your code in the CSS file like a water fall. The water at the top will be the same at the bottom. So you don’t need to re-wright your selectors. For example.

Your body selector on line 1:

body{ margin: 0; padding: 0; background-color: hsl(212, 45%, 89%); }

It’s the same on line 42 that’s inside your media query. There is no need to do this because it’s not changing. And this is the same for any selectors. If they don’t change there is no need to we-right them.

Your media query wont really do anything as your not changing anything inside it. As a very loose rule of thumb, to make your life easier stick to using just max-width and think of the layout from a small screen (mobile first) and being able to expand outwards to a large screen, using max-width will flow with that train if thought.

For instance, font-size: 1em (at small screen) —> expand the screen past 500px wide triggers a possible media query:

h1 { font-size: 1em; }

@media (max-width: 500px) { h1 { font-size: 2em; } }

The H1 starts a 1em, hits the break point and size is increased to 2em.

Hope that helps for CSS.

Don’t forget to go back and fix the warnings above, it’s really important to be 100% semantically correct.

Olá, meus parabens por ter concluído o desafio. Agora vamos as dicas.

(<img src="img/barcode.png" width="250px" height="" alt="">) --> pode substituir por (<img src="img/barcode.png" alt="">) --> o "height" pode pagar e o "width" pode escrever no CSS.

O "h2" pode substituir por "h1", se enquadraria melhor na situação.

@media only screen and (max-width: 375px) and (min-width:1440px) --> o "max" e o "min" estão aplicados de maneira errada -- @media screen and (min-width:1440px) -- tente isso, creio que ira funcionar.

<div class="main"> -- pode simplesmente usar o "main" substituindo a "div" e a classe pode nomear ela de acordo -- class="card"-- ou --class="container"--

recomendo também a criação do "box-shadow" no ".main" pra dar uma sensação de sobreposição.

para consultas pode utilizar: https://github.com/LucasNCosta/html-css/tree/main/treinar/qr-code-component