-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
102 lines (97 loc) · 5.48 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
<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>Responsive Navigation Bar With Slide Effect</title>
<!-- Google Fonts CDN Link -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<!-- stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="menu-wrapper">
<div class="hamburger-menu">
<div class="menu-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!-- Your hero section and content -->
<section class="hero-background">
<img src="aa.png" class="Parallax"/>
<h2>Responsive Navigation Bar</h2>
<div class="circle"></div>
</section>
<div class="content">
<h2>Parallax Effect</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio accusamus
magni eum labore minus, similique dolore veniam repellat adipisci illo
sapiente, suscipit quibusdam laborum vitae est reprehenderit id
temporibus eos, quia asperiores expedita sequi. Amet odio, tenetur id
aliquam voluptatem ab maxime aperiam corrupti placeat a quidem
voluptates vel neque animi nemo delectus temporibus sunt deserunt
incidunt, ducimus enim quis, ipsum eveniet rerum! Molestiae amet
asperiores excepturi tempore voluptate, placeat architecto dolor, ipsa
ea nihil, voluptates dicta. Harum, voluptatibus doloribus! Modi aperiam
non quod necessitatibus minima similique cupiditate, vel sequi alias sit
eum obcaecati mollitia doloribus magnam voluptatem autem neque
voluptatum reiciendis odio? Molestiae maiores earum sequi accusamus
cumque distinctio voluptatum ullam esse, nostrum nisi! Praesentium ipsum
mollitia, molestiae ab iure ut temporibus deleniti fugiat, nobis culpa
dolorum adipisci sed dignissimos non eligendi nam quas tempore
doloribus, quo blanditiis necessitatibus. Commodi itaque modi
consectetur aut ea. Animi obcaecati omnis ad blanditiis velit cumque
explicabo ducimus facilis, fugiat inventore tempore dolore doloribus ea
atque et eos temporibus dolores aliquid libero quia sapiente ut. Ipsum
perferendis maiores ea eius expedita iure reiciendis in molestias
perspiciatis, eum officiis odio? Reprehenderit tenetur nobis nam cum
placeat, corporis cupiditate sint ipsa ipsum aspernatur quasi quae illo.
Modi officiis perspiciatis fuga delectus ullam qui exercitationem
reiciendis quasi obcaecati quae, repellendus voluptatem ipsam nisi,
omnis veniam ipsa illo? Repellat quasi sequi corrupti, soluta excepturi
cupiditate ipsam ex veritatis deserunt nam, delectus ad voluptates
distinctio vero quisquam nemo temporibus dicta laborum nesciunt possimus
beatae dolor. Sequi iure autem temporibus magnam tempore repellendus,
quod laboriosam nobis obcaecati ullam sapiente saepe quaerat sint
aperiam maxime id voluptates nihil corporis ab officiis? Ipsam laborum
sint mollitia aliquid est debitis natus voluptates itaque voluptatum
dicta, quam recusandae nulla aliquam numquam harum vel fuga dolor labore
beatae! Iure totam nesciunt beatae aspernatur suscipit rem minima nam,
reprehenderit vero. Quibusdam tempore voluptatibus quis impedit rerum
incidunt vitae totam? Aperiam commodi dicta facilis esse laboriosam
labore magnam dolore voluptate quas, nostrum quaerat eligendi quam,
tempora repudiandae! Nobis animi alias accusamus consequuntur dolorum
qui obcaecati, est sit explicabo molestiae doloribus quo! Minus quas
possimus cum soluta rem eaque. Perspiciatis minima quam quasi aut dolor
culpa corporis placeat dignissimos corrupti laborum dolore saepe in
beatae at repellendus delectus magnam necessitatibus, sapiente sit
molestiae totam explicabo? Consequuntur, eum necessitatibus? Amet
quaerat laudantium, perferendis voluptatum ipsum maiores debitis et,
magnam beatae, tempora molestias labore deserunt in numquam id voluptas!
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#c9691a" fill-opacity="1" d="M0,224L48,234.7C96,245,192,267,288,250.7C384,235,480,181,576,149.3C672,117,768,107,864,128C960,149,1056,203,1152,186.7C1248,171,1344,85,1392,42.7L1440,0L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<footer>
<p>© 2024 All Rights Reserved</p>
</footer>
<!-- jQuery CDN Link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Custom js -->
<script src="main.js"></script>
</body>
</html>