-
Notifications
You must be signed in to change notification settings - Fork 0
/
favRec.html
134 lines (122 loc) · 6.29 KB
/
favRec.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset for proper character encoding -->
<meta charset="UTF-8">
<!-- Responsive meta tag to ensure the page scales correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5.3.3 CSS 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">
<!-- Bootstrap JavaScript bundle for interactive components like modals and dropdowns -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- Google Fonts for importing Poppins 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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- FontAwesome for icons (social media, arrows, etc.) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<!-- External CSS file for custom styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Page title -->
<title>Favorite Recipe</title>
</head>
<body>
<!-- Navigation bar with Bootstrap classes -->
<nav class="navbar navbar-expand-lg bg-body-tertiary p-3">
<div class="container-fluid">
<!-- Brand logo/name with an animation class -->
<a class="navbar-brand animate__animated animate__bounce" href="#">Dish Discovery</a>
<!-- Toggle button for mobile view -->
<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>
<!-- Collapsible navigation links -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- List of navigation links -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
<!-- Buttons for log in and sign up -->
<div class="d-flex buttons">
<a class="btn btn-outline-primary me-2" href="login.html">Log In</a>
<a class="btn btn-outline-secondary" href="signin.html">Sign Up</a>
</div>
<!-- User info section, initially hidden -->
<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>
<i class="fa-solid fa-arrow-right-from-bracket text-dark"></i>
<a class="userN text-dark text-decoration-none" href=""></a>
</div>
</div>
</div>
</nav>
<!-- Jumbotron section for main title and description -->
<div class="jumbotron jumbotron-fluid my-4 p-3">
<div class="container text-center my-4">
<h1 class="display-4">Your Favorite Recipes</h1>
<p class="lead">All your saved recipes in one place.</p>
</div>
</div>
<!-- Container to hold the recipe cards -->
<div class="container">
<div class="NewRecipe row">
<!-- Add your recipe cards here -->
</div>
</div>
<!-- Footer section with contact and quick links -->
<footer class="bg-body-tertiary text-center text-lg-start mt-5">
<div class="container p-4">
<div class="row">
<!-- Footer section 1: About the website -->
<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>
<!-- Footer section 2: Quick links -->
<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 href="index.html" class="text-dark">Home</a></li>
<li><a href="recipes.html" class="text-dark">Recipes</a></li>
<li><a href="favRec.html" class="text-dark">Favorite Recipe</a></li>
</ul>
</div>
<!-- Footer section 3: User account links -->
<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 href="login.html" class="text-dark">Log In</a></li>
<li><a href="signin.html" class="text-dark">Sign Up</a></li>
</ul>
</div>
<!-- Footer section 4: Contact information -->
<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>
<!-- External JS file to handle favorite recipes logic -->
<script src="js/favRecipe.js"></script>
</body>
</html>