I'm not able to make any browser display grid images, it's not a path problem since I opened the code in other editors that have the option to display the link in the figure and open it in a separate window, also open in Dreamweaver where even the images are visible. I have tested some solutions found in forums but nothing was good, so if anyone is willing to help, I am grateful. Here is the code:
HTML:
<html>
<head>
<title>Hotel Paraiso</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="Projeto.css"/>
</head>
<style>
</style>
<body>
<header>
<a href="#"><img src="img/logo.png" alt="Hotel Paraiso"></a>
<nav>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Reserva</a></li>
<li><a href="">Contato</a></li>
</nav>
</header>
<section class="hero">
<h1>Conheça este paraíso chamado itacaré</h1>
<h3>"Aconchego,conforto, simpatia e alto astral"</h3>
<a class="btn" href="">Saiba mais</a>
</section>
<section class="conheca-o-hotel">
<h3>Conheça o Hotel Paraiso!</h3>
<p>Feche os olhos e imagine o paraíso. Um lugar no meio da mata Atlântica e banhado pelo mar, onde voce encontra paz, tranquilidade, conforto e comodidade.</p>
<hr>
<ul class="grid">
<li class="small" style="background-image: url('img/itacare-01.jpg')"></li>
<li class="large" style="background-image: url('img/itacare-02.jpg')"></li>
<li class="large" style="background-image: url('img/itacare-03.jpg')"></li>
<li class="small" style="background-image: url('img/itacare-04.jpg')"></li>
</ul>
</section>
</body>
</html>
Note: my .css file is in the root, already the images in the img folder. CSS:
/* RESET */
*{margin:0; padding: 0; font-size: 100%;box-sizing: border-box;font-family: 'Open Sans', sans-serif}
nav, ul{list-style: none;}
a{text-decoration: none;cursor: pointer;opacity: 0.9;}
a:hover{opacity: 1;}
/* HEADER */
header{ width: 100%;position: absolute; top: 0; left:0;
display:flex;
justify-content: space-between; /* Criou um espaço entre o logo e o menu */
align-items: center; /* Alinhou verticalmente no cento */
padding: 20px 50px; /* padding topo/base e laterais */
background-color: #fff;
}
/* TAMANHO DA IMAGEM */
header img{
width: 200px;}
header img{
margin-top: 15px;} /* imagem um pouco abaixo do topo */
/* MENU EM LINHA */
header nav{
display:flex}
/* COR DOS LINKS */
header li a{
color:#191c03;}
/* MARGEM DO MENU */
header li{
margin:0 15px;}
/* ACESSANDO O LEFT DO LI */
header li:first-child{
margin-left: 0;}
header li:last-child{
margin-right: 0;}
/* QUEBRA TELA EM 700 E PUXA O MENU PARA BAIXO DO LOGO */
/* Quando a tela atinge 700px, muda a direção do alinhamento de ROW (padrão do display:flex) para COLUMN */
@media(max-width: 700px){
header{flex-direction: column;}
header img{margin-bottom: 15px;}
}
/* HERO IMAGEM DE FUNDO */
/* Unidade de media VH: viewport heigh = percentual da tela; */
.hero{
background-image: url(img/hero.jpg);
background-size: cover;
min-height: 100vh;
color:#fff;
/* H1 e H3 abaixo */
display:flex;
flex-direction: column; /* coloca os dois paragrofos e o botão dispostos na vertical */
justify-content: center; /* alinha essa bagaça toda...*/
align-items: center;
text-align: center; /* alinha o texto... */
}
.hero h1{
font-size: 3.2rem;
margin-bottom: 15px;
}
.hero h3{
font-size: 2rem;
margin-bottom: 15px;
}
.hero .btn{
background-color: rgba(255, 255, 255, 0.678);
border-radius: 4px;
color: #f191c03;
padding: 20px 50px;
text-transform:uppercase;
}
/* Quando a tela atinge 700px, muda o tamnho do H1 e H3 */
@media(max-width: 700px){
.hero h1{font-size: 2.5rem;}
.hero h3{font-size: 1.5rem;}
}
/* CONHEÇA O HOTEL */
.conheca-o-hotel{
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 50px;
}
.conheca-o-hotel h3{
font-size: 2rem;
margin-bottom: 35px;
/* text-align: center; */
color: #191c03;
}
.conheca-o-hotel p{
max-width: 800px;
margin-bottom: 35px;
text-align: center;
color: #191c03;
}
.conheca-o-hotel hr{
width: 200px;
height: 2px;
background-color: #191c03;
margin-bottom: 70px;
border: none;
}
. .conheca-o-hotel .grid{
width: 100%;
display: flex;
flex-wrap: wrap;
/* quebra de linha */
}
.conheca-o-hotel .grid li{
height: 350px;
padding: 19px;
border-radius: 4px;
background-clip: content-box; /* especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua borda. */
background-size: cover; /* Por que precisa??? */
background-position: center; /* Centralizado dentro do LI. */
}
.conheca-o-hotel .grid li.small{
flex-basis: 40%; /* Define o tamanho inicial (largura ou altura) que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades */
}.conheca-o-hotel .grid li.large{
flex-basis: 60%; /* Define o tamanho inicial (largura ou altura) que um Flex Item deve ter antes que o espaço ao seu redor seja distribuído por outras propriedades */
}
