-1
is going a bizarre stop with me, my site only identifies CSS and JS if it is loaded by the extension Live Server, if I try to open directly by index.html, the browser does not recognize:
This is my HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/style/main.css">
<link rel="stylesheet" type="text/css" href="/style/responsive.css">
<link rel="stylesheet" type="text/css" href="/style/owl/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="/style/owl/owl.theme.default.min.css">
<link rel="icon" href="/img/icona.png">
<title>Cultflix</title>
</head>
<body>
<header>
<div class="container"> <!-- Container Principal da Parte Superior da Página -->
<div class="logo-cultflix">
<img src="/img/logo-cultflix.png" id="home" alt="Cultflix" srcset="">
</div> <!-- Logo Cultflix -->
<nav> <!-- Menu de Navegação -->
<a href="#" class="btn-active">Início</a>
<a href="#titulo" class="btn">Filmes</a>
<a href="#" class="btn">Séries</a>
<a href="#" class="btn">Documentários</a>
</nav>
<div class="barra-de-pesquisa"> <!-- Barra de Pesquisa -->
<input type="text" name="searchbar" placeholder="Pesquise títulos...">
<input id="btn-search" type="submit" name="searchbutton" style="display: none;">
<label for="btn-search">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</header>
<main> <!-- Conteúdo Principal da Página -->
<div class="filme-principal">
<div class="container">
<div class="logo-descricao">
<div class="logo-filme-principal">
<img src="img/logo-filme-principal.png" class="logo" alt="Blade Runner 2049">
</div>
<p class="dados-filme-principal">Ano de Lançamento: 2017</p>
<p class="descricao-filme-principal">Decorridos trinta anos após o filme original, a trama acompanha os passos de K, um replicante que trabalha como blade runner para a polícia de Los Angeles.
</p>
</div>
<div class="botoes">
<button role="button" class="botao">
<i class="fas fa-play"></i>
Assistir
</button>
<button role="button" class="botao2">
Mais informações
</button>
</div>
</div>
</div>
</main>
<section>
<!-- CARROSEL 1 -->
<div class="carrosel-filmes">
<h2 id="titulo">Clássicos Imperdíveis</h2>
<div class="owl-carousel owl-theme">
<div class="filme">
<img class="box-filme" src="/img/filme1.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme2.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme3.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme6.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme5.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme4.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme7.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme8.webp" alt="" srcset="">
</div>
</div>
</div>
<!-- CARROSEL 2 -->
<div class="carrosel-filmes">
<h2 class="titulo2">Coming of Age</h2>
<div class="owl-carousel owl-theme">
<div class="filme">
<img class="box-filme" src="/img/filme18.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme20.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme19.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme17.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme3.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme6.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme2.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme1.webp" alt="" srcset="">
</div>
</div>
</div>
<!-- CARROSEL 3 -->
<div class="carrosel-filmes">
<h2 class="titulo2">Post-Horror A24</h2>
<div class="owl-carousel owl-theme">
<div class="filme">
<img class="box-filme" src="/img/filme15.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme14.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme8.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme16.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme3.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme6.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme2.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme1.webp" alt="" srcset="">
</div>
</div>
</div>
<!-- CARROSEL 4 -->
<div class="carrosel-filmes">
<h2 class="titulo2">Cultura Pop</h2>
<div class="owl-carousel owl-theme">
<div class="filme">
<img class="box-filme" src="/img/filme21.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme22.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme12.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme4.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme3.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme6.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme2.webp" alt="" srcset="">
</div>
<div class="filme">
<img class="box-filme" src="/img/filme1.webp" alt="" srcset="">
</div>
</div>
</div>
<div>
<a class="topo" href="#home"><i class="fas fa-arrow-up"></i></a>
</div>
</section>
<footer>
</footer>
<script src="https://kit.fontawesome.com/fb4d127565.js"></script>
<script src="js/owl/jquery.min.js"></script>
<script src="js/owl/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Can someone help me? :(
Have you tried that
/from the beginning of the file path in src ?– hugocsl