-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFoodGallery.html
More file actions
114 lines (101 loc) · 6.38 KB
/
Copy pathFoodGallery.html
File metadata and controls
114 lines (101 loc) · 6.38 KB
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Food Gallery</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-yellow">
<h1> Food Gallery </h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Glorious Food</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="recipes.html">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="NearYou.html">Near You</a>
</li>
<li class="nav-item">
<a class="nav-link" href="FoodGallery.html">Food Gallery</a>
</li>
</ul>
</div>
</nav>
<br>
<p>Food is essential to the growth of body, for the maintenance and repair of muscle, blood, skin and bones and other tissues and organs in the body. Food is important for our body to function properly. It has carbohydrates, fats, proteins, vitamins and minerals that helps your body to stay fit and healthy.</p>
<h4>Here are a few pictures to inspire your dishes: </h4>
<div>
<!-- Full-width images with number text -->
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://schmittat.uk/wp-content/uploads/Food-Photographer-Guildford-92009_23955068690_l-600x400.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://polarastudio.com/wp-content/uploads/K4A9394_124-600x400.jpgg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://bobcaddickphotography.com/wp-content/uploads/2018/05/Commercial-37028-600x400.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://theflexitarian.co.uk/wp-content/uploads/2019/04/Pasta-Primavera-with-Watercress-Almond-Pesto-vegan-%C2%A9-The-Flexitarian-Annabelle-Randles-v8-600x400.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="http://www.cityofstories.co.uk/assets/Uploads/Blog-2017/31-May/_resampled/CroppedFocusedImageWyIxMjAwIiwiNjAwIl0/Stoke-Mill-Paella-with-norfolk-wild-sea-bass-600x400.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://d104wv11b7o3gc.cloudfront.net/wp-content/uploads/2017/05/sugar-free-lemon-cupcakes-cream-cheese-frosting-9-600x400.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="https://schmittat.uk/wp-content/uploads/Food-Photographer-Guildford-92009_23955068690_l-600x400.jpg" style="width:100%" onclick="currentSlide(1)" alt="Learn how to cook this carbonara on our recipes page">
</div>
<div class="column">
<img class="demo cursor" src="https://polarastudio.com/wp-content/uploads/K4A9394_124-600x400.jpg" style="width:100%" onclick="currentSlide(2)" alt="Learn how to bake these brownies on our recipes page">
</div>
<div class="column">
<img class="demo cursor" src="https://bobcaddickphotography.com/wp-content/uploads/2018/05/Commercial-37028-600x400.jpg" style="width:100%" onclick="currentSlide(3)" alt="Learn how to make this chicken curry on our recipes page">
</div>
<div class="column">
<img class="demo cursor" src="https://theflexitarian.co.uk/wp-content/uploads/2019/04/Pasta-Primavera-with-Watercress-Almond-Pesto-vegan-%C2%A9-The-Flexitarian-Annabelle-Randles-v8-600x400.jpg" style="width:100%" onclick="currentSlide(4)" alt="Get inspired by viewing our food gallery">
</div>
<div class="column">
<img class="demo cursor" src="http://www.cityofstories.co.uk/assets/Uploads/Blog-2017/31-May/_resampled/CroppedFocusedImageWyIxMjAwIiwiNjAwIl0/Stoke-Mill-Paella-with-norfolk-wild-sea-bass-600x400.jpg" style="width:100%" onclick="currentSlide(5)" alt="Get inspired by viewing our food gallery">
</div>
<div class="column">
<img class="demo cursor" src="https://d104wv11b7o3gc.cloudfront.net/wp-content/uploads/2017/05/sugar-free-lemon-cupcakes-cream-cheese-frosting-9-600x400.jpg" style="width:100%" onclick="currentSlide(6)" alt="Get inspired by viewing our food gallery">
</div>
</div>
</div>
<script src="group_project/background2.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>