Html5 Css3 Flexbox Media Queries

Oi Pamella, tudo bem? Parabéns por completar o desafio. Tenho algumas dicas que você pode estar usando no seu código.

No lugar da sua div.verde, para a imagem do produto, você pode usar a tag semântica <picture>. Melhorando a acessibilidade, pro pessoal que usa leitores de tela.

Comece a desenvolver seus projetos usado HTML semântico. Assim você melhorar a acessibilidade e a organização da sua página, deixando ele um pouco mais limpo, sem o uso de muitas tags divs.

Parabéns por concluir o desafio!

Aqui estão algumas sugestões:

• Você tem código repetido no responsive.css para a regra de media query (max-width: 768px) . O bloco de estilo dentro desse bloco de mídia está repetido duas vezes.

• Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de verde e branco, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo como imagem-fundo e conteudo.

• Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.

• Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:

@media screen and (max-width: 768px) {
    #container {
        flex-direction: column;
    }

    .verde, .branco {
        width: 100%;
        border-radius: 10px;
    }

    .verde {
        height: 250px;
    }

    .branco {
        height: 400px;
    }

    .btn-compras {
        margin-top: 5px;
    }
}

Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.

Mandou bem, continue assim!