Layout Html Css

O que fazer Reproduzir em HTML e CSS o design do documento ilustrado na Figura 1 Você encontra uma versão em PDF da figura como anexo a essa atividade Todas as informações necessárias para reproduzir o design estão disponíveis na figura e na seção 6 Design da página web a ser reproduzido Recursos ara reproduzir o design da página web você precisará dos seguintes recursos Fontes Roboto Slab corpo do texto e Open Sans títulos Para obter essas fontes utilize o Google Fonts httpsfontsgooglecom Procure pelas referidas fontes e obtenha o código de incorporação para utilizálas em seu documento HTML Basicamente você precisa linkar o arquivo CSS fornecido pelo Google Fonts em seu documento HTML Cores A seguir são listadas em código hexadecimal as cores utilizadas no design Você deve determinar em quais elementos cada cor deve ser aplicada Imagens As imagens necessárias para reproduzir o design estão disponíveis no diretório img Efeito hover A barra de navegação inferior contendo os links para o MASP e para a Wikipedia utilizam efeito de hover que deve ser reproduzido utilizando pseudoclasses CSS O GIF abaixo mostra o efeito tanto a cor quanto a decoração devem mudar Layout fluídoliquido O design da página é fluído ou seja ele se adapta a diferentes tamanhos de tela Para isso você deve utilizar unidades relativas como em rem e ao invés de unidades absolutas como px O layout não precisa necessariamente ser responsivo mas se preferir pode trazer essa melhoria como bônus O vídeo abaixo mostra o design da página se adaptando a diferentes tamanhos 1146 Vídeo de demonstração do layout fluído Critérios de corretude Fidelidade ao design apresentado na Figura 1 HTML e CSS limpos o que envolve Adequada formatação dos documentos organização indentação comentários etc Uso de classes e IDs apropriados Imagens contendo atributo alt Uso de fontes e cores conforme especificado Efeito hover implementado corretamente Utilizar marcação semântica dos elementos HTML Utilizar apenas folha CSS externa proibido uso de estilos internos ou embutidos Testes automáticos de qualidade Os documentos tanto HTML quanto CSS devem passar nos testes automáticos de qualidade linters moodleufabcedubr Privado Retirantes Por Cândido Portinari 1944 Óleo sobre tela 180 x 190cm Museu de Arte de São Paulo MASP Retirantes é uma das obras mais conhecidas do pintor brasileiro Cândido Portinari A tela retrata uma família de retirantes que fogem da seca no Nordeste do Brasil em busca de uma vida melhor A obra foi pintada em 1944 durante a Segunda Guerra Mundial e é uma das mais importantes do acervo do Museu de Arte de São Paulo MASP Portinari utilizou uma técnica inovadora na pintura de Retirantes que consiste em aplicar camadas espessas de tinta sobre a tela criando texturas e relevos que dão vida à obra O artista também usou cores vibrantes e contrastantes para retratar a aridez e a dureza do sertão nordestino criando uma atmosfera de desolação e sofrimento Retirantes é uma obra que retrata a dura realidade dos retirantes que deixam suas terras em busca de uma vida melhor A tela mostra uma família de retirantes composta por um homem uma mulher e duas crianças que caminham em direção ao desconhecido A paisagem é árida e desolada com o sol escaldante e o chão rachado pela seca A família está cansada e faminta mas segue em frente na esperança de encontrar um lugar onde possam recomeçar suas vidas MASP Wikipedia Copyrigth 2025 Catálogo de obras de arte brasileiras Home Sobre Contato 1144 Arquivos prévios srcindexhtml documento HTML inicialmente contendo apenas a estrutura mínima srcstylecss arquivo CSS inicialmente vazio img diretório contendo as imagens necessárias para a atividade Ambiente de desenvolvimento As instruções abaixo assumem que você está usando o ambiente de desenvolvimento GitHub Codespaces com todas as dependências necessárias principalmente Nodejs e NPM já instaladas e configuradas Caso você esteja utilizando outro ambiente é sua responsabilidade garantir que todas as dependências estejam instaladas e configuradas corretamente O que fazer Reproduzir em HTML e CSS o design do documento ilustrado na Figura 1 Você encontra uma versão em PDF da figura como anexo a essa atividade moodleufabcedubr Privado