Boa noite, Aceitei o desafio do instrutor Pedro Martins de fazer um currículo em HTML. testei muita coisa, e sei que falta muito, mas estou me divertindo em descobrir cada vez mais , já fiz no modo responsivo também, só queria compartilhar e dicas são bem vindas .
No que posso melhorar ?
<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">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="visual.css">
<title>Meu curriculo</title>
</head>
<body>
<header>
<div class="meu-cabecalho">
<img src="Foto.png" width="100px" alt="Foto perfil">
<h1>Rafael Saturnino Frazão</h1>
</div>
</header>
<main>
<div class="container-conteudo">
<ul>
<li>
<h2 class="meu-titulo-conteudo">Objetivo</h2>
<p>Em busca de recolacação prossional na função de Desenvolvedor Web</p>
</li>
<li class="meu-titulo-conteudo">
<h2>Histórico Profissional</h2>
<p> Técnico de CFTV, 2021 - atual.</p>
<p>Controle de acesso, 2020 - 2021.</p>
</li>
<li class="meu-titulo-conteudo">
<h2>Formação Acadêmica</h2>
<p> Curso de HTML, css, e java pelo <a href="https://www.alura.com.br" target="_blank">Grupo Alura</a> , 2022;</p>
</li>
</ul>
</div>
<div class="container-contato">
<ul>
<li>
<h2>Contato</h2>
<p>Endereço</p>
<p>55 11 xxxx-xxxx</p>
<p>email@hotmail.com</p>
</li>
<li>
<h2>Competências</h2>
<p>Dedicado</p>
<p>Atencioso</p>
<p>Auto Critico</p>
<p>Evolução constante</p>
</li>
</ul>
</div>
</main>
<footer>
<p class="copyright">© Copyright Rafael 2022</p>
</footer>
</body>
</html>
////////////css///////////
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(lightgrey);
}
header {
background: lightblue;
width: auto;
padding: 2px 0 0 20px;
text-align: center;
border: 1px solid;
}
.meu-cabecalho {
width: auto;
}
img {
margin: 10px 0 0 0;
position: relative;
right: 8.4em;
border: 1px solid;
border-radius: 10px;
}
h1 {
margin: auto;
position: relative;
left: 1em;
bottom: 4em;
font-weight: bold;
font-size: 1em;
}
.container-conteudo {
text-align: center;
line-height: 1em;
width: auto;
}
h2 {
font-weight: bold;
margin: 50px 0 0 0 ;
}
li p {
line-height: 2em;
}
.container-contato {
margin: 0 0 0 10px ;
text-align: center;
}
footer {
background: lightblue;
width: auto;
}
.copyright {
text-align: center;
margin-top: 30px;
padding: 50px 0 100px 0;
}
