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:

   

       

       Mi pagina

 

       

       

       

       

   

 

 

   

 

   

 

   

-Obtenemos las fuentes de Google dosis y material+icons para los iconos.

    

       

       

En el body colocamos las capas de contenido

       

 

       

 

       

 

       

 

   

 

-Colocamos el codigo de cabecera y pie.

Cabecera: 

   

 

 

   

           

  • Home
  •        

  • Bio
  •        

  • Contacto
  •  

       

 

 

 

Pie:

 

   Todos los derechos reservados

 

 

 

-Quedaria asi:

 

 

   

       

           

           

               

 

 

               

                       

  • Home
  •                    

  • Bio
  •                    

  • Contacto
  •  

                   

 

          

 

       

 

       

 

       

 

       

           

 

               Todos los derechos reservados

           

           

 

       

 

   

Colocamos iconos en el menu y en el pie, iconos de google fonts.

 

       

           

           

               

 

 

               

 

           

 

       

 

       

 

       

 

       

           

               flutter_dash Todos los derechos reservados 

 

               Todos los derechos reservados

           

           

 

       

 

   

 

 

   

-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.