ANHANGUERA EDUCACIONAL PARTICIPACÕES S.A.

POLO/UNIDADE: PIRACICABA/SP – I (15074609) A

PORTFÓLIO

RELATÓRIO DE AULA PRÁTICA – Desenvolvimento Responsivo

ANHEMBI/SP
2024
 PORTFÓLIO

RELATÓRIO DE AULA PRÁTICA – Desenvolvimento Responsivo

Trabalho de portfólio apresentado como

requisito parcial para a obtenção de pontos para
a média semestral.

ANHEMBI/SP
2024
Relatório: Implementação de Página Web Responsiva

Introdução
Este relatório descreve os procedimentos realizados para criar uma página web responsiva
u lizando HTML e CSS. O obje vo da a vidade foi implementar uma página que exiba informações sobre os
6 países mais visitados do mundo, adaptando-se automa camente a diferentes tamanhos de tela.
Procedimentos Implementados
1. Criação dos Arquivos HTML e CSS: Foram criados os arquivos index.html e style.css para a
implementação da página web.
2. Estruturação Básica do HTML: O arquivo HTML foi estruturado com uma div container e 6 divs
internas representando os blocos dos países.
3. Es lização dos Elementos com CSS: O arquivo CSS foi u lizado para es lizar os blocos dos países,
definindo largura, altura, cor de fundo e borda.
4. Implementação das Media Queries: Foram u lizadas Media Queries no CSS para tornar a página
responsiva em diferentes tamanhos de tela. Foram definidos breakpoints para adaptar o layout
conforme a largura da tela.
5. Teste da Página: A página foi testada em diferentes tamanhos de tela para garan r que a
responsividade es vesse funcionando corretamente.
Códigos U lizados
A seguir estão os códigos dos arquivos index.html e style.css:

Arquivo index.html:
Arquivo style.css:
Imagens da Página Web Implementada
Abaixo estão as capturas de tela da página web em diferentes tamanhos de tela:

 Break Point 1280px (Computador): [Inserir imagem da página web em 1280px aqui]

 Break Point 768px (Tablet): [Inserir imagem da página web em 768px aqui]

 Break Point 480px (Outros Disposi vos): [Inserir imagem da página web em 480px aqui]

 Break Point < 480px (Smartphone): [Inserir imagem da página web em < 480px aqui]

Conclusão
A a vidade foi concluída com sucesso, resultando em uma página web responsiva que se adapta a diferentes
tamanhos de tela. A u lização de Media Queries permi u ajustar o layout da página conforme os breakpoints
definidos.