-
Notifications
You must be signed in to change notification settings - Fork 0
/
recipes.html
155 lines (146 loc) · 7.63 KB
/
recipes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Linking Bootstrap CSS from CDN for styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Linking Bootstrap JavaScript from CDN for interactive components -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- Preconnecting to Google Fonts for faster loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Linking Google Fonts for typography -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Linking Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<!-- Linking custom CSS file for additional styling -->
<link rel="stylesheet" href="css/style.css">
<title>Recipes</title>
</head>
<body>
<!-- Main navigation bar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary p-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dish Discovery</a>
<!-- Button for toggling the navbar on smaller screens -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a aria-current='page' class='nav-link active' href='index.html'>Home</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='favRec.html'>Favorite Recipe</a>
</li>
</ul>
<div class="d-flex buttons">
<!-- Login and Sign Up buttons -->
<a class='btn btn-outline-primary me-2' href='/login'>Log In</a>
<a class='btn btn-outline-secondary' href='signin.html'>Sign Up</a>
</div>
<div class="d-flex userInfo align-items-center justify-contnt-center d-none gap-2 fs-5">
<a class='me-2' href='login.html'>
</a>
<!-- Logout icon -->
<i class="fa-solid fa-arrow-right-from-bracket text-dark"></i>
<!-- Button to view favorite recipes in an offcanvas -->
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"
aria-controls="offcanvasScrolling" class="btn position-relative">
View Favorites
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
</span>
</button>
<a class="userN text-dark text-decoration-none" href=""></a>
</div>
</div>
</div>
</nav>
<!-- Jumbotron for main heading -->
<div class="jumbotron jumbotron-fluid my-4 p-3">
<div class="container text-center my-4">
<h1 class="display-4">Explore Our Delicious Recipes</h1>
<p class="lead">Find a variety of tasty recipes for every occasion.</p>
</div>
</div>
<div class="container text-center my-4">
<div class="row recipesRow">
<!-- Recipes will be dynamically loaded here -->
</div>
<div class="row">
<!-- Offcanvas component for showing favorite recipes -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Favorite recipes</h5>
<!-- Button to close the offcanvas -->
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body recipesCart">
<!-- Cart for favorite recipes -->
</div>
<div class="d-grid gap-2 col-6 mx-auto w-100 my-3">
<!-- Button to show favorite recipes -->
<a class='btn btn-primary' href='favRec.html' role='button'>Show Favorite Recipes</a>
<!-- Button to delete all favorite recipes -->
<button class="btn btn-danger deleteAllBtn d-none" type="button">Delete All Recipes</button>
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="bg-body-tertiary text-center text-lg-start mt-5">
<div class="container p-4">
<!-- Links Section -->
<div class="row">
<!-- Logo and About section -->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Dish Discovery</h5>
<p>Discover the best recipes from around the world and manage your favorite dishes easily.</p>
</div>
<!-- Quick Links section -->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Quick Links</h5>
<ul class="list-unstyled mb-0">
<li><a class='text-dark' href='index.html'>Home</a></li>
<li><a class='text-dark' href='/recipes'>Recipes</a></li>
<li><a class='text-dark' href='/favrec'>Favorite Recipe</a></li>
</ul>
</div>
<!-- Account Links section -->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">My Account</h5>
<ul class="list-unstyled mb-0">
<li><a class='text-dark' href='login.html'>Log In</a></li>
<li><a class='text-dark' href='signin.html'>Sign Up</a></li>
</ul>
</div>
<!-- Contact Info section -->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Contact Us</h5>
<p>Email: support@dishdiscovery.com</p>
<p>Phone: +123 456 7890</p>
</div>
</div>
</div>
<!-- Copyright Section -->
<div class="text-center p-3 bg-light">
<span>© 2024 Dish Discovery. All Rights Reserved.</span>
</div>
</footer>
<!-- Linking the main JavaScript file -->
<script src="js/main.js"></script>
</body>
</html>