Você deve implementar uma página utilizando HTML e CSS, conforme as instruções abaixo:
- Sua página deve conter um CSS externo. Não utilize CSS "inline".
- Você não pode utilizar nenhum framework CSS ou javascript para esta tarefa. Você pode, no entanto, usar o exemplo de CSS responsivo mostrado em aula.
- Você deve implementar os seguintes breakpoints considerados desktop, tablet e mobile. O navegador deve mostrar uma versão desktop quando a largura for acima de 992px. O leiaute para tablets deve ser entre 768px e 991px, inclusive. Para celulares, somente se a largura do navegador for inferior a 767px.
- Seu site é muito simples. Só tem um "heading" da página (h1) e três "sections", todas em uma unica linha (row) na visão de desktop. Cada section contém algum texto. Você pode pôr um texto aleatorio (lorem ipsum), não importa o conteúdo. Como as sections aparecem na tela, depende da largura da janela (você deve ajustar o leiaute utilizando media queries).
- Leiaute: na visão de desktop (maior que 992px), cada uma das 3 sections devem ocupar o mesmo tamanho na tela. Conforme a tela fica mais larga ou mais estreita, cada section deve aumentar ou diminuir de tamanho igualmente (Utilize porcentagens para definir a largura e use a propriedade "float"). Observe o mockup abaixo para referência.
- Leiaute: Na visão de tablet (entre 768px e 991px), as primeiras 2 sections devem estar na primeira linha e devem ter o mesmo tamanho. A terceira section deve estar na segunda linha e ocupá-la por completo. Observe o mockup abaixo para referência.
- Leiaute: Na visão de mobile (igual ou menor que 767px) cada section deve ocupar a linha por completo. Observe o mockup abaixo para referência.
- Região de título da section: Cada section deve ter uma região de título que está sempre no canto superior direito da section, não importa em qual visão (desktop, tablet ou mobile). Você pode copiar os títulos da ilustração ou utilizar seus proprios títulos (utilize posicionamento relativo e absoluto e os offsets discutidos em aula)
- Espaçamento: Preste atenção ao espaçamento mostrado nas ilustrações. Note que há espaçamento entre as sections (horizontal e vertical). Note o espaçamento horizontal entre as sections e as laterais do navegador. Também repare no espaçamento entre o texto e os limites das sections. Por fim, certifique-se de que o texto esteja espaçado o suficiente para não sobrepor a região do titulo da section (utilize margens e padding e utilize o box-sizing como border-box).
- Bordas e cores: Cada section deve ter uma cor de fundo (background) qualquer (você escolhe). Ajuste a cor de fundo de cada section para uma cor diferente (à sua escolha também). Certifique-se de que a cor de fundo permita que o usuário leia o texto na section e nos títulos. Dependendo da cor que você escolher você pode querer alterar a cor do texto, de forma a ficar mais fácil a leitura. Faça uma borda preta na seção e no título, que tenha largura de 1px.
- Você deve publicar seu site no github. Sua entrega deve ser o link para seu site publicado + o seu repositório no git. O seu repositório é acessível pelo professor.
- Este trabalho é individual.
Aqui é o mockup da versão desktop do seu site.
Esta é a versão mockup para tablet. Note que a 3ª section ocupa a linha por completo.
Este é o mockup da versão mobile do seu site.
