Skip to content

Instantly share code, notes, and snippets.

@nunomazer

nunomazer/cv-completo.html

Last active November 10, 2024 17:47
Show Gist options
  • Save nunomazer/873219 to your computer and use it in GitHub Desktop.
Save nunomazer/873219 to your computer and use it in GitHub Desktop.
Download ZIP
exemplo de html com css utilizando dados de um curriculo vitae
Raw
cv-completo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Curriculo Vitae</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Currículo Vitae</h1>
<img src="http://br.gravatar.com/userimage/14935412/cef5ab9d2ae46b1f6371dddbc99f667e.jpg?size=200" alt="photo of Ademir" class="photo"/>
<ul id="menu">
<li><a href="cv-resumido.html">Resumido</a></li>
<li class="ativo">Completo</li>
</ul>
<div class="secao">
<h2>Dados Pessoais</h2>
<div id="hcard-Ademir-Mazer-Jr" class="vcard">
<span class="given-name">Ademir</span>
<span class="additional-name">Mazer</span>
<span class="family-name">Jr</span>
<sup><a href="#1-fn" id="fn1" title="veja o rodapé">1</a></sup>
<a class="email" href="mailto:[email protected]">[email protected]</a>
<a class="url" href="https://mazer.dev">https://mazer.dev</a>
<div class="adr">
<span class="locality">Ponta Grossa</span>
,
<span class="region">Paraná</span>
</div>
</div>
</div>
<div class="secao">
<h2>Mídias Sociais</h2>
<a href="https://www.youtube.com/c/AdemirMazerJr?sub_confirmation=1">
Canal Mazer.dev no Youtube
</a>
<a href="https://twitter.com/nunomazer">
@nunomazer no Twitter
</a>
<a href="https://www.linkedin.com/in/ademirmazerjr/">
Perfil Linkedin
</a>
</div>
<div class="secao">
<h2>Dados Profissionais</h2>
<p><label>Empresa</label>UEPG</p>
<p><label>Empresa</label>UTFPR</p>
<p><label>Empresa</label>Copel</p>
<p><label>Empresa</label>Winponta</p>
</div>
<div class="secao">
<h2>Formação Acadêmica</h2>
<p><label>Curso</label>Mestrado Engenharia de Produção</p>
<p><label>Curso</label>Especialista Linguagem Java</p>
<p><label>Curso</label>Especialista Ciências da Computação</p>
<p><label>Curso</label>Bacharel Informática</p>
</div>
<div class="secao">
<h2>Formação Complementar</h2>
<table>
<thead>
<tr>
<th>Curso</th>
<th>Carga horária</th>
</tr>
</thead>
<tr class="par">
<td>Pontos de Função</td>
<td>40h</td>
</tr>
<tr class="impar">
<td>Testes de Software</td>
<td>40h</td>
</tr>
<tr class="par">
<td>Ferramenta de Testes de Software</td>
<td>16h</td>
</tr>
<tr class="impar">
<td>Requisitos de Software</td>
<td>24h</td>
</tr>
</table>
</div>
<div class="secao">
<h2>Línguas</h2>
<table>
<thead>
<tr>
<th>Língua</th>
<th>Escrita</th>
<th>Fala</th>
<th>Leitura</th>
</tr>
</thead>
<tr class="par">
<td>Inglês</td>
<td class="bom">Bom</td>
<td class="bom">Bom</td>
<td class="otimo">Ótimo</td>
</tr>
<tr class="impar">
<td>Espanhol</td>
<td class="ruim">Ruim</td>
<td class="ruim">Ruim</td>
<td class="regular">Regular</td>
</tr>
</table>
</div>
<form action="#" method="post">
<fieldset>
<legend>Entre em contato</legend>
<label for="nome">Nome</label>
<input type="text" name="nome"/>
<label for="nome">Email</label>
<input type="text" name="email"/>
<label for="nome">Mensagem</label>
<textarea name="msg"></textarea>
<input type="submit" value="enviar"/>
</fieldset>
</form>
<div id="footnote">
<li id="1-fn">1 - Microformato <a href="#fn1" title="volte">^</a></li>
<li>Este <a href="http://microformats.org/wiki/hcard">hCard</a> foi criado com <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</li>
</div>
</body>
</html>
Raw
cv-resumido.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Curriculo Vitae</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Currículo Vitae</h1>
<ul id="menu">
<li class="ativo">Resumido</li>
<li><a href="cv-completo.html">Completo</a></li>
</ul>
<div class="secao">
<h2>Dados Pessoais</h2>
<div id="hcard-Ademir-Mazer-Jr" class="vcard">
<a class="url fn n" href="https://mazer.dev">
<span class="given-name">Ademir</span>
<span class="additional-name">Mazer</span>
<span class="family-name">Jr</span>
</a>
</div>
</div>
<div class="secao">
<h2>Mídias Sociais</h2>
<a href="https://www.youtube.com/c/AdemirMazerJr?sub_confirmation=1">
Canal Mazer.dev no Youtube
</a>
<a href="https://twitter.com/nunomazer">
@nunomazer no Twitter
</a>
<a href="https://www.linkedin.com/in/ademirmazerjr/">
Perfil Linkedin
</a>
</div>
<div class="secao">
<h2>Dados Profissionais</h2>
<p><label>Empresa</label>UEPG</p>
<p><label>Empresa</label>UTFPR</p>
<p><label>Empresa</label>Copel</p>
<p><label>Empresa</label>Winponta</p>
</div>
</body>
</html>
Raw
style.css
body {
font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
color: #3b3b3b;
}
h1,h2 {
font-family: Georgia;
}
h1 {
border-bottom: 3px solid #aaa;
background-color: #3b3b3b;
color: #ddd;
padding: 5px;
}
h2 {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #DDD;
padding-left: 5px;
margin: 0 0 0 -15px;
font-weight: normal;
}
.secao {
background-color: #eee;
padding-left: 15px;
border: #ccc 1px dotted;
margin-top: 1em;
}
a {
text-decoration:none;
color: #f33;
}
a:visited {
text-decoration:none;
color: #700;
}
a:hover {
text-decoration:none;
color: #fa0;
}
#menu {
margin: 0;
}
#menu ul, #menu li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu .ativo {
background-color: #ddd;
}
.vcard {
padding: 5px;
}
.url, .email {
display: block;
}
.email:after {
content: url('img/mail.png');
margin-left:0.3em;
}
.url:after {
content: url('img/url.png');
margin-left:0.3em;
}
td {width: 20em;}
tr.par {
background-color: #ddd;
}
tr.impar {
background-color: #eee;
}
td.ruim {color: #a99;}
td.regular {color: #a77;}
td.bom {color: #a55;}
td.otimo {color: #a33;}
.photo {
float: right;
margin-right: 5em;
border: #fff 1em solid;
-webkit-box-shadow: 0px 0px 5px 5px #191b30;
-moz-box-shadow: 0px 0px 5px 5px #191b30;
box-shadow: 0px 0px 5px 5px #191b30;
}
#footnote {
border-top: 1px dashed #aaa;
padding: 5px;
font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
}
#footnote li {
list-style-type: none;
margin-top: 3px;
}
fieldset {
border: #ccc 1px dotted;
margin-top: 1em;
}
label {
font-weight: bold;
margin-right: 10px;
width: 15em;
}
label:after {
content: ":";
}
form label {
display: block;
}
input, textarea {
border: #669 2px solid;
display: block;
width: 30em;
}
input[type=submit] {
border: #bbb 1px solid;
margin-top: 0.5em;
}
@Maykulino
Copy link

Muito bom. obrigado por compartilhar.

@vsdemoraes
Copy link

Parabéns!

@mariliahoshino
Copy link

mariliahoshino commented Aug 21, 2020 •
edited
Loading

Muito bom, rodei aqui, vou editar para por meu CV num programa em HTML que estou fazendo

@soulfireking
Copy link

Excelente trabalho!

@GabrielBenetti
Copy link

GabrielBenetti commented Jul 27, 2021 via email

@RobertMiguel
Copy link

Parabéns, ficou muito bom !!!

@brunasiqueira3103
Copy link

Obrigada Jr. vou usar para um projeto na minha aula de docker!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment