APS - 50AZ - SUSTENTABILIDADE AMBIENTAL- UNIP

Prévia do material em texto

UNIVERSIDADE PAULISTA
LEANDRO LOPES TEIXEIRA
RA: D795FC-0
Ciência da Computação APS: 504Z
SUSTENTABILIDADE
Sustentabilidade Ambiental
SOROCABA SP
2022
LEANDRO LOPES TEIXEIRA
SUSTENTABILIDADE
Sustentabilidade Ambiental
Trabalho de atividades praticas
supervisionadas - APS
Curso de Ciência da Computação
SOROCABA SP
2022
1
SUMARIO
1. OBJETIVO ............................................................................................................................2
2. INTRODUÇÃO .................................................................................................................... 3
3. REFERENCIAL TEÓRICO ............................................................................................... 4
3.1. O que é o meio ambiente ................................................................................................. 4
3.2. O que é sustentabilidade .................................................................................................. 4
3.3. Tipos de sustentabilidade .................................................................................................5
3.4. Topicos de Sustentabilidade ............................................................................................ 6
3.4.1. Sustentabilidade ambiental ....................................................................................... 6
3.4.2. Sustentabilidade social ............................................................................................. 7
3.4.3. Sustentabilidade Ecônomica .....................................................................................8
3.4.4. Sustentabilidade empresarial .................................................................................... 9
3.5. Exemplos de sustentabilidade ambiental .......................................................................10
3.6. Economia de Agua .........................................................................................................10
3.7. Evitar Sacolas Plásticas ................................................................................................. 11
3.8. Utilizar produtos biodegradáveis ...................................................................................12
3.9. Como verificar se o produto realmente é biodegradável? ............................................. 14
4. DESENVOLVIMENTO .....................................................................................................16
4.1. Configurações das paginas ............................................................................................ 16
4.2. Pagina Index .................................................................................................................. 17
4.3. Pagina Meio Ambiente .................................................................................................. 18
4.4. Pagina Como Ajudar ..................................................................................................... 19
4.5. Pagina Sustentabilidade .................................................................................................20
5. RESULTADO E DISCUSSÃO ..........................................................................................20
6. CONSIDERAÇÕES FINAIS .............................................................................................21
7. REFERÊNCIAS ..................................................................................................................22
8. CODIGO FONTE ...............................................................................................................25
2
1. OBJETIVO
Será desenvolvido um web site para falar um pouco sobre sustentabilidade, com foco
em sustentabilidade ambiental e o meio ambiente. Para falar sobre como os efeitos da
nossa irresponsabilidade com o meio ambiente afeta a vida dos animais e os ecossistemas,
e nossa própria qualidade de vida e principalmente as futuras gerações.
O assunto escolhido foi a sustentabilidade ambiental, no qual engloba toda a parte do
meio ambiente, uma das mais importantes, pois sem ela não existiria as outras.
O site sera feito em Html para os elementos, e os artigos, css e bootstrap para o
designer da pagina, para que fique mais bonita e fácil de entender e por fim javascript para
dar um auxilio no designer da pagina, será uma pagina estática sem muita interação,
apenas textos e imagens.
A linguagem de programação usada será o javascript, para alguns elementos da pagina,
será usado o html, que é uma linguagem de scripts de hipertexto, css para os scripts de
designer, e a biblioteca css do bootstrap.
3
2. INTRODUÇÃO
A sustentabilidade é algo muito importante na vida de todos nos, por que com ela
podemos ter uma qualidade de vida muito melhor, e garantir um bom futuro para as demais
gerações.
A sustentabilidade tem alguns 3 princípios, o primeiro é a sustentabilidade social que
atua para o bem da sociedade, como garantir educação e saúde para todas as pessoas.
A segunda é a sustentabilidade ambiental, que atua para o bem e a conservação do
planeta, e a natureza, como floresta e mares, que são mais afetados pela falta de
consciência das pessoas.
A terceira é a sustentabilidade económica que atua na divisão de recursos naturais para
todos.
A mais importante e a qual será o foco do trabalho será a sustentabilidade ambiental,
irei falar um pouco sobre o que é sustentabilidade e como ela atua em nossa vida, os tipos
de sustentabilidade e sua importância, como também algumas medidas que podemos ter
para ajudar nosso meio ambiente.
Será criado uma pagina web com css, html, javascript e bootstrap para um designer
mais bonito, o site será montado com imagens para um melhor entendimento e vários
artigos.
A primeira pagina será uma apresentação do site e sobre o que ele apresenta, com um
banner de slides e um menu apontando para outras paginas.Será uma descrição do que é o
meio ambiente e por que é importante cuidarmos dele.
Na segunda pagina teremos um pouco sobre sustentabilidade e seus tópicos, tais como
sustentabilidade económica, sustentabilidade social e sustentabilidade ambiental.
Na terceira pagina teremos algumas dicas de como ajudar nosso meio ambiente com
algumas atitudes simples.
4
Na quarta e ultima pagina, falaremos e mostraremos o maior problema para o meio
ambiente, o desmatamento em regiões de floresta.
3. REFERENCIAL TEÓRICO
3.1. O que é o meio ambiente
O meio ambiente faz referencia a todos os recursos naturais que são necessário para o
desenvolvimento e sobrevivência da nossa sociedade, a sustentabilidade busca o uso
racional desses recursos naturais sem causar danos ao meio ambiente e assim preservando
nosso planeta para as futuras gerações.
O meio ambiente é o local em que os seres vivos estão inseridos, como florestas, lagos,
mares, montanhas, etc. Quando causamos danos a esses ambientes ou seja, utilizar muitos
recursos naturais, jogar lixos ou construir casas, empresas e apartamentos, causamos dados
a esse ambiente e os seres que ali vivem.
3.2. O que é sustentabilidade
Sustentabilidade é a capacidade de conservação ou sustentação de um processo ou de
um sistema.
Tópicos da sustentabilidade.
5
A palavra sustentabilidade vem do latim que quer dizer cuidar, conservar e apoiar.
A sustentabilidade aborda a maneira de como devemos agir em relação a um ambiente,
pode ser aplicado em uma comunidade, como também em todo o planeta.
A sustentabilidade ambiental visa medidas e ações para diminuir os impactos ao meio
ambiente.
3.3. Tipos de sustentabilidade
A sustentabilidade tem tres principios, chamados tripe da sustentabilidade, socia,
ambiental e o economico, esse tres principios devem estar integrados para que a
sustentabilidade de fato aconteça, sem eles a sustentabilidade não ira se sustentar.
 Social: o principio social tem foco nas pessoas e em suas condições de vida,
como educação, saude, violencia, lazer e outros aspectos. Ambiental: o principio ambiental tem foco no meio ambiente e seus recursos
naturais, e como esses recursos são utilizados pela sociedade.
6
 Economico: o principio economico tem foco na produção e distribuição de
bens e serviços. O principio economico deve considerar os outros dois, o principio
ambiental e o principio social.
3.4. Topicos de Sustentabilidade
3.4.1. Sustentabilidade ambiental
A sustentabilidade ambiental abrange toda a area do meio ambiente, com o intuito de
de conservação e manutenção do meio ambiente.
Para que a sustentabilidade ambiental seja efetiva as pessoas devem estar em harmonia
com o meio ambiente e ter consciência e responsabilidade, para que assim possamos ter
uma melhora significativa na nossa qualidade de vida.
A sustentabilidade ambiental tem como objetivo não deixar que nossa geração esgote
os recursos naturais do nosso planeta, assim teremos recursos naturais para sempre, para
que nossas gerações futuras possam desfrutar desses recursos também.
7
Quando nos humanos utilizamos um recurso natural sem consciência ate esgotar,
causamos danos a nosso meio ambiente e para os seres que vivem nesse ambiente, alguns
dados ate mesmo irreversíveis.
Todos os seres vivos de nosso meio ambiente tem sua função no eco-sistema, desde o
mais pequeno ao maior, caso causemos danos irreversíveis a esse ambiente e destruirmos a
existência de algum ser vivo, nosso sistema acaba mudando para tentar se adaptar e isso
pode causar danos graves a nossa qualidade de vida.
3.4.2. Sustentabilidade social
Sustentabilidade social é um conjunto de ações que tem foco em melhorar a qualidade
de vida de toda a população como um todo, reduzindo as desigualdades sociais e dar
acesso a todas as pessoas aos seus direitos e serviços básicos, como educação e saúde.
As ações sustentaveis sociais não são imprtantes apenas para pessoas de baixa renda,
mas para a população como um todo, uma vez que colocada em pratica, favorece a
população toda como um todo.
A desiguldade social é um fator importante a ser combatido, pois todos somos iguais
independente de renda, genero ou raça. Não é algo justo alguem ter mais ou menos por
conta de sua raça ou cor.
8
3.4.3. Sustentabilidade Ecônomica
A sustentabilidade economica é fundamental. Ela implica na gestão adequada de
recursos naturais, que tem como objetivo o crescimento economico, o desenvolvimento
social e melhor distribuição de renda para toda a população.
É a capacidade de produção, de dsitribuição e utilização de todas as riquezas
produzidas por nos, buscando sempre uma justa distribuição de renda entre nos.
9
3.4.4. Sustentabilidade empresarial
A sustentabilidade empresarial tem como foco como o propio nome ja diz, nas emresas,
algumas empresas ja tem medidas sustentaveis de gerenciamento.
As pessoa e as empressas estão cada vez mais conciente do peso ecologico e social de
suas escolhas.
Algumas empresas ja dotam medidas para preservação do meio ambiente, melhorando
tambem nossa qualidade de vida.
10
3.5. Exemplos de sustentabilidade ambiental
As ações sustentaveis podem ser feita por todos, individualmente, como globalmente,
citarei alguma fações sutentabveis que podem contribuir para o bem da natureza e para
nossa qualidade de vida.
Formas de ajudar o meio ambiente com a sustentabilidade Ambiental
3.6. Economia de Agua
Sabemos que nosso planeta tem muita agua para todos nos, porem com o desperdício e
a poluição talvez um dia ficaremos sem agua potável para ingerir. Existem pequenas
maneiras de economizarmos um pouco de agua e assim ajudar nosso meio ambiente
Existem lugares que tratam nossa agua para que possamos bebe-la, porem esse
processo é muito caro e trabalhoso, exatamente por isso devemos nos consciencializar e
fazer nossa obrigação para poupar agua, para que nossas futuras gerações aproveitem desse
recurso natural também.
11
Existem varias formar de poupar agua e algumas delas são:
 Quando For escovar os dentes podemos fazer isso de torneira fechada
 Banhos rápidos
 Consertar vazamentos o mais rápido possível.
 Usar a descarga do vazo sanitário somente o necessário.
 Reutilizar agua sempre que possível
 Utilizar regador ao invés de mangueira
 Tratar a agua da piscina para não precisar trocar com frequência
Algo muito importante no qual causa dificulta muito no tratamento de agua e pode
também prejudicar os encanamentos da sua casa, é descarte de óleo nos ralos, isso dificulta
para o tratamento de agua.
3.7. Evitar Sacolas Plásticas
As sacolas e embalagens plásticas são o algo que mais impacta no meio ambiente, pois
seu uso por nos geralmente é rápido e descartado, mas no meio ambiente ela demora em
torno de 300 a 400 anos para se deteriorar, causando muitos danos ao meio ambiente e aos
seres vivos que vivem nele.
12
As sacolas plásticas são as causadoras de entupimentos nas passagens de agua nos
bueiros, afetando os moradores pela redondeza, podendo causar danos graves, como
inundações e enchentes nas cidades, por conta do seu mau uso.
As sacolas plásticas também são as maiores causadoras de poluição em mares e rios,
afetando a vida marinha, se tornando altamente prejudicial a vida dos animais, muitos
animais morrem todos os dias por ingestão de sacolas plásticas e embalagens.
a materia prima utilizada na fabricação de dacolas plasticas, o polietileno, é uma
substancia não renovavel, que se origina do petroleo. Fazendo com que essas sacolas e
embalazagens durem anos na natureza, a decomposição desses plasticos poluem o meio
ambiente, liberando gas carbonico, que causa o efeito estufa.
Um dos melhores jeitos para se acabar com a poluição atraves de sacolas plasticas,seria
trocando as por sacolas de pano, que são reutilizaveis e menos prejudicial para o meio
ambiente.
3.8. Utilizar produtos biodegradáveis
Cada vez mais é necessário pensar em novas atitudes para mudar o futuro do nosso
planeta, pois ja causamos danos demais a terra. Nesta luta pela sustentabilidade, podemos
investir bastante em produtos biodegradáveis.
13
Os produtos biodegradáveis são todos aqueles fabricados com materiais que se
decompõem de forma rápida e sem prejuízos ao meio ambiente, que são completamente
absorvidos pela natureza e não geram resíduos que danificam a natureza
A maioria dos produtos biodegradaveis são compostos por materia prima biologicas,
vindas de ingredientes naturais, como cana de açucar, soja e arroz. Por isso são mais
indicados que os produtos convencionais, por serem naturais e nao poluirem o meio
ambiente. O uso elevado de materias não biologios causa muitos impacto negativos nas
florestas e principalemnte nos oceanos.
Por que usar os produtos biodegradaveis?
Os humanos causaram um desequilibrio na vida do planeta, com poluição e
esgotamento dos recursos naturais, e com isso trazendo varias consequencias, como
alterações climaticas e o avanço da poluição. Os produtos bodegraveis surgem para tentar
amenizar esses danos e ajudar nosso planeta.
Com eles tambem é possivel uma vida mais saudavel com recursos naturais, por que
alem de cuidar do planeta, os produtos biodegradaveis são beneficos para a saude humana.
14
Eles são produzios principalemte com produtos naturais , reduzindo a chance de
provocar intoxicação e alergia.
3.9. Como verificar se o produto realmente é biodegradável?
Para conferir se um produto realmente é biodegradavel é muito facil, basta apenas
conferir no rotulo da embalagem e observar os ingredinetes que compoem a formula.
Geraklmente em cosmeticos eles incluem materia prima derivada de cana de açucar,
extratos nde plantas e outras coisas naturais.
Os produtos biodegradaveis costumam ter selos ambientais nas embalagens, como
“cruelty-free” que indica mercadoria não testada em animais, e “EWG” que mostra os itens
sem produtos quimicos e toxicos na compposição.
A seguir alguns selos:
15
Todos temos que fazer nossa parte para cuidar no planeta em que vivemos, se cada um
fizer um pouco quenão é mais que nossa obrigação, salvamos nossa terra e garantimos
nossas futuras gerações.
Precisamos ser conscientes.
16
4. DESENVOLVIMENTO
Para o desenvolvimento do site que foi criado como projeto, para o trabalho de
sustentabilidade foi os seguintes passos. Primeiramente a parte de pesquisa sobre o
assuntos a serem discutidos e implementados no site, assim entendendo o assunto facilita
mais o designer do layout das paginas.
Segundo foi decidido as paginas e o que seria tratado em cada um delas, como a inicial
que seria um resumos das posteriores e assim a diante.
Por terceiro foi desenhado um esboço no papel de como ficaria as paginas, como seria
montado cada sessão da pagina e onde ficaria cada elemento, podendo mudar mais a diante,
mas ja com esse esboço facilitaria muito o desenvolvimento do site, por ja ter uma base
para seguir.
Por quarto foi a busca das imagens para colocar em cada assunto e cada pagina tratado
no web site, para ilustrar melhor cada sessão e textos.
Por quinto foi o desenvolvimento dos textos para colocar em cada sessão sobre o
determinado assunto que ela falaria, assim juntando com as imagens ficaria muito mas
explicativo. Apenas para ressaltar, os textos e imagens não foram o foco no trabalho, mas
sim a montagem das paginas e o desenvolvimento dos elementos e designer.
Agora que ja estava tudo planejado sobre a pagina, designer, textos e imagens, seria a
hora de começar o desenvolvimento da pagina, começando pelo “Index” que seria a pagina
principal ligando todas elas por um menu principal.
4.1. Configurações das paginas
Para o desenvolvimento, foi usado o software de desenvolvimento “Visual Studio
Code”.
17
Na pagina index foi criado a configuração das paginas e os scripts externos que seriam
usados, assim como os internos. Em seguida foi desenvolvido o menu principal, com o link
para as outras paginas.
Nele foi colocado uma classe do bootstrap que identifica a pagina que esta, assim
marcando no menu para indicar a pagina. Toda a configuração e menu foi replicado em
todas as paginas, alterando apenas o nome da pagina e o identificador da pagina.
4.2. Pagina Index
Em seguida continuamos o desenvolvimento da pagina index, Nela foi planejado 4
sessões.
A primeira sessão é composto por um elemento do bootstrap chamado carrosel, que
passa varias imagens com um determinado tempo. Nele foi colocado algumas imagens que
referenciam as outras paginas e os assuntos tratados.
A segunda sessão da uma breve descrição sobre o meio ambiente, assim referenciando
a pagina “Meio Ambiente” que foca nesse assunto com mais profundidade. Ela é composta
por um titulo e uma descrição sobre o que é o meio ambiente, logo em seguida três cardes
também do bootstrap sobre alguns tópicos tratados no site.
Na terceira sessão da uma breve descrição sobre medidas preventivas para ajudarmos
nosso planeta, ele contara com algumas dicas, será um elemento com de um lado imagem e
do outro uma descrição, serão três elementos desse, o primeiro falando da economia de
agua, segundo falando sobre embalagens de plásticos, e o terceiro sobre produtos
biodegradaveis.
No quarto e ultima sessão, falamos um pouco sobre sustentabilidade e seus 3 tópicos
principais, a sustentabilidade ambiental, sustentabilidade económica, e sustentabilidade
social, seguindo de 3 imagens referentes a cada uma delas.
Seguindo para o final da pagina encontramos o footer, que é bem genérico, apenas com
um copyright e o nome do desenvolvedor do site. Seguindo igual para todas as paginas.
18
4.3. Pagina Meio Ambiente
A pagina “Meio Ambiente” tem como objetivo uma pequena introdução sobre o meio
ambiente e seus biomas. Tambem tem como objetivo falar um pouco sobre os efeitos da
poluição e do descuido com o meio ambiente.
No inicio da pagina temos o cabeçalho padrão composto por um logo da pagina e os
menus que referencia para as outras paginas.
Em seguida temos a primeira sessão, que é composta por uma imagem representando o
meio ambiente e em seguida do seu lado direito uma breve descrição do que seria o meio
ambiente.
Na segunda sessão mostramos um pouco da diversidade de biomas do nosso meio
ambiente, começando por uma breve descrição e em seguida mostrando 8 biomas
diferenciados. Foram feitos com algumas classes do bootstrap para ficar o efeito de circulo
com a imagem dentro.
Na terceira sessão temos uma imagem de uma floresta, no qual o destaque é o efeito
parallax, que da um efeito de apenas a tela se mexer e a imagem continuar parada enquanto
rolamos a tela.
Na quarta sessão falamos um pouco sobre sobre a imprtancia dos animais, apenas com
um titulo e algumas linhas de texto.
Na quinta sessão iremos falar um pouco sobre algumas categorias de animais mais
relevantes, como terrestres, voadores e aquaticos. A sessão sera composta por uma imagem
e do lado uma descrição sobre o tipo de animal dessa categoria. Sera tres categorias,
invertendo entre imagem e descrição.
19
Na ultima sessão temos apenas um titulo e uma descrição tambem, falaremos um
pouquinho sobre o que aconteceria se os animais sumissem do nosso planeta.
E por ultimo um copyright padrão de todas as paginas.
4.4. Pagina Como Ajudar
O foco da pagina “como ajudar” é algumas dicas de como podemos ajudar nosso meio
ambiente com algumas pequenas atitudes.
No inicio do cabeçalho seguimos com o padrão, o logo da pagina e a navbar com o link
para as outras paginas.
Em seguida temos a primeira sessão que é composta apenas por uma imagem
ocupando toda a primeira sessão, assim inicializando a pagina.
Na segunda sessão temos uma imagem do lado esquerdo e um texto sobre como ajudar
com a economia de agua. A economia de agua é o melhor que podemos fazer para ajudar
nossa natureza. Na mesma sessão é resaltado alguns pontos importantes para a luta contra
o desperdicio de agua. Eles foram feitos com uma lista no html.
Na terceira sessão falaremos sobre as embalagens de plastico e o mal que ela faz para a
natureza. Sera composto por um texto informativo e em seguida uma imagem para ilustrar
do lado direito do texto.
Na quarta sessão falaremos sobre os produtos biodegradaveis seguindo o mesmo
conceito das sessões anteriores, um lado o texto e do outro lado a imagem.
Na quinta sessão sera focado no desmatamento das arvores, seguindo o mesmo
conceito das sessões anteriores tambem, um texto e uma imagem.
Na sexta sessão sera focado na reciclagem, um dos fatos mais importantes para ajudar
o meio ambiente também. Seguindo o mesmo conceito, uma imagem e um texto. Essa
sendo a ultima sessão desta pagina.
20
Por ultimo o footer da pagina, idêntico aos das paginas anteriores e posteriores.
4.5. Pagina Sustentabilidade
a ultima e mais importante das paginas, o assunto principal desse trabalho, a pagina
sobre sustemtabilidade, nela será explicado alguns tópicos da sustentabilidade, usando
elementos ja usados em outras paginas anteriores.
De inicio temos o Header que é nosso cabeçalho onde fica o logo e a navbar para
iniciar a pagina, como de todas as paginas anteriores.
Na primeira sessão temos uma imagem com um width 100% para pegar a sessão toda,
para mostrar que estamos na pagina sustentabilidade.
Em seguida na segunda sessão comeaçamos a falar um pouco sobre o que é
sustentabilidade, sobre o que significa sustentabilidade. Nessa sessão foi usado apenas um
h1 de titulo e um paragrafo com alguns estilos no css.
Em seguida temos a terceira sessão que fala um pouco sobre sustentabilidade ambiental,
nela temos uma imagem e do lado um texto, seguindo o padrão da pagina anterior.
Na quarta sessão temos um pouco sobre sustentabilidade econômica, seguindo o
padrão anterios de um texto e uma imagem, sempre alterando entre texto e imagem para
fixar um layout mais intuitivo.
Na quinta sessão falamos sobre sustentabilidade social, nela aprendemos um pouco
sobre a sustentabilidade social, seguindo mesmo padrão de imagem e texto.
E por ultimo temos a sustentabilidade empresarial, seguindoo mesmo padrão de
imagem e texto, assim criando um layout bem intuitivo.
Por ultimo e não menos importante, temos o footer da pagina para finalizar essa pagina
e esse projeto.
O sistema basicamente é uma pagina web estática sem muitos recursos dinâmicos,
apenas para apresentação sobre o assunto proposto para o trabalho.
5. RESULTADO E DISCUSSÃO
O trabalho proposto sobre sustentabilidade tem um impacto muito grande na sociedade, e
abrange bastante assunto, para o projeto foi facil achar imagens e informações para contribuir
no projeto, o resultado esperado era um site completo e dinamico, com layouts fluidos e
21
dinamicos, porem decidi usar apenas e um pouco a mais do que foi ensinado nas disciplinas
nesse semestre.
O resultado não exatamente o esperado, porem foi um bom resultado, levando em
consideração que foi usado apenas recursos basicos, alguns recursos a mais usados foram o
bootstrap e um pouco de css.
Acredito que deveria ser focado nessas partes inportantes das materias desse semestre,
principalmente os layouts adaptaveis e media query.
Deveria focar em um pouco de css tambem, pois é algo bastante importante no
desenvolvimento web, junto do javascript para manipular elementos do dom.
Acredito que poderia ser melhor e teriamos um resultado melhor.
6. CONSIDERAÇÕES FINAIS
A linguagem de escrita de documentos que foi usada foi a HTML basica, seguindo os
assuntos que foram ensinados nas disciplinas desse semestre, o html tem muitas tags para
todos os requisitos da pagina que escolhi codificar, junto com o css3 e o bootstrap5 para ter
uma melhor apresentação das paginas, mesmo as materias nesse semestre não tendo quase
nada a respeito dessas tecnicas, o bootstrap5 foi mais usado para fazer os espaçamentos de
grid, para alinhamento dos elementos com mais facilidade, tenho mais afinidade com o
sistema de grid do bootstrap5 do que com o do proprio css3, poderia ser usado o flexbox
tambem, mas achei melhor essa solução.
O tema escolhido é algo muito importante para todos nos, então tive bastante referencias
de sites e imagens para colocar em meu projeto, principalmente imagens, um site educativo
requer bastante imagens de apoio.
Por fim tive o resultado esperado, usando apenas essas tecnicas e um pouco a mais do que
as ensinadas nesse semestre nas disciplinas, ficou um site bem bonito e satisfatorio, mas não
esta cem por cento do que poderia ser, pois so usei o que foi ensinado nas materias, o
22
esperado seria um site totalmente responsivo, para outros dispositivos e capaz de se adequar a
qualquer tamanho de tela, ou seja, um layout liquido.
As disciplinas nesse semestre focam um pouco na web, porem não passam o essencial,
falam uma breve introdução sobre alguns elementos html e css, mas poderia focar mais em
parte que são essenciais, como layout liquido, media query e seletores css mais usados.
O tema proposto não so é essencial para a nossa formação como para a vida toda, pois
temos que nos aprofundar um pouco nas questões sobre o meio ambiente e a sustentabilidade,
pois se ignorarmos, o que seria do nosso meio ambiente e do nosso planeta?
Temos que ter consciência para sempre fazer o nosso melhor, quanto mais cuidarmos do
nosso planeta e da nossa sociedade, melhor qualidade de vida teremos para nos, nossa familia
e nossos futuros filhos.
7. REFERÊNCIAS
https://d3csixunm0sjcw.cloudfront.net/wp-content/uploads/2021/08/27122824/o-que-e-
sustentabilidade-ambiental.jpghttps://www.todamateria.com.br/sustentabilidade/
https://www.portaldaindustria.com.br/industria-de-a-z/meio-ambiente-e-
sustentabilidade/#:~:text=A%20sustentabilidade%20ambiental%20relaciona%2Dse,a%20s
ociedade%20e%20a%20natureza.
https://www.suapesquisa.com/ecologiasaude/economia_agua.htm#:~:text=Dicas%20de%2
0como%20economizar%20%C3%A1gua%20(consumo%20consciente%20de%20%C3%
A1gua)&text=%2D%20Fechar%20a%20torneira%20enquanto%20ensaboar,fritura%20pel
o%20ralo%20da%20pia.
https://blog.racon.com.br/reduzir-o-uso-de-sacolas-de-plastico/
https://biossance.com.br/blogs/notas-do-laboratorio/o-que-sao-os-produtos-
biodegradaveis-descubra-
aqui#:~:text=O%20que%20define%20um%20produto,e%20geram%20menos%20impacto
s%20ambientais.
https://www.teraambiental.com.br/blog-da-tera-ambiental/sustentabilidade-social-por-que-
ela-deve-fazer-parte-da-sua-
empresa#:~:text=Por%20defini%C3%A7%C3%A3o%2C%20sustentabilidade%20social%
23
20%C3%A9,educa%C3%A7%C3%A3o%20e%20sa%C3%BAde%2C%20por%20exempl
o.
https://www.pensamentoverde.com.br/meio-ambiente/impacto-das-sacolas-plasticas-no-
meio-ambiente/
https://www.bosch.com.br/noticias-e-
historias/sustentabilidade/?utm_source=search&utm_medium=cpc&utm_campaign=br-
google-sustentabilidade-search-always_on_setembro&gclid=EAIaIQobChMImqqQsoXo-
gIVAsORCh2MVgKSEAAYBCAAEgL5f_D_BwE
https://cdn.shopify.com/s/files/1/2534/7488/files/produtos-
biodegradaveis2_1024x1024.jpg?v=1645190391
https://static.portaldaindustria.com.br/media/filer_public_thumbnails/filer_public/90/4e/90
4e4e91-b3e1-428d-a4c5-49f833653c1b/sustentabilidade-meio-
ambiente.jpg__550x309_q85_crop_subsampling-2_upscale.jpg
https://static.portaldaindustria.com.br/media/filer_public/d4/65/d4657fd4-ef07-4ea6-b07d-
27160a1fbab4/sustentabilidade-meio-ambiente-bem-estar.jpg
https://static.todamateria.com.br/upload/tr/ip/tripe1.jpg
https://static.significados.com.br/foto/sustentabilidade-ambiental-19-fb.jpg
https://media.gazetadopovo.com.br/vozes/2017/06/20170614-cpce-600x404-e714f6a2.jpg
http://marcusmarques.com.br/wp-content/uploads/2017/02/Sustentabilidade-
empresarial.jpg
https://escolaeducacao.com.br/wp-content/uploads/2019/08/economia-sustentavel-1.jpg
https://www.novvaaprimatic.com.br/wp-content/uploads/2015/02/economia-de-agua.jpg
https://costanorte.com.br/image/policy:1.301817.1619973972:1619973972/image.jpg?f=2
x1
https://cdn.shopify.com/s/files/1/2534/7488/articles/produtos-
biodegradaveis_1112x.jpg?v=1645190592
https://img.freepik.com/fotos-gratis/campanha-de-poluicao-do-oceano-com-sacolas-
plasticas-e-garrafas-usadas-flutuando_53876-104850.jpg?w=2000
https://www.dinamicambiental.com.br/wp-content/uploads/2021/06/o-oceano-e-a-nossa-
sobrevivencia.jpg
https://www.greenpeace.org/static/planet4-brasil-stateless/2018/07/GP0STPOE5-
1024x682.jpg
24
https://res.cloudinary.com/buzzfeed-brasil/image/upload/q_auto,f_auto/image-
uploads/subbuzz-images/jpeg/663d71f7b018c6480627cfa6a4536c4d.jpg
https://super.abril.com.br/wp-
content/uploads/2018/07/566f045d0e2163522f00f274thinkstockphotos-479667835.jpeg
https://d3csixunm0sjcw.cloudfront.net/wp-content/uploads/2021/08/27122824/o-que-e-
sustentabilidade-ambiental.jpg
https://static.significados.com.br/foto/meio-ambiente-fb.jpg
https://static.biologianet.com/2020/05/meio-ambiente.jpg
https://static.portaldaindustria.com.br/portaldaindustria/noticias/media/imagem_plugin_ca
42790d-93a8-4f49-abba-527bc1e30d9a.jpg
https://static.todamateria.com.br/upload/tu/nd/tundra.jpg?auto_optimize=low
https://static.todamateria.com.br/upload/ta/ig/taiga.jpg?auto_optimize=low
https://static.todamateria.com.br/upload/55/80/55803f2b7a096_floresta_temperada.jpg?aut
o_optimize=low
https://static.todamateria.com.br/upload/55/80/55804950e14ba_floresta_amazonica.jpg?au
to_optimize=low
https://static.todamateria.com.br/upload/de/se/deserto.jpg?auto_optimize=low
https://escolaeducacao.com.br/wp-content/uploads/2020/01/Ecossistema-marinho-2.jpg
https://genius-
se.com.br/anterior/Laislaine%205785/Imagens/Animais%20Terrestres/urso[1].jpg
https://i0.wp.com/assistants.com.br/wp-content/uploads/2019/08/aguia-voando-
wallpaper.jpg?ssl=1
https://aguamineraltrezetilias.com.br/wp-content/uploads/2021/04/o-consumo-e-
desperdicio-de-agua-no-brasil.jpg
https://i0.wp.com/blog.larplasticos.com.br/wp-content/uploads/2020/10/impacto-do-
plastico-no-meio-ambiente.jpg?fit=768%2C431&ssl=1&resize=1280%2C720
https://psiqueobjetiva.files.wordpress.com/2010/05/tree2.jpg
https://www.decorfacil.com/wp-content/uploads/2021/05/20210506reciclagem-em-casa-lixeira.jpg
https://static.vecteezy.com/ti/vetor-gratis/p3/6659330-tipos-de-lixo-organico-plastico-
metal-vidro-residuo-eletronico-cartoon-estilo-para-seu-design-gr%C3%A1tis-vetor.jpg
https://i0.wp.com/jera.site/blog/wp-content/uploads/2021/06/reciclagem-nespresso-blog-
da-arquitetura-9.jpg?fit=1280%2C853&ssl=1
https://www.grupoescolar.com/wp-content/uploads/2021/03/sustentabilidade-9D.jpg
25
https://media.gazetadopovo.com.br/vozes/2017/01/sustentabilidade-economica-
cc1f47b0.jpg
https://ecomondobrasil.com.br/wp-content/uploads/2020/04/shutterstock_361917413.jpg
8. CODIGO FONTE
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina Inicial</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="containerPrincipal">
<!--MENU-->
<div class="row mt-3">
<div class="col-1"></div>
<div class="col-3">
<img id="imglogo" src="Imagens/meio-amibente-logo.png">
</div>
<div class="col-8">
<div class="mt-4"></div>
26
<ul class="nav nav-tabs nav-justfy justify-content-end">
<li class="nav-item ">
<a class="nav-link active" aria-current="page"
href="Index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="MeioAmbiente.html">Meio
Ambiente</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="ComoAjudar.html">Como
Ajudar</a>
</li>
<li class="nav-item">
<a class="nav-link text-success"
href="Sustentabilidade.html">Sustentabilidade</a>
</li>
</ul>
</div>
</div>
<!--MENU-->
<!--Sessão-1-->
<div class="row">
<div class="col-12 ">
<div id="carouselExampleIndicators" class="carousel slide " data-bs-
ride="carousel">
<div class="carousel-inner sessaoCarrosel">
<div class="carousel-item active ">
<img src="Imagens/Slide1.jpg" class="d-block w-100 sessaoCarrosel">
</div>
<div class="carousel-item ">
<img src="Imagens/Slide2.jpg" class="d-block w-100 sessaoCarrosel">
</div>
27
<div class="carousel-item">
<img src="Imagens/Slide3.jpg" class="d-block w-100 sessaoCarrosel"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!--Sessão-1-->
<!--Sessão-2-->
<div>
<div class="row sessaoMargin animate__animated animate__backInLeft">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo1">MEIO AMBIENTE</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
28
<p class="texto1">
O meio ambiente faz referencia a todos os recursos naturais que são
necessário
para o desenvolvimento e sobrevivência da nossa sociedade, a
sustentabilidade busca o uso
racional
desses recursos naturais sem causar danos ao meio ambiente e assim
preservando nosso planeta
para
as futuras gerações.
</p>
</div>
<div class="col-3"></div>
</div>
<div class="row sessaoMargin">
<div class="col"></div>
<div class="col-3">
<div>
<img src="Imagens/Florestas.jpg" class="card-img-top imgSessao2"
alt="...">
</div>
</div>
<div class="col-3">
<div>
<img src="Imagens/Oceano.jpg" class="card-img-top imgSessao2"
alt="...">
</div>
</div>
<div class="col-3">
<div>
<img src="Imagens/Animais.webp" class="card-img-top imgSessao2"
alt="...">
29
</div>
</div>
<div class="col"></div>
</div>
</div>
<!--Sessão-2-->
<!--Sessão-3-->
<div class="sessao3">
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Mediadas Preventivas</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row sessaoMargin">
<div class="col-6">
<img src="Imagens/EconomiaAgua.webp" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo3">Economia de Agua</h3>
<p class="texto2">
Sabemos que nosso planeta tem muita agua para todos nos, porem com o
desperdício e a
poluição talvez um dia ficaremos sem agua potável para ingerir. Existem
pequenas maneiras de economizarmos um pouco de agua e assim ajudar
nosso meio ambiente
</p>
</div>
</div>
<div class="row">
<div class="col-6">
30
<h3 class="titulo3">Embalagens de plastico</h3>
<p class="texto2">
As sacolas e embalagens plásticas são o algo que mais impacta no meio
ambiente, pois seu
uso por nos geralmente é rápido e descartado, mas no meio ambiente ela
demora em torno de
300 a 400 anos para se deteriorar, causando muitos danos ao meio ambiente
e aos seres vivos
que vivem nele.
</p>
</div>
<div class="col-6">
<img src="Imagens/GarraPlatica.webp" class="imgSessao1">
</div>
</div>
<div class="row">
<div class="col-6">
<img src="Imagens/ProdutosBiodegradaveis.webp" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo3">Produtos Biodegradaveis</h3>
<p class="texto2">
Os produtos biodegradáveis são todos aqueles fabricados com materiais que
se decompõem
de forma rápida e sem prejuízos ao meio ambiente, que são completamente
absorvidos pela
natureza e não geram resíduos que danificam a natureza
</p>
</div>
</div>
</div>
<!--Sessão-3-->
<!--Sessão-4-->
31
<div>
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Sustentabilidade</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<p class="texto1">
A sustentabilidade é algo muito importante na vida de todos nos,
por que com ela podemos ter uma qualidade de vida muito melhor,
e garantir um bom futuro para as demais gerações.
</p>
</div>
<div class="col-3"></div>
</div>
<div class="row sessaoMargin">
<div class="col"></div>
<div class="col-3">
<div>
<img src="Imagens/SustentabilidadeAmbiental.jpg"
class="card-img-top rounded-circle imgSustentabilidade"
alt="Sustentabilidade Ambiental">
</div>
</div>
<div class="col-3">
<div>
<img src="Imagens/Sustentabilidad-económica1.jpg"
class="card-img-top rounded-circle imgSustentabilidade imgMargin">
</div>
32
</div>
<div class="col-3">
<div>
<img src="Imagens/SustentabilidadeSocial.jpg"
class="card-img-top rounded-circle imgSustentabilidade">
</div>
</div>
<div class="col "></div>
</div>
</div>
<!--Sessão-4-->
<div class="sessaoMargin"></div>
</div>
<!--Footer-->
<div class="row footerSessao">
<div class="col footer ">
<p class="textoFooter sessaoMargin">
Copyright © 2022
</p>
<p class="textoFooter">
Criador por Leandro Lopes Teixeira
</p>
<div class="sessaoMargin"></div>
</div>
</div>
<!--Footer-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM
"
33
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Meio Ambiente
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Meio Ambiente</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="containerPrincipal">
34
<!--MENU-->
<div class="row mt-3">
<div class="col-1"></div>
<div class="col-3 ">
<img id="imglogo" src="Imagens/meio-amibente-logo.png">
</div>
<div class="col-8">
<div class="mt-4"></div>
<ul class="nav nav-tabs nav-justfy justify-content-end">
<li class="nav-item ">
<a class="nav-link text-success" href="Index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="MeioAmbiente.html">Meio Ambiente</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="ComoAjudar.html">Como
Ajudar</a>
</li>
<li class="nav-item">
<a class="nav-link text-success"
href="Sustentabilidade.html">Sustentabilidade</a>
</li>
</ul>
</div>
</div>
<!--MENU-->
<!--Sessão-1-->
<div class="row">
<div class="col-6">
<img src="Imagens/MeioAmbiente1.webp" class="imgSessao1">
</div>
35
<div class="col-6">
<h3 class="titulo3 mt-3">MEIO AMBIENTE</h3>
<p class="texto2">
Sabemos que nosso planeta tem muita agua para todos nos, porem com o
desperdício e a
poluição talvez um dia ficaremos sem agua potável para ingerir. Existem
pequenas maneiras de economizarmos um pouco de agua e assim ajudar nosso
meio ambiente
</p>
</div>
</div>
<!--Sessão-1-->
<!--Sessão-2-->
<div>
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Biomas</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<p class="texto1">
Cada bioma da natureza do nosso planeta tem suas respectivas
caracteristicas,
sua temperatura, animais e plantas. Todos eles devem ser preservados.
</p>
</div>
<div class="col-3"></div>
</div>
36
<div class="row sessaoMargin">
<div class="col-2"></div>
<div class="col-2">
<div>
<img src="Imagens/BiomaTundra.webp" class="card-img-top rounded-
circle imgSustentabilidade2"
alt="Sustentabilidade Ambiental">
<h4 class="titulo4">Tundra</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaTaiga.webp" class="card-img-top rounded-circle
imgSustentabilidade2">
<h4 class="titulo4">Taiga</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaFlorestaTemperada.webp"
class="card-img-top rounded-circle imgSustentabilidade2">
<h4 class="titulo4">Floresta Temperada</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaSavana.webp" class="card-img-top rounded-
circle imgSustentabilidade2">
<h4 class="titulo4">Savana</h4>
</div>
</div>
<div class="col-2 "></div>
</div>
<div class="row sessaoMargin">
37
<div class="col-2"></div>
<div class="col-2">
<div>
<img src="Imagens/BiomaFauna.webp" class="card-img-top rounded-
circle imgSustentabilidade2"
alt="Sustentabilidade Ambiental">
<h4 class="titulo4">Fauna</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaDeserto.webp" class="card-img-top rounded-
circle imgSustentabilidade2">
<h4 class="titulo4">Deserto</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaNeve.jpg" class="card-img-top rounded-circle
imgSustentabilidade2">
<h4 class="titulo4">Neve</h4>
</div>
</div>
<div class="col-2">
<div>
<img src="Imagens/BiomaAquatico.jpg" class="card-img-top rounded-
circle imgSustentabilidade2">
<h4 class="titulo4">Marinho</h4>
</div>
</div>
<div class="col-2 "></div>
</div>
</div>
<!--Sessão-2-->
38
<!--Sessão-3-->
<div class="sessaoMargin">
<div class="parallax parallax1"></div>
</div>
<!--Sessão-3-->
<!--Sessão-4-->
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1 class="titulo3">Importancia dos animais</h1>
<p class="texto2">Não é segredo que os animais são essenciais para a nossa
vida na terra,
sem eles não teriamos muitos dos recursos naturais que temos hoje em dia. por
isso devemos cuidar
muito bem deles,
e não coletar esses recursos em excesso, assim causando prejuiço as especies
de animais.
</p>
<p class="texto2">
Até o menor dos insetos é extremamente importante para a nossa vida na terra.
</p>
</div>
<div class="col-3"></div>
</div>
<!--Sessão-4-->
<!--Sessão-5-->
<div class="sessao3">
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Animais</h2>
39
</div>
<div class="col-3"></div>
</div>
<div class="row sessaoMargin">
<div class="col-6">
<img src="Imagens/AnimaisTerrestres.jpg" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo3">Animais Terrestres</h3>
<p class="texto2">
Animais terrestres são todos os animais que andam sobre a terra, a maioria
são os mamiferos
eles vivem em todos os biomas, desde florestas, desertos e neves.
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<h3 class="titulo3">Animais Voadores</h3>
<p class="texto2">
Os animais voadores não são todos os que tem asas, alguns animais que tem
asas não são voadores,
assim como as galinhas e os galos.
</p>
</div>
<div class="col-6">
<img src="Imagens/AnimaisVoadores.webp" class="imgSessao1">
</div>
</div>
<div class="row">
<div class="col-6">
<img src="Imagens/AnimaisAquaico.png" class="imgSessao1">
</div>
40
<div class="col-6">
<h3 class="titulo3">Animais Marinhos</h3>
<p class="texto2">
Animais marinhos são os que habitam os mares e rios, peixes, baleias,
tubarão e jacares. Os
Jacares alem de
ficar na agua, podem andar pela terra tambem, assim como alguns outros
animais.
</p>
</div>
</div>
</div>
<!--Sessão-5-->
<!--Sessão-6-->
<div>
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Oque aconteceria se os animais sumissem?</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<p class="texto1">
Com a destruição dos habitates naturais de alguns animais, eles acabam
buscando refugio em
cidades,
alguns selvagens que podem colocar a vida das pessoas em perigo.
</p>
<p class="texto1">
41
O pior fator que aconteceria se os animais fossem extintos, seria a perca da
biodivercidade,
e dos recursos naturais gerados por eles. Assim como o leite, ovos e carnes.
</p>
</div>
<div class="col-3"></div>
</div>
</div>
<!--Sessão-6-->
<div class="sessaoMargin"></div>
<!--FOOTER-->
<div class="row footerSessao">
<div class="col footer ">
<p class="textoFooter sessaoMargin">
Copyright © 2022
</p>
<p class="textoFooter">
Criador por Leandro Lopes Teixeira
</p>
<div class="sessaoMargin"></div>
</div>
</div>
<!--FOOTER-->
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM
"
crossorigin="anonymous"></script>
42
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Como Ajudar
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Como Ajudar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="containerPrincipal">
<!--MENU-->
43
<div class="row mt-3">
<div class="col-1"></div>
<div class="col-3">
<img id="imglogo" src="Imagens/meio-amibente-logo.png">
</div>
<div class="col-8">
<div class="mt-4"></div>
<ul class="nav nav-tabs nav-justfy justify-content-end">
<li class="nav-item ">
<a class="nav-link text-success" aria-current="page"
href="Index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="MeioAmbiente.html">Meio
Ambiente</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="ComoAjudar.html">Como Ajudar</a>
</li>
<li class="nav-item">
<a class="nav-link text-success"
href="Sustentabilidade.html">Sustentabilidade</a>
</li>
</ul>
</div>
</div>
<!--MENU-->
<!--Sessão-1-->
<div class="row">
<div class="col-12 ">
<div id="carouselExampleIndicators" class="carousel slide " data-bs-
ride="carousel">
<div class="carousel-inner sessaoCarrosel">
44
<div class="carousel-item active ">
<img src="Imagens/Slide2.2.webp" class="d-block w-100
sessaoCarrosel">
</div>
<div class="carousel-item ">
<img src="Imagens/Slide2.3.jpg" class="d-block w-100
sessaoCarrosel">
</div>
<div class="carousel-item">
<img src="Imagens/Slide2.1.jpg" class="d-block w-100 sessaoCarrosel"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!--Sessão-1-->
<!--Sessão-2-->
<div class="sessao3">
<div class="row sessaoMargin">
<div class="col-3"></div>
45
<div class="col-6">
<h2 class="titulo2 ">Como você pode ajudar?</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row sessaoMargin">
<div class="col-6">
<img src="Imagens/DesperdiciodeAgua.jpg" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo5">Economia de Agua</h3>
<p class="texto2">
Sabemos que nosso planeta tem muita agua para todos nos, porem com o
desperdício e a
poluição talvez um dia ficaremos sem agua potável para ingerir. Existem
pequenas maneiras de economizarmos um pouco de agua e assim ajudar
nosso meio ambiente
</p>
<ul>
<li>Quando For escovar os dentes podemos fazer isso de torneira
fechada</li>
<li>Banhos rápidos </li>
<li>Consertar vazamentos o mais rápido possível</li>
<li>Usar a descarga do vazo sanitário somente o necessário.</li>
<li>Reutilizar agua sempre que possível</li>
<li>Utilizar regador ao invés de mangueira</li>
<li>Tratar a agua da piscina para não precisar trocar com frequência</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-6">
46
<h3 class="titulo3">Embalagens de plastico</h3>
<p class="texto2">
As sacolas e embalagens plásticas são o algo que mais impacta no meio
ambiente, pois seu
uso por nos geralmente é rápido e descartado, mas no meio ambiente ela
demora em torno de
300 a 400 anos para se deteriorar, causando muitos danos ao meio ambiente
e aos seres vivos
que vivem nele.
</p>
</div>
<div class="col-6">
<img src="Imagens/PlasticosNaNatureza.webp" class="imgSessao1">
</div>
</div>
<div class="row">
<div class="col-6">
<img src="Imagens/ProdutosBiodegradaveis2.webp" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo3">Produtos Biodegradaveis</h3>
<p class="texto2">
Os produtos biodegradáveis são todos aqueles fabricados com materiais que
se decompõem
de forma rápida e sem prejuízos ao meio ambiente, que são completamente
absorvidos pela
natureza e não geram resíduos que danificam a natureza
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<h3 class="titulo3">Não cortar arvores</h3>
<p class="texto2">
47
Cortar um arvore muitas vezes é um ato ilegal, mas alem disso uma arvore é
oque nos da oxigenio e sem ele
morreriamos, elas tambem mantem o clima onde estão em um clima
ambiente e gostoso, nada como respirar um ar
purificado pelas arvores alem de nos darem muitas frutas.
</p>
</div>
<div class="col-6">
<img src="Imagens/Arvore2.jpg" class="imgSessao1">
</div>
</div>
<div class="row">
<div class="col-6">
<img src="Imagens/Reciclagem.jpg" class="imgSessao1">
</div>
<div class="col-6">
<h3 class="titulo3">Reciclagem</h3>
<p class="texto2">
A maior poluição do meio ambiente vem das coisas que utilizamos apenas
uma vez,
garrafas, sacolas e embalagens. algumas coisas podemos reutilizar e assim
ajudamos o meio ambiente
sempre que puder, recicle!!.
</p>
</div>
</div>
</div>
<!--Sessão-2-->
<!--Footer-->
<div class="row ">
<div class="col footer ">
<p class="textoFooter sessaoMargin">
Copyright © 2022
48
</p>
<p class="textoFooter">
Criador por Leandro Lopes Teixeira
</p>
<div class="sessaoMargin"></div>
</div>
</div>
<!--Footer-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM
"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Sustentabilidade
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
49
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sustentabilidade</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="containerPrincipal">
<!--MENU-->
<div class="row mt-3">
<div class="col-1"></div>
<div class="col-3">
<img id="imglogo" src="Imagens/meio-amibente-logo.png">
</div>
<div class="col-8">
<div class="mt-4"></div>
<ul class="nav nav-tabs nav-justfy justify-content-end">
<li class="nav-item ">
<a class="nav-link text-success" aria-current="page"
href="Index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="MeioAmbiente.html">Meio
Ambiente</a>
</li>
<li class="nav-item">
<a class="nav-link text-success" href="ComoAjudar.html">Como
Ajudar</a>
50
</li>
<li class="nav-item">
<a class="nav-link active"
href="Sustentabilidade.html">Sustentabilidade</a>
</li>
</ul>
</div>
</div>
<!--MENU-->
<!--Sessão-1-->
<div class="row">
<div class="col-12">
<img src="Imagens/SustentabilidadeBanner.jpg" class="sessaoCarrosel">
</div>
</div>
<!--Sessão-1-->
<!--Sessão-2-->
<div class="row sessaoMargin">
<div class="col-3"></div>
<div class="col-6">
<h2 class="titulo2">Sustentabilidade</h2>
</div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<p class="texto1">
A sustentabilidade é algo muito importante na vida de todos nos,
por que com ela podemos ter uma qualidade de vida muito melhor,
e garantir um bom futuro para as demais gerações.
</p>
51
</div>
<div class="col-3"></div>
</div>
<!--Sessão-2-->
<!--Sessão-3-->
<div class="sessao3">
<div class="row sessaoMargin ">
<div class="col-6 ">
<img src="Imagens/SustentabilidadeAmbiental1.jpg" class="imgSessao3">
</div>
<div class="col-6"><h3 class="titulo3">Sustentabilidade Ambiental</h3>
<p class="texto2">
Relaciona-se de certo modo com o pilar ambiental, que está ligado a todas
as ações que possam
trazer algum impacto direto ou indireto ao meio ambiente — em curto,
médio ou longo prazo.
</p>
<p class="texto2">
Minimizar a produção de resíduos é um dos focos da sustentabilidade
ambiental, para que não
haja prejuízos à qualidade do meio ambiente. Também visa ao consumo
consciente dos recursos
e à exploração responsável da natureza. Isso contribui para a preservação
das espécies e da
biodiversidade.
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<h3 class="titulo3">Sustentabilidade Econômica</h3>
<p class="texto2">
52
Aqui o foco é no desenvolvimento econômico sustentável. Esse tipo reúne
práticas
administrativas,
financeiras e, claro, econômicas para que se alcance uma maior eficiência
com gestão responsável
em todos os setores.
</p>
<p class="texto2">
Propõe-se a elaborar técnicas ou metodologias, a fim de que os processos
produtivos consumam
menos recursos, sem
prejudicar o desenvolvimento econômico. Sendo assim, a meta é continuar
a crescer, mas com
impacto mínimo ao meio
ambiente.
</p>
<p class="texto2">
Basicamente, é o fazer mais com menos, com a diferença de que, nesse caso,
importam também as
metodologias adotadas.
Busca-se a lucratividade em harmonia com a sustentabilidade.
</p>
</div>
<div class="col-6">
<img src="Imagens/SustentabilidadeEconomica.jpg" class="imgSessao3">
</div>
</div>
<div class="row">
<div class="col-6">
<img src="Imagens/SustentabilidadeSocial1.png" class="imgSessao3">
</div>
<div class="col-6">
<h3 class="titulo3">Sustentabilidade Social</h3>
<p class="texto2">
53
A sociedade é formada por diferentes camadas, e a missão dessa
sustentabilidade é reduzir as
desigualdades entre elas. Ou seja, ela propõe que todas as pessoas tenham
uma vida digna, com
acesso a recursos e oportunidades iguais.
</p>
<p class="texto2">
Na prática, envolve itens como a oferta de saneamento básico, a valorização
da cultura, o
cuidado
com a saúde e o acesso a uma renda. São os aspectos essenciais para
atender às necessidades
básicas
do ser humano.
</p>
<p class="texto2">
A sustentabilidade social também se preocupa com as ações tomadas hoje e
o impacto que elas
exercerão
no futuro. Isso serve para garantir a estabilidade do crescimento, a fim de
assegurar a melhor
distribuição da renda.
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<h3 class="titulo3">Sustentabilidade Empresarial</h3>
<p class="texto2">
"Sustentabilidade empresarial refere-se às ações e políticas sustentáveis
(economicamente,
socialmente e ambientalmente)
54
adotadas por uma empresa ao longo das operações, desenvolvimento e
produção de suas mercadorias
ou serviços."
</p>
<p class="texto2">
" a sustentabilidade empresarial está relacionada à atenção que a empresa dá
aos possíveis
impactos negativos que poderão
ser causados no meio ambiente e às pessoas mediante o desenvolvimento de
suas atividades."
</p>
<p class="texto2">
"Atualmente, as grandes empresas apresentam em sua política um programa
de sustentabilidade com
o objetivo de criar uma
cadeia de produção que impacte minimamente a natureza, visando ao bem-
estar de seus consumidores
e bem como de seus
funcionários, evitando também prejuízos econômicos. Essa questão deixou
de ter um aspecto
filantrópico e assumiu uma
posição estratégica a fim de alcançar o engajamento necessário com o seu
mercado consumidor."
</p>
</div>
<div class="col-6">
<img src="Imagens/SustentabilidadeIndustrial.jpg" class="imgSessao3">
</div>
</div>
</div>
<!--Sessão-3-->
</div>
<!--Footer-->
55
<div class="row footerSessao">
<div class="col footer ">
<p class="textoFooter sessaoMargin">
Copyright © 2022
</p>
<p class="textoFooter">
Criador por Leandro Lopes Teixeira
</p>
<div class="sessaoMargin"></div>
</div>
</div>
<!--Footer-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM
"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
CSS
56
.containerPrincipal
{
padding-right: 12px;
}
.sessao3
{
padding-right: 15px;
}
.fixed {
position: fixed;
right: 50px;
top: 200px;
}
#imglogo {
width: 400px;
height: 70px;
}
.sessaoCarrosel
{
height: 720px;
align-content: center;
width: 100.7%;
}
.imgSustentabilidade
{
height: 300px;
width: 100%;
transition: 1s;
}
57
.imgSustentabilidade:hover
{
padding: 20px;
}
.imgSustentabilidade2
{
height: 200px;
width: 100%;
transition: 1s;
}
.imgSustentabilidade2:hover
{
padding: 20px;
}
.imgMargin
{
margin-top: 150px;
}
.imgSessao1
{
width: 103.6%;
height: 500px;
}
.imgSessao2
{
width: 100%;
height: 400px;
58
transition: 1.7s;
}
.imgSessao3
{
width: 103.6%;
height: 700px;
}
.imgSessao2:hover
{
padding: 25px;
border-radius: 80%;
}
.sessaoMargin
{
margin-top: 100px;
}
.titulo1 {
font-size: 50px;
color: #008037;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
text-shadow: 5px 5px 5px #cbcaca;
}
.titulo2
{
font-size: 50px;
color: #000000;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
59
text-align: center;
text-shadow: 5px 5px 5px #cbcaca;
}
.titulo3
{
font-size: 40px;
color: #000000;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-top: 85px;
padding: 25px 50px;
text-shadow: 5px 5px 5px #9f9f9f;
}
.titulo4
{
font-size: 30px;
color: #000000;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
text-shadow: 5px 5px 5px #9f9f9f;
margin-top: 10px;
}
.titulo5
{
font-size: 40px;
color: #000000;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
margin-top: 30px;
padding: 25px 50px;
text-shadow: 5px 5px 5px #9f9f9f;
}
60
.texto1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
font-size: 18px;
text-shadow: 5px 5px 5px #cbcaca;
}
.texto2 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
font-size: 18px;
padding: 0px 50px;
text-shadow: 5px 5px 5px #cbcaca;
}
li
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: left;
font-size: 18px;
padding: 0px 50px;
text-shadow: 5px 5px 5px #cbcaca;
}
.textoFooter
{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
font-size: 18px;
color: rgb(255, 255, 255);
}
.footerSessao
61
{
margin-top: 80px;
width: 100.8%;
height: 180px;
}
.footer
{
background-color: #000000;
}
.parallax
{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
height: 100vh !important;
width: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.parallax1
{
background-image: url(Imagens/Floresta1.jpg);
}
.parallax3
{
display: flex;
62
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
height: 100vh !important;
width: 103.6%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
	1.OBJETIVO
	2.INTRODUÇÃO
	3.REFERENCIAL TEÓRICO
	3.1.Oque é o meio ambiente
	3.2.O que é sustentabilidade
	3.3.Tipos de sustentabilidade
	3.4.Topicos de Sustentabilidade
	3.4.1.Sustentabilidade ambiental
	3.4.2.Sustentabilidade social 
	3.4.3.Sustentabilidade Ecônomica
	3.4.4.Sustentabilidade empresarial
	3.5.Exemplos de sustentabilidade ambiental
	3.6.Economia de Agua
	3.7.Evitar Sacolas Plásticas
	3.8.Utilizar produtos biodegradáveis
	3.9.Como verificar se o produto realmente é biodegradá
	4.DESENVOLVIMENTO
	4.1.Configurações das paginas
	4.2.Pagina Index
	4.3.Pagina Meio Ambiente
	4.4.Pagina Como Ajudar
	4.5.Pagina Sustentabilidade
	5.RESULTADO E DISCUSSÃO
	6.CONSIDERAÇÕES FINAIS
	7.REFERÊNCIAS
	8.CODIGO FONTE