- HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<title>Curriculo</title>
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho_navegacao">
<a class="cabecalho_navegacao_link" href="index.html">Home</a>
<a class="cabecalho_navegacao_link" href="experiencia.html">Experiencia</a>
<a class="cabecalho_navegacao_link" href="contato.html">Contato</a>
</nav>
</header>
<main class="conteudo">
<section class="conteudo_dados">
<h1 class="conteudo_dados_titulo">João Pedro Cesario do Nascimento.</h1>
<div>
<ul class="conteudo_dados_lista">
<li>Endereço: Rua imaginaria, 29 - RJ</li>
<li>telefone : (21) 999999999</li>
<li>email : jpedro1522@gmail.com</li>
<li>Belford Roxo</li>
<li>Cep : 28556-520</li>
</ul>
</div>
<h2 class="conteudo_dados_subtitulo">Escolaridade</h2>
<div>
<ul class="conteudo_dados_lista">
<li>Ensino medio completo</li>
<li>Colegio Estadual Santa Amelia</li>
<li>Ano de conclusão: 2014</li>
</ul>
</div>
<h2 class="conteudo_dados_subtitulo">Sobre mim</h2>
<div>
<p class="conteudo_dados_texto">Meu nome é João Pedro.Sou do Rio de Janeiro, baixada fluminense, estou buscando migrar de carreira da area de logistica para a area de tecnologia !.</p>
</div>
</section>
<img src="assets/Eu.jpg" alt="Foto do João Pedro.">
</main>
<footer class="rodape">
<p>© Desenvolvido por João Pedro.</p>
</footer>
</body>
</html>
- CSS
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Merriweather&display=swap');
:root {
--cor-de-fundo: #A9A9A9;
--cor-primaria: #000000;
--cor-secundaria: #f6f6f6;
--cor-terciaria: #ffff00;
--fonte-primaria: 'Bebas Neue', sans-serif;
--fonte-secundaria: 'Merriweather', serif;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--cor-de-fundo);
box-sizing: border-box;
}
.cabecalho {
background-color: var(--cor-primaria);
}
.cabecalho_navegacao {
display: flex;
padding: 2% 0% 2% 10%;
gap: 50px;
}
.cabecalho_navegacao_link {
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--fonte-primaria);
font-size: 25px;
}
.cabecalho_navegacao_link:hover {
color: var(--cor-terciaria);
}
.conteudo {
display: flex;
justify-content: space-between;
margin: 5% 10%;
}
.conteudo_dados {
display: flex;
flex-direction: column;
gap: 30px;
width: 50%;
}
.conteudo_dados_titulo {
font-family: var(--fonte-primaria);
font-size: 40px
}
.conteudo_dados_lista {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 15px;
font-family: var(--fonte-secundaria);
font-size: 14px;
}
.conteudo_dados_subtitulo {
font-family: var(--fonte-primaria);
}
.conteudo_dados_texto {
font-family: var(--fonte-secundaria);
font-size: 14px;
}
img {
width: 40%;
}
.rodape {
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
padding: 2% 0% 2% 10%;
text-align: center;
font-family: var(--fonte-primaria);
font-size: 25px;
}
.conteudo_dados_lista_experiencia {
display: flex;
flex-direction: column;
gap: 20px;
font-family: var(--fonte-secundaria);
font-size: 14px;
}
.conteudo_dados_div_link {
display: flex;
flex-direction: column;
gap: 30px;
}
.conteudo_dados_link {
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
text-decoration: none;
padding: 20px;
width: 300px;
border-radius: 20px;
font-family: var(--fonte-secundaria);
display: flex;
justify-content: center;
gap: 16px;
}
.logo {
width: 8%;
}
