<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Exercícios</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="bloco1">
<div class="secao section1">
<h1>1- Estilizando elementos com classes CSS</h1>
<p class="texto-destaque">Texto destaque - p</p>
</div>
<div class="secao section2">
<h1>2 - Destacando títulos com CSS</h1>
<h2>Título - h2</h2>
</div>
<div class="secao section3">
<h1>3 - Estilos situacionais com classes CSS</h1>
<div>
<h2 class="urgente-h2">Papa Francisco sofreu dois episódios de insuficiência respiratória aguda, diz Vaticano</h2>
<p class="urgente">
Segundo o boletim, Francisco precisou de precisou de equipamentos para ajudar na respiração, mas sem necessidade de passar por uma intubação. Pontífice voltou a ter broncoespasmo, condição que apresentou na sexta-feira (28).
</p>
<a href="https://g1.globo.com/mundo/noticia/2025/03/03/papa-francisco-boletim.ghtml" target="_blank"><i>notícias google</i></a>
</div>
</div>
<div class="secao section4">
<h1>4 - Entendendo e aplicando o reset CSS</h1>
<p>Reset elaborado</p>
</div>
</section><!--FIM BLOCO 1-->
<section id="bloco2">
<div class="secao section5">
<h1>5 - Inspecionando elementos e entendimento do modelo de caixa</h1>
<div id="container-div">
<div class="section5-margin"><p class="p-margin">margin</p>
<div class="section5-border"><p class="p-border">border</p>
<div class="section5-padding"><p class="p-padding">padding</p>
<div class="section5-conteudo">
<h3>conteúdo</h3></div>
</div>
</div>
</div>
</div>
<div class="div-texto">
<p class="texto-modelo_caixa">
A propriedade margin define o espaço fora do elemento, criando distância entre ele e outros elementos. A border é a borda ao redor do elemento, podendo ter cor e espessura. O padding cria o espaço interno entre o conteúdo do elemento e sua borda. O conteúdo refere-se ao que está dentro do elemento, como texto ou imagens. Cada uma dessas propriedades afeta a posição, o tamanho e o layout do elemento na página.
</p>
</div>
</div> <!--FIM CONTAINER-DIV-->
<div class="secao section6">
<h1>6 - Aplicando o modelo de caixa na prática</h1>
<div class="container_p-lorem">
<p class="p-lorem">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae sit temporibus, cupiditate in molestiae tenetur ut tempore magni perspiciatis earum quas soluta saepe pariatur debitis, odio quia nobis quam. Minima.</p>
</div>
</div>
</section><!--FIM BLOCO 2-->
</body>
</html>
