Esse desafio testará as principais habilidades que um desenvolvedor front-end deve possuir para transformar um mockup (desenho ainda não funcional da tela) em um protótipo. Veja abaixo, os passos que você deve executar para concluir o desafio.
- Forke esse repositório e faça seu desafio numa branch chamada
seunome_ano-mes-dia(use dois dígitos para as informações numéricas). - Seu objetivo principal é transformar esse mockup em um protótipo funcional HTML/CSS da maneira mais idêntica possível (pixel-perfect).
- Seu HTML deverá ser o mais semântico possível (títulos devem usar H1, H2, ..., parágrafos devem usar P, formulários devem estar dentro de uma tag FORM, e assim por diante).
- Seu CSS não deverá ser inline (no arquivo HTML não deverá conter qualquer tipo de estilo). Todos os estilos devem estar num arquivo CSS externos ao HTML.
- A barra azul contendo o logo do ContaAzul (top-bar) deve ser fixa (não rolar com a página).
- As pseudo-classes
hover,focuseactivenos botões devem deixá-los com 75% de sua opacidade. - Crie um diretório chamado
prototype. Todos os arquivos que você criar devem estar nesse diretório. Se achar necessário, subdivida o diretório da maneira que achar melhor. - Assim que concluído o desafio, abra um pull request com suas alterações e envie um email para [email protected] entitulado
Intern Challenge: HTML/CSScontendo o link para o pull request.
- No diretório guidelines você encontra o arquivo colors.png contendo o código hexadecimal de todas as cores usadas no mockup.
- No diretório mockup você encontra a imagem mockup-grided. Essa imagem exibe um grid onde cada quadrado equivale a 10 pixels (horizontal/vertical) facilitando assim a definição de
marginepadding. - No diretório images você encontra o logo do ContaAzul usado no mockup tanto para a barra azul quanto para o rodapé.
- No diretório webfonts você encontra as fontes usadas no mockup.
- Jamais use
!importantnos estilos. - Em caso de dúvida, envie um email para [email protected] ou peça um help para o seu Papai Smurf
Boa sorte!