Last active
November 10, 2024 17:47
-
-
Save nunomazer/873219 to your computer and use it in GitHub Desktop.
exemplo de html com css utilizando dados de um curriculo vitae
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Muito bom.. parabens.
eu gostei =)
Passando pra deixar um LIKE !
muito bom
Muito bom. obrigado por compartilhar.
Parabéns!
Muito bom, rodei aqui, vou editar para por meu CV num programa em HTML que estou fazendo
Excelente trabalho!
Pq?
Em dom., 25 de jul. de 2021 às 14:35, soulfireking ***@***.***>
escreveu:
… ***@***.**** commented on this gist.
------------------------------
Excelente trabalho!
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<https://gist.github.com/873219#gistcomment-3827655>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZ3XUNR5PIJFTMHU3RUF63TZRDPBANCNFSM4QHTMNLQ>
.
Parabéns, ficou muito bom !!!
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
Muito bom....