Boa noite, tudo bem? Poderia verificar se estou no caminho correto , sobre Flexbox? acho que está faltando algo. Agradeço!
<!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>Meu Portfólio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Meu Projeto!</h1>
</header>
<main>
<section class="apresentacao_conteudo">
<ul>
<li><a href ="#"><strong class="introducao">Quem sou eu?</strong></a></li>
<p>Olá sou Andréia Pedrosa, tenho 33 anos moro em Matão/São Paulo,através da minha última formação onde estudei alguns pontos sobre HTML/CSS, despertou meu interesse em aprender mais e assim me tornar uma grande <strong class="titulo-destaque"> "Desenvolvedora- Front-End".</strong></p>
<img src="foto.jpeg" alt="Foto da Andréia Pedrosa Sorrindo">
<li> <a href="#"><strong> Formação:</strong></a></li>
<div class="lista">
<li> Tecnologia em Gestão de Recursos Humanos;</li>
<li> Bacharel em Administração;</li>
<li> Tecnologia em Análise de Processos Agroindustriais (Recentimente Formada: 2023).</li>
</div>
<li> <a href="#"><strong> O que estou buscando!</strong></a></li>
<p> Atualmente fiz minha matrícula na Alura com o objetivo de me especializar em "Front-End", <strong> Onde nesse momento estou em busca de uma oportunidade!</strong> </p>
</ul>
</section>
</main>
<footer>
<p><span>CONTATO</span></p>
<p> E-mail:andréiapedrosa91@hotmail.com/Telefone(16) 99900-8957</p>
<div class="button">
<button><a class="button_1" href="https://instagram.com/_andreiapedrosa"> Instagram</a></button>
<button><a class="button_1" href="https://Github.com/pedrosa24">GitHub</a></button>
</div>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{ /*resset limpa todos os padrões dos navegadores*/
margin: 0;
padding: 0;
}
body {
background-color: beige; /* Nesse Caso pegou o corpo do nosso site , cor de fundo*/
height: 100vh;/* altura da pagina*/
box-sizing: border-box;/* comando para que nada saia do elemento pai.organização*/
}
h1{
color: blueviolet;
text-align: center;
text-shadow: 2px 2px 5px blueviolet;
font-family:"Roboto", sans-serif;
}
.introducao{
font-size: larger;
}
.apresentacao__conteudo{
width: 600px; /*largura*/
display: flex;
flex-direction: column;
gap: 40px;
}
.button{
display: flex;
justify-content: space-between;
}
.button_1{
background-color: 22d4gd;
width: 280px;
text-align: center;
font-size: 24px;
text-decoration: none;
color: black;
}
p {
margin-top:20px; /* define a margem superior;*/
margin-bottom: 50px; /* define a margem inferior */
margin-right: 50px; /* define a margem direita*/
margin-left: 50px; /* define a margem esquerda*/
}
.titulo-destaque{ /* Class atributo.*/
color: #0000FF;
}
span{
color: #FF0000 ;
}
main{
color: black;
letter-spacing: 1px;
line-height: 1.8;/*espaçamento entre linhas*/
image-rendering: auto;
}
ul{
margin-left: 20px;
color: black;
}
li{
margin-left: 50px;
}
.lista{
margin-left: 50px;
}
a{
color: blueviolet;
}
img{
border-radius: 50%;/*Imagem Redonda*/
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;/*Largura*/
}
footer{
color: black;
text-align: center;
text-shadow: 2px 2px 5px blueviolet;
}
