Buenas noches! Vengo haciendo el ejercicio codo a codo con el tutorial de Christian. Pero no consigo que me cargue la imagen como background cuando estoy haciendo el identificador del footer en el archivo del css. Pensaba que la ruta de acceso del archivo era muy larga, lo acorté y no funcionó tampoco. Estoy usando el sublime text como IDE pero no creo que eso influya, o si??.. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Productos - Barberia Alura</title>
<link rel="stylesheet" type="text/css" href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\reset.css">
<link rel="stylesheet" type="text/css" href="productos.css">
</head>
<body>
<header>
<div class="caja">
<h1><img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\logo.png"></h1>
<nav>
<ul>
<li><a href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\1742-HTML5-y-CSS3-parte1-aula6\1742-HTML5 e CSS3 parte1-aula6\index.html">home</a></li>
<li><a href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\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="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\cabello.jpg">
<p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
<p class="producto-precio">$10.00</p>
</li>
<li>
<h2>Barba</h2>
<img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\barba.jpg">
<p class="producto-descripcion">Corte y diseño prosional de barba</p>
<p class="producto-precio">$8.00 </p>
</li>
<li>
<h2>Cabello + Barba</h2>
<img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\cabello+barba.jpg">
<p class="producto-descripcion">Paquete completo de cabello y barba</p>
<p class="producto-precio">$15.00</p>
</li>
</ul>
</main>
<footer>
<img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\logo-blanco.png">
<p>Copyright - Barberia Alura - 2020</p>
</footer>
</body>
</html>
CSS
header {
background: #BBBBBB;
padding: 20px 0;
}
.caja {
width: 940px;
position: relative;
margin: 0 auto; /*El 0 es margen superior e inferior*/
} /*el auto corrige la posicion de los elementos (bordes) sin importar */
/*la resolucion de la pantalla, es responsive*/
nav {
position: absolute;
top: 110px;
right: 0px;
}
nav li {
display: inline; /*acomoda la lista en horizontal*/
margin: 0 0 0 15px; /*acomoda espacio en items de lista,aca es el izquierdo*/
}
nav a {
text-transform: uppercase; /*transforma el texto a mayuscula*/
color: #000000; /*color de la fuente*/
font-weight: bold; /*texto en negrita*/
font-size: 22px; /*tamaño fuente*/
text-decoration: none; /*saca decoracion de texto*/
}
nav a:hover{ /*hover: lee el movimiento del raton (y no lleva espacio despues de :)*/
color: #c78c19;
text-decoration: underline; /*subrayado del texto al posicionar el raton*/
}
.productos {
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
/*background-color: #CCCCCC;*/ /*Sirvio para acomodar los logos en cajas*/
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000; /*prop. border: width style color*/
/*border-color: #000000; para armar el contorno de las cajas de los productos
border-width: 2px;
border-style: solid;*/
border-radius: 10px; /*para el borde redondeado*/
}
.productos li:hover{
border-color: #c78c19;
}
.productos li:active{ /*captura el click del raton*/
border-color: #088c19;
}
.productos h2 {
font-size: 30px;
font-weight: bold;
}
.productos h2:hover{
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(C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\bg.jpg) ;
}