Hola muy buen dia disculpen acabe de terminar el segundo curso de html y resulta que no tengo los mismos resultados que aparecen en la página me pueden ayudar por favor, como se dan cuenta en la imagen no se resalta el borde si no los productos y aparte las imagenes no quedaron del mismo tamaño quedo atento gracias
¿Puedes compartir tu código?
En la capura no podemos ver la parte del código .productos li:hover{.
No quedan del mismo tamaño por el texto (por lo que observo). El texto de Cabello es un poco más largo y toma dos líneas. Cuando veas la parte del curso en que se usan fuentes, esos detalles se corrigen.
Te dejo el link del repositorio de cómo quedó mi página de la Barbería Alura como referencia.
gracias por tu respuesta pero es que ya estoy terminando el curso no me quedo de la forma del video y las imagenes las arregle de otra forma mira mi codigo
!DOCTYPE html>
<title>PRODUCTO - BARBERIA ALURA </title>
<link rel="stylesheet" type="text/css" href="meyer.css">
<link rel="stylesheet" type="text/css" href="PRODUCTOS.css">
</head>
<body>
<header>
<div class="caja">
<h1><img src="LOGO.png" width="30%">
<nav>
<ul>
<li><a href="BARBERIA.html">home</a></li>
<li><a href="BARBERIA2.html">productos</a></li>
<li><a href="http://google.com">contacto</a></li>
</ul>
</nav>
</h1>
</div>
</header>
<main>
<ul class="productos">
<li>
<h2>Cabello</h2>
<img src="cabello.png" width="80%" >
<p class="pd">Con tijera o maquina a gusto del cliente</p>
<p class="pp">10 usd</p>
</li>
<li>
<h2>barba</h2>
<img src="be.png" width="100%">
<p class="pd">Corte y diseño profesional de barba</p>
<p class="pp">8 usd</p>
</li>
<li>
<h2>Cabello y Barba</h2>
<img src="barcabe.png">
<p class="pd">paquete completo</p>
<p class="pp">15 usd</p>
</li>
</ul>
</main>
<footer>
<img src="LOGO.png">
<p>Copyright Barberia Alura</p>
</footer>
</body>
Lo que sucede es que la descripción del primer producto tiene más caracteres, por lo cual se creará una segunda línea de texto, por lo tanto la caja del primer producto se alargará. Lo que puedes hacer es:
Te dejo el fragmento de código que cambié en el archivo 'productos.css':
.productos li{
display: inline-block;
text-align: center;
width: 32%; /*1. Aumentar el ancho disponible para cada producto*/
vertical-align: top;
margin: 0 0.5%; /*2. Disminuir el porcentaje en 'margin'*/
padding: 20px 10px;