Segundo projeto complementar de 'HTML, CSS e JavaScript' da Newtab Academy para uma página web com design responsivo, feito pensando em mobile first e utilizando HTML5, CSS3, Grid System do Bootstrap.
Utilizei Javascript puro com POO para adicionar funcionalidade ao carousel e as images foram adicionadas utilizando a técnica de 'background-image' com uma div externa com padding-top em porcentagem calculada para mater a proporção original do arquivo em diferentes tamanhos de div.
Deploy: https://projeto-folha-filipevmartins.netlify.app/
https://filipevmartins.github.io/Projeto_Compl2_Nt/
-
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
- OBS: estas mesmas imagens ficam na pasta "layouts".
- 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.
- 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/