index.html
</html>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notícias Urgentes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Notícias Urgentes !!!</header>
<main>
<h1><strong class ="titulo-blog"> Ok OK! Notícias Urgentes !!! </h1>
<h2><strong class = "subtitulo-blog">Aqui você fica atualizado com as notícias que acontecem no País e no Mundo em Primeira Mão !!!</strong></h2>
<h3><strong class = "notícia-urgente">Vulcão na Guatemala entra em erupção;</strong></h3>
<h4><strong class = "notícia-urgente2">Moradores foram obrigados a deixarem as casas por conta da lava.</strong></h4>
<img src="VULCAO_GUATEMALA.jpg" alt="foto do vulcao da Guatemala em erupção">
<p><strong class = "urgente">Imagens de testemunhas mostraram a erupção mais recente do Vulcão de Fogo, localizado na região sudoeste da Guatemala na segunda-feira (10). Lava e cinzas expelidas levaram moradores a deixarem as casas.
A Reuters conseguiu verificar a data e o local do vídeo por meio dos metadados do arquivo original.
Na quarta-feira (12), o Instituto Nacional de Sismologia, Vulcanologia, Meteorologia e Hidrologia da Guatemala relatou que o vulcão havia concluído a fase eruptiva e retomado a sua atividade típica.
Isso permitiu uma visão clara da cratera, que estava emitindo uma coluna de gases magmáticos de cerca de 100 metros de altura.
No entanto, o instituto não descartou o potencial de explosões fracas a moderadas ocorrendo ao longo do dia.</strong></p>
</main>
<footer>
</footer>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
color: #08d3ae;
}
header {
background-color: #000000;
color: #08d3ae;
padding: 1%;
text-align: center;
}
h1 {
font-size: 2em;
line-height: 1.5em;
text-align: center;
}
h2 {
font-size: 1.5em;
line-height: 1.5em;
}
h3 {
font-size: 1.3em;
line-height: 1.5em;
padding: auto;
content: auto;
}
img {
display: block;
margin: auto;
width: 65%;
padding: 2%;
}
p {
font-size: 1.2em;
line-height: 1.5em;
padding: 1%;
text-align: justify;
width: 65%;
margin: auto;
}
/* Alterando a cor do titulo com a classe .titulo-blog */
.titulo-blog {
color: yellowgreen;
text-align: center;
}
.subtitulo-blog {
color: #08d3ae;
margin: auto;
}
/* Alterando a cor do texto com a classe .texto-destaque */
.texto-destaque {
color: #FF5733;
margin: auto;
}
.urgente {
color: white;
padding: 2%;
margin: auto;
border-radius: 20%;
text-align: center;
}
.notícia-urgente {
color: red;
padding: auto;
}
.notícia-urgente2 {
color: red;
padding: auto;
}