HTML
<title>Autos</title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<link href='http://fonts.googleapis.com/css?family=Signika:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<body>
<div class="contenedor">
<header>
<h1>AUTOLION</h1>
<p>La experiencia de sentir la velocidad...</p>
</header>
<nav>
<ul class="picoro">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-rocket"></i>Nosotros</a></li>
<li><a href="#"><i class="fa fa-shopping-cart"></i>Servicios</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i>Galeria</a></li>
<li><a href="#"><i class="fa fa-user"></i>Contacto</a></li>
</ul>
</nav>
<section>
</section>
<footer>
</footer>
</div>
</body>
</head>
</html>
CSS
* {
margin:0;
padding:0;
}
body {
background:#0085B2;
}
.contenedor {
width:1000px;
height:800px;
border:1px solid #fff;
margin:0 auto;
/*background:#0085B2;*/
}
header {
width:1000px;
height:160px;
background:#fff;
background-image:url("imagenheader2.jpg");
background-repeat:no-repeat;
background-size:700px 150px;
background-position:300px 0;
opacity:.5;
filter:alpha(opacity=50);
}
header h1 {
padding:10px;
font-family: 'Signika', sans-serif;
font-size:80px;
color:#0085B2;
opacity:.7;
filter:alpha(opacity=70);
}
header p {
padding-left:60px;
padding-left:10px;
font-family: 'Roboto Condensed', sans-serif;
font-size:23px;
color:#00008C;
}
nav {
width:1000px;
height:40px;
background:#fff;
opacity:.5;
filter:alpha(opacity=50);
}
nav ul {
float:right;
width:700px;
height:40px;
/*opacity:.5;
filter:alpha(opacity=50);*/
margin:0;
padding:0;
box-sizing:border-box;
}
nav ul li {
list-style:none;
}
nav ul li a {
width:20%;
height:40px;
float:left;
margin:0;
line-height:43px;
text-decoration:none;
font-family:Myriad Pro;
font-size:19px;
text-align:center;
color:#000;
}
nav ul li a:hover {
background:orange;
}
nav ul li a i {
margin-right:10px;
}
