Grayed out elements in Live View

No, just a plain index.html page.  

Here is the code.  But what does it have to do with the ability to use Live view in DW?  I just want to be able to use Live view...

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<title>Les Aventuriers Jé &amp; Lou</title>
<link rel="shortcut icon" href="img/favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">

</head>
<body data-spy="scroll" data-target="#navbarResponsive">

<!-- top menu section -->
<div id="home">


<nav class="navbar navbar-expand-md fixed-top bg-dark text-uppercase font-blu font-weight-bold">
<a href="#" class="navbar-brand"><img src="images/id_AVJLKW.png" alt="Logo Jé Lou"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="custom-toggler-icon"><i class="fas fa-bars"></i></span>
</button>

<div class="collapse navbar-collapse" id="navbarResponsive">


<ul class="navbar-nav x-auto">
<li class="nav-item">
<a href="#bienvenue" class="nav-link" style="color: yellow"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a href="#aventuriers" class="nav-link">Les aventuriers<br>Jé &amp; Lou</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Jeux</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Près de <i class="fas fa-map-marker-alt" style="color: yellow"></i><br>chez toi </a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">concours</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">à voir</a>
</li>
</ul>


<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Connexion <br>passeport</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End Top Menu -->

<!-- Bienvenue section-->
<div id="bienvenue" >
<div class="container">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div> <!-- fin Landing -->
<!-- Contenu de la page Bienvenue -->

<div class="position-absolute text-left caption">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 class="display-1 font-weight-bold pb-3 pb-md-4">bienvenue</h1>
<div class="btn1-pos">
<a href="#aventuriers" class="btn btn-outline-light text-uppercase rounded-0 p3 border-0"><i class="fas fa-arrow-down"></i><br>c'est par ici, bonne visite!</a>
</div>
</div><!-- end col-6-->
<div class="col-md-3"></div>
</div>
</div> <!-- fin Contenu de la page Bienvenue -->
</div>

</div>
<!-- fin Bienvenue section-->

<!-- Début Aventuriers -->
<div id="aventuriers">
<div class="container text-left">
<div class="aventuriers-section">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<h1 class="font-weight-bold"><span class="display-4">pars à la rencontre de</span><span class="display-2">nos aventuriers</span></h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div> <!-- Fin Aventiruers -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<!-- Font Awesome logos -->
<script src="https://kit.fontawesome.com/e0a86ff727.js" crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
</body>
</html>