"Humberto Wilson - Avaliação Prática"
Bootstrap 4.1.1 Snippet by psd14t

Post to Facebook Tweet this

<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> <title>Primeira Aula de Bootstrap - Prodabel</title> <!-- define a viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <!-- adicionar CSS Bootstrap --> <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- css personalizado --> <link href="bootstrap3/css/estilo.css" rel="stylesheet" media="screen"> <style> #inicio{ width="100%"; height="400"; } #title{ width:100%; } #subtitle{ text-align: center; font-size: 20px; font-family: Verdana, Geneva, Tahoma, Sans-Serif; color:#2c7a0d; padding:2px; border: solid, color:#16f716; } h2{ } h3{ } .indices{ width: 25%; width: 160px; text-align: center; position: absolute; padding-left: %; margin: 10px; margin-left: 20px; margin-right: 40px; margin-bottom: 400px; text-align: center; border-style: outset; border-color: #116611; color:white; background-color: #2D882D; font-size: 15px; } p{ font-family: "Comic Sans MS"; padding-left: 50px; padding-right: 50px; } #maininfo{ font-size: 20px; color: #2c7a0d; } .title{ text-align: center; font-family: "Comic Sans MS"; background-color: green; color: lightgreen; margin:0; } body{ font-family: "Comic Sans MS"; background: lightgreen; } table{ text-align: center; font-size: 15px; width: 500px; height: 30px; } #mapa{ color:grey; padding-left:20px; } tr, td, th{ background-color: lightgreen; border: 3px double #b33d99; padding-left: ; } #bh{ float: left; width: 50%; border-style: solid; border-width: 3px; border-color: green; margin: 0 20px; } h1{ color: green; } #bonus{ margin-left: 30px; margin-right: 30px; padding-right: 30px; padding-bottom: 30px; background: url(https://storage.needpix.com/rsynced_images/old-2228749_1280.jpg); } #textoabaixo{ font-size: 25px; color:grey; } form{ border: 3px; margin:10px; border-color: green; border-style:solid; padding: 10px; width:626px; color:white; background:url(https://image.freepik.com/vetores-gratis/plano-de-fundo-verde-abstrato-geometrico_23-2148359406.jpg); } </style> </head> <body> <img id="inicio" src="https://cdn.pixabay.com/photo/2020/03/06/11/09/digital-4906793_960_720.jpg" alt="Paisagem mista de campo com cidade" width="100%" height="400"> <div id="title"> <h1 class="title" >A HISTÓRIA DA INCLUSÃO</h1> </div> <div id="subtitle"> <h2>BH DIGITAL – FAZENDO PARTE DESSA HISTÓRIA</h2> </div> <a href="#wifi"><div class="indices">Wi-fi</div></a> <a href="#textoabaixo"><div class="indices" style="left: 20%">Texto interessante</div></a> <a href="#mapa"><div class="indices" style="left: 40%">Mapa</div></a> <a href="#pesquisa"><div class="indices" style="left: 60%">Pesquisa</div></a> <a href="https://prefeitura.pbh.gov.br/transparencia/duvidas-frequentes/pontos-de-acesso-livre-internet" target="_blank"><div class="indices" style="left: 80%">Site oficial</div></a> <br><br> <a href="http://maisdemildados.blogspot.com/2013/11/darksun-para-tormenta-rpg-racas.html"> <img id="bh" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Pra%C3%A7adaliberdade.JPG" alt="Thri-Krenn armando uma flecha"> </a> <div id="maininfo"> <h1 id="wifi">Wi-fi Gratuito</h1> <p> A PBH oferta acesso gratuito à internet em principais pontos da cidade, desde estações de ônibus até algumas das principais praças de Belo Horizonte. A rede wifi pode ser acessada por dispositivos móveis gratuitamente, necessitando apenas se cadastrar na rede da prefeitura, utilizando seu CPF. O acesso tem limite diário e pode ser suspenso ou limitado dependendo do uso do cidadão. </p> <p> Com o auxílio da Prodabel, a Prefeitura de Belo Horizonte reutiliza alguns computadores e os predispõe computadores para a utilização da comunidade, geralmente adquiridos de doações, são realizados upgrades nas maquinas e depois colocadas em pontos estratégicos à disposição de quem queira utilizá-los, geralmente utilizados para realização de trabalhos escolares. </p> </div> <div id="textoabaixo"> <p>Texto super interessante e informativo escrito aqui.</p> </div> <div id="mapa"> <h2 > MAPA DE INCLUSÃO DIGITAL </h2> <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>64,170</td> <td>13</td> <td>58,690</td> </tr> <tr> <td>São Caetano do Sul</td> <td>SP</td> <td>76,050</td> <td>1</td> <td>74,070</td> </tr> <tr> <td>Florianópolis</td> <td>SC</td> <td>74,470</td> <td>2</td> <td>72,030</td> </tr> <tr> <td>Vitória</td> <td>ES</td> <td>73,880</td> <td>3</td> <td>68,410</td> </tr> <TR> <td colspan ="5">RANKING COMPARATIVO DAS PRINCIPAIS CIDADES DO BRASIL</td> </TR> </tbody> </table> </div> <div id="pesquisa"> <form> VOCÊ ESTÁ SATISFEITO COM OS SERVIÇOS DE INCLUSÃO DIGITAL DA PBH?<BR> <input type="radio" name="Satisfeito?" id="SIM" value="SIM"><label for="SIM">SIM</label> <input type="radio" name="Satisfeito?" id="NAO" value="NAO"><label for="NAO">NÃO</label><br> E-MAIL: <input type="text" name="email"><br> SUGESTÕES:<br> <input type="text" name="sugestao" style="width:400px; height:60px"><br><br> <input type="submit" value="Enviar"> <input type="reset" value="Cancelar"> </form> </div> <br><br> <br> <a href="#inicio"><h2>Voltar ao topo da página</h2></a> <script src="bootstrap3/js/jquery-1.11.1.min.js"></script> <script src="bootstrap3/js/bootstrap.min.js"></script> <script src="bootstrap3/js/main.js"></script> </body> </html>

Related: See More

Rotating CSS Card

Questions / Comments: