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

[Projeto] Lista de exercícios

Fiz algumas alterações. O HTML ficou assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilo.css">
    <title>Exercícios</title>
</head>
<body>
<header></header>
<main>
    <h1>Lorem Ipsum | <span class="destaque-titulo">All the facts</span></h1>
    <img class="logo" alt="Logotipo Lorem ispum estilizado" src="lorem_ipsum.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut purus mi. Donec eget tempus lectus, a convallis ipsum. Maecenas lobortis est ipsum, at mollis ex hendrerit ut. In sit amet aliquet arcu. Sed at arcu vehicula, accumsan erat sed, sodales elit. Vestibulum cursus efficitur consectetur. Vestibulum maximus mattis mauris, gravida luctus lacus. Quisque a viverra nunc. Curabitur posuere orci a sapien consectetur elementum. Pellentesque sed tellus laoreet, mollis ante vitae, elementum dui.</p>

    <p class="citacao">Ras enim ante, sodales id pretium in, faucibus sed turpis. Integer eu est ex. In vitae ullamcorper leo. Pellentesque eget bibendum nunc, eu faucibus ex. Suspendisse at laoreet quam. Integer venenatis vehicula dolor, posuere lacinia justo hendrerit in. Mauris non augue tincidunt mauris pretium rhoncus tempor at leo. Suspendisse potenti. Aenean rutrum, eros viverra mattis ullamcorper, mauris enim efficitur mi, nec pulvinar velit justo et est. Suspendisse molestie a lectus eu accumsan. Aliquam odio nisi, pretium vel velit id, tempor egestas eros.</p>
        
    <p>Generated 2 paragraphs, 155 words, 1050 bytes of <a target="_blank" rel="nofollow" href="https://www.lipsum.com/feed/html">Lorem Ipsum</a></p>
</main>
<footer></footer>
</body>
</html>

E o CSS assim:

* { 
    margin: 0; 
    padding: 0;
}

body {
    background-color: #D9C9BA;
    color: #261A13;
    font-family: "arial", sans-serif;
    font-size: 14px;
    line-height: 1.6em;
    margin: auto;
    width: 80%;
}

a {
    color: #261A13;
    font-weight: bold;
    text-decoration-color: #D92E1E;
    text-decoration-style: wavy;
}

h1 {
    color: #D92E1E;
    margin: 30px 0;
}

.destaque-titulo {
    color: #f5f5f5;
}

p {
    margin-bottom: 20px;
}

.citacao {
    background-color: #D92E1E;
    border: 1px solid #fff;
    color: #f5f5f5;
    padding: 10px;
}

Esse foi o resultado:

Print da tela com o projeto final da lista de exercícios

1 resposta
solução!

Oii Janaina,

Seu código HTML e CSS está bem estruturado e o resultado está ótimo. Gostei muito de como você usou a classe citacao para destacar uma seção do texto, o que melhora a legibilidade e a estética da página.

Continue com essa dedicação e empenho.

Abraços e bons estudos