-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathinstrucoes-leia_me.txt
52 lines (33 loc) · 1.77 KB
/
instrucoes-leia_me.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
_ _ _ _ _ __
| |_ ___ | | | | ___ | | (_) \ \
| ' \ / -_) | | | | / _ \ |_| _ | |
|_||_| \___| |_| |_| \___/ (_) ( ) | |
|/ /_/
Teste para candidatos à vaga de desenvolvedor Front-end na Folha de S.Paulo
Instruções:
- Criar o HTML/CSS responsivo com base no layout navegável.
Nós queremos avaliar o seu nível de conhecimento em design responsivo (Responsive Web Design) usando HTML5, CSS3 e grids. Caso queira, utilize pré-processadores (Less, SASS ou Stylus, esse último é o nosso favorito :D).
O grid do layout é baseado no Grid System do Bootstrap 3, mas não copie todo o bootstrap 3 para o projeto. Nós queremos ver você fazendo os breakpoints e as modificações dependendo do device.
Não tenha pressa! Iremos avaliar a qualidade do seu código, mesmo incompleto e principalmente a sua semântica.
Desktop:
https://invis.io/N83OWYCZ5
Mobile:
https://invis.io/ZA3PCIES4
Tablet e monitores menores:
https://invis.io/9Y3PCJ06B
Se precisar, essas mesmas imagens ficam na pasta "layouts".
Atenção:
- Os recortes das imagens estão na pasta "slices", mas você é livre para usar um http://lorempixel.com da vida no lugar.
- Hospede o CSS dentro da pasta "css".
- Não é necessário fazer o carrossel/rotate funcionar.
- Não é necessário que a fonte seja exatamente a mesma usada na arte. Se quiser mantê-la, é a "Helvetica". ;)
- É permitido usar qualquer editor de código e consultar a internet.
Suporte de Browsers: IE9+, Chrome, Safari, Firefox.
Úteis:
Grid:
http://getbootstrap.com/css/#grid
Paleta de cores usadas no layout:
https://color.adobe.com/pt/teste-folha-web-color-theme-6584765/
Mussum Ipsum (gerador de lorem ipsum do Mussum):
http://mussumipsum.com/
Boa sorte!