<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 ---------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<meta charset="utf-8">
<title>Olá Mundo!</title>
</head>
<body bgcolor="lightgreen">
<!--header-->
<div>
<header>
<a href="https://ibb.co/CMvzqWf"><img src="https://i.ibb.co/RBP917q/1.png" alt="1" border="2px" style="widt:100%; height: 400px">
<h2>A HISTÓRIA DA INCLUSÃO</h2>
</header>
</div>
<div id="subtítulo">
<h3>BH DIGITAL – FAZENDO PARTE DESSA HISTÓRIA</h3>
<ul>
<li><a href="https://www.w3schools.com/html/">Galeria de Fotos e Vídeos</a></li><br>
<li><a href="https://www.w3schools.com/html/">BH, pioneira em inclusão digital</a></li><br>
<li><a href="https://www.w3schools.com/html/">BH, atualmente na inclusão digital</a></li><br>
<li><a href="https://www.w3schools.com/html/">Mapa de inclusão digital</a></li><br>
<li><a href="https://www.w3schools.com/html/">Prêmio de inclusão digital</a></li><br>
</ul>
<hr>
</div>
<div>
<a id="img2" href="https://prefeitura.pbh.gov.br/prodabel/inclusao-digital"><img src="https://i.ibb.co/930hd6S/gery-wibowo-Eti6ph51-H4-A-unsplash.jpg" alt="gery-wibowo-Eti6ph51-H4-A-unsplash" border="2px" style="widt:100%; height: 400px; position: relative;"></a>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl odio, pretium eu eros sit amet, luctus consectetur lectus. Integer sit amet odio quis enim faucibus pharetra. Sed urna ligula, viverra at lobortis vel, viverra non tortor. Donec rutrum massa nec magna ultrices tempor. Etiam sit amet tellus sed elit commodo lacinia. Integer ac justo sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce volutpat ullamcorper sem in placerat.
Suspendisse potenti. Nulla viverra ante nisi, nec tempus nulla dignissim ac. Ut malesuada luctus posuere. Fusce ac tortor congue tortor malesuada rutrum. Mauris posuere metus ac tellus porttitor feugiat. Maecenas vulputate feugiat erat, non convallis ipsum varius et. Nullam elementum est urna, non ultrices tellus pretium non.
Curabitur rutrum est massa. Suspendisse posuere rutrum posuere. Integer auctor feugiat finibus. Ut eleifend sit amet augue vel convallis. Vivamus cursus, lorem eu euismod laoreet, nibh diam ullamcorper lorem, at feugiat quam diam vitae dui. Phasellus eget posuere nisl. Etiam sed urna enim. Suspendisse erat justo, finibus vel laoreet pulvinar, tempus eu diam. Vestibulum sed metus varius, eleifend magna eget, mattis elit.</h4>
</div>
</body>
</html>
body {
background:#32cd99;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
}
#img2 {
border-image:#32cd99;
padding: 70px;
width: 100%;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background:#32cd99;
padding: 200px;
font-size: 20px;
color: #ffffff;
}
#subtítulo {
color: #ffffff;
text-align:center;
height: 600px
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-style: solid;
}
h2 {
color: #ffffff;
background: #2c7a0d;
}
h3 {
color: #2c7a0d;
}
h4{
position: absolute;
right: 0px;
width: 900px;
border: 3px solid #73AD21;
padding: 50px;
text-align:justify;
top: 350%;
}
li{
right: 100px;
position: center;
}
