-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
103 lines (95 loc) · 3.35 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<title>Food Haven - About Us</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<style>
.about-box {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
margin-bottom: 30px;
}
.about-content p {
margin-bottom: 20px;
}
.contact-info {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="index.php" class="logo no-hover">Food Haven</a>
<div class="header-right">
<a href="index.php">Home</a>
<a href="upload.php">Upload</a>
<a href="search.html">Search</a>
<a href="about.html">About</a>
</div>
</div>
<div class="meal-wrapper">
<h2 class="title">About Us</h2>
<div class="cont">
<div class="about-box">
<div class="about-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
vehicula ante quis nisi ultricies, vitae facilisis turpis
luctus. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia curae; Maecenas interdum tempor nulla
at ultrices. Duis a tincidunt enim, vel viverra purus. Donec
ullamcorper diam id odio feugiat eleifend. Phasellus gravida
nisl sed sapien rhoncus, eget eleifend risus dignissim. Integer
nec lorem luctus, consequat magna ac, lobortis metus. Mauris
consectetur lacus sit amet lacus rhoncus gravida.
</p>
</div>
</div>
<div class="contact-info">
<h3>Contact Us</h3>
<p>
If you have any inquiries or suggestions, feel free to reach out
to us:
</p>
<p>Email: info@foodhaven.com</p>
</div>
</div>
</div>
</div>
<footer class="footer hidden">
<div class="container">
<p>© 2023 Food Haven. All rights reserved.</p>
</div>
</footer>
<script>
// Get the footer element
const footer = document.querySelector(".footer");
// Add an event listener to the scroll event
window.addEventListener("scroll", () => {
// Calculate the scroll position
const scrollPosition = window.scrollY || window.pageYOffset;
// Calculate the height of the entire page
const pageHeight =
document.documentElement.scrollHeight - window.innerHeight;
// Calculate the threshold for showing the footer (adjust the value as needed)
const threshold = 0.9; // 90% of the page height
// Check if the scroll position is near the bottom of the page
if (scrollPosition > threshold * pageHeight) {
// Remove the "hidden" class from the footer
footer.classList.remove("hidden");
} else {
// Add the "hidden" class to the footer
footer.classList.add("hidden");
}
});
</script>
</body>
</html>