-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (125 loc) · 6.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<title>Meu Primeiro site</title>
<link rel="stylesheet" href="css/estilo.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- MENU -->
<header>
<div id="logo"><img src="img/logo.png" alt="JA - Meu Primeiro Site"/></div>
<ul class="menu">
<li><a href="#menu1">Objetivos</a></li>
<li><a href="#menu2">Metas</a></li>
<li><a href="#menu3">Notícias</a></li>
<li><a href="#menu4">Sobre</a></li>
</ul>
</header>
<!--CAPA-->
<figure id="capa" class="centro">
<div class="imagem_fundo">
<h1 class="titulo">Educação de qualidade<br> Para todos</h1>
<h2 class="titulo">Objetivo 4: Garantir o ensino de qualidade para todos,
para garantir um futuro melhor para a humanidade.</h2>
<a class="cta1" href="#menu1">COMEÇAR</a>
</div>
</figure>
<!--OBJETIVOS-->
<section id="menu1" class="cor_fundo">
<div class="coluna dois">
<iframe width="598" height="456" src="https://www.youtube.com/embed/5LEHHpNxZ0Y?list=PLUZOt6bFc2fhs9d5U0GxSZxC9TxKvnP6E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="coluna dois">
<h1 class="centro" >Objetivos</h1>
<hr>
<p class="justificado ods">
Os Objetivos de Desenvolvimento Sustentável (ODS) são uma agenda mundial adotada durante a Cúpula das Nações Unidas sobre o Desenvolvimento Sustentável em setembro de 2015 composta por 17 objetivos e 169 metas a serem atingidos até 2030.
</p>
<p class="justificado ods">
Nesta agenda estão previstas ações mundiais nas áreas de erradicação da pobreza, segurança alimentar, agricultura, saúde, educação, igualdade de gênero, redução das desigualdades, energia, água e saneamento, padrões sustentáveis de produção e de consumo, mudança do clima, cidades sustentáveis, proteção e uso sustentável dos oceanos e dos ecossistemas terrestres, crescimento econômico inclusivo, infraestrutura, industrialização, entre outros.
</p>
</div>
</section>
<!--METAS-->
<section id="menu2">
<h1>Metas</h1>
<hr>
<div class="coluna quatro">
<div class="icone">
<img src="img/meta1.png" alt="Meta 1"/>
</div>
<h1 class="centro">Meta 1</h1>
<p class="centro metas"> Até 2030, garantir que todas as meninas e meninos completem o ensino primário e secundário livre, equitativo e de qualidade, que conduza a resultados de aprendizagem relevantes e eficazes</p>
</div>
<div class="coluna quatro">
<div class="icone">
<img src="img/meta2.png" alt="Meta 2"/>
</div>
<h1 class="centro">Meta 2</h1>
<p class="centro metas">Até 2030, aumentar substancialmente o número de jovens e adultos que tenham habilidades relevantes, inclusive competências técnicas e profissionais, para emprego, trabalho decente e empreendedorismo</p>
</div>
<div class="coluna quatro">
<div class="icone">
<img src="img/meta3.png" alt="Meta 3"/>
</div>
<h1 class="centro">Meta 3</h1>
<p class="centro metas">Construir e melhorar instalações físicas para educação, apropriadas para crianças e sensíveis às deficiências e ao gênero, e que proporcionem ambientes de aprendizagem seguros e não violentos, inclusivos e eficazes para todos</p>
</div>
<div class="coluna quatro">
<div class="icone">
<img src="img/meta4.png" alt="Meta 4"/>
</div>
<h1 class="centro">Meta 4</h1>
<p class="centro metas">Até 2030, substancialmente aumentar o contingente de professores qualificados, inclusive por meio da cooperação internacional para a formação de professores, nos países em desenvolvimento, especialmente os países menos desenvolvidos e pequenos Estados insulares em desenvolvimento</p>
</div>
</section>
<!--NOTICIAS-->
<section id="menu3" class="cor_fundo">
<h1>Notícias</h1>
<div class="coluna tres">
<a class="link2" href="https://nacoesunidas.org/onu-recebe-ate-3-8-inscricoes-para-evento-virtual-sobre-impulso-aos-objetivos-globais/" target="_blank">
<img src="img/img3.jpg" alt="Evento Virtual" />
<h3 class="centro noticia">ONU recebe até 3/8 inscrições para evento virtual sobre impulso aos objetivos globais</h3>
</a>
</div>
<div class="coluna tres">
<a class="link2" href="https://nacoesunidas.org/pandemia-interrompe-educacao-de-mais-de-70-dos-jovens-no-mundo/" target="_blank">
<img src="img/img2.png" alt="Programa de Resposta" />
<h3 class="centro noticia">Pandemia interrompe educação de mais de 70% dos jovens no mundo</h3>
</a>
</div>
<div class="coluna tres">
<a class="link2" href="https://nacoesunidas.org/unicef-e-jovem-pan-se-unem-no-apoio-a-educacao-infantil/" target="_blank">
<img src="img/img1.jpg" alt="Como Alimentar" />
<h3 class="centro noticia">Como alimentar 10 bilhões de pessoas até 2050</h3>
</a>
</div>
</section>
<!--SOBRE-->
<section id="menu4" class="cor_fundo">
<div class="coluna dois">
<h1 class="centro" >Sobre mim</h1>
<p class="justificado">Meu nome é Danilo César</p>
<p class="justificado">Estudo no CCI, na Samambaia - DF</p>
<p class="justificado">Moro em Samambaia - DF e escolhi a ODS 4 - Educação de qualidade, pois a importância da educação é fundamental para o desenvolvimento da humanidade e do indivíduo.</p>
</div>
<div class="foto dois">
<img class="profile" src="img/eu.png"/>
</div>
</section>
<!--RODAPÉ-->
<footer>
<div class="coluna dois">
<h1 class="esquerda">Meu primeiro site</h1>
<p>Projeto desenvolvido durante o curso Meu primeiro site, promovido pela
<a class="link" href="https://www.jabrasil.org.br" target="_blank">Junior Achievement Brasil</a> e
<a class="link" href="https://www.microsoft.com/pt-br" target="_blank">Microsoft.</a></p>
</div>
<div class="coluna dois">
<h1>Créditos</h1>
<p>Ícones de Flaticon, logo de ONU, imagens de NPR.org, ONU, freepik e Agência Brasil</p>
</div>
</footer>
</body>
</html>