viernes, 2 de febrero de 2018

03 Curriculum Vitae. Degradado de color y movimiento.

En este video continuamos con la mejora de nuestra Web Curriculum, para ello vamos a ver como redondear las esquinas y asignarle un degradado de color.
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