0
I am not able to make any browser display the grid images, it is not path problem because I opened the code in other editors that have the option to display the link of the figure and open it in separate window, also opened in Dreamweaver where even the images are visible. I have tried some solutions found in forums but nothing helped, so if anyone is willing to help, I am grateful. Follows 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 file . css is at 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 */
}
If you look in the browser console you can see a message saying that the images were not found (error 404). See if it shows this.
– Sam
No, Sam, there’s no message. Even, inside the console, in the css encoding, if I leave the mouse arrow over the file name, the file path is displayed. Mystery that, I’m very curious...
– Clovis Alberto Block
Have you tested in another browser? I tested your code here and showed the image normally.
– Sam
Sam, I tested in Chrome, Iron and Edge, also tested in another notebook, with windows 7, same problem. I disabled Adblock Plus and nothing...
– Clovis Alberto Block