/cefet-web-ninjas

Duas páginas web explicando como se tornar um Ninja na vida real, com algumas curiosidades sobre essa gente ligeira.

Primary LanguageHTML

cefet-web-ninjas

Duas páginas web explicando como se tornar um Ninja na vida real, com algumas curiosidades sobre essa gente ligeira.

Atividade

Você deve estilizar as duas páginas (arquivos index.html e curiosidades.html) de forma a torná-los extremamente atrativos ao leitor de páginas web exigente.

Você tem liberdade para escolher as cores e os estilos que melhor agradarem aos olhos, respeitando o bom senso de como se espera a aparência de uma página web (i.e., libere o artista dentro de você ;).

Assim, esta atividade propõe alguns itens obrigatórios e outros de sugestão para guiar seu espírito artístico.

Itens Obrigatórios

Aqui estão os itens que precisam ser implementados:

  1. Logomarca
    • Reduzir o tamanho da logomarca (está muito grande) para 200px de largura (width)
    • Centralizar (veja FAQ)
  2. Todas as imagens e vídeos no corpo da página (exceto logo)
    • Quebrar linha em vez de aparecer "dentro" do parágrafo
    • Centralizar
    • Use o seletor de negação para isso
  3. Títulos da página (<h1> e <h2>)
    • Usar outra fonte, que não seja a padrão (font-family)
      • Você pode usar a ferramenta de desenvolvedor do navegador para ver possíveis valores de fonte
  4. Hiperlinks
    • Estilize os hiperlinks em seus 4 estados diferentes (veja FAQ)
      • Sugestão: variar as propriedades color e/ou text-decoration: underline (sublinhado) e text-decoration: none
  5. Links externos
    • Coloque um ícone (<img>) de globo (img/globo.png) à esquerda dos hiperlinks que apontam para URLs externas
      • Dica: você pode usar esta imagem e você precisará das propriedades background-image, background-repeat (veja FAQ) e padding-left
      • Faça isso usando apenas CSS
      • Faça essa parte sem alterar o HTML (ou seja, sem usar classes/ids)
  6. "Notas" (no passo 2 e nas referências)
    • Esmaeça (deixe mais "apagadinho") o texto das notas para que não chamem tanta atenção quanto o texto principal
      • você pode usar uma fonte para isso ou a propriedade opacity
  7. Número do passo (para se tornar ninja)

    • Aumente a fonte e mude a cor e o fundo do número do passo

    • Aumente a fonte (e.g., font-size: 20px) do "nome do passo"

Sugestões

Seguem algumas sugestões para melhorar o visual das páginas:

  • Coloque um espaçamento (padding ou margin) na página inteira para deixar o conteúdo centralizado.
  • Escolha uma cor de destaque (sei lá, um roxo forte) e estilize os elementos <strong></strong> e, talvez os títulos para terem essa cor
  • Coloque uma cor de fundo na página que seja mais clara, mas contraste bem com a cor de destaque
  • Use uma fonte sem serifa para o corpo do texto e deixe uma fonte com serifa para os títulos
  • Justifique (alinhamento) o texto dos parágrafos com text-align: justify

FAQ

  • Centralizando uma <img>:

    img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
    • Explicação do margin: atribuímos uma margin lateral com valor "automático", o que faz o navegador dividir o espaço lateral igualmente em 2
    • Explicação do display: block: uma <img> é inline por padrão e elementos inline não são afetados por margin ou padding

  • Estados de um hyperlink:

    • a:link - um link que nunca foi visitado
    • a:visited - um link que o usuário já visitou
    • a:hover - um link quando o mouse está em cima dele
    • a:active - um link no momento em que é "clicado"

  • Imagem de fundo que não repete

    body {
  background-image: url(img/nome-da-imagem.png);
  background-repeat: no-repeat;
  /*background-position: top left; */ /* este já é o valor padrão */
}