OBS: É importante que você gere um commit para cada parte da atividade que você concluir.

Notícia do dia: CSS

É hora de dar uma estilizada na página de notícia do dia, criada anteriormente no exercício de HTML.

Aparência Geral

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:

1. Fonte geral da página não serifada
2. Paleta de cores básica (cor de fundo e cor da fonte).
   • Recomendo o uso da ferramenra Adobe Kuler
3. Espaçamento da largura da página (entre 10% e 20%)

Estilo do título

É 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.

1. Aumente o tamanho da fonte para um tamanho que você considere agradável
2. Centralize o texto
3. Adicione um margin para prover um espaçamento pequeno entre o título e corpo da notícia
4. 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.
5. Altere o padding do título para para aumentar o preenchimento do título.

Customizando subtítulo

O subtítulo deve possuir um estilo diferente do texto convencional, porém diferente do título principal.

1. Alinhe subtítulo a direita
2. Adicione um efeito na fonte, como itálico ou negrito

Parágrafos

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.

1. Torne o texto justificado
2. Aumente o espaçamento entre as linhas para um valor maior que o padrão.

Links

O estilo padrão dos links é simplesmente horrível!! Você pode dar um up alterando as seguintes propriedades:

1. Adicione um efeito de negrito na fonte
2. Altere as cores do link (padrão, hover, clicked, ativo, etc.). Novamente, utilize o Adobe Kuler para tal

Melhorias Avançadas

Primeiro parágrafo

É normal em sites de notícias que o primeiro parágrafo ganhe um destaque particular. Altere-o da seguinte forma:

1. Primeira letra do parágrafo com tamanho de 350%
2. Escolher um tom mais claro para esse parágrafo

Ajustes nos títulos

Foi requisitado que você alterasse o pocionamento dos títulos <h2>, <h3>, <h4>, <h5> e <h6>.

Links mais ricos

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.