-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
263 lines (209 loc) · 11.1 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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="aos.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kevin's Kitchen</title>
</head>
<body>
<section id="landing">
<div class="bg">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div id="land_container">
<div id="land_content">
<div id="land_img" data-aos="zoom-in" data-aos-delay="300">
<img src="imgs/logo.png" id="land_logo" />
</div>
<p id="land_head">Kevin's Kitchen</p>
<p id="land_text" data-aos="fade-up" data-aos-delay="1000">
We have been serving our customers on Earth with a delightful fast food experience for over 45 years. Now, we have embarked on a journey to bring our delicious cuisine to the Martians and establish the first ever fast food joint on the Red Planet.
</p>
<div id="navigation">
<a href="#about" style="text-decoration: none;"><div class="nav_items" id="abt" data-aos="fade-left" data-aos-delay="1700">About us</div></a>
<a href="#work" style="text-decoration: none;"><div class="nav_items" id="how" data-aos="fade-in" data-aos-delay="5000">How we work</div></a>
<a href="#menu_section" style="text-decoration: none;"><div class="nav_items" id="menu" data-aos="fade-right" data-aos-delay="1600">Menu</div></a>
</div>
</div>
</div>
</section>
<section id="about">
<div id="img_container" data-aos="fade-left" data-aos-delay="200">
<img src="imgs/bURGEDR.gif" id="abt_logo" />
</div>
<div data-aos="fade-right" data-aos-delay="200" id="abt_container">
<div id="abt_content">
<p id="abt_head">About us</p>
<p id="abt_text">
Kevin's Kitchen was established in 2055, by Kevin Baba, who set up the first outlet in Vasant Kunj, New Delhi. Ever since our inception, we have had one vision; to share our delicious items with the entire world.
</p>
<p id="abt_text">
Now we aim to expand the operations beyond our own world and bring our delightful services ti the citizens of the Red Planet.
</p>
</div>
</div>
</section>
<section id="work">
<div id="work_content">
<p id="work_head" data-aos="fade-up" data-aos-delay="200">
How we work
</p>
<p id="work_text" data-aos="fade-in" data-aos-delay="700">
We have mapped out a unique model to overcome the challenges faced by our ambitious venture of taking the fast food experience beyond the sky.
</p>
<a href="Learn_More.html" style="text-decoration: none;"> <div data-aos="zoom-in" data-aos-delay="1200"><div id="learn">Learn More</div></div> </a>
</div>
</section>
<section id="menu_section">
<div id="menu_content">
<p id="menu_head" data-aos="fade-up" data-aos-delay="200">Menu</p>
<p id="menu_text" data-aos="fade-in" data-aos-delay="200">
Our food menu is one of a kind, with an incredible selection of every kind of fast food delicacy you can find on Earth, modified and tested with special ingredients to suit the biology of Martians. These are some of our most delicious items.
</p>
</div>
<div id="menu_items">
<div class="item_row">
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto; z-index: -1;" src="imgs/hamburger.jpeg">
<div class="item_text">
<p class="item_name"> <span id="name"> HamburgerX </span> </p>
<p class="item_info"> Lamb, Space Eggs, Basil and Cucumber, Cheese, Martian Mayonese, bacon.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" id="item_1" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/pizza.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Kevin Baba's Pizza</span></p>
<p class="item_info"> Pepperoni, Bacon, Tomatoes and Basil, Martian Cheese.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/fries.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Classic Fries</span></p>
<p class="item_info"> Good ol' French Fries, topped with Martian herbs.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
</div>
<div class="item_row">
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/hotdog.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Hot Dog 42</span></p>
<p class="item_info"> Mustard, Ketchup, Cheese, Hybrid Sausage, with a side of french fries.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/redgiant-01.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Red Giant </span></p>
<p class="item_info"> Lots of Cheese, Mozerella Sauce, Smoked Chicken and Lamb, Lettuce, and Bacon.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/chips.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Space Wafers</span></p>
<p class="item_info"> Crispy Potato Chips topped with Spicy Martian Ketchup.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
</div>
<div class="item_row">
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/sandwich.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Martian Sandwich</span></p>
<p class="item_info"> Cheese, Ketchup, Mayonnaise, Smoked Chicken Breast, Lettuce. </p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/burritoo-01.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Wrap</span></p>
<p class="item_info"> Roti Sabzi</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
<div class="item_container">
<div class="items" data-aos="zoom-in" data-aos-delay="200"data-aos-once="true">
<img style="width: 100%; height: auto;" src="imgs/meatball-01.jpg">
<div class="item_text">
<p class="item_name"><span id="name">Meatball Monster</span></p>
<p class="item_info"> An unhealthy amount of meat and cheese that could kill you.</p>
<p class="item_price"><b>$420</b></p>
</div>
</div>
</div>
</div>
<video id="hehe" controls="controls">
<source src="roll.mp4" type="video/mp4">
</video>
</section>
<script src="jscript.js"></script>
<section id="footer">
<p id="footer_text">[email protected]</p>
<div id="footer_content">
<a href="https://youtu.be/dQw4w9WgXcQ"><button id="foot_img_container" href="https://youtu.be/dQw4w9WgXcQ"><img id="footer_imgs" src="imgs/facebooc.png"></button></a>
<a href="https://youtu.be/dQw4w9WgXcQ"><button id="foot_img_container" href="https://youtu.be/dQw4w9WgXcQ"><img id="footer_imgs" src="imgs/instagram-sketched.png"></button></a>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="aos.js"></script>
<script type="text/javascript">
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 1000, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
</script>
</body>
</html>