Tambien vemos como dar movimiento y animar objetos de nuestra web mediante animate.css.
Codigo CSS
body{
font-family: 'Risque', cursive;
margin:0;
width-max:960px;
}
header,footer{
/*background-color:#f06292;*/
color:white;
text-align:center;
padding:5px;
margin-right:auto;
margin-left:auto;
border-radius:30px;
background: linear-gradient(to right,#f06292,#a84466);
}
h1{
display:inline-block;
width:400px;
font-weight:700;
}
h3{
font-size:36px;
font-weight:700;
}
p{
display:inline-block;
width:400px;
font-weight:200;
}
section{
width:80%;
margin-right:auto;
margin-left:auto;
vertical-align:top;
}
article{
display:inline-block;
width:97%;
font-size:22px;
margin-bottom:12px;
margin-top:36px;
}
#imagen{
display:inline-block;
margin-top:45px;
margin-left:10px;
width:18%;
float:left;
}
#formacion{
display:inline-block;
width:80%;
float:left;
}
/*movil*/
@media screen and (max-width:480px){
*{
display:block;
margin:1px;
}
h1{
font-weight:300;
}
h3{
font-weight:200;
}
article{
font-size:1em;
}
p{
font-size:1em;
}
#imagen{
display:none;
}
}
Codigo HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Curriculum Vitae">
<meta name="keywords" content="curriculum,jose ojeda,html,css">
<meta name="author" content="Jose Ojeda">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Risque" rel="stylesheet">
<title>
Curriculum Vitae
</title>
</head>
<body>
<div id="contenido">
<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p><br/>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<section>
<article><div id="formacion">
<h3>Formacion</h3>
<dl>
<dt>
Diplomado en Ciencias Empresariales</dt>
<dd>Universidad de Sevilla</dd>
</dl>
<dl>
<dt>
Tecnico Superior en Prevencion de Riesgos Laborales</dt>
<dd>Seguridad, Ergonomia e Higiene Industrial</dd>
</dl>
</div>
<div class="option animated rotateIn">
<div id="imagen">
<img src="img/jose.jpg">
</div></div>
</article>
<article>
<h3>Experiencia Profesional</h3>
<dl>
<dt>
Contable - Administrativo</dt>
<dd>2000 - Actualidad</dd>
</dl>
<dl>
<dt>
Profesor Contabilidad y Matematicas Financieras</dt>
<dd>2002 - 2003</dd>
</dl>
<dl>
<dt>
Administrativo</dt>
<dd>1998 - 2000</dd>
</dl>
</article>
<article>
<h3>Otros</h3>
<dl>
<dt>
Docencia</dt>
<dd>Formador de formadores</dd>
</dl>
<dl>
<dt>
Programacion</dt>
<dd>Java, JavaScript, Php, Python, Android, Html, Css</dd>
</dl>
<dl>
<dt>
Software</dt>
<dd>Contabilidad, Nominas, Facturacion, Office, TPV, Navegadores, Correo</dd>
</dl>
</article>
</section>
<footer>
<address>
Mi direccion <br/>
Mi ciudad
</address>
</footer>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario