-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (101 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mediaquery.css" .css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap" rel="stylesheet">
<title>Coffee Survey</title>
</head>
<body>
<header>
<div class="header-img-container">
<img class="header-img" src="images/header2.jpg" alt="lattes served around decorative plants">
</div>
<div class="header-text">
<h1>Life happens, coffee helps</h1>
<p>Start the day off on the right foot.</p>
</div>
</header>
<main id="main">
<section class="coffee-facts">
<img src="images/bodyimg1.jpg" alt="statistics about coffee consumption in the US">
<img src="images/coffeestats.jpg" alt="breakdown of coffee statistics in the US">
</section>
<section class="survey-purpose">
<h1>About Our Survey</h1>
<p>Everyday, our customers enjoy approximately 10,000 cups of coffee created by our
finest
baristas. We have
formulated a visual of the most frequently ordered coffee beverages across our cafés.
<img src="images/typesofcoffee.jpg" alt="various methods for drinking coffee">
<p><em>We want to know more about your daily
coffee consumption to better service our customers' preferences and create an even greater experience for
valuable customers like you. Thank you for your contribution!</em></p>
</section>
<section class="form-design">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name"><strong>Name</strong></label>
<input id="name" class="form-control" type="text" name="name" required>
</div>
<div class="form-group">
<label id="email-label" for="email"><strong>Email</strong></label>
<input id="email" class="form-control" type="text" name="email" required>
</div>
<div class="form-group"><label id="number-label" for="age"><strong>Age (optional)</strong></label>
<input id="number" class="form-control" type="number" name="age" min="10" max="99">
</div>
<div class="form-group"><label class="job-label" for="job"><strong>Which option best describes your current
role?</strong></label>
<select id="dropdown" class="form-control">
<option value="Role">Select current role</option>
<option value="Student">Student</option>
<option value="Full-time">Full-time</option>
<option value="part-time">Part-time</option>
<option value="other">Other</option>
<option value="n/a">Prefer not to say</option>
</select>
</div>
<div class="form-group">
<label class="consumption-label" for="consumption"><strong>How many cups of coffee do you typically drink
daily?</strong></label>
<label><input class="cups" type="radio" name="consumption">1 cup</label>
<label><input class="cups" type="radio" name="consumption">2 cups</label>
<label><input class="cups" type="radio" name="consumption">3 cups</label>
<label><input class="cups" type="radio" name="consumption">4 cups or more</label>
</div>
<div class="form-group">
<label class="favorite-label" for="favorite"><strong>Which is your favorite way to drink coffee?
(Check all that apply) </strong></label>
<label><input class="cups" type="checkbox" value="favorite">Black</label>
<label><input class="cups" type="checkbox" value="favorite">Latte</label>
<label><input class="cups" type="checkbox" value="favorite">Cappuccino</label>
<label><input class="cups" type="checkbox" value="favorite">Espresso</label>
<label><input class="cups" type="checkbox" value="favorite">Red Eye</label>
<label><input class="cups" type="checkbox" value="favorite">Macchiato</label>
<label><input class="cups" type="checkbox" value="favorite">Mocha</label>
<label><input class="cups" type="checkbox" value="favorite">Affogato</label>
</div>
<div class="form-group">
<label><strong>What are some ways in which we can better your experience at our cafés?</strong></label>
<textarea id="comments" class="input-textarea" name="comment"
placeholder="Enter your comment here"></textarea>
</div>
<input id="submit" type="submit" value="Submit">
</form>
</section>
</main>
<footer>
<div class="footer-style">
<video autoplay loop>
<source src="videos/coffeecup.mp4" type="video/mp4">
</video>
<h2>See you latté!</h2>
</div>
</footer>
</body>
</html>