Skip to content

README.md

Latest commit

 

History

History
92 lines (58 loc) · 3.64 KB

README.md

File metadata and controls

92 lines (58 loc) · 3.64 KB
Raw

Exercícios: CSS

  • Desenvolvimento de Aplicações Web
  • COLTEC/UFMG
  • Professor: João Eduardo Montandon

Instruções

Você deverá entregar a atividade por meio dos arquivos noticia.html e noticia.css.

Para realização e entrega dos exercícios, siga as instruções disponíveis na página da disciplina. Para cada questão, gere um commit específico!!

Parte I: Notícia do dia

É hora de dar uma estilizada na página de notícia do dia, criada anteriormente no exercício de HTML. Para isso, copie o arquivo noticia.html da lista de exercícios de HTML, e implemente os requisitos pedidos abaixo:

T1: 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
    • Escolha dentre uma das opções presentes aqui.
  2. Paleta de cores básica (cor de fundo e cor da fonte), onde a cor de fundo deverá ser escura, e a cor da fonte deverá ser clara.
  3. Espaçamento da largura da página (entre 10% e 20%)

T2: 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, mas limite ao tamanho de 72px.
  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 da fonte para dar contraste com o estilo aplicado anteriormente na página. Novamente, use o Adobe Kuler.
  5. Altere o padding do título para para aumentar o preenchimento do título.

T3: 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 de itálico na fonte.

T4: 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 (maior que 100%).

Parte II: Melhorias Avançadas

T5: 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 de acordo com seus diferentes estados (:link, :visited, :hover, :active). Configure pelo menos duas cores diferentes. Novamente, utilize o Adobe Kuler para tal.

T6: 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.

T7: Ajustes nos títulos

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

  1. Deixe esses elementos alinhados a esquerda.
  2. Deixe esses elementos em itálico.

T8: Links mais ricos

Uma boa prática de customização de links envolve em fornecer ao usuário um elemento visual indicando o tipo de recurso que aquele link abre.

  1. Adicione esse elemento visual em links que abrem PDFs.
    • O símbolo de um arquivo, por exemplo.
  2. Adicione efeito similar para páginas do youtube.
    • O símbolo de um globo, por exemplo.

Para realização desse exercício, você deverá utilizar a biblioteca font awesome.