Mobile first exercises

[Gregorha]

Lista de Tarefas

• Faça o tamanho da fonte ser maior;
• Faça o tamanho da fonte dos elementos h1 ser menor;
• Aumente o espaçamento entre as figuras;
• Adicione um pouco de margin na página.
• Guarde a largura da tela no ponto que você identificou que o layout atual não funcionou bem (por exemplo 800px). Esse será o primeiro breakpoint do layout. Um breakpoint é apenas um ponto onde estamos definindo que o design atual deve mudar;;
• Crie uma media query no seu arquivo CSS, usando a dimensão em pixels que você guardou como o min-width do teste da media query. Dentro desse breakpoint, adicione os seguintes ajustes:

• Altere a cor de fundo (isso vai te ajudar a perceber quando a media query teve efeito)
• Ajuste o tamanho da fonte;
• Ajuste as margens da página;
• Faça as imagens serem mostradas em duas colunas.;

• Crie uma nova media query no seu arquivo CSS usando a dimensão que você encontrou para telas grandes (por exemplo 1300px), e realize os seguintes ajustes dentro do breakpoint:

• Altere a cor de fundo
• Ajuste o tamanho da fonte
• Ajuste as margens da página;
• Adicione a propriedade max-width à página, para garantir que a largura das linhas não fique muito grande.;

• Adicione um pouco de margin na página.