CUESO 8
-Creamos un archivo llamando plantilla, su css y su estilo.
-Tenemos una estructura:
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina</title>
<link rel="stylesheet" href="css/estilo.css">
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
</head>
<body>
</body>
</html>
-Obtenemos las fuentes de Google dosis y material+icons para los iconos.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis&family=Material+Icons&display=swap" rel="stylesheet">
En el body colocamos las capas de contenido
<body>
<div id="cabecera"></div>
<div class="contenido">
</div>
<div id="pie"></div>
</body>
-Colocamos el codigo de cabecera y pie.
Cabecera:
<div class="contenido_cabecera">
<img src="img/logo_ivardev.png">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Contacto</li>
</ul>
</div>
Pie: <div class="contenido_pie">
Todos los derechos reservados
</div>
-Quedaria asi:
<body>
<div id="cabecera">
<div class="contenido_cabecera">
<img src="img/logo_ivardev.png">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div class="contenido">
</div>
<div id="pie">
<div class="contenido_pie">
Todos los derechos reservados
</div>
</div>
</body>
Colocamos iconos en el menu y en el pie, iconos de google fonts.
<body>
<div id="cabecera">
<div class="contenido_cabecera">
<img src="img/logo_ivardev.png">
<ul>
<!--colocamos los enlaces de menu -->
<li><a href="index.html"> <span class="material-icons">home</span> Home </a></li>
<li><a href="bio.html"> <span class="material-icons">person</span>bio </a></li>
<li><a href="contacto.html"> <span class="material-icons">email</span>Contacto </a></li>
</ul>
</div>
</div>
<div class="contenido">
</div>
<div id="pie">
<div class="contenido_pie">
<span class="material-icons">flutter_dash</span> Todos los derechos reservados
Todos los derechos reservados
</div>
</div>
</body>
</html>
-A partir de ahí vamos aplicar los estilos.
body{
font-family: 'Dosis', sans-serif ;
margin:0;
background-color: lightgreen;
}
a{ text-decoration: none; /*No subraye los enlaces*/
color: inherit; /*Esto significa que no cambie el color los enlaces, que los herede*/
}
.contenido_cabecera{
text-align: center;
background-color: beige;
padding-top: 20px;
}
.contenido_cabecera ul{
list-style: none;
margin: 0 auto;
}
.contenido_cabecera li{
display:inline-block;
padding: 20px 40px;
font-size: 1.5em;
color: #787862;
}
.contenido_pie{
background-color: lavender;
color: lightcoral;
text-align: center;
position:fixed;
bottom: 0px;
width: 100%;
padding: 15px;
}
.contenido{
width: 100%;
max-width: 1000px;
margin:30px auto;
padding:40px;
background-color: white;
Y duplicamos la plantilla 3 veces para construir bio,contacto, e index.html. En cada uno de ellos mentemos un contenido distinto.
