Skip to content

Instantly share code, notes, and snippets.

@GabrielBenetti

GabrielBenetti/cv-completo.html

Forked from nunomazer/cv-completo.html
Created April 4, 2021 22:59
Show Gist options
  • Save GabrielBenetti/1ef143d053cd0f37a250d3870dfb818f to your computer and use it in GitHub Desktop.
Save GabrielBenetti/1ef143d053cd0f37a250d3870dfb818f 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="http://ademir.winponta.com.br">http://ademir.winponta.com.br</a>
<div class="adr">
<span class="locality">Ponta Grossa</span>
,
<span class="region">Paraná</span>
</div>
</div>
</div>
<div class="secao">
<h2>Dados Profissionais</h2>
<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>Mestrando 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="http://ademir.winponta.com.br"> <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>Dados Profissionais</h2>
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment