pagina wed de productos
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Productos-Barberia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="productos.css">
</head>
<body>
<header>
<div class = "caja">
<h1><img src="logo.png"></h1>
<NAV>
<ul>
<li><a href="babrberia alura.html">Home</a> </li>
<li><a href="">Producto</a></li>
<li><a href="">Contacto</a></li>
</ul>
</NAV>
</div>
</header>
<main>
<ul class ="productos">
<li>
<h2>Cabello</h2>
<img src="cabello.jpg" alt="">
<p class = " producto_descripcion">Con tijera o maquina, a gusto del cliente</p>
<p class = " precio_producto">$50.00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg" alt="">
<p class = " producto_descripcion">Corte y diseño profesional de barba</p>
<p class = " precio_producto">$90.00</p>
</li>
<li>
<h2> Cabello + barba </h2>
<img src="cabello+barba.jpg" alt="">
<p class = " producto_descripcion">paquete completo de cabello y barba</p>
<p class = " precio_producto">$130.00
</p>
</li>
</ul>
</main>
</body>
</html>productos.css
title{color: blue;}
header{background-color: #BBBB;padding: 20px 0 ;}
.caja{width: 940px; position: relative;margin: 0 auto}
.productos{width: 940px;margin: 0 auto;padding: 50px;}
.productos li{display: inline-block;text-align: center;width: 30%;margin: 0 1.5%;padding: 30px 20px;box-sizing: border-box;}
.productos h2{font-size: 30px;font-weight: bold;text-align: center;vertical-align: top;}
.producto_descripcion{font-size: 18px; ;}
.precio_producto{font-size: 30px;font-weight:bold;margin-top: 10px;}
nav {position: absolute; top: 110px;right: 0px;}
nav li{display: inline;margin: 0 0 0 25px;}
nav a{text-transform: uppercase;color: black;font-weight: bold;font-size: 22px;text-decoration: none;}
