<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contactos-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>
<form>
<label for = "nombreapellido"> Nombre y Apellido</label>
<input type="text" id = "nombreapellido">
<label for = "correoelectronico"> Correo Electronico</label>
<input type="text" id = "correoelectronico">
<label for = "Telefono"> Telefono</label>
<input type="text" id = "Telefono">
<label for = "mensaje"> Mensaje</label>
<input type="text" id = "mensaje">
<input type="submit" value = "Enviar Formulario">
</form>
</main>
<footer>
<img src="logo-blanco.png" alt="">
<p class = "Copyright">© Copyright Barberia-Alura - 2023</p>
</footer>
</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;
border: 2px solid black;
box-sizing: border-box ;
border-radius: 50px 50px 50px 50px;
}
.productos li:hover{
border-color: blue;
}
.productos li:active{
border-color: rgb(255, 0, 170);
}
.productos h2{font-size: 30px;font-weight: bold;text-align: center;vertical-align: top;}
.productos li:hover h2{
font-size: 33px;
}
.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;
}
nav a:hover{
color:rgb(31, 8, 235);
text-decoration: underline;
font-size: 33px;
}
footer{
text-align: center;
background: url(bg.jpg) ;
}
.Copyright {
color:antiquewhite;
font-size: 13px;
margin: 20px;
}
main{
width: 940px;
margin: 0 auto;
}
form {
margin: 40px 0
}
form label{
display: block;
font-size: 20px;
margin: 0 0 10;
}
form input{
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
