Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Humberto Wilson - Avaliação Prática"
Bootstrap 4.1.1 Snippet by
psd14t
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
727
 
0 Fav
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
Template
Now UI Dashboard PRO React
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76