-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
164 lines (137 loc) · 7.72 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delish</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body class=" max-w-7xl overflow-x-hidden bg-white m-auto relative ">
<nav class="w-full sticky top-0 z-20 ">
<div
class="w-full px-3 md:px-10 h-14 py-2 bg-white bg-opacity-45 backdrop-blur-sm flex items-center justify-between">
<a href="index.html" class="h-full">
<img src="assets/Logo.svg" class="w-28 h-full" alt="">
</a>
<div class="hidden md:flex space-x-4 items-center h-full">
<a href="index.html" class="h-full flex items-center px-4 hover:text-primary font-semibold">Home</a>
<a href="menu.html" class="h-full flex items-center px-4 hover:text-primary font-semibold">Menu</a>
<a href="about.html"
class="h-full flex items-center px-4 hover:text-primary font-semibold text-primary">About</a>
<a href="reachus.html" class="h-full flex items-center px-4 hover:text-primary font-semibold">Reach Us</a>
</div>
<button id="navbutton" class="flex md:hidden justify-center items-center h-full aspect-square">
<i id="navclose" class="fa fa-close text-xl text-primary hidden"></i>
<i id="navopen" class="fa fa-bars text-xl text-primary"></i>
</button>
</div>
<!-- h-[calc(100vh-56px)] -->
<div id='navmenu' onclick="console.log('ssss');"
class="w-full h-screen overflow-y-auto -z-10 absolute -left-full top-0 pointer-events-none transition-all duration-300 pt-14 bg-white bg-opacity-45 backdrop-blur-lg opacity-0 ">
<div class="w-full [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:bg-primary ">
<a href="index.html">
<div class="w-full border-b border-primary hover:bg-slate-200 p-5 text-xl hover:text-primary ">
<span class="block text-center mx-auto">Home</span>
</div>
</a>
<a href="menu.html">
<div class="w-full border-b border-primary hover:bg-slate-200 p-5 text-xl hover:text-primary">
<span class="block text-center mx-auto">Menu</span>
</div>
</a>
<a href="about.html">
<div class="w-full border-b border-primary hover:bg-slate-200 p-5 text-xl hover:text-primary text-primary">
<span class="block text-center mx-auto">About Us</span>
</div>
</a>
<a href="reachus.html">
<div class="w-full hover:bg-slate-200 p-5 text-xl hover:text-primary">
<span class="block text-center mx-auto">Reach Us</span>
</div>
</a>
</div>
</div>
<script>
document.getElementById('navbutton').addEventListener('click', toggleNav)
function toggleNav() {
document.getElementById('navmenu').classList.toggle('-left-full')
document.getElementById('navmenu').classList.toggle('left-0')
document.getElementById('navmenu').classList.toggle('opacity-0')
document.getElementById('navmenu').classList.toggle('pointer-events-none')
document.getElementById('navclose').classList.toggle('hidden')
document.getElementById('navopen').classList.toggle('hidden')
document.body.classList.toggle('overflow-y-clip')
}
</script>
</nav>
<section class="thumbnail-div min-h-screen relative py-14 px-3 md:px-10 overflow-hidden flex justify-center items-center about">
<img src="./assets/restaurant.jpg" class="inset-0 w-full h-full absolute object-cover" alt="">
<div class="bg-white bg-opacity-50 backdrop-blur-sm py-6 px-10 max-w-3xl w-full text-center z-10">
<h1 class="text-5xl text-primary font-bold font-Dancing drop-shadow-2xl">About us</h1>
<p class="text-lg font-medium ">
Welcome to Delish, where nutritious food meets fast, convenient dining! We offer a unique culinary
experience that combines delicious fast food with a focus on health and nutrition. Our menu features a variety
of flavorful options made with fresh, high-quality ingredients. From vibrant salads to delicious steaks and
wholesome grain bowls, we focus on different dietary preferences. Enjoy the best of both worlds convenience
and nourishment.
</div>
</section>
<section class="py-14 min-h-screen text-center px-5 md:px-14 ">
<h1 class="capitalize text-primary text-3xl font-semibold mb-4">Our Terms</h1>
<p class=" border shadow-md rounded-md p-5 w-full mx-auto text-lg max-w-xl">
We are committed to providing our customers with the best possible dining experience. Our focus on quality
ingredients and attentive service ensures that every meal is a memorable one. We take pride in our warm
hospitality and strive to exceed your expectations. <br>
We believe that the key to a great dining experience is a combination of excellent food quality, impeccable
service, and welcoming atmosphere. Our team of experienced chefs uses only the freshest and most exquisite
ingredients to create dishes that are both delicious and visually appealing. Our staff is trained to provide
attentive and personalized service, ensuring that every customer feels valued and appreciated.
<br>
We look forward to welcoming you to our restaurant and providing you with an exceptional dining experience that
you won’t forget. Please let us know if there is anything we can do to make your visit more enjoyable.
</p>
</section>
<footer class=" px-10 py-12 bg-zinc-900 w-full text-white">
<div class="flex flex-col gap-8 sm:gap-0 sm:flex-row justify-around items-center sm:items-start ">
<div class="self-center flex flex-col justify-between items-center sm:items-start">
<div class="flex flex-col items-center sm:block">
<img src="assets/LogoBW.svg" alt="" class="w-28 h-11">
<p class="max-w-48 text-xs text-center md:text-left font-light">Lorem ipsum dolor sit amet consectetur, adipisicing elit. delectus
debitis?</p>
<div class="mt-2">
<a href="#"><i class="fa-brands fa-facebook text-2xl "></i></a>
<a href="#"><i class="fa-brands fa-instagram text-2xl ml-4"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter text-2xl ml-4"></i></a>
</div>
</div>
</div>
<div class="text-center sm:text-left">
<p class="font-bold">Links:</p>
<a href="#" class="block mt-2 font-extralight">Home</a>
<a href="#" class="block mt-2 font-extralight">About</a>
<a href="#" class="block mt-2 font-extralight">Menu</a>
<a href="#" class="block mt-2 font-extralight">Contact Us</a>
</div>
<div>
<p class="font-bold">Contact Us:</p>
<div class="mt-2 flex items-start">
<i class="fa-solid fa-envelope text-sm text-primary"></i> <span class="ml-2">[email protected]</span>
</div>
<div class="mt-2 flex items-start">
<i class="fa-solid fa-phone text-sm text-primary"></i>
<span class="font-semibold ml-2">+1 234 5678 9123 </span>
</div>
<div class="mt-2 flex items-start">
<i class="fa-solid fa-location-dot text-base text-primary"></i>
<span class="font-light max-w-36 inline-block ml-2">1651 Adeline St, Oakland, CA 94607</span>
</div>
</div>
</div>
<p class="text-center text-lg font-thin text-zinc-400 mt-8">Developed By: Osama Abo Ajeeb</p>
</footer>
<script src="js/about.js"></script>
</body>
</html>