Ocupando pra caber

Descrição:

Neste exercício, você irá criar um layout que oculta conteúdo não essencial em telas menores usando media queries. O objetivo é garantir que o conteúdo principal seja exibido de maneira clara e eficaz em dispositivos com tamanhos de tela reduzidos.

Instruções:

  1. Crie um arquivo HTML chamado index.html.
  2. No arquivo index.html, defina a estrutura básica de uma página HTML, incluindo os elementos <head> e <body>.
  3. Crie uma seção principal (<section>) no <body>.
  4. Dentro da seção, adicione um parágrafo de texto fictício e uma imagem.
  5. Abaixo da seção principal, crie uma seção de informações adicionais (<section>).
  6. Dentro dessa seção, adicione mais um parágrafo de texto e uma imagem diferente.
  7. Crie um arquivo de estilos CSS chamado styles.css e salve-o no diretório conteudo-oculto.
  8. No arquivo styles.css, aplique estilos para as seções que definem cores de fundo, margens e espaçamento interno.
  9. Usando media queries, ajuste os estilos para que, quando a largura da tela for menor que 500 pixels, a seção de informações adicionais seja ocultada usando a propriedade display: none.
  10. Garanta que a seção principal tenha margem suficiente para separá-la do conteúdo acima e abaixo.
  11. Abra o arquivo index.html em um navegador para verificar o layout responsivo que você criou. Ajuste a largura da janela do navegador para ver como a seção de informações adicionais desaparece em dispositivos menores.

Dicas:

  • Use a media query @media screen and (max-width: 500px) para aplicar os estilos responsivos quando a largura da tela for menor que 500 pixels.
  • Use a propriedade display: none para ocultar a seção de informações adicionais em dispositivos menores.
  • Use margens para criar espaçamento entre as seções e o restante do conteúdo.

Gostou? Não esqueça de avaliar o exercício:

Abra o formulário de avaliação