-
Notifications
You must be signed in to change notification settings - Fork 0
/
recipe-grid.html
143 lines (129 loc) · 7.07 KB
/
recipe-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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Grids</title>
<link rel="stylesheet" href="recipe-grid.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:wght@100..400&family=Playwrite+AU+TAS:wght@100..400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<h1>Recipestic</h1>
<p>Welcome to Recipestic, discover fantastic recipes here!</p>
</header>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand text-white" href="#" id="nav-home"><i class="fas fa-hamburger"></i> Recipestic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvbCollapse"
aria-controls="nvbCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nvbCollapse">
<ul class="navbar-nav ml-auto">
<form action="Search" class="search-form form-inline my-2 my-lg-0" id="search-form" role="search">
<div id="search-wrapper">
<input type="text" id="search-input" class="search-input" placeholder=" Search Recipes..."
required>
<button id="search-icon"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</form>
<li class="nav-item pl-1">
<a class="nav-link" href="#" id="nav-recipes"><i
class="fa fa-th-list fa-fw mr-1"></i>Recipes</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fas fa-heartbeat"></i> Nutrition</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#"><i class="fa fa-info-circle fa-fw mr-1"></i>About</a>
</li>
<li class="nav-item pl-1">
<a class="nav-link" href="#footer"><i
class="fa fa-phone fa-fw fa-rotate-180 mr-1"></i>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section id="recipe-container" class="recipe-container">
<section id="recipe-grid-article" class="recipe-grid-article">
<div class="sort-container">
<label class="sort-by-label">Sort By: </label>
<select id="sort-by" class="sort-by">
<option value="">Select</option>
<option value="by-increasing-ingredient-amount">Ingredients: Min-Max</option>
<option value="by-decreasing-ingredient-amount">Ingredients: Max-Min</option>
<!-- more options in the future -->
</select>
</div>
<div id="recipe-grid-container" class="recipe-grid-container"></div>
<!-- Recipe grids added from recipeGrid.js -->
</section>
<section id="sidebar" class="sidebar">
<div class="send-email-container" id="send-email-container">
<h3>Sign up for our newsletter</h3>
<form id="email-form" method="post">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<button type="submit">Subscribe</button>
</form>
</div>
</section>
</section>
</main>
<footer id="footer">
<div class="jumbotron jumbotron-fluid bg-secondary p-4 mt-5 mb-0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-light text-center">
<h5 class="card-title text-white display-4" style="font-size:23px;font-weight:bold;">
Recipestic Headquarter</h5>
<p>Danneskiold-Samsøes Allé 41,<br> 1434 København K.</p>
<p>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 cizgi">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:23px;font-weight:bold;">
Contact us</h5>
<a class="text-light d-block" style="margin-left: -20px" href="#"><i
class="fa fa-phone mr-2"></i>+45 00000000</a>
<a class="text-light d-block" href="#"><i
class="fa fa-envelope mr-2"></i>admin@recipestic.com</a>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="card bg-secondary border-0">
<div class="card-body text-center">
<h5 class="card-title text-white display-4" style="font-size:23px;font-weight:bold;">
Social Media</h5>
<a class="text-light" href="#"><i class="fab fa-facebook-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fab fa-twitter-square fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fab fa-instagram fa-fw fa-2x"></i></a>
<a class="text-light" href="#"><i class="fab fa-linkedin fa-fw fa-2x"></i></a>
<p style="color:white">© 2024 Recipestic
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="recipe-grid.js"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>