1
resposta

Lista de exercícios - HTML e CSS: Classes, posicionamento e Flexbox HTML e CSS: Classes, posicionamento e Flexbox

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iron Maiden</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <H1 class="titulo-blog">Iron Maiden - A história por tras da lenda!</H1>
    <H2 class="titulo-blog2">Iron Maiden - Uma carreira de sucesso</H2>
    <p class="texto-destaque">Em 1980,<strong class="urgente"> o Iron Maiden</strong> já havia conquistado uma reputação de ferro fundido por shows ferozes ao vivo e uma legião de fãs ferozmente leais. Inspirado pelo heavy rock e temperado pelo calor da crescente New Wave of British Heavy Metal, a ascensão deles culminou em uma estreia de álbum autointitulada que imediatamente os elevou acima de seus pares e serviu como prólogo para uma história verdadeiramente notável que capturou a imaginação dos amantes da música de todos os países, cores e credos. Estampado com a imagem totêmica de <strong class="urgente">Eddie</strong>, uma figura macabra, mas inegavelmente bonita e misteriosa, cuja imagem tentadora continuaria a aparecer em todos os álbuns e inúmeras camisetas, portanto, não foi nada menos do que uma declaração de intenção inovadora. Muitos outros se seguiriam. A resposta entusiasmada ao álbum seguinte, Killers, de 1981, confirmaria a crescente suspeita de que esta era uma banda única, e as turnês subsequentes pelo Japão e Estados Unidos, bem como pelo Reino Unido e Europa, reafirmariam tanto o apelo internacional do Maiden quanto seu compromisso implacável de alcançar os fãs onde quer que eles estivessem.</p>
    <img src="ironmaiden.jpg" alt="Foto Iron Maiden">
    <H3 class="titulo-blog">Discografia - Albuns de Estudio</H3>
    <ul class="texto-destaque">
        <li>Iron Maiden - 1980</li>
        <li>Killers - 1981</li>
        <li>The Number of the Beast - 1982</li>
        <li>Piece of Mind - 1983</li>
        <li>Powerslave - 1984</li>
        <li>Somewhere in Time - 1986</li>
        <li>Seventh Son of a Seventh Son - 1988 </li>
        <li>No Prayer for the Dying - 1990</li>
        <li>Fear of the Dark - 1992</li>
        <li>The X Factor - 1995</li>
        <li>Virtual XI - 1998</li>
        <li>Brave New World - 2000</li>
        <li>Dance of the Death - 2003</li>
        <li>A Matter of life and Death - 2006</li>
        <li>The Final Frontier - 2010</li>
        <li>The Book of Souls - 2015</li>
        <li>Senjutsu - 2021</li>
    </ul>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;    
  }
  
.texto-destaque {
    color: white;
}

.titulo-blog {
    color: red;
}

.titulo-blog2 {
    color: #007BFF;
}

.urgente {
    color: red;
}

p {
    margin: 10px;
    border: 2px solid white;
    padding: 5px;
}

/*margin (Margem): A parte mais interna da caixa, é um espaçamento tanto superior e inferior como lateral também;
  border (Borda): O perímetro da caixa. As bordas podem ser invisíveis ou podem ser uma linha colorida.
  padding (Preenchimento): O espaço interno entre o conteúdo e a borda da sua caixa.
  content (Conteúdo): A parte mais interna da caixa. O conteúdo pode ser uma imagem, texto, cabeçalho ou qualquer outra coisa.*/
1 resposta

Olá, Fabio, como vai?

Seu exercício está muito bem estruturado e demonstra um bom entendimento dos conceitos de HTML e CSS, especialmente no uso de classes, posicionamento e Flexbox. Vou destacar alguns pontos positivos e dar algumas dicas para aprimorar ainda mais o seu código.

No HTML, você utilizou corretamente as classes "texto-destaque", "titulo-blog", "titulo-blog2" e "urgente" para estilizar os elementos conforme solicitado. A aplicação da classe "urgente" dentro de um elemento <strong> para destacar partes do texto foi uma boa escolha, pois reforça a importância do conteúdo.

No CSS, você fez um bom uso do reset CSS com o seletor universal *, zerando as margens e os paddings, o que é uma prática recomendada para evitar inconsistências entre navegadores. Além disso, a estilização das classes está clara e funcional, com cores bem escolhidas para destacar os títulos e o texto.

Um sugestão de melhoria é que as tags H1, H2 e H3 foram escritos em caixa alta no HTML. Embora não cause problemas no funcionamento, a convenção é utilizar letras minúsculas (h1, h2, h3) para manter um código mais padronizado e legível.

No mais, o trabalho está bem feito. Se precisar de mais alguma orientação, o fórum está à disposição.

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