RWD - Layout Fluído

Exercício 1

Imagine que você está desenvolvendo a página de um site que precisa se adaptar a diferentes tamanhos de tela. Você foi encarregado de criar uma seção com um título e um parágrafo que devem ajustar sua largura conforme o tamanho da tela do usuário.

1. Crie um arquivo HTML chamado rwd-porcentagem.html.
2. No arquivo HTML, adicione a estrutura básica de uma página web contendo:
   • Um título (h1) com o texto “Bem-vindo ao Site Responsivo”.
   • Um parágrafo (p) explicando o propósito do site: “Este site ajusta seus elementos automaticamente de acordo com o tamanho da tela do dispositivo.”
3. Crie um arquivo CSS chamado style.css e conecte-o ao seu arquivo HTML. No CSS:
   • Defina que o título (h1) deve ocupar 80% da largura da página.
   • Defina que o parágrafo (p) deve ocupar 60% da largura da página.
   • Alinhe ambos os elementos ao centro da tela horizontalmente.

Dica: Utilize margin: 0 auto; para centralizar os elementos.

Exercício 2

Você está criando uma página inicial para um site que deve ser responsivo. O layout inclui um cabeçalho, uma seção de conteúdo com duas colunas e um rodapé. O desafio é garantir que todos os elementos se ajustem de forma fluida ao redimensionar a janela do navegador.

1. Crie um arquivo HTML chamado rwd-porcentagem-layout.html, nele:
   • Um cabeçalho (header) contendo um logo e um menu de navegação (ambos como texto).
   • Uma seção de conteúdo com duas colunas:
     • A primeira coluna deve conter um título e um parágrafo.
     • A segunda coluna deve conter uma imagem.
2. Estilos CSS:
   • O cabeçalho deve ocupar 98% da largura da tela e ter um padding de 2% para criar espaçamento interno.
   • O menu de navegação e o logo devem ser dispostos um ao lado do outro e o logo deve ocupar 20% da largura do cabeçalho, enquanto o menu ocupa 70%.
   • Na seção de conteúdo, cada coluna deve ocupar 50% da largura da tela
   • A imagem dentro da segunda coluna deve ser redimensionada proporcionalmente, ocupando 80% da largura da coluna.

O resultado final deverá ficar semelhante a imagem abaixo:

Exercício 3

Crie uma página chamada rwd-em.html com um título principal, subtítulo e parágrafo. Defina o tamanho da fonte base do documento como 16px. O título principal (h1) deve ter 2.5em, o subtítulo (h2) 1.8em e o parágrafo 1.2em. Adicione um padding de 2em ao parágrafo e um margin-bottom de 1.5em entre os títulos. Altere a fonte base para 20px e veja como todos os elementos se ajustam automaticamente.

Exercício 4

Crie uma página de perfil de usuário com um cabeçalho header contendo o nome do usuário. Uma seção section, contendo uma imagem e uma breve descrição. Por fim crie um rodape footer com o link para as redes sociais. Defina a fonte base do html como 16px. O título (h1) deve ter 2rem, o parágrafo 1.2rem, e a imagem deve ocupar 8rem de largura. Adicione padding de 2rem no cabeçalho, na seção e no rodapé. Utilize as cores de fundos #f4f4f4 e #333333. Troque a fonte para a família Arial, sans-serif. O resultado deve ficar semelhante a imagem abaixo:

Após terminar, altere a fonte base para 20px e observe como o layout se adapta.