Mão na massa | HTML e CSS: Classes, posicionamento e Flexbox

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Significado das Cores da Flor de Lótus</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <main>
        <h1>Significado das Cores da Flor de Lótus</h1>
    <p>
        <ul>
            <li><strong class="lotus_azul">Lótus Azul:</strong>remete para o triunfo do espírito em relação aos sentidos, significa sabedoria e 
                conhecimento. Esta flor nunca revela o seu interior, porque está quase sempre totalmente fechada.</li>
            <li><strong class="lotus_branca">Lótus Branca:</strong> está relacionada com a perfeição do espírito e da mente, estado de pureza 
                total e natureza imaculada. Normalmente é representada com 8 pétalas.</li>
            <li><strong class="lotus_vermelha">Lótus Vermelha:</strong> revela a candura e natureza original do coração. Esta flor corresponde 
                às qualidades do coração, como o amor, paixão e compaixão. É também conhecida como a flor do Buda da Compaixão, Avalokitesvara.</li>
            <li><strong class="lotus_rosa">Lótus Rosa:</strong> apesar de muitas vezes ser confundida com a flor de lótus branca, a lótus 
                rosa é a mais importante e especial de todas as lótus, estando relacionada com personagens divinas, como o Grande Buda.</li>
        </ul>
    </p>
    <img src="images.jpeg" alt="flores de lotus"> 
    </main>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}

h1{
    text-align: center;
    margin: 10px;
    border: 2px ;
    padding: 5px;
}

body{
    background-color:#c0c0c0 ;
    color:#051923;
    font-size: 14px;
    line-height: 1.6em;
    margin: auto;
    width: 80%;
}

.lotus_vermelha{
    color:#a31621;
    font-family:"Times", Times New Roman, serif;
     
}

.lotus_azul{
      color:#118ab2;
      font-family:"Times New Roman", serif;
       
}

.lotus_branca{
      color:#fdffff;
      font-family:"Times New Roman", serif;
       
}


.lotus_rosa{
      color:#df7373;
      font-family:"Times New Roman", serif;
}

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

   li{
    padding: 5px;
   }

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Marcia, como vai?

Seu exercício está muito bem feito, você estruturou as classes para destacar cada tipo de flor de lótus de forma clara e harmoniosa. Gostei também da escolha das cores, que realmente dão sentido ao significado que você descreveu no texto.

Um ponto de atenção é que dentro do seu código você colocou a tag <ul> dentro de uma tag <p>. Isso não é considerado válido em HTML, já que uma lista não deve estar dentro de um parágrafo. A forma correta seria deixar apenas a <ul> sozinha, sem o <p> que a envolve. Assim:

<ul>
   <li><strong class="lotus_azul">Lótus Azul:</strong> remete para o triunfo...</li>
</ul>

Outra dica é no CSS: quando você define border: 2px; sem especificar o estilo (como solid, dashed, etc.), o navegador pode não renderizar a borda como esperado. Um exemplo funcional seria:

h1 {
   border: 2px solid #051923;
}

Parabéns pelo trabalho, e continue compartilhando suas práticas aqui no fórum, estamos à disposição para acompanhar sua evolução.

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