Criei uma pagina com destaques a pontos importantes utilizando classes, assim como imagens. Abaixo o htlm
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Katioro's News</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
<header></header>
<main>
<h1>
Grande <span class="urgente">seca ameça</span> biomas no Brasil!
</h1>
<p>
A falta de chuvas prolongada já afeta diversos biomas brasileiros,
como o Cerrado e a Caatinga, colocando em risco a fauna e a flora
locais. Especialistas alertam para a possível perda de
biodiversidade, além do impacto severo no abastecimento de água de
grandes centros urbanos, caso a situação não melhore nos próximos
meses. A escassez hídrica não apenas ameaça o equilíbrio ecológico,
mas também compromete a sobrevivência de espécies endêmicas e a
manutenção dos serviços ambientais que essas regiões oferecem.
</p>
<p>
Além disso, a seca prolongada aumenta significativamente o risco de
queimadas descontroladas, que aceleram ainda mais a destruição dos
biomas e colocam em perigo as comunidades locais. A degradação do
solo, a perda de colheitas e o comprometimento de nascentes e rios
são consequências diretas dessa crise ambiental, prejudicando a
agricultura e o fornecimento de água em diversas regiões do país.
Esse cenário, se não revertido, pode ter impactos irreversíveis no
equilíbrio ambiental e socioeconômico do Brasil.
</p>
<img src="seca.png" alt="imagem de um solo arido" />
<h2>
<span class="urgente">Queimadas devastadoras</span> se espalham por
biomas brasileiros devido à seca e desmatamento desenfreado!
</h2>
<p class="urgente">
A seca prolongada e o desmatamento desenfreado alimentam queimadas
que devastam biomas como a Amazônia e o Pantanal. A fauna e a flora
estão em risco, e especialistas alertam que o impacto pode ser
irreversível se medidas não forem tomadas imediatamente."
</p>
<img src="fogo_cerrado.png" alt="imagem cerrado pegando fogo" />
</main>
<footer></footer>
</html>
CSS reset.css
* {
margin: 0;
padding: 0;
}
CSS style.css
body {
background-color: black;
color: rgb(236, 240, 225);
font-size: 15px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding: 10px;
margin: 10px;
margin-top: 5px;
}
h1 {
text-align: center;
}
p,
img {
margin: 10px;
border: 2px solid red;
padding: 5px;
}
.urgente {
color: rgb(255, 115, 0);
}
img {
border: 2px solid rgb(255, 115, 0);
border-radius: 20px;
}
