<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>
<head>
<meta charset="utf-8">
<title> PSD14T Avaliação I: Renata</title>
</head>
<body>
<img SRC="https://static.vakinha.com.br/uploads/vakinha/image/335384/VAQUINHA_ON_LINE.jpg?ims=700x410" alt="criança usando o computador">
<div id="titulo">
<h1> A HISTÓRIA DA INCLUSÃO DIGITAL EM BH</h1>
</div>
<p class="prog">O Programando Sonhos Delas é um projeto desenvolvido
pelo presidente da Prodabel, Leandro García,
e tem como objetivo formar em Programação Web, homens e mulheres que
vivem em situação de vulnerabilidade social e podem, a partir do acesso e do desenvolvimento das novas tecnologias, se qualificarem para este novo mercado.
</p>
<ul>
<li><a href="#pic">Galeria de fotos e vídeos</a></li>
<li><a href="#pioneira">Bh, pioneira em inclusão digital </a></li>
<li><a href="#inclu">Bh atualmente na inclusão digital</a> </li>
<li><a href="mapa">Mapa de 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">Prêmio inclusão digital</a></li>
</ul>
<div id="h2">
<h2> BH DIGITAL: FAZENDO PARTE DESSA HISTÓRIA</h2>
</div>
<div class=imagem2>
<p class="texto"><a name="inclu">O sonho de mais de 2,1 mil mulheres começou a ganhar forma em março, quando a Prefeitura de Belo Horizonte, por meio da Prodabel voltou a oferecer o curso premiado internacionalmente ‘Programando Sonho Delas’.</a><br>
<a name="pioneira"> <strong>Bh, pioneira em inclusão digital</strong></a><br>
Com o curso, mulheres de todas as idades são certificadas para trabalhar com programação de computadores. As aulas acontecem nos períodos da manhã e da tarde na Unidade Ipiranga da Prodabel.
O programa ensina todas as fases da programação, desde como mexer no computador até desenvolver sistemas. A etapa final, que forma as programadoras, tem três meses de duração e 240 horas/aulas. As mulheres participantes recebem vale-transporte
e lanche durante as aulas.</p>
<a name="pic"> <img src="https://prefeitura.pbh.gov.br/sites/default/files/styles/slideshow/public/estrutura-de-governo/prodabel/IMG_1635.JPG?itok=3jDmtVcW"> </a>
<a href="https://prefeitura.pbh.gov.br/noticias/inclusao-e-oportunidade-para-mulheres-no-programando-sonho-delas"></a>
</div>
<div id="table th tr td">
<table>
<caption style="text-align:right">Mapa de inclusão digital</caption>
<thead>
<tr>
<th>CIDADE</th>
<th>UF</th>
<th>COMPUTADOR</th>
<th>POSIÇÃO</th>
<th>COMPUTADOR COM INTERNET</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" >Ranking comparativo com as principais cidades do Brasil</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Belo Horizonte</td>
<td> MG</td>
<td>6417</td>
<td>13</td>
<td>5869</td>
</tr>
<tr>
<td>são Caetano do Sul</td>
<td> SP</td>
<td>7605</td>
<td>1</td>
<td>7407</td>
</tr>
<tr>
<td>Florianópolis</td>
<td> SC</td>
<td>7447</td>
<td>2</td>
<td>7302</td>
</tr>
<tr>
<td>Vitória</td>
<td> ES</td>
<td>6841</td>
<td>3</td>
<td>7388</td>
</tr>
</tbody>
</table>
</div>
<hr>
<form action= "https://bootsnipp.com/user/snippets/4d62Q" method="get">
<fieldset>
<label><legend> Você está satisfeito com os serviços de inclusão digital da PBH?</legend>
<input type="radio" name="sats">SIM
<input type="radio" name="sats">NÃO
</label>
</fieldset>
<fieldset>
<p>Email <input type="email" name="email"></p>
</fieldset>
<fieldset>
<p>Sugestões:</p>
<textarea name="Sug" rows="1" cols="50"></textarea>
</fieldset>
<hr>
<fieldset>
<input type=submit value="enviar">
<input type=reset value="cancelar">
</fieldset>
</form>
</body>
</html>
img {
width:100%;
height:400px;
}
body {
background-color:rgb(207, 254, 207 );
margin:10px 20px 20px 20px;
}
#titulo {
background-color:rgb(05,190,0);
color:rgb(247,252,247);
text-align: center;
margin: 0;
font-size: 100%;
}
.prog{ font-size:20px;
color:#2c7a0d;
}
#h2 {
font-size:20px;
color: #2c7a0d;
font-family:"verdana,geneva,tahoma,sans-serif";
line-height: 2px;
text-align: center;
border: 2px solid #16f716;
}
.imagem2 img
{
float: left;
width: 50%;
border: 3px solid #008000;
margin: 0px 20px;
position:relative;
}
#table, th, tr, td
{
text-align:center;
border-width:2px;
border-style:solid;
border-color:#b33d99;
margin-left:100px;
width:500px;
height:30px;
position: relative;
top: 50%;
left: 50%;
}
caption { caption-side: top; }
.texto{
float: right;
width: 40%;
margin-left: 10px;
margin-bottom:300px;
font-size:20px;
color:#2c7a0d;
