-
Notifications
You must be signed in to change notification settings - Fork 0
/
16_CSS_Horizontal_Navigation.html
73 lines (66 loc) · 7.59 KB
/
16_CSS_Horizontal_Navigation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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;
margin: 0;
}
.main-header{
background: white url("img/image4.jpeg") no-repeat scroll top left;
padding: 12px;
color: white;
}
.main-nav{
background-color: black;
padding: 5px;
position: sticky;
top: 0;
}
.main-nav a{
color: white;
text-decoration: none;
padding: 10px 25px;
display: inline-block;
font-size: 18px;
}
.main-nav a:hover{
background: linear-gradient(45deg,black,orangered);
border-radius: 50px;
box-shadow: 0 0 5px white;
}
.main-nav a.active{
background: linear-gradient(45deg,black,darkred);
border-radius: 50px;
box-shadow: 0 0 5px white;
}
</style>
</head>
<body>
<header class="main-header">
<h1>UiBrains Technologies</h1>
</header>
<nav class="main-nav">
<a href="#" class="active">Home</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Careers</a>
<a href="#">Courses</a>
</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>