<!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>
<main>
<ul class="productos">
<li>
<h2>cabello</h2>
<img src="imagenes/cabello.jpg" alt="">
<p class="producto-descripcion">Con tijera o maquina a justo del cliente </p>
<p class="producto-precio">10 dll</p>
</li>
<li>
<h2>barba</h2>
<img src="imagenes/barba.jpg" alt="">
<p class="producto-descripcion">Corte y diseño profesional de barba</p>
<p class="producto-precio">8 dll</p>
</li>
<li>
<h2>cabello+barba</h2>
<img src="imagenes/cabello+barba.jpg" alt="">
<p class="producto-descripcion">Paquete completo de cabello y barba</p>
<p class="producto-precio">15 dll</p>
</li>
</ul>
</main>
</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 */
}
nav a:hover{
color: white;
text-decoration: underline;/* cuando captura el mouse lo subraya con este elemento */
}
.productos{
width: 940px;
/* el ancho standar de las pantalla 950 * 1200 */
margin: 0 auto;
padding: 50px;
/* configurabdo el espacio en el main y encabezad "separacion entre elementos" */
}
.productos li{
display: inline-block; /* ajustando al tamño del contenido */
text-align: center;
/* alineando text */
width: 30%;
/* separado de cada elemnto cofigunandel tamaño por igual 1/3 */
vertical-align: top;
/* conifgurando los item de manera vertical */
/* background-color: #bbbbbb; /* se usa para ver que los no esta alineados y el tamaño no esta equilibrado */
margin: 0 1.5%;
padding: 30px 20px; /* se suma al width 30% y rebasara los 940px que definimos para solucionarlo usaremos box-sizing: */
box-sizing: border-box;/* crea uniformemente los elemento sin rebasar los 940px que definimos el total de la pagina */
border:2px black solid ;
border-radius: 10px;
}
.productos li:hover{
border-color:blue;
}
.productos li:active{
border-color: aqua;
}
/* creando un selector del h2, es el ancabezado */
.productos h2{
font-size: 30px;
font-weight: bold;
/* se define el tipo de letra negrita */
}
.productos li:hover h2 {
font-size:33px;
}
.producto-descripcion{
font-size: 18px;
/* tamanio de letra */
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
/* separando */
}
