-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (92 loc) · 3.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mean Mug Cafe</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!--Google fonts link-->
<link href="https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@800&display=swap" rel="stylesheet">
</head>
<body>
<header class="landing-page">
<div class="landing-heading">
<h1>MEAN-MUGS CAFE</h1>
</div>
<p>BEST ROASTS IN THE CITY</p>
<footer class="landing-footer">
<h2>SCROLL DOWN FOR MORE</h2>
</footer>
</header>
<div class="main content">
<div class="main-header">
<div class="row">
<div class="col-12">
<h1>MEAN-MUGS SPECIALTIES:</h1>
<br>
<p class="text-center">Explore our selection of speciality mugs or make your own! From our light and heavenly roast to the darkest of the dark, our mugs are specially crafted with only the meanest beans around.</p>
</div>
</div>
<hr>
</div>
<div class="mug-header">
<h1 class="text-center mug-header">FIND YOUR MUG!</h1>
</div>
<div class="mug-container" id="coffees"></div>
<div class="divider">
<div class="row">
<div class="col-12">
<h1 class="text-center">-- OR --</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-selections col-lg-6">
<h1 class="text-highlight mug-header">SEARCH MUGS:</h1>
<form>
<label for="roast-selection" class="form-label">BY ROAST</label>
<select id="roast-selection">
<option value="all">ALL</option>
<option value="light">Light and Heavenly</option>
<option value="medium">Medium and Plain</option>
<option value="dark">Dark and Crispy</option>
</select>
<br>
<p class="text-center" id="or-form"> - OR - </p>
<label for="search" class="form-label">BY MUG</label>
<input type="text" id="search" placeholder="SEARCH BY NAME" required>
<br>
<div class="button-search">
<button id="submit">FIND</button>
</div>
</form>
</div>
<div class="mug-body col-lg-6">
<h1 class="text-highlight mug-header" id="coffee-form">MAKE YOUR OWN!</h1>
<form>
<label for="roast-selection-new" class="add-label">STEP 1: PICK ROAST</label>
<select id="roast-selection-new">
<option value="all">CHOOSE A ROAST</option>
<option value="light">Light and Heavenly</option>
<option value="medium">Medium and Plain</option>
<option value="dark">Dark and Crispy</option>
</select>
<br>
<br>
<label for="roast-new" class="add-label" id="add-mug">STEP 2: ADD MUG</label>
<input type="text" id="roast-new" placeholder="NAME YOUR MUG!" required>
<br>
<div class="button-add">
<button id="submit-new">ADD MUG!</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>