index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- character encoding capable of encoding all characters on the web -->
	<meta charset="UTF-8">
	<!-- Viewport meta tag for Responsive Web Design -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- without X-UA-Compatible meta browser compatibility-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Website SEO compatibility -->
	<meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Doe">
    <title>Menu Design All Layout Using</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <!-- Vendors 3rd party css files Google Fonts -->
    <link rel="stylesheet" href="vendors/css/all.min.css">
	<link rel="stylesheet" href="vendors/css/fontawesome.css">
    <!-- Vendors 3rd party browser compatibility css files -->
	<link rel="stylesheet" href="vendors/css/normalize.css">
	<!-- Custom CSS Files -->
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/responsive.css">
</head>
<body>


<!-- header Section 01-->
<h2>Single Level Menu: layout display</h2>
<header class="header-section1">
	<div class="header-widget1">
		<nav class="navbar1">
			<ul class="mian-menu1">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Protfolio</a></li>
			</ul>
		</nav>
	</div>
</header>
<!-- header Section 02-->
<h2>Single Level Menu: layout float</h2>
<header class="header-section2">
	<div class="header-widget2">
		<nav class="navbar2">
			<ul class="mian-menu2">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Protfolio</a></li>
			</ul>
		</nav>
	</div>
</header>
<!-- header Section 03-->
<h2>Single Level Menu: layout flex box</h2>
<header class="header-section3">
	<div class="header-widget3">
		<nav class="navbar3">
			<ul class="mian-menu3">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Protfolio</a></li>
			</ul>
		</nav>
	</div>
</header>


	
	<!-- jQuery Library Files -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- vendors 3rd party browser compatibility js file -->
	<script src="vendors/js/html5shiv.min.js"></script>
	<script src="vendors/js/respond.min.js"></script>
	<script src="vendors/js/selectivizr-min.js"></script>
	<!-- Custom JS Files -->
	<script src="js/main.js"></script>
</body>
</html>