Al colocar padding 40px en el footer, no se establece el cambio.
Que podría estar pasando?
gracias por sus respuestas.
Saludos
Al colocar padding 40px en el footer, no se establece el cambio.
Que podría estar pasando?
gracias por sus respuestas.
Saludos
Hola amigo, podrias insertar tu codigo para poder ayudarte?
puedes cargarlo con el icono que te muestro en la imagen.
estoy para ayudarte saludos!
Hola Jorge, gracias por tu buena disposición el código CSS es el siguiente:
header {
background-color: #BBBBBB;
padding: 300px 0;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
padding: 20px 0;
}
nav{
position:absolute;
top: 110px;
right: 0px;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #c78619;
text-decoration: underline;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
}
.productos li:hover{
border-color: #c78619;
}
.productos li:active{
border-color: #088c19;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2{
font-size: 33px;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding: 40px;
}
.copyright{
color: #BBBBBB;
font-size: 13px;
margin: 20px;
}
Hola amigo, noto 2 cosillas la primera es que agregaste otro padding de 20 px a la caja? y la segunda me falto el HTML para ver como estas declarando las clases jejeje, te dejo mis codigos esperando poder resolver tus dudas
HTML
<!DOCTYPE html>
<html>
<html lang="es">
<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="Index.html">Inicio</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class = "productos">
<li>
<h2>Cabello</h2>
<img src="cabello.jpg">
<p class="producto-descripcion">Con tijera o Maquina, a gusto del cliente</p>
<p class="producto-precio">$ 10.00 us</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="producto-descripcion">Corte y diseño profesional de barba</p>
<p class="producto-precio">$ 08.00 us</p>
</li>
<li>
<h2>Cabello + Barba</h2>
<img src="cabello+barba.jpg">
<p class="producto-descripcion">Paquete completo de cabello y barba</p>
<p class="producto-precio">$ 15.00 us</p>
</li>
</ul>
</main>
<footer>
<img src="logo-blanco.png">
<p class="copyright"> © Copyright Barberia Alura - 2022</p>
</footer>
</body>
</html>
css
header{
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
width: 940px;
position:relative;
margin: 0 auto;
}
nav{
position:absolute;
top:110px;
right: 0px;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color:black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin:0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius:10px;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
nav a:hover{
color: #c78c19;
text-decoration: underline;
}
.productos li:hover{
color: #c78c19;
border-color: #c78c19;
}
.productos li:active{
border-color: #088c19;
}
.productos li:hover h2{
font-size: 33px;
}
footer{
text-align: center;
background: url(bg.jpg);
padding:40px;
}
.copyright{
font-style: italic;
color:#FFFFFF;
font-size: 10px;
}
*NOTA: Recuerda que el archivo reset va antes en el html que tu CSS esto para que no afecte tus estilos *
Cualquier otra duda porfavor no olvides en contactarme y lo vemos desde discord compartiendo tu pantalla bye :)