LE03 - Construindo um layout minimamente responsivo

Para cada dia em atraso será descontado 0.5 pontos da nota da atividade.

Descrição:

Seguinda linha da atividade anterior, onde nós utilizamos CSS para deixar a página do Tzeeter mais agradável, para melhorar ainda mais a aparência do Tzeeter e para tornar o seu desgin responsivo. A ideia dessa atividade é que a página inicial fique com a aparência de figura abaixo:

Página de um perfil no Tzeeter

A seguir o conjunto de especificações que devem ser implementados:

Layout

Ao fim da atividade anterior o nosso site possuia um layout com apenas uma coluna. Na nova versão do Tzeeter o conteúdo da página de perfil do usuário deve ser distribuído em 3 colunas como mostra a figura abaixo:

Novo layout do Tzeeter

  • Note que ao diminuir a tela a coluna mais a direita some, ou seja, o site passa ter apenas duas colunas em telas menores.

Considere que as telas menores são aquelas meneores ou iguais a 768px.

  • Desafio (0.5 pontos extras):
    • Fazer com que os textos links da área de navegação desapareçam quando a tela ficar pequena e que apenas os ícones fiquem visíveis
    • Fazer com que o texto do botão de Tzeetar desapareça e apenas um ícone apareça dentro do botão

A figura abaixo mostra o layout em uma tela menor:

Layout do Tzeeter em telas menores

Navegação:

Nesta seção vamos focar principalmente nos links de navegação. Na figura abaixo temos no lado esquerdo os links com a aparência da lista anterior e no lado direito a aparência que você deve ter como alvo. A seguir, temos as principais mudanças que devem ser feitas:

Mudanças na área de navegação

  • Cada link deve possuir um ícone, para isso você deve utilizar os ícones providos pelo Bootstrap
  • Você também deve adicionar o ícone da nossa rede social Tzeeter que você pode encontrar aqui Logotipo do Tzeeter
  • Abaixo dos links de navegação que tinhamos antes, você deve adicionar o botão que posteriormente vai ser usado para realizar uma postagem
    • Observe o estilo utilizado na figura acima
    • A cor do botão é o de menos. Use a sua criativade se desejar.

Coluna central

Assim como na seção de navegação, nossa maior preocupação nesta seção é trabalhar na aparência dos links (itens 2 e 3). A figura abaixo mostra um comparativo da aparência dos links da versão anterior e o que se espera ao final dessa versão.

Ajustes na coluna central

  • Inicialmente precisamos customizar o botão de envio de Tzeeter
    • O botão deve possuir as bordas arredondas, mas você pode escolher a cor que achar melhor.
  • No item 1, basicamente você deve adicionar os ícones referentes a cada informação.
    • Um ícone que passe a ideia de localização e outro que passe a ideia de data/tempo
  • No item 2 temos um série de mudanças que devem ser feitas
    • Primeiramente note que os quatros links juntos devem ocupar toda a largura disponível na coluna centra
    • Ao pôr o mouse em cima de um link o background do item devem mudar. Utilize a mesma cor usada para alterar o background de um Tzeet (ver atividade anterior).
      • Na figura acima podemos ver esse comportamento no link “Tzeets & replies”
  • No item 3 você também tem um série de mudanças que devem ser feitas
    • Assim como no item 2, os links devem ocupar toda a largura disponível na coluna, porém veja que eles estão centralizados e com o espaço sobrando nas pontas
    • Será necessário adicionar ícones no 4 links, e os 3 primeiros tem texto (números) associados a eles
      • A lógica de alternança da cor do background deve ser aplicada apenas no ícone, porém a mudança da cor de texto se aplica ao ícone e ao texto, como mostra a figura acima.
      • Aproveite as cores usadas na lista anterior.
  • Dica: Considere utilizar flex para posicionar os links dos itens 2 e 3

Coluna a direita

Nesta coluna que não existia previamente iremos adicionar duas coisas: Um formulário que futuramente será usado para realizar buscas e uma área onde estarão sugestões de novas pessoas para serem seguidas. A figura abaixo mostra em detalhes a aparência final que essa coluna deve ter:

Aparência que a coluna mais a direta deve possuir após as alterações

  • O campos de busca deve ser composto de um ícone e uma área onde o usuário deve pode digitar
    • Perceba a borda arredondada do componente
    • O componente deve possui o plano de fundo na cor rgb(239, 243, 244)
  • A cor do plano de fundo da área de sugestão de pessoas a serem seguidas deve ser igual a cor do plano de fundo do componente de busca.
  • Cada sugestão deve ser composta de:
    • Uma imagem de 48x48px
    • O nome do perfil do Tzeet que deve ser um link
    • E um botão para que o usuário passe a seguir o perfil sugerido que deve possuir as bordas arredondas, a cor é de livre escolha
  • Ao final dessa área deve haver um link para ver mais sugestões

Funcionalidades do Bootstrap que pode ser bastante úteis nessa atividade:

Sugestões de cursos: