Segue meu projeto com todas as atividades da lista de exercicios inclusas:
**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;
}