Adaptativo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exemplo de código HTML adaptativo</title>
<style>
body {
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
background-color: #f2f2f2;
border: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}

nav a {

color: #333;

padding: 10px;

text-decoration: none;

transition: background-color 0.3s ease;

}



nav a:hover {

background-color: #333;

color: #fff;

}



.main {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

margin: 20px;

}



.main div {

flex-basis: calc(50% - 10px);

margin-bottom: 20px;

padding: 10px;

}



@media screen and (max-width: 768px) {

.main div {

flex-basis: 100%;

}

}

</style>

</head>

<body>

<header>

<h1>Exemplo de código HTML adaptativo</h1>

</header>

<nav>

<a href="#">Início</a>

<a href="#">Sobre</a>

<a href="#">Contato</a>

</nav>

<div class="main">

<div>

<h2>Artigo 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 3</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

<div>

<h2>Artigo 4</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p>

</div>

</div>



</body>

</html>