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 class="apresentacao">
<div class="conteudo">
<div class="texto">
<h1> Isabel Trindade Araújo </h1>
<h2>Estudante de <strong class="titulo-blog">Desenvolvimento Front-end</strong></h2>
<h3><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>
</div>
<div class="imagem">
<img src="imagemisabel.jpeg" alt="minha" class="imagem-circular">
</div>
</div>
<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:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilo do body */
body {
box-sizing: border-box;
background-color: #F5F5F5;
height: 100%;
margin: 0;
overflow: hidden;
}
/* Estilo do h1 */
h1 {
font-weight: bold;
color: #FFB6C1;
text-align: center;
margin: 30px 0;
}
/* Estilo do h2 */
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;
}
/* Estilo de h3 */
h3 {
color:#616161 ;
}
/* Estilo de p */
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;
}
.imagem-circular {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.apresentacao {
display: flex;
flex-wrap: wrap; /* Permite que o conteúdo se ajuste em telas menores */
justify-content: center;
padding: 20px;
}
.conteudo {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
flex-wrap: wrap; /* Permite que os itens se ajustem */
}
.texto {
flex: 1;
margin-right: 10px;
text-align: center;
padding: 20px;
}
.imagem {
flex-shrink: 0;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
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;
}
@media (max-width: 768px) {
.conteudo {
flex-direction: column; /* Em telas menores, os elementos ficam em coluna */
align-items: center; /* Centraliza os itens */
}
.texto {
margin-right: 0;
margin-bottom: 20px;
text-align: center;
}
.imagem {
margin-top: 20px;
}
.imagem-circular {
width: 120px;
height: 120px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
.texto {
font-size: 0.9em;
}
.imagem-circular {
width: 100px;
height: 100px;
}
}
