Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Navigation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#" class="active">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
</nav>
<div class="mainContent">
<h1>Welcome to our page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nemo nulla numquam repellendus
soluta. A adipisci aliquam corporis, cum deserunt dicta eius facere id impedit ipsa minus molestias nam
nihil numquam quaerat quis recusandae sequi ullam vero, vitae! Alias autem dolorum eos eum iure magni, nam
nihil, nobis perspiciatis porro possimus quam temporibus vel! Ab accusamus dicta dolorum error harum illo
ipsum magnam maxime porro possimus quaerat quam quod ratione rem rerum tempora tempore, tenetur ut veritatis
vero voluptas voluptatibus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus illum ipsam iste minima possimus quas
qui quibusdam sequi suscipit? Aliquam aperiam architecto aspernatur delectus dolorem earum exercitationem
expedita explicabo laboriosam laudantium optio, porro quam qui sint soluta? Accusamus ex id incidunt libero
nisi pariatur quisquam velit. Ab aspernatur blanditiis commodi dicta distinctio dolor dolorem dolores
doloribus eius ex explicabo magni maxime nam, obcaecati officiis optio perspiciatis quam repellendus tempore
totam ut, voluptate voluptates? Aut cumque facere laudantium nulla voluptatum. Accusamus autem distinctio
esse, est ipsum iure nam praesentium quidem vitae voluptatum. A adipisci consectetur dolores, eaque earum,
excepturi explicabo facilis illum iure iusto modi natus perferendis, qui quibusdam reprehenderit repudiandae
saepe sapiente suscipit tenetur totam ullam unde vero voluptatem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nemo nulla numquam repellendus
soluta. A adipisci aliquam corporis, cum deserunt dicta eius facere id impedit ipsa minus molestias nam
nihil numquam quaerat quis recusandae sequi ullam vero, vitae! Alias autem dolorum eos eum iure magni, nam
nihil, nobis perspiciatis porro possimus quam temporibus vel! Ab accusamus dicta dolorum error harum illo
ipsum magnam maxime porro possimus quaerat quam quod ratione rem rerum tempora tempore, tenetur ut veritatis
vero voluptas voluptatibus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus illum ipsam iste minima possimus quas
qui quibusdam sequi suscipit? Aliquam aperiam architecto aspernatur delectus dolorem earum exercitationem
expedita explicabo laboriosam laudantium optio, porro quam qui sint soluta? Accusamus ex id incidunt libero
nisi pariatur quisquam velit. Ab aspernatur blanditiis commodi dicta distinctio dolor dolorem dolores
doloribus eius ex explicabo magni maxime nam, obcaecati officiis optio perspiciatis quam repellendus tempore
totam ut, voluptate voluptates? Aut cumque facere laudantium nulla voluptatum. Accusamus autem distinctio
esse, est ipsum iure nam praesentium quidem vitae voluptatum. A adipisci consectetur dolores, eaque earum,
excepturi explicabo facilis illum iure iusto modi natus perferendis, qui quibusdam reprehenderit repudiandae
saepe sapiente suscipit tenetur totam ullam unde vero voluptatem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nemo nulla numquam repellendus
soluta. A adipisci aliquam corporis, cum deserunt dicta eius facere id impedit ipsa minus molestias nam
nihil numquam quaerat quis recusandae sequi ullam vero, vitae! Alias autem dolorum eos eum iure magni, nam
nihil, nobis perspiciatis porro possimus quam temporibus vel! Ab accusamus dicta dolorum error harum illo
ipsum magnam maxime porro possimus quaerat quam quod ratione rem rerum tempora tempore, tenetur ut veritatis
vero voluptas voluptatibus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus illum ipsam iste minima possimus quas
qui quibusdam sequi suscipit? Aliquam aperiam architecto aspernatur delectus dolorem earum exercitationem
expedita explicabo laboriosam laudantium optio, porro quam qui sint soluta? Accusamus ex id incidunt libero
nisi pariatur quisquam velit. Ab aspernatur blanditiis commodi dicta distinctio dolor dolorem dolores
doloribus eius ex explicabo magni maxime nam, obcaecati officiis optio perspiciatis quam repellendus tempore
totam ut, voluptate voluptates? Aut cumque facere laudantium nulla voluptatum. Accusamus autem distinctio
esse, est ipsum iure nam praesentium quidem vitae voluptatum. A adipisci consectetur dolores, eaque earum,
excepturi explicabo facilis illum iure iusto modi natus perferendis, qui quibusdam reprehenderit repudiandae
saepe sapiente suscipit tenetur totam ullam unde vero voluptatem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nemo nulla numquam repellendus
soluta. A adipisci aliquam corporis, cum deserunt dicta eius facere id impedit ipsa minus molestias nam
nihil numquam quaerat quis recusandae sequi ullam vero, vitae! Alias autem dolorum eos eum iure magni, nam
nihil, nobis perspiciatis porro possimus quam temporibus vel! Ab accusamus dicta dolorum error harum illo
ipsum magnam maxime porro possimus quaerat quam quod ratione rem rerum tempora tempore, tenetur ut veritatis
vero voluptas voluptatibus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus illum ipsam iste minima possimus quas
qui quibusdam sequi suscipit? Aliquam aperiam architecto aspernatur delectus dolorem earum exercitationem
expedita explicabo laboriosam laudantium optio, porro quam qui sint soluta? Accusamus ex id incidunt libero
nisi pariatur quisquam velit. Ab aspernatur blanditiis commodi dicta distinctio dolor dolorem dolores
doloribus eius ex explicabo magni maxime nam, obcaecati officiis optio perspiciatis quam repellendus tempore
totam ut, voluptate voluptates? Aut cumque facere laudantium nulla voluptatum. Accusamus autem distinctio
esse, est ipsum iure nam praesentium quidem vitae voluptatum. A adipisci consectetur dolores, eaque earum,
excepturi explicabo facilis illum iure iusto modi natus perferendis, qui quibusdam reprehenderit repudiandae
saepe sapiente suscipit tenetur totam ullam unde vero voluptatem!</p>
</div>
</body>
</html>
Output:
