Tecnologias Web

NOME DOS INTEGRANTES:

• DIGITE O NOME DO PRIMEIRO INTEGRANTE
• Link do GitHub Pages: COLOQUE O LINK AQUI (POR EXEMPLO: https://insper-tecnologias-web.github.io/desafio-css/)

Desafio CSS

Na aula passada nós desenvolvemos a primeira versão do nosso primeiro site, o Get-it. Na aula de hoje nós vamos nos focar no estilo da página para relembrar e aprender alguns conceitos de CSS.

O nosso objetivo é partir da Versão inicial:

O seu objetivo é se aproximar o máximo possível da página a seguir (se precisar de uma imagem com resolução melhor clique aqui) utilizando apenas CSS puro.

Versão esperada:

O gif abaixo mostra a página sendo recarregada manualmente diversas vezes. ATENÇÃO: A animação é apenas para mostrar que a cada vez que a página é carregada, os elementos mudam de cor e rotação aleatoriamente. Não se preocupe, o javascript responsável pela aleatorização já está pronto.

Instruções

Esta atividade deve ser realizada em trios, duplas ou individualmente.

Atualize o cabeçalho deste arquivo README.md com os dados do seu trabalho.

Você deve modificar apenas o conteúdo do arquivo docs/getit.css.

Dica: Utiliza a extensão Live Server do Visual Studio Code para visualizar a página HTML.

Entrega

A sua página deve obrigatoriamente estar disponível no GitHub pages seguindo estes passos. Importante: Caso a página não esteja disponível no GitHub Pages, será descontado 1 ponto da nota final.

Será considerado o último commit enviado antes do prazo.

Rubrica

A nota deste trabalho é a soma dos pontos abaixo. Será feita uma inspeção visual, ou seja, os tamanhos, distâncias e cores não precisam ser exatamente iguais, mas devem ser visualmente bastante parecidos:

• Textos:
  • [1 pt] Posição, fonte e cores dos textos corretas
• App bar:
  • [1 pt] Tamanho do logo correto
  • [1 pt] Aparência correta (cor e sombra)
• Formulário:
  • [1 pt] Aparência dos campos de texto e do botão correta (fonte, cores, ausência de bordas, etc)
  • [1 pt] Aparência do formulário correta (sombra, proporções, distâncias, cantos arredondados, etc)
  • [1 pt] Posição do formulário correta (centralizado e com a distância correta com relação aos outros elementos principais)
• Cartões:
  • [1 pt] Espaçamentos corretos
  • [1 pt] Cores de fundo corretas
  • [1 pt] Aparência do cartão correta (sombra, proporções, distâncias, cantos arredondados, etc)
  • [1 pt] Rotação dos cartões

Observações importantes

• No caso de entrega com atraso, a nota ficará limitada a 5 (equivalente ao conceito C).
• A nota de trabalhos com modificações em outros arquivos além do README.md e do docs/getit.css será limitada a no máximo 7 (equivalente ao conceito B). Modificações em outros arquivos devem ser explicitamente aprovadas pelo professor.
• Para este trabalho você não precisa se preocupar com a versão mobile da página. Ela será testada apenas em um monitor.
• Posicionamento absoluto não deve ser utilizado em nenhum elemento. Caso seja utilizado, o posicionamento não será considerado correto.