-
Notifications
You must be signed in to change notification settings - Fork 0
/
fixedMenu.html
97 lines (92 loc) · 4.55 KB
/
fixedMenu.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Menu</title>
<style>
*{
font-family: poppins;
margin: 0;padding: 0;
}
html{
scroll-behavior: smooth;
}
.navbar{
background-color: #333;
overflow: hidden;
position: fixed;
padding: 10px 0px;
width: 100%;
/* position: fixed; */
}
.navbar a{
color: white;
text-decoration: none;
font-size: 15px;
padding: 20px;
text-align: center;
transition: 0.3s;
}
.navbar a:hover,.active{
background-color: #04aa9d;
}
.nav-right{
float: right;
}
.nav-left{
float: left;
}
.content{
padding-top: 8rem;
}
h2{
font-size: 4rem;
color: #04aa9d;
padding: 2rem 0rem;
text-align: center;
}
p{
padding: 8rem 15rem;
font-size: 20px;
}
#home,#news,#contact{
height: 100vh;
text-align: center;
align-items: center;
/* border-bottom: 1px solid #04aa9d; */
/* padding: 0rem 8rem; */
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-left">
<a href="#home" class="active" onclick="activAte(this)">Home</a>
<a href="#news" onclick="activAte(this)">News</a>
<a href="#contact" onclick="activAte(this)">Contact</a>
</div>
<div class="nav-right">
<a href="#">SignIn</a>
<a href="#">Login</a>
</div>
</div>
<div class="content">
<div id="home">
<h2>Home</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium possimus ex quae eaque. Perspiciatis quam doloribus tenetur, nobis aliquid eos quibusdam facilis aliquam harum esse! Perferendis pariatur repellendus quisquam magnam error repellat aspernatur quae ad, hic eum cumque id quidem est repudiandae, dolor praesentium itaque. Architecto nobis possimus autem nulla cumque pariatur a officia ipsam odio veritatis iure omnis, ipsum voluptatibus, illum provident ex perferendis soluta blanditiis rem nisi unde! Temporibus similique velit, maiores omnis culpa natus praesentium quod nulla aperiam obcaecati adipisci tenetur, odit tempore, itaque molestiae consectetur earum nam! Unde vero laboriosam sunt consectetur suscipit maiores repellat inventore!</p>
</div>
<div id="news">
<h2>News</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium possimus ex quae eaque. Perspiciatis quam doloribus tenetur, nobis aliquid eos quibusdam facilis aliquam harum esse! Perferendis pariatur repellendus quisquam magnam error repellat aspernatur quae ad, hic eum cumque id quidem est repudiandae, dolor praesentium itaque. Architecto nobis possimus autem nulla cumque pariatur a officia ipsam odio veritatis iure omnis, ipsum voluptatibus, illum provident ex perferendis soluta blanditiis rem nisi unde! Temporibus similique velit, maiores omnis culpa natus praesentium quod nulla aperiam obcaecati adipisci tenetur, odit tempore, itaque molestiae consectetur earum nam! Unde vero laboriosam sunt consectetur suscipit maiores repellat inventore!</p>
</div>
<div id="contact">
<h2>Contact</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium possimus ex quae eaque. Perspiciatis quam doloribus tenetur, nobis aliquid eos quibusdam facilis aliquam harum esse! Perferendis pariatur repellendus quisquam magnam error repellat aspernatur quae ad, hic eum cumque id quidem est repudiandae, dolor praesentium itaque. Architecto nobis possimus autem nulla cumque pariatur a officia ipsam odio veritatis iure omnis, ipsum voluptatibus, illum provident ex perferendis soluta blanditiis rem nisi unde! Temporibus similique velit, maiores omnis culpa natus praesentium quod nulla aperiam obcaecati adipisci tenetur, odit tempore, itaque molestiae consectetur earum nam! Unde vero laboriosam sunt consectetur suscipit maiores repellat inventore!</p>
</div>
</div>
<script>
</script>
</body>
</html>