Hola! Seguí los pasos que hizo el profesor para posicionar elementos, pero no consigo insertar la imagen y no encuentro dónde está el error ¿Me podrían ayudar, por favor?
Dejo mi código para el index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alura Store | Descargue nuestros aplicactivos y juegos</title>
<link href="./assets/css/normalize.css" rel="stylesheet">
<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/destaques.css" rel= "stylesheet">
<body class="app">
<header class="encabezado">
<nav class="menu">
<ul class="menu__lista">
<li class="menu__item">
<a class="menu__link activo" href="#">
<i class="fas fa-home"></i>
Inicio
</a>
<a class="menu__link" href="#">
<i class="fas fa-mobile-alt"></i>
Aplicaciones</a>
<a class="menu__link" href="#">
<i class="fas fa-gamepad"></i>
Juegos
</a>
</li>
</ul>
</nav>
</header>
<main class="contenido">
<section class="destaques">
<div class="destaques__principal box">
<h3 class="destaques__titulo">Fornite</h3>
</div>
<div class="destaques__secundario box">
<h3 class="destaques__titulo">PUBG</h3>
</div>
<div class="destaques__secundario box">
<h3 class="destaques__titulo">Slack</h3>
</div>
<div class="destaques__secundario box">
<h3 class="destaques__titulo">Whatsapp</h3>
</div>
<div class="destaques__secundario box">
<h3 class="destaques__titulo">CS: GO</h3>
</div>
<div class="destaques__categorias">
<ul class="destaques__categorias___lista">
<li class="destaques__categorias___item">
<a class="destaques__categorias___link" href="#">
<i class="destaques__categorias___icon fab fa-buromobelexperte"></i>
Aplicaciones populares
</a>
</li>
<li class="destaques__categorias___item">
<a class="destaques__categorias___link" href="#">
<i class="fas fa-list-ol"></i>
Juegos populares
</a>
</li>
<li class="destaques__categorias___item">
<a class="destaques__categorias___link" href="#">
<i class="far fa-star"></i>
En Destaque
</a>
</li>
<li class="destaques__categorias___item">
<a class="destaques__categorias___link" href="#">
<i class="far fa-bell"></i>
Novedades
</a>
</li>
</ul>
</div>
</section>
</main>
<footer class="rodapie">Todos los derechos reservados © Alura Store </footer>
<script src="./assets/js/fontawesome.all.min.js"></script>
</body>
</html>y aquí el de destaques:
.destaques {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33.33% 33.33% 33.33% 33.33%;
height: calc(100vh - 50px);
}
.destaques__principal {
background: url('../img/fortnite.jpeg');
background-size: cover;
background-position: center;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-start: 3;
}
.destaques__secundario:nth-child(2){
background: url('../img/pubg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}y la parte de style:
.app {
background: #f1f1f1;
display: grid;
font-family: Arial, Helvetica, sans-serif;
grid-template-areas:
"header"
"contenido"
"footer";
grid-template-columns: auto;
grid-template-rows: 50px auto auto;
}
.encabezado {
}
.contenido {
grid-area: contenido;
padding: 0 2rem;
}
.rodapie {
}Muchas gracias!
