1
resposta

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

Segue meu projeto com todas as atividades da lista de exercicios inclusas:

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

**HTML:**
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <header></header>
    <main>
        <h1> Isabel Trindade Araújo <strong> </strong></h1>
        <h2>
            <h1>Estudante de <strong class="titulo-blog">Desenvolvimento Front-end</strong></h1>            <strong>Sobre Mim:</strong>
          </h3>
          <p>Olá, sou estudante apaixonada por desenvolvimento front-end,com foco em <strong class="texto-destaque"> REACT, HTML e CSS</strong>. Busco criar interfaces web modernas, responsivas e intuitivas, sempre focando em uma experiência de usuário de alta qualidade. Atualmente, estou participando do ONE - Oracle Next Education, onde estou aprimorando meus conhecimentos em tecnologias e práticas de desenvolvimento de software. Estou empolgada para aplicar tudo o que aprendi em projetos desafiadores e inovadores.</p>
          <a href = "https://www.instagram.com/isabeltr_"> Instagram </a>
        <a href = "https://github.com/IsabelTr"> GitHub </a>
        <img src="imagemisabel.jpeg" alt="minha" class="imagem-circular">
        <h4><strong class="manchete-urgente">URGENTE:</strong> Incêndio Devastador Atinge a Floresta Amazônica</h4>
        <p>A Amazônia enfrenta uma catástrofe ambiental após um grande incêndio atingir uma das maiores áreas de floresta tropical do mundo. As autoridades já estão enviando equipes de resgate e brigadas para tentar conter o fogo, mas os danos são imensuráveis. </p>
    </main>
    <footer></footer>
</body>
</html>
**CSS:**
body {

    background-color: #F5F5F5;
}

h1 {
    font-weight: bold;
    color: #FFB6C1; 
    text-align: center;
    margin: 30px 0; 
}

h2 {
    color:#8BE9FD ; 
    margin: 30px 0; 
    font-size: 24px; 
    text-align: center; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
}
.titulo-blog {
    color:#FF79C6;
    font-weight: bolder;
}

h3 {
    color:#616161 ;
}
p{
    color:#B5B5B5;
}
.texto-destaque {
    color: #FF79C6; 
    font-weight: bold; 
    background-color: white; 
    padding: 0 5px;
    border-radius: 5px; 
}

.manchete-urgente {
    color: #ff0000; 
    font-weight: bold; 
    font-size: 1.5em; 
    text-transform: uppercase;
    margin-right: 10px;
}
p1 {
    color: brown;
} 
.imagem-circular {
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    position: absolute;
    top: 100px; 
    left: 390px; 
    
    transform: translate(-50%, -50%); 

a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px; 
    color: white; 
    background-color: #0077b5; 
    text-decoration: none;
    border-radius: 5px; 
    transition: background-color 0.3s; 
    
}

a:hover {
    background-color: #005582; 
}
1 resposta

Olá, Isabel, como vai?

Seu código está bem estruturado e já atende aos requisitos do exercício. Há apenas alguns pontos que podem ser ajustados:

No HTML, há uma aninhamento incorreto de títulos. Um <h2> foi aberto, mas dentro dele há um <h1>, o que não é válido. O ideal é manter a hierarquia correta dos títulos. Além disso ele foi fechado como <h3>.

Seu trabalho está bem encaminhado. Continue explorando as possibilidades do CSS e qualquer dúvida, o fórum está à disposição.

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