"Thais Oliveira - Avaliação Prática 1"
Bootstrap 4.1.1 Snippet by psd14t

<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> A História da Inclusão Digital de BH </title> <link rel="stylesheet" type=text/css href="estilo.css"> </head> <body> <div class="container"> <!--A página terá o fundo com a cor verde clara.--> <div id=banner> <!--1ª <div> -Banner Topo: 400px;100%--> <img src="https://i.pinimg.com/originals/4d/20/7e/4d207e61fa704e7ef094fbb6b0fffdb5.png" width=100% height=400px alt="banner topo"/> </div> <div id=titulo> <!--1ª camada <div> para o título de apresentação--> <h1>A História da Inclusão Digital de BH </h1> </div> <div id="tema"> <!--2ª camada <div> para o subtítulo de apresentação--> <h2> Minha História Dentro da Inclusão Digital</h2> </div> <ul> <li> <a href="https://prefeitura.pbh.gov.br/prodabel/inclusao-digital">Galeria de Fotos e Vídeos</a> </li> <li> <a href=" ">BH, Pioneira em Inclusão Digital</a> </li> <li> <a href=" ">BH atualmente na inclusão digital</a> </li> <li> <a href=" ">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">Prêmio Inclusão Digital PBH</a> </li> </ul> <div id=imagem-link> <!--3ª camada <div> para o texto que fica ao lado esquerdo da segunda ilustração,Fonte 20px Cor #2c7a0d;--> <!--2ª Imagem: borda 3px sólido de cor verde Posicionar na tela à esquerda, Largura 50%, Margem 0 20px. --> <img src="https://cdn-images-1.medium.com/max/800/1*KFBDttMDWN_MktzeztWG-A.jpeg" alt="meme front end"> </div> <div id="primeiro-texto"> <p>Inclusão digital é o processo de democratização do acesso às tecnologias da Informação, de modo a permitir a inserção de todos na sociedade da informação. Inclusão digital é também uma forma de simplificar a sua rotina diária, maximizar o tempo e as suas potencialidades.</p> </div> <div id=texto-abaixo> <!-- 4ª camada <div> para o texto abaixo da segunda ilustração.fonte 25 px,Cor cinza--> <p> Inclusão digital é o processo de democratização do acesso às tecnologias da Informação, de modo a permitir a inserção de todos na sociedade da informação. Inclusão digital é também uma forma de simplificar a sua rotina diária, maximizar o tempo e as suas potencialidades.</p> </div> <h5> Registro de Tempo em Avaliação</h5> <!-- Para a tabela (table, td, th, tbody): borda sólida 2px cor #b33d99 Espaçamento 5 px Alinhamento do texto centralizado Largura 500px Altura 30px--> <table border > <thead> <tr> <th>Dias</th> <th>Horas</th> <th>Observação</th> </tr> </thead> <tbody> <tr> <td>Sexta</td> <td>4h</td> <td>Fiquei ansiosa com a prova</td> </tr> <tr> <td>Sábado</td> <td>8h</td> <td>Refiz tres vezes a avaliação e não achava o erro pra continuar</td> </tr> <tr> <td>Domingo</td> <td>10h</td> <td>Achei o erro</td> </tr></tbody> </table> </div> </body> </html>
.container{ width: 960px; margin:auto; background:#90ee90 ; box-sizing: border-box; } #titulo { color: white; background-color: green; text-align: center; margin: 0px; font-size: 100%; } #tema { color: #2c7a0d; font-size: 20px; text-align: center; font-family: verdana, geneva, tahoma, sans-serif; letter-spacing: 2px; border-style:solid; border-color:#16f716; } #imagem-link { float: left; width:50%; margin: 0px 20px; border:3px solid; border-color: green; } #primeiro-texto { color: #2c7a0d; font-size: 20px; } #texto-abaixo { color: grey; font-size: 25px; } table { width:500px; height:30px; border:2px solid; text-align:center; border-color:#b33d99; padding:5px; }

Related: See More


Questions / Comments: