<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="en">
<title>A HISTORIA DA INCLUSÃO DIGITAL DE BH</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
<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>
awesome.min.css">
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">INICIO</a>
<a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">INCLUSÃO DIGITAL</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PROJETOS</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">MAPA DA INCLUSÃO</a>
<a href="#atual" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ATUALIDADES</a>
<a href="#contato" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTATO</a>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<a href="#" class="w3-bar-item w3-button w3-padding-large">INICIO</a>
<a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">INCLUSÃO DIGITAL</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PROJETOS</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PREMIOS</a>
<a href="#mapa" class="w3-bar-item w3-button w3-padding-large w3-hide-small">MAPA DA INCLUSÃO</a>
<a href="#atual" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ATUALIDADES</a>
<a href="#contato" class="w3-bar-item w3-button w3-padding-large w3-hide-small">Contato</a>
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<!-- Automatic Slideshow Images -->
<div class="mySlides w3-display-container w3-center">
<img src="https://assets.izap.com.br/cdlfm.com.br/uploads/noticias/cache/800-600-resize/hot.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
</div>
</div>
<div class="mySlides w3-display-container w3-center">
<img src="https://live.staticflickr.com/2856/9451979717_2380dc17e1_b.jpg" style="width:100%">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
</div>
</div>
<div class="mySlides w3-display-container w3-center">
<img src="https://s2.glbimg.com/6oYXNhZ-TkLOQpWs_shMc6ZnZ9g=/0x0:1400x739/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/I/g/n2CCDpSr2qAApEpulF6g/download-1-.jfif" style="width:100%">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
</div>
</div>
<!-- The Band Section -->
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
<h2 class="w3-wide">A HISTORIA DA INCLUSÃO DIGITAL DE BH</h2>
<p class="w3-opacity"><i></i></p>
<p class="w3-justify"><p>A história de Belo Horizonte relaciona-se com o BH Digital que foi criado em 2005 pela prefeitura de Belo Horizonte, o BH Digital é um trabalho inpirado no programa de inclusão digital do Governo Federal. Trata-se de uma iniciativa inédita do País.
O BH Digital que tem como objetivo a implantação de espaços públicos e gratuitos para assegurar a inclusão digital dos cidadões de Belo Horizonte. Nele, a tecnologia digital é utilizada intensamente para ampliar a cidadania, garantindo a inserção de comunidades no mundial digital, contribuindo, assim, para o fortalecimento e desenvolvimento social.</p>
</div>
<!-- The Tour Section -->
<div class="w3-black" id="tour">
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
<h2 class="w3-wide w3-center">BH ATUALMENTE NA INCLUSÃO DIGITAL</h2>
<div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
<div class="w3-third w3-margin-bottom">
<img src="https://prefeitura.pbh.gov.br/sites/default/files/styles/slideshow/public/estrutura-de-governo/prodabel/2019/Prodabel%20projeto%20gentileza%20digital%20idosos.jpg?itok=xkcvDCbg" alt="New York" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Inclusão digital de idosos</b></p>
<p class="w3-opacity">25 de Maio de 2020</p>
<p>Os idosos frequentadores de quatro centros culturais de Belo Horizonte terão, a partir deste mês, acesso a aulas de informática básica dentro do projeto Gentileza Digital..</p>
<button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Saiba Mais!</button>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<img src="https://bhaz.com.br/wp-content/uploads/2020/01/mulheres-curso.jpg" alt="Paris" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Projeto Programando Sonhos Delas</b></p>
<p class="w3-opacity">25 de Maio de 2020</p>
<p>iniciativa premiada nacional e internacionalmente, voltada para a qualificação para o mercado de Tecnologia da Informação..</p>
<button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Saiba Mais</button>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<img src="https://4.bp.blogspot.com/-x4qiPFl8UH8/WkPlPqSGRgI/AAAAAAAAFvk/4w6RZUsEbrYCb3jnhUlr_lI0HKRI90fegCLcBGAs/s640/Prodabel%2Binclus%25C3%25A3o%2Bdigital%2Bfoto%2Bdivulgacao%2Bpbh.jpg" alt="San Francisco" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Prodabel promove inclusão digital e social em 2017</b></p>
<p class="w3-opacity"> 25 de Maio de 2020</p>
<p>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 201</p>
<button class="w3-button w3-black w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">Saiba Mais</button>
</div>
</div>
</div>
</div>
</div>
<!-- Ticket Modal -->
<div id="ticketModal" class="w3-modal">
<div class="w3-modal-content w3-animate-top w3-card-4">
<header class="w3-container w3-teal w3-center w3-padding-32">
<span onclick="document.getElementById('ticketModal').style.display='none'"
class="w3-button w3-teal w3-xlarge w3-display-topright">×</span>
<h2 class="w3-wide">Deseja receber novidades sobre os projetos da PBH?</h2>
</header>
<div class="w3-container">
<p><label> Seu Nome</label></p>
<input class="w3-input w3-border" type="text" placeholder="Nome Completo">
<p><label> Qual seu e-mail?</label></p>
<input class="w3-input w3-border" type="text" placeholder="Seu e-mail">
<button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-right">CADASTRAR <i class="fa fa-check"></i></button>
<button class="w3-button w3-red w3-section" onclick="document.getElementById('ticketModal').style.display='none'">Fechar <i class="fa fa-remove"></i></button>
<p class="w3-right">Need <a href="#" class="w3-text-blue">help?</a></p>
</div>
</div>
</div>
<!-- atual -->
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="atual">
<h2 class="w3-wide">BH ATUALMENTE NA INCLUSÃO DIGITAL</h2>
<p class="w3-opacity"><i></i></p>
<p class="w3-justify"><p>A WNI está fornecendo à Belo Horizonte uma tecnologia de ponta, similar à já implantada na cidade de Temp, no Arizona, Estados Unidos, e a mesma que será utilizada em Pequim para a realização dos Jogos Olímpicos 2008. O projeto é coordenado pela Prefeitura, por meio da Prodabel, e financiado pelo Ministério das Comunicações.</p>
<p>A cidade já conta com três áreas de acesso livre à internet operacionalizadas pela Prefeitura, nos chamados HotSpots. A conexão sem fio pode ser feita no prédio-sede da Prefeitura, na Prodabel e no terminal rodoviário. Nesses locais, as pessoas que possuírem um notebook ou um computador de mão, com placa de rede sem fio, ou com celular WiFi, poderão acessar a internet gratuitamente.</p>
<p>O cidadão pode acessar o portal da Prefeitura por tempo indeterminado e as outras páginas da internet com limite diário de horas, depois do preenchimento de um cadastro na página do HotSpot da Prefeitura, com registro de nome de usuário e senha.<p>
<p><b>fonte:https://mercociudades.org/belo-horizonte-pioneira-em-projeto-de-inclusao-digital</b><p>
</div>
<!-- The Contact Section -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
<h2 class="w3-wide w3-center">MAPA DA INCLUSÃO</h2>
<table>
<tr>
<th>CIDADE</th>
<th>UF</th>
<th>COMPUTADOR</th>
<th>POSIÇÃO</th>
<th>COMPUTADOR COM INTERNET</th>
</tr>
<tr>
<td>Belo Horizonte</td>
<td>MG</td>
<td>64.17</td>
<td>13</td>
<td>58.69</td>
</tr>
<tr>
<td>São Caetano do Sul</td>
<td>SP</td>
<td>76.05</td>
<td>1</td>
<td>74.07</td>
</tr>
<tr>
<td>Florianópolis</td>
<td>SC</td>
<td>74.47</td>
<td>2</td>
<td>72.03</td>
</tr>
<tr>
<td>Vitória</td>
<td>ES</td>
<td>68.41</td>
<td>3</td>
<td>73.88</td>
</tr>
<tr>
<TD COLSPAN="5"><B>RANKING COMPARATIVO COM AS PRINCIPAIS CIDADES DO BRASIL</B></TD>
</tr>
</table>
<!-- End Page Content -->
</div>
<!-- Image of location/map -->
<img src="https://live.staticflickr.com/5065/5670226459_87eb3837d6_b.jpg" class="w3-image w3-greyscale-min" style="width:100%">
<!-- contato -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contato">
<h2 class="w3-wide w3-center">VOCÊ ESTÁ SATISFEITO COM OS SERVIÇOS DE INCLUSÃO DIGITAL DA PBH ?</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="opcao1" checked>
<label class="form-check-label" for="exampleRadios1">
Sim
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="opcao2">
<label class="form-check-label" for="exampleRadios2">
Não
</label>
</div>
<form>
<div class="form-group">
<label for="formGroupExampleInput">Deixe sua sugestão:</label>
</div>
<div>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Escreva aqui">
</div>
<div>
<button type="button" class="btn btn-success">Enviar</button>
<button type="button" class="btn btn-default">Cancelar</button>
</div>
<button class="open-button" onclick="openForm()">Chat</button>
<div class="chat-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>FALE COM A PBH</h1>
<label for="msg"><b>Mensagem</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Enviar</button>
<button type="button" class="btn cancel" onclick="closeForm()">Cancelar</button>
</form>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
<p class="w3-medium">por: Fernanda Rodrigues <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">25 de Maio de 2020</a></p>
</footer>
<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000);
}
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
body {
font-family: "Lato", sans-serif;
background-color: #98FB98;
}
.mySlides {display: none}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 2px solid #dddddd;
text-align: center;
padding: 10px;
background-color: #FFD700;
}
tr:nth-child(even) {
background-color:#4682B4;
;
}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: red;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}
/* When the textarea gets focus, do something */
.form-container textarea:focus {
background-color: red;
outline: none;
}
/* Set a style for the submit/send button */
.form-container .btn {
background-color: green;
color: green;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
<script>
// Automatic Slideshow - change image every 4 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 4000);
}
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// When the user clicks anywhere outside of the modal, close it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
