├── img ├── box-b.png ├── box-c.png ├── box-d.png ├── box-e.jpg ├── box-f1.jpg ├── box-f2.jpg ├── logo.svg ├── marker.svg ├── social-facebook.svg ├── social-instagram.svg ├── social-pinterest.svg ├── social-spotify.svg ├── social-twitter.svg └── social-youtube.svg ├── index.html ├── readme.md ├── script.js └── style.css /img/box-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-b.png -------------------------------------------------------------------------------- /img/box-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-c.png -------------------------------------------------------------------------------- /img/box-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-d.png -------------------------------------------------------------------------------- /img/box-e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-e.jpg -------------------------------------------------------------------------------- /img/box-f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-f1.jpg -------------------------------------------------------------------------------- /img/box-f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/starbucks-homepage/60826fc4f498f9062ad94a70e68ecbc03d7e6b78/img/box-f2.jpg -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/marker.svg: -------------------------------------------------------------------------------- 1 | map-pointer-glyph -------------------------------------------------------------------------------- /img/social-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /img/social-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/social-pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 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 | -------------------------------------------------------------------------------- /img/social-spotify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/social-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/social-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Starbucks Coffee Company 9 | 10 | 11 | 50 | 51 | 52 | 76 | 77 | 78 |
79 |
80 |

Jingle all the way to free favorites

81 |

82 | Join Starbucks® Rewards for delicious deals & exclusive offers. 83 | Learn more 84 |

85 |
86 |
87 | 88 | 89 |
90 | 91 |
92 |

New to the nice list

93 |

94 | For a nondairy twist on a holiday cookie classic, try the new Iced 95 | Sugar Cookie Almondmilk Latte. 96 |

97 | Order Now 98 |
99 |
100 | 101 | 102 |
103 | 104 |
105 |

Merry moment

106 |

107 | Treat yourself to a festive Sugar Plum Cheese Danish with a nicely 108 | spiced sugar-plum spread. 109 |

110 | Order Now 111 |
112 |
113 | 114 | 115 |
116 | 117 |
118 |

Starbucks Thanksgiving Blend

119 |

120 | This elegant dark roast returns, showcasing flavors from some of the 121 | world’s major coffee-growing regions. 122 |

123 | Order Now 124 |
125 |
126 | 127 | 128 |
129 | 130 |
131 |

Fighting hunger this holiday

132 |

133 | Hunger is affecting millions of people across America this holiday 134 | season. Join us in our commitment to hunger relief and help feed 135 | neighbors in need. 136 |

137 | Order Now 138 |
139 |
140 | 141 | 142 |
143 |
144 | 145 |
146 |
147 |

Let the holiday cheer come to you

148 |

149 | Make the moment merry. Order Starbucks® holiday favorites on Uber 150 | Eats.* 151 |

152 | Order Now 153 |
154 |
155 |
156 |
157 | 158 |
159 |
160 |

Loved Passing on Netflix?

161 |

162 | Our new social series about film adaptations kicks off with the 163 | actors and directors who brought the book to life. 164 |

165 | Order Now 166 |
167 |
168 |
169 |
170 | 171 |
172 | 173 | 198 | 199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Starbucks Homepage Clone 2 | 3 | HTML/CSS clone of Starbucks.com. This is from my [YouTube tutorial](https://youtu.be/x_n2FGNsm0o) 4 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById('menu-btn') 2 | const nav = document.getElementById('menu') 3 | 4 | function navToggle() { 5 | btn.classList.toggle('open') 6 | nav.classList.toggle('hidden') 7 | document.body.classList.toggle('no-scroll') 8 | } 9 | 10 | btn.addEventListener('click', navToggle) 11 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); 2 | 3 | :root { 4 | --color-primary: #006241; 5 | --color-secondary: #d50032; 6 | --color-extra: #d4e9e2; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | html, 16 | body { 17 | font-family: 'Open Sans', sans-serif; 18 | line-height: 1.4; 19 | color: #000; 20 | } 21 | 22 | a { 23 | color: #000; 24 | } 25 | 26 | ul { 27 | list-style: none; 28 | } 29 | 30 | p { 31 | margin: 5px 0; 32 | line-height: 1.7; 33 | } 34 | 35 | img { 36 | max-width: 100%; 37 | } 38 | 39 | section a { 40 | color: #fff; 41 | } 42 | 43 | /* Navbar */ 44 | .navbar { 45 | width: 100%; 46 | height: auto; 47 | background-color: #fff; 48 | padding: 20px; 49 | box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 6%), 50 | 0 0 2px rgb(0 0 0 / 7%); 51 | } 52 | 53 | .navbar-container { 54 | display: flex; 55 | justify-content: space-between; 56 | align-items: center; 57 | max-width: 1440px; 58 | margin: 0 auto; 59 | } 60 | 61 | .navbar ul { 62 | display: flex; 63 | align-items: center; 64 | } 65 | 66 | .navbar li { 67 | margin: 0 15px; 68 | font-weight: bold; 69 | } 70 | 71 | .navbar a { 72 | color: #000; 73 | text-decoration: none; 74 | } 75 | 76 | .navbar a:hover { 77 | color: var(--color-primary); 78 | } 79 | 80 | .navbar-brand img { 81 | width: 50px; 82 | height: 50px; 83 | } 84 | 85 | .navbar-nav-left { 86 | text-transform: uppercase; 87 | flex: 1; 88 | margin-left: 20px; 89 | } 90 | 91 | .navbar-nav-right li:first-child a { 92 | display: flex; 93 | align-items: center; 94 | } 95 | 96 | .navbar-nav-right img { 97 | height: 20px; 98 | width: 20px; 99 | margin-right: 10px; 100 | } 101 | 102 | .navbar-nav-right li:nth-child(2) { 103 | margin: 0 5px; 104 | } 105 | 106 | /* Footer & Social */ 107 | .footer-container { 108 | width: 100%; 109 | max-width: 1440px; 110 | margin: 0 auto; 111 | padding: 0 30px 30px; 112 | } 113 | 114 | .social { 115 | display: flex; 116 | align-items: center; 117 | margin: 20px 0; 118 | } 119 | 120 | .social img { 121 | width: 35px; 122 | height: 35px; 123 | } 124 | 125 | .social a { 126 | text-decoration: none; 127 | margin-right: 20px; 128 | } 129 | 130 | .divider { 131 | width: 95%; 132 | height: 1px; 133 | background-color: #ccc; 134 | margin: 40px auto; 135 | } 136 | 137 | /* Box */ 138 | .box { 139 | margin-bottom: 30px; 140 | } 141 | 142 | .box-inner { 143 | max-width: 700px; 144 | margin: 0 auto; 145 | } 146 | 147 | .box-text { 148 | max-width: 500px; 149 | text-align: center; 150 | justify-self: center; 151 | padding: 20px 0; 152 | margin: 0 auto; 153 | } 154 | 155 | .box-text .btn { 156 | margin-top: 20px; 157 | } 158 | 159 | .box-f .box-text { 160 | max-width: 600px; 161 | } 162 | 163 | /* Grid Styles */ 164 | .grid-col-2 { 165 | display: grid; 166 | grid-template-columns: repeat(2, 1fr); 167 | gap: 2rem; 168 | align-items: center; 169 | justify-content: space-between; 170 | } 171 | 172 | .grid-reversed :first-child { 173 | order: 2; 174 | } 175 | 176 | /* Buttons */ 177 | .btn { 178 | cursor: pointer; 179 | display: inline-block; 180 | background: none; 181 | border: 1px #000 solid; 182 | border-radius: 50px; 183 | padding: 7px 16px; 184 | line-height: 1.2; 185 | text-align: center; 186 | text-decoration: none; 187 | } 188 | 189 | .btn-dark-outline { 190 | border-color: #000; 191 | color: #000; 192 | } 193 | 194 | .btn-dark-outline:hover, 195 | .btn-light-outline:hover { 196 | background-color: rgba(0, 0, 0, 0.06); 197 | } 198 | 199 | .btn-light-outline { 200 | border-color: #fff; 201 | color: #fff; 202 | } 203 | 204 | .btn-dark { 205 | background-color: #000; 206 | color: #fff; 207 | } 208 | 209 | .btn-dark:hover { 210 | background-color: #333; 211 | } 212 | 213 | /* Backgrounds */ 214 | .bg-primary { 215 | background-color: var(--color-primary); 216 | color: #fff; 217 | } 218 | .bg-secondary { 219 | background-color: var(--color-secondary); 220 | color: #fff; 221 | } 222 | .bg-extra { 223 | background-color: var(--color-extra); 224 | color: #000; 225 | } 226 | .bg-dark { 227 | background-color: var(--color-dark); 228 | color: #000; 229 | } 230 | 231 | /* Text Styling */ 232 | .text-center { 233 | text-align: center; 234 | } 235 | 236 | .text-xl { 237 | font-size: 50px; 238 | text-transform: uppercase; 239 | letter-spacing: 6px; 240 | font-weight: 600; 241 | margin-bottom: 20px; 242 | } 243 | 244 | .text-lg { 245 | font-size: 40px; 246 | text-transform: uppercase; 247 | margin-bottom: 20px; 248 | } 249 | 250 | .text-md { 251 | font-size: 24px; 252 | margin-bottom: 20px; 253 | } 254 | 255 | .text-sm { 256 | font-size: 19px; 257 | margin-bottom: 20px; 258 | } 259 | 260 | /* Padding */ 261 | .py-sm { 262 | padding: 10px 0; 263 | } 264 | .py-md { 265 | padding: 20px 0; 266 | } 267 | .py-lg { 268 | padding: 40px 0; 269 | } 270 | 271 | /* Hamburger Menu Icon */ 272 | .hamburger { 273 | cursor: pointer; 274 | width: 24px; 275 | height: 24px; 276 | position: relative; 277 | background: none; 278 | border: none; 279 | z-index: 10; 280 | transition: all 0.25s; 281 | display: none; 282 | } 283 | 284 | .hamburger-top, 285 | .hamburger-middle, 286 | .hamburger-bottom { 287 | position: absolute; 288 | top: 0; 289 | left: 0; 290 | width: 24px; 291 | height: 2px; 292 | background: #000; 293 | transform: rotate(0); 294 | transition: all 0.5s; 295 | } 296 | 297 | .hamburger-middle { 298 | transform: translateY(7px); 299 | } 300 | 301 | .hamburger-bottom { 302 | transform: translateY(14px); 303 | } 304 | 305 | .open .hamburger-top { 306 | transform: rotate(45deg) translateY(6px) translateX(6px); 307 | } 308 | 309 | .open .hamburger-middle { 310 | display: none; 311 | } 312 | 313 | .open .hamburger-bottom { 314 | transform: rotate(-45deg) translateY(6px) translateX(-6px); 315 | } 316 | 317 | /* Mobile Menu */ 318 | .mobile-menu { 319 | position: fixed; 320 | top: 85px; 321 | right: 0; 322 | background-color: #fff; 323 | color: #000; 324 | width: 90%; 325 | height: 100%; 326 | padding: 30px; 327 | box-shadow: inset 0 4px 3px -3px rgb(0 0 0 / 10%), 328 | inset 0 4px 2px -2px rgb(0 0 0 / 7%); 329 | transition: all 0.3s; 330 | } 331 | 332 | .mobile-menu img { 333 | width: 20px; 334 | height: 20px; 335 | margin-right: 10px; 336 | } 337 | 338 | .mobile-menu ul { 339 | line-height: 3; 340 | border-bottom: #777 solid 1px; 341 | padding-bottom: 10px; 342 | margin-bottom: 30px; 343 | } 344 | 345 | .mobile-menu a { 346 | text-decoration: none; 347 | font-size: 20px; 348 | } 349 | 350 | .mobile-menu a:hover { 351 | color: var(--color-primary); 352 | } 353 | 354 | .mobile-menu div { 355 | margin-top: 20px; 356 | } 357 | 358 | .mobile-menu div a { 359 | display: flex; 360 | align-items: center; 361 | font-size: 16px; 362 | } 363 | 364 | .hidden { 365 | transform: translateX(100%); 366 | } 367 | 368 | .no-scroll { 369 | overflow: hidden; 370 | } 371 | 372 | @media (max-width: 960px) { 373 | .text-xl { 374 | font-size: 30px; 375 | } 376 | 377 | .text-lg { 378 | font-size: 25px; 379 | } 380 | 381 | .text-md { 382 | font-size: 19px; 383 | } 384 | } 385 | 386 | @media (max-width: 768px) { 387 | .hamburger { 388 | display: block; 389 | } 390 | 391 | .grid-col-2 { 392 | grid-template-columns: 1fr; 393 | } 394 | 395 | .grid-reversed :first-child { 396 | order: 0; 397 | } 398 | 399 | .navbar-brand img { 400 | width: 40px; 401 | height: 40px; 402 | } 403 | 404 | .navbar .navbar-nav-left, 405 | .navbar .navbar-nav-right { 406 | display: none; 407 | } 408 | 409 | .footer { 410 | text-align: center; 411 | } 412 | } 413 | 414 | @media (min-width: 1440px) { 415 | .box { 416 | max-width: 1440px; 417 | margin-right: auto; 418 | margin-left: auto; 419 | } 420 | 421 | .divider { 422 | max-width: 90%; 423 | } 424 | } 425 | --------------------------------------------------------------------------------