-
Notifications
You must be signed in to change notification settings - Fork 0
/
Grid.html
85 lines (75 loc) · 3.65 KB
/
Grid.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
<!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">
<!-- Link for Awesome Font -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Links for Outside Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Grid.css">
<title>Restaurant</title>
<!-- For favicon Image -->
<link rel="icon" type="image/x-icon" href="images/favicon_io/favicon.ico">
</head>
<body>
<div class="container">
<div id="banner">
<img src="images/FoodBanner.jpg" alt="Banner Image">
</div>
<div id="nav">
<ul>
<li><a href="#"> Home </a> </li>
<li><a href="#bodyArea"> Food Items </a> </li>
<li><a href="#sideBar"> About Us </a> </li>
<li><a href="#footer"> Contact Us </a> </li>
</ul>
</div>
<div id="header">
<h1>The Best Restaurants - Best Food and Drinks</h1>
</div>
<div id="sideBar">
<video autoplay loop muted>
<source type="video/mp4" src="images/FoodVideo.mp4"></source>
</video>
<h2>Your Favourite Food is here</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo aspernatur cum numquam quia aperiam
alias? Possimus nostrum magni eum sit corporis quae, perspiciatis voluptates assumenda magnam, quia et
aspernatur unde! Quam enim consequuntur est at. Quia quidem dolores provident enim ipsam impedit illo?
Asperiores, vero?</p>
</div>
<div id="bodyArea">
<div>
<img src="images/FoodItem1.png" alt="Food Image">
<img src="images/FoodItem2.png" alt="Food Image">
<img src="images/FoodItem3.png" alt="Food Image">
<img src="images/FoodItem4.png" alt="Food Image">
<img src="images/FoodItem5.png" alt="Food Image">
<img src="images/FoodItem6.png" alt="Food Image">
<img src="images/FoodItem7.png" alt="Food Image">
<img src="images/FoodItem8.png" alt="Food Image">
<img src="images/FoodItem9.png" alt="Food Image">
<img src="images/FoodItem10.png" alt="Food Image">
<img src="images/FoodItem11.png" alt="Food Image">
<img src="images/FoodItem12.png" alt="Food Image">
<img src="images/FoodItem13.png" alt="Food Image">
<img src="images/FoodItem14.png" alt="Food Image">
<img src="images/FoodItem15.png" alt="Food Image">
</div>
</div>
<div id="footer">
<ul>
<li><i id="icon1" class="fa fa-facebook-square"></i><a href="#">Facebook</a></li>
<li><i id="icon2" class="fa fa-instagram"></i><a href="#">Instagram</a></li>
<li><i id="icon3" class="fa fa-youtube-square"></i><a href="#">YouTube</a></li>
<li><i id="icon4" class="fa fa-linkedin-square"></i><a href="#">Linked In</a></li>
</ul>
<hr>
<p>All rights reserved || © 03/07/2022</p>
</div>
</div>
</body>
</html>