Why is my nav bar not displaying using HTML CSS and Bootstrap?-CodePudding

I am trying to make a website and stated to code the nav bar using HTML, CSS and Bootstrap but my nav bar is not displaying in Chrome when I open my index.html file. I just see an empty white screen instead of my nav bar. Please see code below and advise where I am going wrong.

This is my html file:

<html>
<head>
<title> Name of website </template>
<link rel="stylesheet" href="style.css">
<!-- CSS only Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >

<!--JQuery Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">

</head>
<body>
<section id="nav-bar">
<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>
  <div  id="navbarNav">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Features</a>
      </li>
      <li >
        <a  href="#">Pricing</a>
      </li>
      <li >
        <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
</section>
</body>

</html>

and this is my css file:

*
 {
    margin: 0;
    padding: 0;
}
body
{
    font-family: Arial, Helvetica, sans-serif;
    
}

CodePudding user response：

This is causing the page to fail the rendering

<title> Name of website </template>

It should be

<title> Name of website </title>