Uma página web fabulosa contando a origem, os mitos e a verdade sobre os unicórnios.
Um web designer criou a parte artística de uma página web usando seu
programa de edição de imagens predileto (e.g., Photoshop) e lhe entregou
dois arquivos (comp:
unicorns-comp.png, specs:
unicorns-specs.png) para que você crie a página propriamente dita,
usando HTML e CSS.
Você deve estilizar a página (index.html) de forma a fazê-la exatamente
igual ao que o web designer vislumbrou. Estilize a margem dos parágrafos da música usando seletores que não são de classes/IDs
Veja o layout no arquivo unicorns-comp.png e as specs no arquivo unicorns-specs.png.
O código HTML está praticamente pronto e será necessário alterá-lo apenas para fazer as quebras de linha da letra da música.
- Faça sua página ser pixel-perfect com os specs, ou seja, a página tem que seguir exatamente o que foi proposto
- Decore a letra da música até o final da aula e vamos todos cantar \o/ ;)
- Que fonte é essa "Kaushan Script"? Acho que não funcionou.
- Ela é uma fonte que normalmente não está instalada nos computadores. Nesse caso, você pode usar a fonte que está hospedada no Google Fonts (procure por Kaushan Script lá)
- Espacinho branco ao redor da página. Como tirar?
- Por padrão, o elemento
<body>possui uma margem de8pxnas quatro direções. Esse espaço é devido a isso.
- Por padrão, o elemento
- Espação em branco no topo da página. O que está provocando ele?
- Investigue, usando as ferramentas do desenvolvedor, aquele espaço
clicando com botão direito no espaço em branco e, então, escolhendo
a opção "Inspecionar"
- Quando a árvore de elementos HTML abrir, vá selecionando os elementos
próximos até ver quem está provocando esse espaço em branco
- Dica: é a margem padrão de alguém
- Quando a árvore de elementos HTML abrir, vá selecionando os elementos
próximos até ver quem está provocando esse espaço em branco
- Investigue, usando as ferramentas do desenvolvedor, aquele espaço
clicando com botão direito no espaço em branco e, então, escolhendo
a opção "Inspecionar"
- Minha
<div id="hoje">parece estar mais larga que o normal. Por quê?- Isso é por causa do Box Model!