OBS: É importante que você gere um commit para cada parte da atividade que você concluir.
É hora de dar uma estilizada na página de notícia do dia, criada anteriormente no exercício de HTML.
A primeira etapa a se fazer ao estilizar uma página é definir uma aparência geral. Mais especificamente, você deverá customizar as seguintes características da página:
- Fonte geral da página não serifada
- Paleta de cores básica (cor de fundo e cor da fonte).
- Recomendo o uso da ferramenra Adobe Kuler
- Espaçamento da largura da página (entre 10% e 20%)
É hora de customizar o título principal da página. O título deve chamar atenção mas não ser agressivo aos olhos do leitor.
- Aumente o tamanho da fonte para um tamanho que você considere agradável
- Centralize o texto
- Adicione um
margin
para prover um espaçamento pequeno entre o título e corpo da notícia - Altere a cor de fundo para dar contraste com restante da página
- É possível que seja necessário alterar a cor da fonte do título. Novamente, use o Adobe Kuler.
- Altere o
padding
do título para para aumentar o preenchimento do título.
O subtítulo deve possuir um estilo diferente do texto convencional, porém diferente do título principal.
- Alinhe subtítulo a direita
- Adicione um efeito na fonte, como itálico ou negrito
Se você fez a parte 01 de forma correta, a fonte dos parágrafos já estão com a fonte devidamente estilizada. É necessário fazer alguns outros ajustes.
- Torne o texto justificado
- Aumente o espaçamento entre as linhas para um valor maior que o padrão.
O estilo padrão dos links é simplesmente horrível!! Você pode dar um up alterando as seguintes propriedades:
- Adicione um efeito de negrito na fonte
- Altere as cores do link (padrão, hover, clicked, ativo, etc.). Novamente, utilize o Adobe Kuler para tal
É normal em sites de notícias que o primeiro parágrafo ganhe um destaque particular. Altere-o da seguinte forma:
- Primeira letra do parágrafo com tamanho de 350%
- Escolher um tom mais claro para esse parágrafo
Foi requisitado que você alterasse o pocionamento dos títulos <h2>
,
<h3>
, <h4>
, <h5>
e <h6>
.
Uma boa prática de customização de links envolve em fornecer ao usuário o tipo de recurso que aquele link abre. Adicione efeitos CSS a links que abrem PDFs e páginas do youtube.
Para ícones, recomenda-se o uso da biblioteca font awesome.