Publicado el Deja un comentario

02 Curriculum Vitae. Adaptado a movil y cambio tipo letra

Mediante unas pequeñas modificaciones conseguimos que nuestra web se adapte a dispositivos moviles.
Vemos tambien como añadir tipos de fuentes desde google fonts.


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=”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 id=”imagen”>
<img src=”img/jose.jpg”>
</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>

 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;
}
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;
    }
}

Please follow and like us:
Publicado el Deja un comentario

01 Curriculum Vitae. Realizado con Html y Css

Realizamos nuestro Curriculum Vitae para publicar en la web, para ello utilizaremos el editor de textos Notepad++ y usaremos Html y Css.

El codigo obtenido es el siguiente:

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”>
<title>
Curriculum Vitae
</title>
</head>
<body>
<section>
<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<div id=”contenido”>
<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 id=”imagen”>
<img src=”img/jose.jpg”>
</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>
</div>
</section>
</body>
</html>

CSS

body{
    font-family: Helvetica, Arial;
    margin:0;
}
header{
    background-color:#f06292;
    color:white;
    text-align:center;
    padding:5px;
}
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:960px;
    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;
}

Please follow and like us: