├── img ├── about.png ├── app.png ├── home.png ├── logo.png ├── shop1.png ├── shop2.png ├── shop3.png └── delivery.png ├── scripts.js ├── index.html └── style.css /img/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/about.png -------------------------------------------------------------------------------- /img/app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/app.png -------------------------------------------------------------------------------- /img/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/home.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/shop1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/shop1.png -------------------------------------------------------------------------------- /img/shop2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/shop2.png -------------------------------------------------------------------------------- /img/shop3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/shop3.png -------------------------------------------------------------------------------- /img/delivery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/StarBucks_landingPage/HEAD/img/delivery.png -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | let menu = document.querySelector('#menu-icon') 2 | let navbar = document.querySelector('.navbar') 3 | 4 | 5 | menu.addEventListener("click", ()=>{ 6 | menu.classList.toggle("bx-x"); 7 | navbar.classList.toggle("active") 8 | }) 9 | 10 | window.onscroll=()=>{ 11 | menu.classList.remove("bx-x"); 12 | navbar.classList.remove("active") 13 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Starbucks Landing Page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 21 | 29 |

30 | 31 | 32 | 33 | 34 |

35 |

36 | Welcome To 37 |

Starbucks coffee

38 |

Free coffee is a
tap away

39 | Join Now 40 |

41 |

42 |

43 |

44 |

45 | 46 | 47 | 48 |

49 |

50 | Shop Now 51 |

Shop Coffee

52 |

53 | 54 |

55 | 56 |

57 |

58 |

59 |

60 |

61 | 62 | 63 | 64 | 65 | 66 |

67 |

Starbucks Coffee

68 | $12.4 69 | Order Now 70 |

71 | 72 | 73 | 74 |

75 |

76 |

77 |

78 |

79 | 80 | 81 | 82 | 83 | 84 |

85 |

Starbucks Coffee

86 | $12.4 87 | Order Now 88 |

89 | 90 | 91 | 92 | 93 |

94 |

95 |

96 |

97 |

98 | 99 | 100 | 101 | 102 | 103 |

104 |

Starbucks Coffee

105 | $12.4 106 | Order Now 107 |

108 | 109 |

110 | 111 |

112 | 113 | 114 | 115 |

116 |

117 | Get Now 118 |

Order with Uber Eats

119 |

120 |

121 |

122 |

123 |

124 |

125 |

Today deserve delivery

126 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

127 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

128 | Order Now 129 |

130 |

131 |

132 | 133 | 134 | 135 |

136 |

137 | Our App 138 |

Download App Now

139 |

140 | 141 |

142 |

143 |

Fall into an easier routine

144 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

145 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

146 | Get App 147 |

148 |

149 |

150 |

151 |

152 | 153 |

154 | 155 | 156 | 157 |

158 |

159 |

160 |

161 |

162 |

50 years of Serving communities

163 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

164 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur expedita quasi, rem veritatis placeat sed id atque harum dolorum nostrum?

165 | Learn More 166 |

167 |

168 | 169 | 170 | 171 |

172 | 178 |

179 | Privacy ploicy 180 | Terms of Use 181 | Our Company 182 |

183 |

184 |

185 | 186 | 187 | 188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | scroll-padding-top: 2rem; 7 | text-decoration: none; 8 | list-style: none; 9 | scroll-behavior: smooth; 10 | font-family: "Poppins", sans-serif; 11 | } 12 | 13 | :root{ 14 | --main-color : #008148; 15 | --second-color : #1e3932; 16 | } 17 | 18 | section{ 19 | padding: 50px 10%; 20 | } 21 | *::selection{ 22 | color: #fff; 23 | background: var(--main-color); 24 | } 25 | img{ 26 | width: 100%; 27 | } 28 | 29 | 30 | /* Navbar Style */ 31 | header{ 32 | position: fixed; 33 | width: 100%; 34 | top: 0; 35 | right: 0; 36 | z-index: 10000; 37 | display: flex; 38 | align-items: center; 39 | justify-content: space-between; 40 | background: #fff; 41 | box-shadow: 0 4px 41px rgb(14 55 54 / 14%); 42 | padding: 15px 10%; 43 | transition: 0.2s ; 44 | } 45 | .logo{ 46 | display: flex; 47 | align-items: center; 48 | } 49 | .logo img{ 50 | width: 40px; 51 | } 52 | .navbar{ 53 | display: flex; 54 | } 55 | .navbar a{ 56 | font-size: 1rem; 57 | padding: 11px 20px ; 58 | color: var(--second-color); 59 | font-weight: 600; 60 | text-transform: uppercase; 61 | } 62 | .navbar a:hover{ 63 | color: var(--main-color); 64 | } 65 | #menu-icon{ 66 | font-size: 24px; 67 | cursor: pointer; 68 | z-index: 10001; 69 | display: none; 70 | } 71 | 72 | /* Home Section */ 73 | .home{ 74 | width: 100%; 75 | min-height: 100vh; 76 | display: flex; 77 | flex-wrap: wrap; 78 | align-items: center; 79 | background-color: #ebdbc8; 80 | gap: 1rem; 81 | } 82 | .home-text{ 83 | flex: 1 1 17rem; 84 | } 85 | .home-img{ 86 | flex: 1 1 17rem; 87 | } 88 | .home-img img{ 89 | animation: animate 3s linear infinite; 90 | } 91 | 92 | @keyframes animate { 93 | 0%{ 94 | transform: translate(-11px,0); 95 | } 96 | 50%{ 97 | transform: translate(-0px,11px); 98 | } 99 | 100%{ 100 | transform: translate(-11px,0); 101 | } 102 | } 103 | 104 | .home-text span{ 105 | font-size: 1rem; 106 | text-transform: uppercase; 107 | font-weight: 600; 108 | color: var(--second-color); 109 | } 110 | .home-text h1{ 111 | font-size: 3.2rem; 112 | color: var(--main-color); 113 | font-weight: bolder; 114 | } 115 | .home-text h2{ 116 | font-size: 1.8rem; 117 | font-weight: 600; 118 | color: var(--second-color); 119 | text-transform: uppercase; 120 | margin: 0.5rem 0 1.4rem; 121 | } 122 | 123 | .btn{ 124 | padding: 7px 16px; 125 | border: 2px solid var(--second-color); 126 | border-radius: 40px; 127 | color: var(--second-color); 128 | font-weight: 500; 129 | } 130 | .btn:hover{ 131 | color: #fff; 132 | background: var(--second-color); 133 | } 134 | /* Home Style End */ 135 | 136 | 137 | /* Shop Section Start */ 138 | .heading{ 139 | text-align: center; 140 | text-transform: uppercase; 141 | } 142 | .heading span{ 143 | font-size: 1rem; 144 | font-weight: 600; 145 | color: var(--second-color); 146 | } 147 | .heading h1{ 148 | font-size: 2rem; 149 | color: var(--main-color); 150 | } 151 | 152 | .shop-contanier{ 153 | display: flex; 154 | flex-wrap: wrap; 155 | gap: 1rem; 156 | margin-top: 5rem; 157 | } 158 | .shop-contanier .box{ 159 | flex: 1 1 10rem; 160 | background-color: var(--main-color); 161 | padding: 20px; 162 | display: flex; 163 | text-align: center; 164 | flex-direction: column; 165 | align-items: center; 166 | margin-top: 3rem; 167 | border-radius: 0.5rem; 168 | } 169 | .shop-contanier .box .box-img { 170 | width: 150px; 171 | height: 150px; 172 | margin-top: -100px; 173 | } 174 | .shop-contanier .box .box-img img{ 175 | width: 100%; 176 | height: 100%; 177 | object-fit: contain; 178 | object-position: center; 179 | } 180 | .stars{ 181 | margin: 1rem 0 0.1rem; 182 | } 183 | .shop-contanier .box .stars .bx{ 184 | color: #ebdbc8; 185 | } 186 | .shop-contanier .box h2{ 187 | color: #ebdbc8; 188 | font-size: 1.2rem; 189 | } 190 | .shop-contanier .box span{ 191 | color: #ebdbc8; 192 | font-size: 1.4rem; 193 | font-weight: 500; 194 | margin: 0.2rem 0 0.5rem; 195 | } 196 | .box .btn{ 197 | border: 2px solid #ebdbc8; 198 | color: #ebdbc8; 199 | } 200 | .box .btn:hover{ 201 | background: #ebdbc8; 202 | color: var(--second-color); 203 | } 204 | /* Shop Section End */ 205 | 206 | /* Delivery and App Section Start */ 207 | .contanier{ 208 | display: flex; 209 | flex-wrap: wrap; 210 | gap: 1.5rem; 211 | margin-top: 2rem; 212 | } 213 | .delivery-img, 214 | .app-img{ 215 | flex: 1 1 21rem; 216 | } 217 | .delivery-text, 218 | .app-text{ 219 | flex: 1 1 21rem; 220 | } 221 | .delivery-text h2, 222 | .app-text h2{ 223 | font-size: 1.2rem; 224 | color: var(--second-color); 225 | } 226 | .delivery-text p , 227 | .app-text p{ 228 | margin: 0.5rem 0 1rem; 229 | text-align: justify; 230 | } 231 | /* Delivery and App Section End */ 232 | 233 | /* about Section Start */ 234 | .about{ 235 | display: flex; 236 | flex-wrap: wrap; 237 | background: #ebdbc8; 238 | gap: 1.5rem; 239 | } 240 | .about-img{ 241 | flex: 1 1 17rem; 242 | } 243 | .about-text{ 244 | flex: 1 1 17rem; 245 | } 246 | .about-text h2{ 247 | font-size: 1.2rem; 248 | color: var(--second-color); 249 | } 250 | .about-text p{ 251 | margin: 0.5rem 0 1rem; 252 | text-align: justify; 253 | } 254 | /* About Section End */ 255 | 256 | /* Contact Section Start */ 257 | .contact{ 258 | display: flex; 259 | flex-direction: column; 260 | align-items: center; 261 | } 262 | .social a{ 263 | font-size: 27px; 264 | margin: 0.5rem; 265 | } 266 | .social a .bx{ 267 | padding: 5px; 268 | color: #fff; 269 | background: #000; 270 | border-radius: 50%; 271 | } 272 | .social a .bx:hover{ 273 | background: var(--main-color); 274 | } 275 | .links{ 276 | margin: 1rem 0 1rem; 277 | } 278 | .links a{ 279 | font-size: 1rem; 280 | font-weight: 500; 281 | color: var(--second-color); 282 | padding: 1rem; 283 | } 284 | .links a:hover{ 285 | color: var(--main-color); 286 | } 287 | .contact p{ 288 | text-align: center; 289 | } 290 | 291 | @media screen and (max-width : 1150px) { 292 | header{ 293 | padding: 18px 7%; 294 | } 295 | section{ 296 | padding: 50px 7%; 297 | } 298 | .home-text h1{ 299 | font-size: 3rem; 300 | } 301 | .home-text h2{ 302 | font-size: 1.5rem; 303 | } 304 | } 305 | 306 | @media screen and (max-width : 991px) { 307 | header{ 308 | padding: 18px 4%; 309 | } 310 | section{ 311 | padding: 50px 4%; 312 | } 313 | } 314 | 315 | @media screen and (max-width : 768px) { 316 | header{ 317 | padding: 18px 7%; 318 | } 319 | #menu-icon{ 320 | display: initial; 321 | } 322 | header .navbar{ 323 | position: absolute; 324 | top: -500px; 325 | left: 0; 326 | right: 0; 327 | display: flex; 328 | flex-direction: column; 329 | background: #fff; 330 | box-shadow: 0 4px 4px rgb(14, 55, 54 / 14%); 331 | border-top: 2px solid var(--main-color); 332 | transition: 0.2s; 333 | text-align: left; 334 | } 335 | .navbar.active{ 336 | top: 100%; 337 | } 338 | .navbar a{ 339 | padding: 1.5rem; 340 | display: block; 341 | color: var(--second-color); 342 | } 343 | .home-text span{ 344 | font-size: 0.9rem ; 345 | } 346 | .home-text h1{ 347 | font-size: 2.4rem; 348 | } 349 | .home-text h2{ 350 | font-size: 1.2rem; 351 | } 352 | } 353 | @media screen and (max-width : 768px){ 354 | .home-text{ 355 | padding-top: inherit; 356 | } 357 | .shop-contanier .box{ 358 | margin-top: 6rem; 359 | } 360 | .heading h1{ 361 | font-size: 1.5rem; 362 | } 363 | .heading span{ 364 | font-size: 0.9rem; 365 | } 366 | .about{ 367 | flex-direction: column-reverse; 368 | } 369 | } 370 | 371 | @media screen and (max-width : 364px) { 372 | .links{ 373 | display: flex; 374 | flex-direction: column; 375 | } 376 | } --------------------------------------------------------------------------------

Starbucks coffee

Free coffee is a tap away

Shop Coffee

Starbucks Coffee

Starbucks Coffee

Starbucks Coffee

Order with Uber Eats

Today deserve delivery

Download App Now

Fall into an easier routine

50 years of Serving communities

Free coffee is a
tap away