Repository: FolhaSP/teste-para-frontend
Branch: master
Commit: b9e20a267348
Files: 4
Total size: 4.1 KB
Directory structure:
gitextract_tcxa6r5w/
├── .gitignore
├── README.md
├── index.html
└── instrucoes-leia_me.txt
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
*Thumbs.db
================================================
FILE: README.md
================================================
```
_ _ _ _ _ __
| |_ ___ | | | | ___ | | (_) \ \
| ' \ / -_) | | | | / _ \ |_| _ | |
|_||_| \___| |_| |_| \___/ (_) ( ) | |
|/ /_/
```
# Teste para candidatos à vaga de desenvolvedor Front-end
### Instruções
1. Criar o HTML/CSS responsivo com base no layout navegável.
2. 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).
3. 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.
4. Não tenha pressa! Iremos avaliar a qualidade do seu código, mesmo incompleto e principalmente a sua semântica.
### Material
* Desktop: https://invis.io/N83OWYCZ5
* Mobile: https://invis.io/ZA3PCIES4
* Tablet e monitores menores: https://invis.io/9Y3PCJ06B
* *OBS*: estas 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.
### Links ú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/
Ao terminar o teste, solicite um pull request.
Em caso de dúvidas, envie e-mail para l-tec-recrutamento-frontend@grupofolha.com.br.
**Boa sorte!**
================================================
FILE: index.html
================================================
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Folha de S.Paulo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
</body>
</html>
================================================
FILE: instrucoes-leia_me.txt
================================================
_ _ _ _ _ __
| |_ ___ | | | | ___ | | (_) \ \
| ' \ / -_) | | | | / _ \ |_| _ | |
|_||_| \___| |_| |_| \___/ (_) ( ) | |
|/ /_/
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!
gitextract_tcxa6r5w/ ├── .gitignore ├── README.md ├── index.html └── instrucoes-leia_me.txt
Condensed preview — 4 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5K chars).
[
{
"path": ".gitignore",
"chars": 10,
"preview": "*Thumbs.db"
},
{
"path": "README.md",
"chars": 1943,
"preview": "```\n _ _ _ _ _ __ \n| |_ ___ | | | | ___ | | (_) \\ \\ \n| ' \\ / -_) | | | | / _ \\ |_| "
},
{
"path": "index.html",
"chars": 429,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-co"
},
{
"path": "instrucoes-leia_me.txt",
"chars": 1776,
"preview": " _ _ _ _ _ __ \n | |_ ___ | | | | ___ | | (_) \\ \\ \n | ' \\ / -_) | | | | / _ \\ |_| "
}
]
About this extraction
This page contains the full source code of the FolhaSP/teste-para-frontend GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 4 files (4.1 KB), approximately 1.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.