talilotarlison/cv-completo.html

## 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:ademir.mazer.jr@gmail.com">ademir.mazer.jr@gmail.com</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>

## 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>

## 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;
}
	<!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:ademir.mazer.jr@gmail.com">ademir.mazer.jr@gmail.com</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>
	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;
	}