-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (99 loc) · 3.21 KB
/
index.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar-simple-1</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Times New Roman', Times, serif;
color: chocolate;
}
nav {
/* border: 2px solid red; */
display: flex;
justify-content: space-between;
padding: 12px 128px 10px 122px;
background: #cfd8dc;
}
nav ul {
/* border: 3px solid red; */
display: flex;
list-style: none;
}
nav li {
/* border: 1px solid rgb(123, 0, 255); */
padding-right: 15px;
}
nav a {
text-decoration: none;
color: #0d47a1
}
.content {
border: 2px solid blue;
margin: 55px;
padding: 55px;
height: 1000px;
}
.navbarArea {
/* border: 2px solid rgb(237, 81, 81); */
padding: 0;
margin-bottom: 20px;
}
/* dashboard */
.dashboard ul {
list-style: none;
background-color: rgb(245, 237, 134);
position: fixed;
bottom: 15px;
right: 20px;
}
.dashboard ul li,
a {
text-decoration: none;
margin: 8px;
padding: 5px;
}
</style>
</head>
<body>
<div class="navbarArea">
<nav>
<h2>site_Name</h2>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Updates</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<br>
<div class="content">
<p>The basic types of navigation: In these types, there is usually a logo on one side, a
simple navigation menu on the other side, and maybe a button beside that. These are
three different parts of these types that can be altered as per the design aesthetic. For
example, the navigation menu can be centered or left-aligned; the logo can be right or
center-aligned, etcetera.
</p>
<br>
<p>This is most simple nav bar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque facere aliquam
officia, eveniet consequatur ipsam qui magnam animi eaque, laborum quia nisi quod ea repellendus assumenda
odit, vel mollitia quidem. Obcaecati, itaque.</p>
</div>
<!-- dashboard -->
<div class="dashboard">
<ul>
<li><a href="1-navbar-simple/index.html">1-navbar-simple</a></li>
<li><a href="2-navbar-sticky-on-scroll/index2.html">2-navbar-sticky-on-scroll</a></li>
<li><a href="3-navbar-with-submenu/index3.html">3-navbar-with-submenu</a></li>
<li><a href="4-navbar-sticky-submenu/index4.html">4-navbar-sticky-submenu</a></li>
<li><a href="5-navbar-side/index5.html">5-navbar-side</a></li>
</ul>
</div>
</body>
</html>