-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (157 loc) · 6.45 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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!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">
<!-- Materilize CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Google fonts, Materialize Icons, and styling links-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
<!--Application title-->
<title>The Match Made in Heaven</title>
</head>
<body>
<!--Nav-->
<nav>
<div class="nav-wrapper">
<a href="./index.html" class="brand-logo center">Match Made In Heaven</a>
<a href="./favrecipe.html" class="fav right">Favorite Recipe</a>
</div>
</nav>
<!--Hero Section-->
<div class="hero"></div>
<!--Materilize container and rows-->
<div class="container">
<div class="row" >
<!--Food radio buttons-->
<div class="col s12 m10 l5" id="findrecipe"><h3 class="selections">Food</h3>
<form action="#">
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="american" />
<span>American</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="korean" />
<span>Korean</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="mexican"/>
<span>Mexican</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="italian"/>
<span>Italian</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="group1" type="radio" />
<span>Indian</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="group1" type="radio" />
<span>French</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="japanese"/>
<span>Japanese</span>
</label>
</p>
<p>
<label>
<input class="with-gap" name="selector" type="radio" value="chinese" />
<span>Chinese</span>
</label>
</p>
</form>
<!--Get Recipe buttons-->
<button class="btn waves-effect yellow darken-3" type="submit" name="action" id="get-recipe">Get Recipe
<i class="material-icons right">send</i>
</button>
</div>
<!--Empty div-->
<div class="col s2"></div>
<!--Drink radio buttons and Get Drink buttons-->
<div class="col s12 m10 l5" id="finddrink">
<h3 class="selections">Feeling Lucky</h3>
<button class="btn waves-effect yellow darken-3" id="get-drink">Get Drink
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!--Recipe card displaying name of dish, ingredients, image, and link to recipe-->
<div class="col s12 m10 l5" id="foodCard">
<div class="foodCard remove">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<img src="..." class="card-img-top" alt="Food image">
<p class="card-text"></p>
<a href="#" class="btn waves-effect yellow darken-3" id="get-recipe-link" name="action" type="submit" target="_blank">Get Recipe Link
<i class="material-icons right">link</i></button></a>
<button class="btn waves-effect yellow darken-3" type="submit" name="action" id="save-recipe">Save Recipe
<i class="material-icons right">save</i></button>
</div>
</div>
</div>
<!--Empty div-->
<div class="col s2"></div>
<!--Drink recipe card displaying name of drink, image, units of measure, and ingredients-->
<div class="col s12 m10 l5" id="drinkCard">
<div class="drinkCard remove">
<div class="drinkCard-body">
<h5 class="drinkCard-title" id="drinkCard-title">Card Title</h5>
<img src="..." class="drinkCard-img-top" id="drinkCard-img-top" alt="Random drink">
<p class="drinkCard-text" id="drinkCard-text">
</p>
<button class="btn waves-effect yellow darken-3" type="submit" name="action" id="save-drink">Save Drink
<i class="material-icons right">save</i></button>
</div>
</div>
</div>
</div>
</div>
<!--Footer-->
<footer class="page-footer blue-grey darken-3">
<div class="container">
<div class="row">
<div class="col s12">
<h5 class="footer-title">Developed By:</h5>
</div>
<div class="row">
<div class="col l12 m12 s12">
<ul id="credits">
<li><i class="fa-brands fa-github"></i><p>Olivia Seonyeong Lee</p><p><a href="https://github.com/oliviasylee" target="_blank">github.com/oliviasylee</a></p></li>
<li><i class="fa-brands fa-github"></i><p>Reginald Prince</p><p><a href="https://github.com/Reggiejr44" target="_blank">github.com/Reggiejr44</a></p></li>
</ul>
</div>
</div>
</div>
</div>
<!--Copyright-->
<div class="footer-copyright blue-grey darken-3">
<div class="container">
©2022 Copyright reserved to Match made in heaven team
</div>
</div>
<!--Linking jquery and script file-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./assets/javascript/script.js"></script>
</body>
</html>