<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Productos-Barberia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="Productos.css">
</head>
<body>
<header>
<!-- el div encapsula los elemntos -->
<div class="caja">
<h1><img src="imagenes/logo.png" alt=""></h1>
<!-- listas ordenadas -->
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="Productos.html">PRODUCTOS</a></li>
<li><a href="contactos.html">CONTACTOS</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header{
background-color: #bbbbbb;
padding: 20px 0; /* aumenta el ancho de la barra de navegacion */
}
nav{
position: absolute;
top: 100px; /* centraliza el texto */
right: 0;
}
.caja{
width: 940px; /* toda la caja que encapsula el logo y la lista confuguaremos un ancho */
position: relative; /* relative quita la condiguracion que existe por defecto, esto para que aplique los cambios de width ; */
margin: 0 auto; /* alinea al centeo los elementos */
}
nav li {
display: inline; /* con esto le digo que solo ocupe el tamaño de su contenido */
margin: 0 0 0 15px; /* arriba,derecha,abajo,izquierda - --- reaaliza una serparacion de las letras entre si */
}
nav a{
text-transform: uppercase;/* convierte el texto a mayusculas */
color: black;
font-weight: bold; /* se hace referencia al grosor de la letra */
font-size: 20px;/* determina el tamaño de las letras */
text-decoration: none; /* quita el subrayado que inidac que es enlace a la pagina */
}
