Seguidores

MIS WEBS



martes, 7 de mayo de 2019

PRACTICA ESTILOS MENÚS CSS

Mi Pagina

ESTE ES EL H1 DEL HEADER

Articulo 1

Mi etexto escrito en una pagia html

Articulo 2

Mi etexto escrito en una pagia html

Articulo 3

Mi etexto escrito en una pagia html

Articulo 4

Mi etexto escrito en una pagia html

Este es el footer y os dejo mi css

h1.mih1{
 background: #A0C9C4;
 height: 150px;
 text-shadow: 1px 2px;
 text-align: center;
 padding-top: 5vh;
 font: bold 3em sans-serif ;
 color: #1760DD;
 -webkit-transition:all 1.5s;
 -o-transition:all 1.5s;
 transition: all 1.5s;


}

.mih1:active{ 
/*cuando tenga el boton izquierdo 
apretado (al soltar desaparece)*/
 color: black;
}

.menu{
color: white;
 //fuente negrita 10 sanserif
font: bold 2em  sans-serif;
border: 5px solid red;
margin-left: 10px;
border-radius: 3px;
width: 150px;
//quitar estilos de listas
list-style: none;  
padding: 5px;
/*transicion*/
text-transform: uppercase;
box-shadow: 0.2em 0em #4C6795 inset;
-webkit-transition:all 1.5s;
-o-transition:all 1.5s;
transition: all 1.5s;

}

li.menu:hover{
 box-shadow: 12em 0em  #4C6795 inset;
}
.cajaMenu{ 
 display: inline-flex;

   }


nav{ background: #708A9C;
}
aside.Miaside{ float:right;
  width: 39%;
  background: #9CAEBB;
  height:80vh;
  list-style: none;
  margin:20px 0px;
   }
.menuAside{
 list-style: none;
 padding: 5px ;
 margin-top:15px;
 border: 4px solid #103574;
 width: 80px;
 border-radius: 3px 3px;
 box-shadow: 0em 0.2em grey inset;
 -webkit-transition:all .8s;
 -o-transition:all .8s;
 transition: all .8s;

}
.menuAside:hover{

 box-shadow: 0em 2em red inset;
}
.code70{ color: blue; 
 font-size: 0.8em; 
}
section{background: #96E3D9;
 width: 60%;}
body{
 margin:20px;
 padding: 15px;
 border: 3px solid black;
}
footer{
 display: block;
 background: #24CD95;
 padding: 20px;
 margin: 20px 0px;

}
article{

 margin: 20px;
 padding: 10px;
 border: 5px solid red;
 background: grey;
 -webkit-transition:all 1.5s;
 -o-transition:all 1.5s;
 transition: all 1.5s;

}
article:hover{

  background: #9CA3AF;

}

No hay comentarios:

Publicar un comentario

Buscar este blog

Sandisk y Western Digital