Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Mostrando entradas con la etiqueta movil. Mostrar todas las entradas
Mostrando entradas con la etiqueta movil. Mostrar todas las entradas
domingo, 17 de febrero de 2019
16 Html, Css. Resoluciones, responsive
Detectar diferentes resoluciones de pantalla y cambiar las propiedades desde css para mejorar la visualizacion en distintos dispositivos.
viernes, 26 de enero de 2018
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
Vemos tambien como añadir tipos de fuentes desde google fonts.
HTML
<!DOCTYPE html>CSS
<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>
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;
}
}
Suscribirse a:
Entradas (Atom)