Exercício 1
HTML
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Exercício 1</h1>
<p>Olá! Sou Joana Santos, desenvolvedora
Front-end com especialidade em React, HTML e
CSS. <strong class="texto-destaque"> Ajudo pequenos negócios e designers a
colocarem em prática boas ideias. </strong> Vamos
conversar?</p>
</body>
</html>
CSS
.texto-destaque {
color: violet
}
Exercício 2
HTML
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="título-principal">Exercício 1</h1>
<p>Olá! Sou Joana Santos, desenvolvedora
Front-end com especialidade em React, HTML e
CSS. <strong> Ajudo pequenos negócios e designers a
colocarem em prática boas ideias. </strong> Vamos
conversar?</p>
</body>
</html>
CSS
.título-principal {
color: rgb(59, 59, 208)
}
Exercício 3
HTML
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Notícia Urgente</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong class="urgente">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...". </strong> </p>
</body>
</html>
CSS
.urgente {
color: red;
}
Exercício 4
HTML
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Notícia Urgente</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong class="urgente">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...". </strong> </p>
</body>
</html>
CSS
.urgente {
color: red;
}
* {
margin: 0;
padding: 0;
}
Exercício 6
HTML
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Notícia Urgente</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong class="urgente">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...". </strong> </p>
<p class="botão1">Botão 1</p>
<p class="botão2">Botão 2</p>
</body>
</html>
CSS
.botão1:hover {
background-color: #0056b3;
}
.botão2:hover {
background-color: #0056b3;
}
