forked from gocodeup/coffee-project
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
153 lines (146 loc) · 8.54 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
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<title>Three Broomsticks Coffee Co.</title>
<link rel="icon" type="image/x-icon" href="assets/website-logo-small.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<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=Cinzel:wght@700&family=Lexend+Peta:wght@100;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page-wrapper mb-3">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"
id="header-box">
<div>
<img src="assets/website-logo-large .png" height="100" width="100"/>
</div>
<div class=" mb-2 mb-md-0 justify-content-start mx-5">
<h1 class="text-center text-white">Three Broomsticks Coffee Co.</h1>
</div>
<ul class="nav col-12 col-md-auto mb-2 justify-content-end mb-md-0 mx-5">
<li><a href="#" class=" text-white px-2 ">Home</a></li>
<li><a href="#accordionFlushExample" class="text-white px-2">FAQs</a></li>
<li><a href="https://www.wizardingworld.com/" class="text-white px-2">Get Sorted</a></li>
<li><a href="#about-us" class=" text-white px-2 ">About Us</a></li>
</ul>
</header>
<div class="container">
<div class="topRow">
<div class="row bg-dark bg-opacity-75 m-3 border rounded text-white p-3 my-5" id="coffees">
<!-- This div holds our rendered coffee objects-->
</div>
<!-- This Section holds the two cards to search/add coffee -->
<div class="row bottomRow ">
<div class="col-5 card p-2 bg-dark bg-opacity-50
border rounded mx-5 text-white">
<h2 class="text-center p-3 card-header">Search Coffee</h2>
<h4>Roast</h4>
<form>
<label for="roast-selection"></label>
<select class="my-2" id="roast-selection">
<option>all</option>
<option>light</option>
<option>medium</option>
<option>dark</option>
</select>
</form>
<label for="searchCoffeeName" class="form-label my-2"><h4>Coffee Name</h4></label>
<input type="text" class="form-control my-1" id="searchCoffeeName" placeholder="Enter Coffee Name">
<input id="submitTopSearch" type="submit">
</div>
<div class="col-5 card p-2 bg-dark bg-opacity-50
border rounded mx-5 text-white">
<h2 class="text-center p-3 card-header">Add a Coffee</h2>
<h4>Roast</h4>
<form>
<label for="roast-selection2"></label>
<select class="my-2" id="roast-selection2">
<option>light</option>
<option>medium</option>
<option>dark</option>
</select>
</form>
<label for="searchName" class="form-label my-2"><h4>Name</h4></label>
<input type="text" class="form-control my-1" id="searchName" placeholder="Enter New Coffee Name">
<input id="submitBottomSearch" type="submit">
</div>
</div>
</div>
<!-- This div holds our FAQs -->
<div class="accordion accordion-flush my-5 border rounded" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Where do we source our beans from?
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">We source our coffee beans from the finest witches and wizards in the
world. Most of our resources are locally obtained, either by hand or by wand.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Where are you located?
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">We are located in the great town of Hogsmeade, just across the great
lake from Hogwarts! Come on by for a nice break from class or work and enjoy a pleasantly
crafted drink right next to Olivanders Wand Shop and Florish and Botts.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
What is the difference between Light, Medium and Dark?
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><p>Light roasts have a mild taste similar to that of a toasted grain,
with higher levels of acidity and slightly more caffeine than darker roasts, all because of the
shortened roasting process.</p>
<p>Medium roast is great for drip coffee brew, French press, or cold brew, where the long brew
time will allow more of the flavor notes to come forward.</p>
<p>Dark roasts have a deep dark-chocolate coloring with a bold, toasted bread and cacao flavor
profile, minimal acidity, and decreased caffeine. Because of the longer roasting time, dark
roast coffees are best for fast brewing methods such as an Aeropress or espresso where the
water goes quickly through the grounds.</p></div>
</div>
</div>
</div>
<!-- This is the card that holds the About us -->
<div class="card my-5 justify-center" style="width: auto" id="about-us">
<img src="assets/hogwarts concept.jpeg" class="card-img-top" alt="hogwarts concept art">
<div class="card-body text-center">
<h4 class="mb-3">About Us</h4>
<p class="card-text">Three Broomsticks Coffee Co was founded by owners Presley Black** and Emily Mendes.
Hogwarts Alumni, they came together in 2023 to craft some of the most magical blends of coffee since
the fall of the Dark Lord.</p>
<p>In their spare time they enjoy attending Quidditch Matches (Go Slytherin!), caring for Magical Beasts
and Creatures at Newt Scamanders Wildlife Sanctuary and strolling through the many shops of
Hogsmeade.</p> <br>
<p>** No relation to the Black Family</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>