Teste para front-end

Teste para Desenvolvedores Front Enders/ Web Designers

Utilizando um dos editores/IDEs disponíveis e seguindo as instruções abaixo, transforme a imagem do layout apresentado em linguagem de marcação HTML, estilizando com CSS e tornando dinâmico com jQuery.

1. Crie um arquivo na pasta principal, indicada pelo profissional que estará acompanhando seu desenvolvimento, com o nome index.html e utilize-o como ambiente principal da sua marcação HTML.
2. Crie um arquivo chamado style.css dentro da pasta css e utilize-o como espaço de estilização.
3. Crie uma pasta denominada js. Baixe o jQuery (jquery.com) e inclua-o dentro desta pasta.
4. Baixe uma lightbox como a Fancybox da FancyApps ou o Modal do Bootstrap e inclua seus arquivos dentro das pastas img, css e js respectivamente.
5. Sua marcação deverá ser desenvolvida em HTML5 ou XHTML 1.0 Transitional conforme os padrões web. IMPORTANTE: O documento será validado pelo W3C (validator.w3.org).
6. As regras CSS deverão estar somente no arquivo style.css, sendo este linkado no arquivo index.html.
7. (Opcional) Dentro da pasta css existe um arquivo chamado fonts.css. Link esta folha de estilo para dentro do arquivo index.html e utilize a fonte 'District Pro' em todos os textos do site.
8. As demais folhas de estilo provenientes da instalação de plugins jQuery, fontes ou que sejam utilizadas por você por qualquer razão também deverão estar linkadas no arquivo index.html.
9. Os arquivos javascript deverão ser chamados pela tag script e mapeados pelo atributo src.
10. Nos links Read More chame o lightbox escolhido e apresente dentro dela um texto qualquer (geramos nossos textos aleatórios pelo lipsum.com).
11. Lembre-se que um código limpo, indentado e semântico faz a diferença para nós. Bom