<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!Doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Aurea - Projeto I</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="container">
<div id="banner" >
<img id="img" src="https://crcbelohorizonte.files.wordpress.com/2010/01/imagem-019.jpg" max-height="400px">
</div>
<section id="titulo">
<div>
<h1>A HISTÓRIA DA INCLUSÃO DIGITAL DE BH </h1>
</div>
</section>
<section>
<div id="titulo2">
<h3 >BH DIGITAL - FAZENDO PARTE DESSA HISTÓRIA </h3>
</div>
<div >
<ul>
<li><a href="#galeria">Galeria de fotos e vídeos</a></li>
<li><a href="#titulo3">BH pioneira em inclusão digital</a></li>
<li><a href="#inclusao">BH atualmente na inclusão digital</a></li>
<li><a href="#mapa">Mapa da Inclusão Digital</a></li>
<li><a href="https://www.hojeemdia.com.br/horizontes/bh-disputa-pr%C3%AAmio-mundial-com-programa-de-inclus%C3%A3o-digital-para-mulheres-carentes-1.755327" target="_blank">Premio inclusão digital BH</a></li>
</ul>
</div>
</section>
<section>
<div class="container-ilustracao" id="titulo3">
<h1 style="color:#2c7a0d">BH Pioneira em Inclusão Digital</h1>
<a href="https://prefeitura.pbh.gov.br/" target="_blank">
<img class="imagem" src="https://1.bp.blogspot.com/-VSHvBK5YLJs/W2LpTAdZO3I/AAAAAAAAHBg/UdnZoaQo7gkrPdkthJEGqwYsnh4T_wwnQCLcBGAs/s1600/42886020435_c53f965b8a_k.jpg" alt="BH digital">
</a>
<p id="texto-direita">A Prodabel, por meio do Programa BH Digital, tem contribuído para que as ações de inclusão digital no município possibilitem a inclusão dos cidadãos ainda excluídos digitalmente.Cursos com professores qulificados.</p>
</div>
</section>
<section>
<div class="container-texto">
<div id="inclusao">
<h1 style="color:#2c7a0d">BH Atualmente na inclusão digital</h1>
<p style="font-size: 25px; color:gray">Com o objetivo de ampliar o acesso à internet, a Diretoria de Inclusão Digital da Empresa de Informática e Informação do Município de Belo Horizonte (Prodabel) desenvolveu ações de inclusão digital com públicos variados e teve resultados expressivos neste ano de 2017.<br> A expectativa é que os serviços prestados sejam ampliados no próximo ano.
Foram desenvolvidas ações com pessoas de todas as idades, desde o programa a Hora do Código, que tem como objetivo apresentar e inserir crianças a partir de seis anos no mundo da programação, até o curso de Informática para a terceira idade, passando pela capacitação de jovens, as noções de empreendedorismo para micro e pequenos empresários, entre outros. <br>Ao todo, 760 alunos receberam certificados das atividades desenvolvidas na Unidade Ipiranga da Prodabel. Entre elas está a Maria Raimunda dos Reis, de 66 anos. A aposentada participou do curso de Informática para a terceira idade e elogiou a iniciativa.<br> “O professor é atencioso e atende a necessidade de cada aluno dentro do limite dele. Eu percebo que mexer no computador é um aprendizado contínuo. O mais legal é que fazemos novas amizades e não ficamos isolados”, disse. </p>
</div>
<div id="mapa">
<h1 style="color:#2c7a0d">Mapa de inclusão digital</h1>
<table>
<thead>
<tr>
<th>CIDADE</th>
<th>UF</th>
<th>COMPUTADOR</th>
<th>POSIÇÃO</th>
<th>COMPUTADOR COM INTERNET</th>
</tr>
</thead>
<tbody>
<tr>
<td>Belo Horizonte</td>
<td>MG</td>
<td>87</td>
<td>23</td>
<td>67.89</td>
</tr>
<tr>
<td>São Paulo</td>
<td>SP</td>
<td>9</td>
<td>5</td>
<td>89</td>
</tr>
<tr>
<td>Vitória</td>
<td>ES</td>
<td>10</td>
<td>5</td>
<td>81</td>
</tr>
<tr>
<td>Rio Grande</td>
<td>SC</td>
<td>9</td>
<td>2</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Ranking comparativo com as principais cidades do Brasil</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
<section>
<div class="container-contato">
<form class="formulario" method="post">
<div class="campo radiobox">
<span>VOCÊ ESTÁ SATISFEITO COM OS SERVIÇOS DE INCLUSÃO DIGITAL DA PBH ?</span>
<input type="radio" name="servico" id="sim" value="sim" checked><label for="sim">Sim</label>
<input type="radio" name="servico" id="nao" value="nao"><label for="nao">Não</label>
</div>
<div class="campo">
<label for="email">Seu E-Mail:</label>
<input type="email" id="email" name="email" placeholder="Digite seu E-Mail*" required>
</div>
<div class="campo">
<label for="mensagem">Sua mensagem:</label>
<textarea name="mensagem" id="mensagem" placeholder="Mensagem*" required></textarea>
</div>
<input type="reset" value="Cancelar">
<input type="submit" name="acao" value="Enviar">
</form>
</div>
</section>
<section class="fotos">
<h3 style="color: #2c7a0d">Galeria de fotos</h3>
<div id="galeria">
<img class="img" src="https://crcbelohorizonte.files.wordpress.com/2010/01/imagem-019.jpg" data-lightbox="roadtrip"></a>
<img class="img" src="https://1.bp.blogspot.com/-VSHvBK5YLJs/W2LpTAdZO3I/AAAAAAAAHBg/UdnZoaQo7gkrPdkthJEGqwYsnh4T_wwnQCLcBGAs/s1600/42886020435_c53f965b8a_k.jpg" data-lightbox="roadtrip"></a>
<img class="img" src="https://live.staticflickr.com/6236/6328958485_fd0b0ba37a_b.jpg" data-lightbox="roadtrip"></a>
</div>
</section>
</div>
</body>
</html>
.container{
background-color: #98FB98;
}
#banner{
width: 100%;
}
#banner img{
width: 100%;
height: 400px;
}
/*primeira camada*/
#titulo{
width: 100%;
text-align: center;
background-color: green;
color: #fff;
}
#titulo2{
color: #2c7a0d;
font-size: 20px;
text-align: center;
font-family:Verdana,Geneva,tahoma,SansSerif;
}
a:link, a:visited, a:active {
text-decoration:none;
color: #16f716;
}
ul{
list-style: none;
}
ul li a:hover{
text-decoration: none;
color: #2c7a0d ;
}
/* segunda imagem lado esquerdo*/
.container-ilustracao{
padding: 50px;
width: 80%;
height: 300px;
}
.container-texto{
padding:50px;
margin: auto;
}
.imagem{
border: 3px solid green;
position: relative;
float: left ;
width: 50%;
height: auto;
margin: 0 20px;
}
#texto-direita {
font-size: 20px;
color: #2c7a0d;
}
thead {color:green;}
tbody {color:dimgrey;}
tfoot {color:darkolivegreen;}
table, th, td {
border: 2px solid #b33d99;
text-align: center;
}
table {
width: 700px;
}
th {
height: 30px;
}
.container-contato{
padding:50px;
margin: auto;
}
.formulario{
width: 700px;
padding: 30px;
border:1px solid #ccc;
font-family: Verdana, Geneva, tahoma, SansSerif;
}
.campo{
width: 100%;
margin: 15px 0;
}
.campo label,
.campo span{
padding-left: 10px;
font-size: 1.1em;
display: block;
width: 100%;
color: #2c7a0d;
}
.radiobox label{
width: auto;
display: inline-block;
}
input[type=text],
input[type=email],
textarea{
width: 100%;
padding-left: 10px;
height: 30px;
line-height: 30px;
border-radius: 15px;
border: 1px solid #ccc;
outline: none;
}
input#nao{
margin-left: 30px;
}
textarea{
line-height: 20px;
padding: 10px;
height: 90px;
resize: none;
}
input[type=submit],
input[type=reset]{
display:inline-block;
background-color: #ccc;
color: green;
height: 35px;
border: none;
outline: 0;
cursor: pointer;
width: 100px;
margin: 0 auto;
text-align: center;
border-radius: 15px;
}
.fotos{
padding: 50px;
margin: auto;
}
.img{
border: 3px solid green;
position: relative;
width: 25%;
height: auto;
margin: 0 20px;
}
