Lo que haremos es este menú que veras en pantalla
Bien como siempre , primero sigues los pasos que haremos a continuación :
paso#1 : crear una carpeta ---> esta te servirá para contener todos los archivos necesarios.
Paso#2 : crear una subcarpeta dentro de la carpeta principal, con nombre css aquí estarán los estilos.
Paso#3 : crear un archivo llamado index.html el cual sera la pagina principal
Paso#4 : crear un archivo llamado estilos.css dentro de la carpeta
Yo por lo general siempre uso Sublime text 3 para editar código , o escribir código.
Bien comenzemos:
Primero hacemos la estructura básica de html .
<!DOCTYPE html>
<html>
<head>
<title>Nombre del proyecto</title>
<link rel="stylesheet" href="css/estilos.css"> -->
</head>
<body> -->
| <div id="titulo"> | |
| <p id="header">"Cachorrosdelaweb"</p> | |
| <p id="subheader">"Tutoriales de diseño y programacion web"</p> | |
| </div> |
| <header > | |
| <div id="uno" class="contenedor" > | |
| <img src="pictures/icon1.png" alt="" class="icon"> | |
| <p class="texto">Home</p> | |
| </div> | |
| <div class="contenedor" id="dos"> | |
| <img src="pictures/icon2.png" alt="" class="icon"> | |
| <p class="texto">Paginas</p> | |
| </div> | |
| <div class="contenedor" id="tres" > | |
| <img src="pictures/icon3.png" alt="" class="icon"> | |
| <p class="texto">Google</p> | |
| </div> | |
| <div class="contenedor" id="cuatro" > | |
| <img src="pictures/icon4.png" alt="" class="icon"> | |
| <p class="texto">Apple</p> | |
| <img src="pictures/icon1.png" alt="" class="icon"> | |
| </div> | |
| <div class="contenedor" id="cinco" > | |
| <img src="pictures/icon5.png" alt="" class="icon"> | |
| <p class="texto">Html</p> | |
| </div> | |
| <div class="contenedor" id="seis" "> | |
| <img src="pictures/icon6.png" alt="" class="icon"> | |
| <p class="texto">Correo</p> | |
| </div> | |
| </header> | |
</html>
Con este código html se nos vería así :
*{margin: 0; padding: 0; font-family: 'Helvetica Neue;
} con esto quitamos los margenes y los padding de la pagina.
div#titulo{
width: 100%
margin-top:100px;
}
p#header{
text-align: center;
font-size: 2.5em;
color: #9a9a9a;
}
p#subheader{
text-align:center;
color: #cecece;
margin-top: 20px;
font-size: 1.3em;
}
header{
margin: 100px auto;
width: 1200px;
height: 230px;
background-color: red;
}
div.contenedor{
width: 200px;
height: 230px;
float: left;
-webkit-transition:height .4s;
}
div#uno{
background-color: rgb(208,101,3);
}para darle color al icono.
div#dos{
background-color: rgb(233,147,26);
}para darle color al icono.
div#tres{
background-color: rgb(22,145,190);
}para darle color al icono.
div#cuatro{
background-color: rgb(22,107,162);
}para darle color al icono.
div#cinco{
background-color: rgb(27,54,71);
}para darle color al icono.
div#seis{
background-color: rgb(21,40,54);
} para darle color al icono.
img.icon{
display: block;
margin: 50px auto;
background-color: rgb(255,255,255,.15);
width: 40px;
padding: 20px;
-webkit-border-radius:50%;
-webkit-box-shadow :0px 0px 30px rgba(255,255,255,0);
-webkit-transition-box-shadow .4s;
} para darle el estilo alas iconos o oimagenes.
p.texto{
font-size:1.2em;
color: #fff;
text-align: center;
padding-top: 10px;
opacity: .6;
-webkit-transition:padding-top .4s;
} para darle estilo al parrafo p.
div.contenedor:hover{
height: 250px;
} para darle hover a todo el contenedor .
div.contenedor:hover p.texto{
padding-top:30px;
opacity: 1;
} para darle estilos alas letras al pasar el mouse.
div.contenedor:hover img.icon{
-webkit-box-shadow: 0px 0px 0px rgba(255,255,255,.6);
} para darle el estilo definitivo al hover .
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario