-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
217 lines (185 loc) · 6.25 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia+Sans"> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,1000;1,900&display=swap');
</style>
<link rel="stylesheet" href="/css/styles.css">
<script src="https://kit.fontawesome.com/3e291ddc30.js" crossorigin="anonymous"></script>
<title>Starbucks® Rewards</title>
</head>
<body>
<!-- Header Section -->
<header>
<!-- LOGO -->
<div>
<a href="#">
<img class="logo" src="/assets/logo.png" />
</a>
</div>
<div class="global-menu">
<ul>
<li><a href="#">Menu</a></li>
<li><a class="unique-id" href="#">Rewards</a></li>
<li><a href="#">Gift Cards</a></li>
</ul>
</div>
<div class="aux-menu">
<a>
<i class="fa-sharp fa-solid fa-location-dot"></i> Find a store
</a>
<button class="white-button">Sign in</button>
<button class="black-button">Join now</button>
</div>
</header>
<!-- Main Section -->
<!-- When scrolling through the website, it's always visible and fixed. -->
<div class="bar">
<p>
Starbucks® Reward
</p>
</div>
<div class="main-section">
<h1>Free Coffee is a tap away</h1>
<p>Join now to start earning Rewards.</p>
<button class="green-button">Join now</button>
<p><a href="#">join in the app</a> for the best experience</p>
</div>
<!-- Second Section -->
<div class="even_section">
<div class="second-section--1">
<h2>Getting started is easy</h2>
<p>Earn Stars and get rewarded in a few easy steps.</p>
</div>
<div class="second-section--2">
<div>
<img src="/assets/1.jpg" alt="One">
<h3>Create an account</h3>
<p>To get started, <a href="#">join now.</a> You can also <a href="#">join in the app</a> to get access to the
full
range of Starbucks® Rewards benefits.</p>
</div>
<div>
<img src="/assets/2.jpg" alt="Second">
<h3>Order and pay how you’d like</h3>
<p>Use cash, credit/debit card or save some time and pay right through the app. You’ll collect Stars all ways.
<a href="#">Learn how</a>
</p>
</div>
<div>
<img src="/assets/3.jpg" alt="Third">
<h3>Earn Stars, get Rewards</h3>
<p>As you earn Stars, you can redeem them for Rewards—like free food, drinks, and more. Start redeeming with as
little as 25 Stars!</p>
</div>
</div>
</div>
<!-- Third Section -->
<div>
<h2>Get your favorites for free</h2>
<div>
<div>
<h3>25⭐</h3>
<h4>Customize your drink</h4>
<p>Make your drink just right with an extra espresso shot, dairy substitute or a dash of your favorite syrup.
</p>
</div>
<div>
<h3>50⭐</h3>
<h4>Brewed hot coffee, bakery item or hot tea</h4>
<p>Pair coffee cake or an almond croissant with your fresh cup of hot brew.</p>
</div>
<div>
<h3>150⭐</h3>
<h4>Handcrafted drink, hot breakfast or parfait</h4>
<p>Have a really good morning with a breakfast sandwich, oatmeal or your favorite drink.</p>
</div>
<div>
<h3>200⭐</h3>
<h4>Salad, sandwich or protein box</h4>
<p>Nourish your day with a hearty Chipotle Chicken Wrap or Eggs & Cheese Protein Box.</p>
</div>
<div>
<h3>400⭐</h3>
<h4>Select merchandise or at-home coffee</h4>
<p>Take home a signature cup, a bag of coffee or your choice of select coffee accessories.</p>
</div>
</div>
</div>
<!-- Fourth Section -->
<div class="even_section">
<div class="fourth-section--1">
<h2>Endless Extras</h2>
<p>Joining Starbucks® Rewards means unlocking access to exclusive benefits. Say hello to easy ordering, tasty
Rewards
and—yes, free coffee.</p>
</div>
<div class="fourth-section--2">
<div>
<img src="assets/fun-freebies.jpg" alt="fun-freebies">
<h4>Fun freebies</h4>
<p>Not only can you earn free coffee, look forward to a birthday treat plus coffee and tea refills.</p>
<a href="#">Learn more</a>
</div>
<div class="box">
<img src="assets/order-and-pay-ahead.jpg" alt="order-and-pay-ahead">
<h4>Order & pay ahead</h4>
<p>Enjoy the convenience of in-store, curbside or drive-thru pickup at select stores.</p>
<a href="#">Learn more</a>
</div>
<div>
<img src="assets/get-to-free-faster.jpg" alt="get-to-free-faster">
<h4>Get to free faster</h4>
<p>Earn Stars even quicker with Bonus Star challenges, Double Star Days and exciting games.</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
<!-- Fifth Section -->
<table>
<thead>
<h2>Cash or card, you earn Stars</h2>
<p>No matter how you pay, you can earn Stars with your morning coffee. Those Stars add up to (really
delicious) Rewards.</p>
<!-- <tr>
<th>
</th>
</tr> -->
</thead>
<tbody>
<tr>
<td>
<h3>1★Star per dollar</h3>
<p>Pay as you go</p>
</td>
<td>
<h4>Scan and pay separately</h4>
<p>Use cash or credit/debit card at the register.</p>
</td>
<td>
<h4>Save payment in the app</h4>
<p>Check-out faster by saving a credit/debit card or PayPal to your account. You’ll be able to order ahead or
scan and pay at the register in one step.</p>
</td>
</tr>
<tr>
<td>
<h3>2★Stars per dollar</h3>
<p>Add funds in the app</p>
</td>
<td>
<h4>Preload</h4>
<p>To save time and earn Stars twice as fast, add money to your digital Starbucks Card using any payment
option. Scan and pay in one step or order ahead in the app.</p>
</td>
<td>
<h4>Register your gift card</h4>
<p>Then use it to pay through the app. You can even consolidate balances from multiple cards in one place.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>