Curso HTML / CSS desde cero 8
Curso HTML / CSS desde cero 8 ¿Te apuntas aprender con Ivardev? Cursos desde 0, donde aprenderás lo imprescindible.

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.