Liam Ferguson
Active Coder
I want to create different pages corresponding to the information on the nav bar that is accessible by clicking on the buttons. How is this achieved? Here is the code for the Nav Bar, additional information will be given on request.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<div class="navbar">
<a class="active" href="#Home"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i class="fa fa-fw fa-user"></i> More Info</a>
</div>
</body>
