-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathliquor.html
130 lines (128 loc) · 4.79 KB
/
liquor.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Acme&family=Luckiest+Guy&family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Booze and Brews - liquor</title>
<link rel="icon" href="assets/images/bb-icon.png">
</head>
<body class="body">
<nav class="navbar is-flex-desktop nav-style" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<h1 class="title title-margin label-text">
<a class="label-text header-margin hover" href="index1.html"
>Booze and Brews</a
>
</h1>
</div>
<div id="navbarBasicExample" class="navbar-end">
<div class="navbar-end">
<a class="label-text header-margin hover" href="beer.html">
Breweries
</a>
</div>
</nav>
<section class="section bb-section">
<div class="container bb-container">
<div class="columns is-vcentered is-fluid is-two-thirds input-search">
<div class="search-div column is-one-quarter">
<h1 class="acme-font title label-text is-size-4-mobile text-center">Mix A Drink!</h1>
<label class="label label-text liquor-center is-size-6-mobile">Search drinks by ingredient.</label>
<label class="label label-text liquor-center is-hidden-mobile">Be specific. <br>light rum vs. dark rum, lime vs. lime juice, etc.</label>
<input class="input ingredient-input is-size-7-mobile is-size-6-tablet liquor-center" type="text" placeholder="type your ingredient here...">
<button class="button is-light is-outlined is-fullwidth is-size-7-mobile search-button liquor-center">Search</button>
</div>
<!-- <div class="column"></div> -->
</div>
<div class="columns is-centered is-two-thirds is-multiline instruction-div"></div>
<div class="columns is-centered is-two-thirds is-multiline recipe-div"></div>
</div>
<!-- modal pops up when drink image clicked -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img class="modal-drink-img" alt="Drink Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p class="drink-name title">drink name</p>
<p class="glass-type">glass type</p>
<!-- ingredient table -->
<table class="table ingredients-table">
<thead>
<tr>
<th>Amount</th>
<th>Ingredient</th>
</tr>
</thead>
<tbody class="table-body"></tbody>
</table>
<p class="recipe">recipe goes here</p>
</div>
</div>
</article>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<footer class="foot">
<h2>Project ❤️️ One.</h2>
<p>
© 2020
<a
class="hover footer-links"
href="https://github.com/jbouchard13"
target="_blank"
>John</a
>,
<a
class="hover footer-links"
href="https://github.com/Kaleighspurio"
target="_blank"
>Kaleigh</a
>,
<a
class="hover footer-links"
href="https://github.com/karenastell"
target="_blank"
>Karen</a
>,
<a
class="hover footer-links"
href="https://github.com/LynnBoudreau"
target="_blank"
>Lynn</a
>
</footer>
</section>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
<script src="./assets/js/liquorscript.js"></script>
</body>
</html>