User-527908287 posted
I recently tried to create a website and make the interface look like the image attached with this message.
I’m trying to make two navigation bars appear HORIZONTALLY and also make content of the navigation bar appear same as the image attached to this message.
BASICALLY, I WANT MY WEBPAGE TO APPEAR JUST AS THE ONES IN THE IMAGES I ATTACHED WITH THIS MESSAGE.
https://imgur.com/affp7Dh
IN THIS SECOND IMAGE I WANT TO CREATE IT AS EXACTLY AS IT APPEARS:
https://imgur.com/E69UYn4
IN THIS THIRD IMAGE, I WANT TO CREATE A NAVIGATION THAT WILL APPEAR ON THE LEFT PANE OF THE SCREEN AS SHOWN HERE
https://imgur.com/VxY3vrw
THANK YOU IN ANTICIPATION.
The code I used is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> PayPower</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/StyleSheet.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style=" background-image:url('images/Dox.png'); overflow-x:hidden;">
<form id="form1" runat="server">
<div>
<div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: orangered; font-family: Nunito; height: 8px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: orangered; color: white; background-;">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Homepage.aspx"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
<li><a href="#" style="color: #FFFFFF">About Us</a></li>
<li><a href="#" style="color: #FFFFFF">Login/Register</a></li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="navbar" style="background-color: black; font-family: Nunito; height: 8px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: white; color: white; background-;">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Homepage.aspx"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
<li><a href="#" style="color: #FFFFFF">About Us</a></li>
<li><a href="#" style="color: #FFFFFF">Login/Register</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
