├── .vscode └── settings.json ├── cart.html ├── contact.html ├── images ├── banner.jpg ├── product1.jpg ├── product2.png ├── product3.jpg ├── product4.jpg ├── product5.jpg ├── product6.jpg ├── profile.jpeg ├── profile1.png ├── sale.jpg ├── sales_banner.jpg └── shop.png ├── index.html ├── login.html ├── product.html ├── profile.html ├── register.html ├── scripts └── index.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } 4 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 |
68 |
69 |
70 |
71 |

Shopping Cart [2 items]

72 |
73 | 77 | 80 | 81 |
82 |
83 | 84 |
85 | 86 | product 1 91 |
92 |

Sony v-4 Headphone

93 |

Price: $225.99

94 |

Free Shipping

95 |
96 |
97 | 98 |
99 | 100 | 3 101 | 102 |
103 |
104 |
105 |
106 | 107 | product 4 112 |
113 |

Nike Shoes

114 |

Price: $115.99

115 |

Shipping cost $2.50

116 |
117 |
118 | 119 |
120 | 121 | 1 122 | 123 |
124 |
125 |
126 |
127 |
128 |
129 |

Payment Summary

130 |
131 |

subtotal:

132 |

$341.44

133 |
134 |
135 |

Shipping Cost:

136 |

$2.50

137 |
138 |
139 |

Total Cost:

140 |

$344.38

141 |
142 | 143 |
144 |
145 |

Payment Methods

146 |
147 | 148 | 149 | 150 | 151 | 152 |
153 |
154 |
155 |
156 |
157 | 158 | 174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 |
68 |
69 |

Contact Us

70 |
71 |
72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 |
80 |
81 | 82 | 83 |
84 |
85 | 86 |
87 |
88 |
89 |
90 |

Address:

91 |

123 high street

92 |

Tampere, Finland

93 |
94 | 95 | Call: 96 | +123456789 97 |
98 | 106 |
107 |
108 |
109 |
110 | 111 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/banner.jpg -------------------------------------------------------------------------------- /images/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product1.jpg -------------------------------------------------------------------------------- /images/product2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product2.png -------------------------------------------------------------------------------- /images/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product3.jpg -------------------------------------------------------------------------------- /images/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product4.jpg -------------------------------------------------------------------------------- /images/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product5.jpg -------------------------------------------------------------------------------- /images/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/product6.jpg -------------------------------------------------------------------------------- /images/profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/profile.jpeg -------------------------------------------------------------------------------- /images/profile1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/profile1.png -------------------------------------------------------------------------------- /images/sale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/sale.jpg -------------------------------------------------------------------------------- /images/sales_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/sales_banner.jpg -------------------------------------------------------------------------------- /images/shop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-ecommerce-project/9fea9abfbbfabc000356b2888accdb5c2cced4fa/images/shop.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 | 68 | 69 |
70 | 89 |
90 | 91 | 92 |
93 |
94 |
95 |

Categories

96 |
    97 |
  • 98 | 102 |
    • 103 |
  • 104 | 113 |
    • 114 |
  • 115 | 124 |
    • 125 | 126 |
  • 127 | 136 |
    • 137 | 138 |
  • 139 | 148 |
    • 149 |
150 |
151 | 152 |
153 |

Price Range

154 |
    155 |
  • 156 | 160 |
    • 161 |
  • 162 | 166 |
    • 167 |
  • 168 | 172 |
    • 173 |
  • 174 | 183 |
    • 184 |
  • 185 | 189 |
    • 190 |
191 |
192 | 193 |
194 |

Shipping Options

195 |
    196 |
  • 197 | 201 |
    • 202 |
  • 203 | 207 |
    • 208 |
209 |
210 |
211 |
212 |
213 |
214 | 215 | 222 |
223 | 224 |
225 | 226 | 229 |
230 |
231 | 232 | 233 |
234 |
235 |
236 | 5 in stock 237 |
238 | 3 sold 239 |
240 | product1 245 |
246 |

Sony V-4 Headphone

247 |

248 | 249 | 250 | 251 |

252 |

253 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 254 | impedit, nihil quia placeat autem commodi... 255 | Learn More 256 |

257 |

$225.99

258 |

Rating: 4.5/5

259 | 260 |
261 |
262 | 263 |
264 |
265 | 2 in stock 266 |
267 | 9 sold 268 |
269 | product2 274 |
275 |

Apple smart watch

276 |

277 | 278 | 279 | 280 |

281 |

282 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 283 | impedit, nihil quia placeat autem commodi... 284 | Learn More 285 |

286 |

$425.99

287 |

Rating: 4.2/5

288 | 289 |
290 |
291 | 292 |
293 |
294 | 3 in stock 295 |
296 | 12 sold 297 |
298 | product3 303 |
304 |

Apple smart glass

305 |

306 | 307 | 308 | 309 |

310 |

311 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 312 | impedit, nihil quia placeat autem commodi... 313 | Learn More 314 |

315 |

$325.99

316 |

Rating: 3.8/5

317 | 318 |
319 |
320 |
321 |
322 | 5 in stock 323 |
324 | 3 sold 325 |
326 | product1 331 |
332 |

Sony V-4 Headphone

333 |

334 | 335 | 336 | 337 |

338 |

339 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 340 | impedit, nihil quia placeat autem commodi... 341 | Learn More 342 |

343 |

$225.99

344 |

Rating: 4.5/5

345 | 346 |
347 |
348 | 349 |
350 |
351 | 2 in stock 352 |
353 | 9 sold 354 |
355 | product2 360 |
361 |

Apple smart watch

362 |

363 | 364 | 365 | 366 |

367 |

368 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 369 | impedit, nihil quia placeat autem commodi... 370 | Learn More 371 |

372 |

$425.99

373 |

Rating: 4.2/5

374 | 375 |
376 |
377 | 378 |
379 |
380 | 3 in stock 381 |
382 | 12 sold 383 |
384 | product3 389 |
390 |

Apple smart glass

391 |

392 | 393 | 394 | 395 |

396 |

397 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro 398 | impedit, nihil quia placeat autem commodi... 399 | Learn More 400 |

401 |

$325.99

402 |

Rating: 3.8/5

403 | 404 |
405 |
406 |
407 | 426 | 427 |
428 |
429 | 430 | 446 | 447 | 448 | 449 | 450 | 451 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 | 68 |
69 |
70 |

User Login

71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 | 79 | 85 |
86 | 87 |
88 | 89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 | 68 |
69 |
70 |
71 |
72 | product1 73 |
74 |
75 |

Sony V-4 Headphone

76 |

77 | 78 | 79 | 80 |

81 |

82 | Description: 83 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, 84 | consequatur saepe vel numquam non, voluptatum suscipit nam 85 | consequuntur aliquid earum explicabo reprehenderit quo distinctio 86 | quis! 87 |

88 |

89 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro 90 | deleniti et totam autem? Incidunt alias dolore veritatis error 91 | animi at dolorum voluptates accusamus, minus optio ut illum dolor 92 | perspiciatis fuga illo molestiae quod, eligendi ratione. 93 |

94 |

95 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro 96 | deleniti et totam autem? Incidunt alias dolore veritatis error 97 | animi at dolorum voluptates accusamus, minus optio ut illum dolor 98 | perspiciatis fuga illo molestiae quod, eligendi ratione. 99 |

100 |

Category: Headphone

101 |

Price: $225.99

102 |

Rating: 4.5/5

103 | 104 | 105 |
106 |
107 |
108 |
109 | 110 | 111 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 |
68 |
69 |

User Profile

70 |
71 | profile 72 |

Anisul Islam

73 | 74 |

I love to buy gadgets

75 |
76 | 79 | 82 |
83 |
84 |
85 |
86 | 87 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Ecommerce project 12 | 13 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 66 | 67 |
68 |
69 |

User Registration

70 |
71 |
72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 |
80 |
81 | 82 | 88 |
89 |
90 | 91 | 92 |
93 |
94 | 95 |
96 |
97 |
98 |
99 |
100 | 101 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /scripts/index.js: -------------------------------------------------------------------------------- 1 | const menuIcon = document.getElementById("menu-icon"); 2 | const menu = document.getElementById("menu"); 3 | 4 | menuIcon.addEventListener("click", () => { 5 | if (menu.className === "hidden") { 6 | menu.classList.remove("hidden"); 7 | } else { 8 | menu.classList.add("hidden"); 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* reset code and common starts here */ 2 | :root { 3 | --primary-color: rgb(11, 181, 48); 4 | --secondary-color: rgba(36, 122, 55, 0.9); 5 | --padding: 0.5rem; 6 | --transition: all 0.3s; 7 | --border-radius: 0.6rem; 8 | --box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 0.5); 9 | } 10 | * { 11 | box-sizing: border-box; 12 | list-style-type: none; 13 | margin: 0; 14 | padding: 0; 15 | outline: none; 16 | text-decoration: none; 17 | } 18 | html { 19 | scroll-behavior: smooth; 20 | } 21 | img { 22 | width: 100%; 23 | height: auto; 24 | } 25 | .flex-center { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | .flex-space-around { 31 | display: flex; 32 | justify-content: space-around; 33 | align-items: center; 34 | } 35 | .btn { 36 | border: none; 37 | padding: var(--padding); 38 | cursor: pointer; 39 | text-transform: uppercase; 40 | transition: var(--transition); 41 | } 42 | .btn:hover { 43 | background-color: var(--secondary-color); 44 | } 45 | .card { 46 | box-shadow: var(--box-shadow); 47 | border-radius: var(--border-radius); 48 | transition: var(--transition); 49 | padding: var(--padding); 50 | } 51 | .card:hover { 52 | box-shadow: 0.1rem 0.2rem 0.8rem rgba(205, 202, 202, 1); 53 | } 54 | .hr-design { 55 | margin: 0.5rem 0; 56 | } 57 | .dot { 58 | height: 2rem; 59 | width: 2rem; 60 | border-radius: 50%; 61 | display: inline-block; 62 | } 63 | .red { 64 | background-color: red; 65 | } 66 | .green { 67 | background-color: green; 68 | } 69 | .black { 70 | background-color: black; 71 | } 72 | .text-center { 73 | text-align: center; 74 | } 75 | .section-title { 76 | font-size: 2rem; 77 | } 78 | /* reset code and common ends here */ 79 | 80 | /* navbar starts here */ 81 | #menu-icon { 82 | display: none; 83 | } 84 | nav { 85 | font-family: fantasy; 86 | font-size: 1.2rem; 87 | 88 | position: sticky; 89 | top: 0; 90 | left: 0; 91 | z-index: 100; 92 | } 93 | .nav-upper { 94 | min-height: 10vh; 95 | background-color: var(--primary-color); 96 | padding: 1rem 0; 97 | } 98 | .nav__list { 99 | transition: var(--transition); 100 | } 101 | .nav__list:hover { 102 | text-decoration: overline; 103 | color: black; 104 | } 105 | .nav__link { 106 | color: white; 107 | transition: var(--transition); 108 | } 109 | .nav__link:hover { 110 | color: black; 111 | } 112 | .profile-icon { 113 | width: 3rem; 114 | height: 3rem; 115 | border-radius: 50%; 116 | border: white 1px solid; 117 | filter: saturate(0); 118 | transition: var(--transition); 119 | } 120 | .profile-icon:hover { 121 | filter: saturate(1); 122 | } 123 | 124 | .nav-lower { 125 | min-height: 10vh; 126 | background-color: var(--secondary-color); 127 | font-weight: bolder; 128 | } 129 | .nav__brand { 130 | font-size: 2rem; 131 | } 132 | /* navbar ends here */ 133 | 134 | /* header starts here */ 135 | .header { 136 | padding: 4rem 0; 137 | height: 80vh; 138 | background: url(/images/banner.jpg) no-repeat center; 139 | background-attachment: fixed; 140 | background-size: cover; 141 | } 142 | .banner { 143 | width: 100%; 144 | height: 100%; 145 | flex-direction: column; 146 | } 147 | .banner__title { 148 | font-size: 4rem; 149 | color: yellow; 150 | padding: 1rem; 151 | border-radius: var(--border-radius); 152 | } 153 | .features { 154 | width: 100%; 155 | } 156 | .feature { 157 | background-color: rgba(80, 160, 78, 0.7); 158 | color: white; 159 | border-radius: var(--border-radius); 160 | padding: 1rem; 161 | width: 15rem; 162 | flex-direction: column; 163 | gap: 1rem; 164 | } 165 | .feature__icon { 166 | font-size: 3rem; 167 | } 168 | /* header ends here */ 169 | 170 | /* main starts here */ 171 | main { 172 | padding: 4rem 0; 173 | min-height: 80vh; 174 | } 175 | .sidebar { 176 | flex: 1; 177 | padding: var(--padding); 178 | display: flex; 179 | flex-direction: column; 180 | justify-content: center; 181 | gap: 1rem; 182 | align-self: flex-start; 183 | } 184 | .main-content { 185 | flex: 3; 186 | padding: var(--padding); 187 | } 188 | .actions__sort select { 189 | padding: var(--padding); 190 | } 191 | .actions__search input { 192 | padding: var(--padding); 193 | 194 | width: 15rem; 195 | } 196 | .actions__search button { 197 | margin-left: -0.3rem; 198 | border: 1px solid; 199 | padding: 0.55rem; 200 | } 201 | .products { 202 | display: grid; 203 | grid-template-columns: repeat(3, minmax(0, 1fr)); 204 | gap: 2rem; 205 | padding: 2rem 0; 206 | } 207 | .product { 208 | position: relative; 209 | } 210 | .badge { 211 | position: absolute; 212 | top: 0; 213 | left: 0; 214 | background-color: green; 215 | color: white; 216 | padding: 4px 8px; 217 | text-align: center; 218 | border-radius: var(--border-radius); 219 | z-index: 10; 220 | } 221 | .product__img { 222 | width: 100%; 223 | height: 15rem; 224 | filter: saturate(0); 225 | transition: var(--transition); 226 | } 227 | .product__img:hover { 228 | filter: saturate(1); 229 | } 230 | .product__body { 231 | padding: var(--padding); 232 | display: flex; 233 | flex-direction: column; 234 | gap: 0.5rem; 235 | } 236 | .learn-more { 237 | color: green; 238 | } 239 | 240 | /* pagination starts here */ 241 | .pagination { 242 | display: flex; 243 | justify-content: center; 244 | align-items: center; 245 | } 246 | .pagination__btn { 247 | border-width: 1px 1px 1px 0; 248 | border-style: solid; 249 | } 250 | .pagination__btn:first-child { 251 | border-width: 1px 1px 1px 1px; 252 | border-style: solid; 253 | } 254 | /* pagination ends here */ 255 | 256 | /* prodcut details starts here */ 257 | .product__details-left { 258 | flex: 1; 259 | } 260 | .product__details-left img { 261 | height: 20rem; 262 | width: 30rem; 263 | } 264 | .product__details-right { 265 | flex: 1; 266 | display: flex; 267 | flex-direction: column; 268 | gap: 0.5rem; 269 | } 270 | /* prodcut details ends here */ 271 | 272 | /* cart design starts here */ 273 | .cart { 274 | padding: var(--padding); 275 | gap: 1rem; 276 | } 277 | .cart .card { 278 | margin-bottom: 1rem; 279 | } 280 | .cart__items { 281 | flex: 1; 282 | } 283 | .cart__items-action { 284 | margin-top: 1rem; 285 | display: flex; 286 | justify-content: space-between; 287 | align-items: center; 288 | } 289 | .cart__item input { 290 | flex: 0.1; 291 | } 292 | .cart__item-img { 293 | flex: 0.2; 294 | width: 15rem; 295 | height: 10rem; 296 | } 297 | .cart__item-description { 298 | flex: 0.4; 299 | } 300 | .cart__item-shipping { 301 | margin-top: 0.5rem; 302 | color: red; 303 | } 304 | .cart__item-actions { 305 | flex: 0.2; 306 | display: flex; 307 | flex-direction: column; 308 | justify-content: center; 309 | align-items: center; 310 | gap: 1rem; 311 | } 312 | .cart__payment { 313 | flex: 1; 314 | } 315 | .cart__payment-summary > div { 316 | display: flex; 317 | justify-content: space-between; 318 | align-items: center; 319 | margin: 1rem 0; 320 | } 321 | .cart__payment-btn { 322 | width: 100%; 323 | } 324 | .cart__payment-methods > h2 { 325 | text-align: center; 326 | margin-bottom: 1rem; 327 | } 328 | .cart__payment-methods > div { 329 | display: flex; 330 | justify-content: center; 331 | align-items: center; 332 | gap: 1rem; 333 | } 334 | 335 | /* cart design ends here */ 336 | 337 | /* regisetr and login starts here */ 338 | .register, 339 | .login { 340 | display: flex; 341 | flex-direction: column; 342 | justify-content: center; 343 | align-items: center; 344 | gap: 3rem; 345 | min-height: 60vh; 346 | } 347 | .register .card, 348 | .login .card { 349 | width: 45rem; 350 | } 351 | .form { 352 | flex: 1; 353 | display: flex; 354 | flex-direction: column; 355 | gap: 1rem; 356 | } 357 | .form-control label { 358 | flex: 0.1; 359 | text-align: left; 360 | } 361 | .form-control input, 362 | textarea { 363 | flex: 0.9; 364 | padding: var(--padding); 365 | border: 1px solid; 366 | } 367 | .form-control textarea { 368 | resize: none; 369 | height: 12vh; 370 | } 371 | .form-btn-field { 372 | border-radius: var(--border-radius); 373 | } 374 | .contact-btn { 375 | width: 30%; 376 | } 377 | /* regisetr and login ends here */ 378 | 379 | /* profile starts here */ 380 | .profile { 381 | flex-direction: column; 382 | gap: 3rem; 383 | } 384 | .profile .card { 385 | padding: var(--padding); 386 | width: 30rem; 387 | flex-direction: column; 388 | gap: 1rem; 389 | } 390 | .profile__img { 391 | width: 15vw; 392 | border-radius: 50%; 393 | border: 1px solid; 394 | } 395 | .profile__buttons button { 396 | background-color: transparent; 397 | } 398 | /* profile ends here */ 399 | 400 | /* contact starts here */ 401 | .contact-section { 402 | min-height: 52vh; 403 | } 404 | .contact-conatiner { 405 | margin-top: 5rem; 406 | } 407 | .contact-address { 408 | flex: 1; 409 | gap: 2rem; 410 | flex-direction: column; 411 | } 412 | .contact__map { 413 | width: 80%; 414 | } 415 | /* contact ends here */ 416 | 417 | /* main ends here */ 418 | 419 | /* footer starts here */ 420 | .footer { 421 | padding: 1rem; 422 | background-color: var(--primary-color); 423 | min-height: 10vh; 424 | color: white; 425 | font-size: 1.1rem; 426 | } 427 | .btn-subscribe { 428 | margin-left: -5px; 429 | } 430 | .footer__input { 431 | border: none; 432 | padding: var(--padding); 433 | width: 20rem; 434 | } 435 | /* footer ends here */ 436 | 437 | @media (max-width: 992px) { 438 | .flex-space-around { 439 | flex-direction: column; 440 | gap: 1rem; 441 | padding: 1rem 0; 442 | } 443 | #menu-icon { 444 | display: block; 445 | text-align: center; 446 | margin: 1rem 0; 447 | cursor: pointer; 448 | } 449 | .hidden { 450 | display: none; 451 | } 452 | .header { 453 | height: 100vh; 454 | } 455 | .products { 456 | grid-template-columns: repeat(2, minmax(0, 1fr)); 457 | } 458 | .cart__items, 459 | .cart__payment { 460 | width: 90%; 461 | } 462 | .form, 463 | .form-control { 464 | width: 100%; 465 | } 466 | .form-control input, 467 | textarea { 468 | width: 80%; 469 | } 470 | .contact-address { 471 | width: 100%; 472 | } 473 | 474 | .register .card, 475 | .login .card { 476 | width: 90%; 477 | } 478 | } 479 | @media (max-width: 768px) { 480 | .flex-center { 481 | flex-direction: column; 482 | gap: 1rem; 483 | padding: 1rem 0; 484 | } 485 | .products { 486 | grid-template-columns: repeat(1, minmax(0, 1fr)); 487 | } 488 | } 489 | @media (max-width: 600px) { 490 | } 491 | --------------------------------------------------------------------------------