-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (173 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#00754a">
<title>Starbucks®</title>
<link rel="icon" href="icons/logo.svg">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<body>
<header class="navigation-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand nav-icon-margin" href="#">
<img src="icons/logo.svg" alt="" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active navigation-bar-text-main" aria-current="page" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link navigation-bar-text-main" href="">REWARDS</a>
</li>
<li class="nav-item">
<a class="nav-link navigation-bar-text-main" href="">GIFT CARDS</a>
</li>
</ul>
<div class="d-flex">
<a class="nav-link" href="#" target="_blank">
<img class="location-icon" src="icons/location-pin-icon.svg" alt=""> <span class=" navigation-bar-text-right navbar-button-font-size nav-bar-text-margin">Find a store</span>
</a>
<button class="nav-link navigation-bar-text-right sign-in-button navbar-button-font-size">Sign In</button>
<button class="nav-link navigation-bar-text-right join-button navbar-button-font-size">Join Now</button>
</div>
</div>
</div>
</nav>
</header>
<section class="container-fluid">
<div class="row card-common card-1">
<div class="col-md-6 card-1-division" style="background-color:#1e3932 ;">
<img class="img-fluid card-1-image-top-bottom-padding" src="photos/delta-skymiles.png" alt="">
</div>
<div class="col-md-6 card-divisions card-text-division d-flex flex-column justify-content-center align-items-center" style="background-color: #1e3932;">
<p class="xl-head-font-size card-head card-top-padding ps-2 pe-2">Starbucks for Life</p>
<p class="head-font-size card-head body-font-weight ps-2 pe-2">Everyone’s favorite holiday game is back. Play for your chance to win free drinks, gift cards and more. *</p>
<button class="card-1-button">Play Now</button>
</div>
</div>
<div class="row card-common" >
<div class="col-md-6 card-divisions card-text-division d-flex pb-5 flex-column justify-content-center align-items-center" style="background-color:#d50032 ;">
<p class="xl-head-font-size card-head card-top-padding ps-2 pe-2">It’s sugar cookie season</p>
<p class="head-font-size card-head body-font-weight ps-2 pe-2">EOur nondairy Sugar Cookie Almondmilk Latte tastes like the holidays. Delicious hot or iced.</p>
<button class="card-button card-bottom-padding mb-4">Order Now</button>
</div>
<div class="col-md-6 card-divisions" >
<img src="photos/2nd.webp" class="img-fluid" alt="">
</div>
</div>
<div class="row card-common">
<div class="col-md-6 card-divisions" >
<img src="photos/3rd.jpg" class="img-fluid" alt="">
</div>
<div class="col-md-6 card-divisions card-text-division d-flex flex-column justify-content-center align-items-center" style="background-color: #00b388;">
<p class="xl-head-font-size card-head card-top-padding ps-2 pe-2">Oh, so jolly</p>
<p class="head-font-size card-head body-font-weight ps-2 pe-2">Dressed in earmuffs and a scarf, this frosted Snowman Cookie is ready for fun.</p>
<button class="card-button card-bottom-margin">Order now</button>
</div>
</div>
<div class="row card-common">
<div class="col-md-6 card-divisions card-text-division d-flex flex-column justify-content-center align-items-center">
<p class="xl-head-font-size card-head card-top-padding ps-2 pe-2">Pairs well with crisp mornings</p>
<p class="head-font-size card-head body-font-weight ps-2 pe-2">Discover the nondairy layers of Apple Crisp Oatmilk Macchiato, now with Starbucks® Blonde Espresso.</p>
<button class="card-button card-bottom-margin">Learn more</button>
</div>
<div class="col-md-6 card-divisions" style="background-color:#006241 ;">
<img src="photos/4th.webp" class="img-fluid" alt="">
</div>
</div>
<div class="row card-common">
<div class="col-md-6 card-divisions " >
<img src="photos/creamy-chai-latte.webp" class="img-fluid" alt="">
</div>
<div class="col-md-6 card-text-division card-divisions d-flex flex-column justify-content-center align-items-center" style="background-color: #1e3932;">
<p class="xl-head-font-size card-head card-top-padding ps-3 pe-3">Let the holiday cheer come to you</p>
<p class="head-font-size card-head body-font-weight ps-2 pe-2">Make the moment merry. Order Starbucks® holiday favorites on Uber Eats***.</p>
<button class="card-button card-bottom-margin">Order Now</button>
</div>
</div>
<div class="row card-common declaration-div justify-content-center">
<div class="col-md-6 declaration-font-size declaration-text pt-4 pb-3 ps-3 pe-3">
<p>*Excludes taxes and gratuities. At participating stores. Some restrictions apply. 150 Stars deposited after first qualifying Starbucks purchase.
Flights purchased close to departure may not earn double Stars. Stars may not be earned on purchases of alcohol, Starbucks Cards and Starbucks
Card reloads. For details, visit <a style="color: black;" href="http://deltastarbucks.com/terms" target="_blank">deltastarbucks.com/terms</a></p>
</div>
</div>
</section>
<footer>
<div class="row">
<div class="col-6 col-md-2 ps-4 pe-4 pt-4">
<p class="footer-menu-heading pb-3">About Us</p>
<p class="footer-menu-list">Our Company</p>
<p class="footer-menu-list">Our Coffee</p>
<p class="footer-menu-list">Stories and News</p>
<p class="footer-menu-list">Starbucks Archive</p>
<p class="footer-menu-list">Investor Relations</p>
<p class="footer-menu-list">Customer Service</p>
</div>
<div class="col-6 col-md-2 ps-4 pe-4 pt-4">
<p class="footer-menu-heading pb-3">Careers</p>
<p class="footer-menu-list">Culture and Values</p>
<p class="footer-menu-list">Inclusion, Diversity, and Equity</p>
<p class="footer-menu-list">College Achievement Plan</p>
<p class="footer-menu-list">Alumni Community</p>
<p class="footer-menu-list">U.S. Careers</p>
<p class="footer-menu-list">International Careers</p>
</div>
<div class="col-6 col-md-2 ps-4 pe-4 pt-4">
<p class="footer-menu-heading pb-3">Social Impact</p>
<p class="footer-menu-list">People</p>
<p class="footer-menu-list">Planet</p>
<p class="footer-menu-list">Environmental and Social Impact Reporting</p>
</div>
<div class="col-6 col-md-2 ps-4 pe-4 pt-4">
<p class="footer-menu-heading pb-3">For Business Partners</p>
<p class="footer-menu-list">Landlord Support Center</p>
<p class="footer-menu-list">Suppliers</p>
<p class="footer-menu-list">Corporate Gift Card Sales</p>
<p class="footer-menu-list">Office and Foodservice Coffee</p>
</div>
<div class="col-6 col-md-2 ps-4 pe-4 pt-4">
<p class="footer-menu-heading pb-3">Order and Pickup</p>
<p class="footer-menu-list">Order on the App</p>
<p class="footer-menu-list">Order on the Web</p>
<p class="footer-menu-list">Delivery</p>
<p class="footer-menu-list">Order and Pickup Options</p>
<p class="footer-menu-list">Explore and Find Coffee for Home</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 ps-4 pt-4">
<img class="footer-social-icon" height="30" src="icons/spotify-icon.svg" alt="">
<img class="ps-3 footer-social-icon"height="30" src="icons/facebook-icon.svg" alt="">
<img class="ps-3 footer-social-icon"height="30" src="icons/pintrest icon.svg" alt="">
<img class="ps-3 footer-social-icon"height="30" src="icons/instagram-icon.svg" alt="">
<img class="ps-3 footer-social-icon"height="30" src="icons/youtube-icon.svg" alt="">
<img class="ps-3 footer-social-icon"height="30" src="icons/twitter-icon.svg" alt="">
</div>
</div>
<div class="row">
<div class="col-12 ps-4 pt-4 pe-4">
<p>Privacy Policy | Terms of Use | CA Supply Chain Act | Cookie Preferences</p>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="footer-copyright-text ps-4 pt-4 pb-4 pe-3">
© 2022 Starbucks Coffee Company. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>