Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Lista de Exercícios

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;
}
1 resposta
solução!

Olá Richard, como vai?

No geral, o código está bem estruturado e você seguiu as instruções corretamente. No entanto, há alguns pontos que podem ser ajustados para melhorar a organização e a semântica do código.

  • No arquivo HTML, você utilizou a tag <strong> dentro dos títulos e parágrafos. A tag <strong> é usada para dar ênfase ao texto, mas no seu caso, como você já está aplicando classes CSS para estilizar o texto, o uso do <strong> pode ser dispensado, a menos que você queira realmente dar um peso semântico de importância ao texto.
  • No CSS, você criou classes como .notícia-urgente e .notícia-urgente2. Seria mais eficiente usar uma única classe para notícias urgentes, como .urgente, e aplicá-la tanto aos títulos quanto aos parágrafos que precisam desse destaque. Isso evitaria a repetição de código e facilitaria a manutenção.
  • No CSS, você definiu content: auto; para os elementos h3. A propriedade content é usada principalmente com pseudo-elementos (::before e ::after). Para centralizar o texto, você pode usar text-align: center;

No mais, o exercício está muito bom e demonstra que você está no caminho certo para dominar HTML e CSS. Continue praticando e compartilhando seus códigos conosco. O fórum está à disposição para qualquer dúvida que surgir.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!