-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (60 loc) · 2.88 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
<!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">
<title>MealDB</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<header class="w-50 mx-auto">
<section class="header-sec">
<h1 class="text-center">Taste Our Delicious Foods <br>Right Now</h1>
<p class="text-center">Discover a world of culinary delights at our food website! From easy weeknight meals
to decadent
desserts, we
have recipes to satisfy any craving. Browse our extensive collection of dishes from around the globe,
and
get inspired to create your own masterpieces in the kitchen. Join our community today and start cooking!
</p>
<div class="input-group mb-3 w-100">
<input id="search-text" type="text" class="form-control font-bold" placeholder="Search food"
aria-label="Recipient's username" aria-describedby="button-addon2">
<button id="btn-search" class="btn btn-warning font-weight-bold" type="button"
id="button-addon2">Search</button>
</div>
</section>
</header>
<main>
<section id="meals-container" class="container mx-auto row row-cols-1 row-cols-md-2 g-8">
</section>
<!-- Meal Details Modal -->
<div class="modal fade" id="mealDetails" tabindex="-1" role="dialog" aria-labelledby="mealDetailsLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="meal-name" class="modal-title" id="mealDetailsLabel">Modal title</h5>
<button class="btn btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div id="meal-modal" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous"></script>
<!-- Scripts -->
<script src="js/app.js"></script>
</body>
</html>