├── about.html ├── assest ├── css │ ├── about.css │ ├── contact.css │ └── style.css └── js │ └── script.js ├── contact.html ├── images ├── aboutUs2.jpeg ├── aboutus.jpeg ├── aboutus3.jpeg ├── arm.png ├── armchair.png ├── bed.png ├── bedroom.jpeg ├── bg1.jpeg ├── bg2.jpeg ├── bg3.jpeg ├── blog1.jpeg ├── blog2.jpeg ├── blog3.jpeg ├── bookShelf.png ├── client1.jpeg ├── client2.jpeg ├── contactbg.jpeg ├── dealBg.jpeg ├── dinnertable.png ├── lamp.png ├── livingroom.jpeg ├── newsletterimg.jpeg ├── pillow.png ├── roundTable.png ├── rusticCoffeetable.png ├── sidetable.png ├── sofa.png ├── story1.jpeg ├── story2.jpeg ├── story3.jpeg ├── story4.jpeg ├── story5.jpeg ├── team1.jpeg ├── team2.jpeg ├── team3.jpeg ├── vintageLeathe.png ├── waitingroom.jpeg └── wallclock.png └── index.html /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FurniFlex - About Us 8 | 9 | 10 | 11 | 14 | 15 | 18 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 38 |
39 | 40 |
41 | 42 | 43 | 44 |
    45 |
  • 46 | 47 | Search 48 |
    • 49 |
  • 50 | 51 | Like 52 |
    • 53 |
  • 54 | 55 | Add to cart 56 |
    • 57 |
  • 58 | 59 | Profile 60 |
    • 61 |
62 |
63 |
64 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 |
94 |

About Us

95 |
96 |
97 | 98 |
99 |
100 |

Discover FurniFlex - 101 |
102 | Where Innovation Meets Design 103 |

104 |
105 |
106 | About Us 107 |
108 |
109 |
110 | 111 |
112 |
113 |

Our Challenging Story

114 |

115 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo debitis 116 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 117 | Deserunt quo voluptatum veniam reprehenderit iste! 118 |

119 |
120 |
121 |
122 | Story 1 123 |
124 |
125 |

The Beginning

126 |

127 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo 128 | debitis 129 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 130 | Deserunt quo voluptatum veniam reprehenderit iste! 131 |

132 |
133 |
134 | 135 |
136 |
137 |

Innovation & Design

138 |

139 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo 140 | debitis 141 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 142 | Deserunt quo voluptatum veniam reprehenderit iste! 143 |

144 |
145 |
146 | Story 2 147 |
148 |
149 | 150 | 151 |
152 |
153 | Story 3 154 |
155 |
156 |

Success Stories

157 |

158 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo 159 | debitis 160 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 161 | Deserunt quo voluptatum veniam reprehenderit iste! 162 |

163 |
164 |
165 | 166 | 167 |
168 |
169 |

Careers

170 |

171 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo 172 | debitis 173 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 174 | Deserunt quo voluptatum veniam reprehenderit iste! 175 |

176 |
177 |
178 | Story 4 179 |
180 |
181 |
182 |
183 | Story 5 184 |
185 |
186 |

Looking Ahead

187 |

188 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque fugit illo facilis nemo 189 | debitis 190 | minima accusantium esse! Perspiciatis consectetur odio ab consequuntur, temporibus pariatur? 191 | Deserunt quo voluptatum veniam reprehenderit iste! 192 |

193 |
194 |
195 | 196 |
197 | 198 |
199 |
200 |

Meet Our Team

201 |
202 |
203 |
204 | Team Member 1 205 |
206 |
207 |

John Doe

208 |

Founder & CEO

209 |
210 | 218 |
219 |
220 |
221 | Team Member 2 222 |
223 |
224 |

Kirti John

225 |

Inerior Designer

226 |
227 | 235 |
236 |
237 |
238 | Team Member 3 239 |
240 |
241 |

Robert Fox

242 |

Media Manager

243 |
244 | 252 |
253 |
254 |
255 |
256 | 257 |
258 |
259 |
260 |

Subscribe To Our 261 |
262 | NewsLetter 263 |

264 |

Subscribe to our email newsletter today to recieve updates on the latest news

265 |
266 |
267 | 268 | 269 | 270 |
271 | 273 |
274 |
275 |
276 | 277 |
278 |
279 |
280 |
281 | 282 | 283 | 323 | 324 | 325 | 326 | 329 | 330 | 331 | 332 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /assest/css/about.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | scroll-behavior: smooth; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | ::-webkit-scrollbar { 10 | width: 5px; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | background-color: var(--main-color); 15 | } 16 | 17 | ::-webkit-scrollbar-track { 18 | background-color: var(--text-color); 19 | width: 50px; 20 | } 21 | 22 | :root { 23 | --text-color: white; 24 | /* --bg-color: #080808; 25 | --second-bg-color: #13131313; 26 | */ 27 | --main-color: orange; 28 | } 29 | 30 | html { 31 | font-size: 60%; 32 | } 33 | 34 | body { 35 | background: #161616; 36 | background: url('/images/bg2.jpeg') no-repeat; 37 | background-size: cover; 38 | background-position: center; 39 | background-attachment: fixed; 40 | position: relative; 41 | } 42 | 43 | .header { 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | padding: 1rem 8% 1rem; 49 | background: rgba(0, 0, 0, 0.3); 50 | background: transparent; 51 | backdrop-filter: blur(10px); 52 | background: black; 53 | display: flex; 54 | align-items: center; 55 | justify-content: space-between; 56 | z-index: 10000; 57 | } 58 | 59 | .logo { 60 | font-size: 2.5rem; 61 | color: var(--text-color); 62 | font-weight: 800; 63 | cursor: pointer; 64 | transition: 0.3s ease; 65 | text-decoration: none; 66 | } 67 | 68 | .logo:hover { 69 | transform: scale(1.1); 70 | transition: 0.3s ease; 71 | } 72 | 73 | .logo span { 74 | text-shadow: 0 0 25px var(--main-color); 75 | color: orange; 76 | font-size: 3rem; 77 | font-weight: 700; 78 | } 79 | 80 | .navbar a { 81 | font-size: 1.5rem; 82 | color: var(--text-color); 83 | margin-left: 4rem; 84 | font-weight: 500; 85 | transition: 0.3s ease; 86 | border-bottom: 3px solid transparent; 87 | text-decoration: none; 88 | } 89 | 90 | .navbar a:hover, 91 | .navbar a.active { 92 | border-bottom: 3px solid var(--main-color); 93 | } 94 | 95 | .hide { 96 | display: flex; 97 | align-items: center; 98 | justify-content: center; 99 | gap: 0 10px; 100 | } 101 | 102 | #menu-icon { 103 | font-size: 3.6rem; 104 | color: var(--text-color); 105 | display: none; 106 | cursor: pointer; 107 | } 108 | 109 | .iv { 110 | font-size: 2.3rem; 111 | cursor: pointer; 112 | color: var(--text-color); 113 | cursor: pointer; 114 | display: none; 115 | } 116 | 117 | details summary { 118 | list-style: none; 119 | width: max-content; 120 | padding: 5px 10px; 121 | cursor: pointer; 122 | z-index: 100; 123 | } 124 | 125 | details { 126 | position: relative; 127 | z-index: 100; 128 | display: none; 129 | } 130 | 131 | .hidden { 132 | display: none; 133 | } 134 | 135 | details ul { 136 | position: absolute; 137 | top: 45px; 138 | right: 0; 139 | background: #000; 140 | backdrop-filter: blur(10px); 141 | border: 1px solid var(--main-color); 142 | box-shadow: 0 10px 50px var(--text-color); 143 | padding: 10px; 144 | border-radius: 10px; 145 | z-index: 100; 146 | } 147 | 148 | details ul li { 149 | z-index: 100; 150 | width: 150px; 151 | border-radius: 5px; 152 | cursor: pointer; 153 | display: grid; 154 | grid-template-columns: 20px 1fr; 155 | grid-template-rows: 48px; 156 | gap: 10px; 157 | justify-content: center; 158 | align-items: center; 159 | padding: 0 10px; 160 | text-align: left; 161 | transition: 0.3s ease; 162 | font-size: 14px; 163 | color: var(--text-color); 164 | } 165 | 166 | details ul li i { 167 | color: var(--main-color); 168 | } 169 | 170 | details ul li:hover { 171 | background-color: white; 172 | color: #000; 173 | } 174 | 175 | .icons { 176 | display: flex; 177 | align-items: center; 178 | justify-content: space-between; 179 | } 180 | 181 | .icons a { 182 | text-decoration: none; 183 | } 184 | 185 | .icons a i { 186 | font-size: 2.5rem; 187 | color: var(--text-color); 188 | margin-left: 1.3rem; 189 | transition: 0.3s ease; 190 | } 191 | 192 | .icons a i:hover { 193 | transform: scale(1.1); 194 | transition: 0.3s ease; 195 | color: var(--main-color); 196 | } 197 | 198 | 199 | 200 | @media (max-width: 1285px) { 201 | html { 202 | font-size: 55%; 203 | } 204 | } 205 | 206 | @media (max-width: 991px) { 207 | header { 208 | padding: 2rem 3%; 209 | } 210 | 211 | .section { 212 | min-height: 100vh; 213 | padding: 10rem 3% 2rem; 214 | } 215 | } 216 | 217 | 218 | 219 | @media (max-width: 1200px) { 220 | #menu-icon { 221 | display: block; 222 | } 223 | 224 | .iv { 225 | display: block; 226 | } 227 | 228 | details { 229 | display: block; 230 | } 231 | 232 | .icons { 233 | display: none; 234 | } 235 | 236 | .navbar { 237 | position: absolute; 238 | top: 100%; 239 | right: 0; 240 | width: 50%; 241 | height: 100vh; 242 | padding: 1rem 3%; 243 | background: rgba(0, 0, 0, 0.8); 244 | backdrop-filter: blur(20px); 245 | border-bottom-left-radius: 2rem; 246 | border-left: 2px solid var(--main-color); 247 | display: none; 248 | } 249 | 250 | .navbar.active { 251 | display: block; 252 | } 253 | 254 | .navbar a { 255 | display: block; 256 | font-size: 1.7rem; 257 | margin: 3rem 0; 258 | color: white; 259 | } 260 | } 261 | 262 | 263 | 264 | 265 | 266 | 267 | /* FOOOOOOOOOOOOOOOOOOOOOOOTERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR */ 268 | 269 | footer { 270 | background-color: var(--text-color); 271 | padding: 8% 0; 272 | padding-bottom: 0; 273 | /* position: absolute; */ 274 | width: 100%; 275 | } 276 | 277 | footer .logoHead { 278 | border-bottom: 1px solid #ccc; 279 | border-top: 1px solid #ccc; 280 | padding: 20px; 281 | } 282 | 283 | footer .logoHead h1 { 284 | font-size: 40px; 285 | font-weight: 900; 286 | text-align: center; 287 | } 288 | 289 | footer .logoHead h1 span { 290 | font-weight: 800; 291 | font-size: 50px; 292 | color: var(--main-color); 293 | } 294 | 295 | footer .footerFlex { 296 | display: flex; 297 | align-items: center; 298 | justify-content: space-between; 299 | flex-wrap: wrap; 300 | padding: 3% 8%; 301 | } 302 | 303 | .footerFlex div h3 { 304 | font-size: 1.7rem; 305 | font-weight: 600; 306 | margin-bottom: 15px; 307 | } 308 | 309 | .footerFlex div a { 310 | font-size: 1.5rem; 311 | font-weight: 500; 312 | color: #777; 313 | display: block; 314 | margin-bottom: 10px; 315 | text-decoration: none; 316 | transition: .3s ease; 317 | } 318 | 319 | .footerFlex div a:hover { 320 | color: var(--main-color); 321 | transition: .3s ease; 322 | } 323 | 324 | .copyrightSec { 325 | padding: 20px 0; 326 | text-align: center; 327 | display: flex; 328 | align-items: center; 329 | justify-content: space-between; 330 | flex-wrap: wrap; 331 | gap: 20px 0; 332 | word-wrap: 100%; 333 | padding: 1.5% 8%; 334 | background: var(--main-color); 335 | } 336 | 337 | .copyrightSec p { 338 | font-size: 1.5rem; 339 | font-weight: 500; 340 | color: var(--text-color); 341 | } 342 | 343 | .copyrightSec .socialMedia { 344 | display: flex; 345 | align-items: center; 346 | 347 | gap: 10px; 348 | } 349 | 350 | .copyrightSec .socialMedia a { 351 | font-size: 1.5rem; 352 | font-weight: 500; 353 | color: var(--text-color); 354 | text-decoration: none; 355 | background: var(--text-color); 356 | padding: 5px 5px; 357 | border-radius: 50%; 358 | text-align: center; 359 | color: var(--main-color); 360 | transition: .3s ease; 361 | display: grid; 362 | place-items: center; 363 | border: 1px solid transparent; 364 | } 365 | 366 | .copyrightSec .socialMedia a:hover { 367 | color: var(--text-color); 368 | transition: .3s ease; 369 | border: 1px solid var(--text-color); 370 | background: var(--main-color); 371 | } 372 | 373 | .socialMedia a i { 374 | font-size: 2rem; 375 | } 376 | 377 | @media (max-width: 899px) { 378 | .footerFlex { 379 | flex-direction: column; 380 | gap: 30px 0; 381 | width: 100%; 382 | align-items: center; 383 | justify-content: center; 384 | text-align: center; 385 | } 386 | 387 | .footerFlex div { 388 | width: 100%; 389 | } 390 | 391 | .copyrightSec { 392 | padding: 20px 0; 393 | text-align: center; 394 | display: flex; 395 | align-items: center; 396 | justify-content: center; 397 | flex-wrap: wrap; 398 | gap: 20px 0; 399 | padding: 2% 8%; 400 | width: 100%; 401 | } 402 | 403 | .copyrightSec .socialMedia { 404 | display: flex; 405 | align-items: center; 406 | gap: 10px; 407 | width: 100%; 408 | justify-content: center; 409 | } 410 | } 411 | 412 | .about { 413 | background-color: var(--text-color); 414 | padding: 0% 0%; 415 | padding-bottom: 0; 416 | /* position: absolute; */ 417 | width: 100%; 418 | min-height: 100vh; 419 | } 420 | 421 | .about .aboutbg { 422 | /* background-image: url('/images/contactbg.jpeg'); */ 423 | background: url('../../images/contactbg.jpeg') no-repeat; 424 | background-size: cover; 425 | background-position: center; 426 | background-repeat: no-repeat; 427 | height: 30vh; 428 | height: 400px; 429 | position: relative; 430 | display: flex; 431 | align-items: center; 432 | text-align: center; 433 | justify-content: center; 434 | width: 100%; 435 | } 436 | 437 | .about .aboutbg::after { 438 | content: ''; 439 | position: absolute; 440 | top: 0; 441 | left: 0; 442 | width: 100%; 443 | height: 400px; 444 | background: rgba(0, 0, 0, 0.6); 445 | } 446 | 447 | .aboutbg div { 448 | position: relative; 449 | padding: 0 5%; 450 | z-index: 1000; 451 | } 452 | 453 | .aboutbg div h1 { 454 | font-size: 4rem; 455 | font-weight: 600; 456 | text-align: center; 457 | color: var(--main-color); 458 | } 459 | 460 | .aboutUs { 461 | display: flex; 462 | align-items: center; 463 | justify-content: center; 464 | flex-direction: column; 465 | text-align: center; 466 | padding: 5% 0; 467 | } 468 | 469 | .aboutUs .aboutText h2 { 470 | font-size: 3.5rem; 471 | font-weight: 600; 472 | text-align: center; 473 | margin-bottom: 20px; 474 | } 475 | 476 | .aboutImg { 477 | width: 90%; 478 | margin: auto; 479 | margin-top: 20px; 480 | } 481 | 482 | .aboutImg img { 483 | width: 100%; 484 | height: 400px; 485 | object-fit: cover; 486 | border-radius: 20px; 487 | box-shadow: 0 0 10px var(--main-color); 488 | } 489 | 490 | .storySection { 491 | min-height: 100vh; 492 | padding: 2% 7%; 493 | padding-bottom: 3%; 494 | background: var(--text-color); 495 | display: flex; 496 | align-items: start; 497 | justify-content: center; 498 | flex-direction: column; 499 | 500 | } 501 | 502 | .headSec { 503 | padding: 2% 7%; 504 | } 505 | 506 | .headSec h2 { 507 | font-size: 3.5rem; 508 | font-weight: 600; 509 | text-align: center; 510 | margin-bottom: 20px; 511 | } 512 | 513 | .headSec p { 514 | font-size: 1.4rem; 515 | font-weight: 500; 516 | text-align: center; 517 | margin-bottom: 20px; 518 | } 519 | 520 | .sectFlex { 521 | display: flex; 522 | align-items: center; 523 | justify-content: space-between; 524 | flex-direction: row; 525 | gap: 20px 0; 526 | padding: 2% 7%; 527 | width: 100%; 528 | margin: 20px; 529 | } 530 | 531 | .sectFlex .storyImg { 532 | width: 100%; 533 | height: 400px; 534 | object-fit: cover; 535 | border-radius: 20px; 536 | position: relative; 537 | overflow: hidden; 538 | transition: .3s ease; 539 | cursor: pointer; 540 | z-index: 1000; 541 | border: 50px 0 0; 542 | } 543 | 544 | .storyImg img { 545 | width: 100%; 546 | height: 100%; 547 | object-fit: cover; 548 | border-radius: 20px; 549 | /* box-shadow: 0 0 10px var(--main-color); */ 550 | position: absolute; 551 | top: 0; 552 | left: 0; 553 | width: 100%; 554 | height: 100%; 555 | object-fit: cover; 556 | border-radius: 20px; 557 | box-shadow: 0 0 10px var(--main-color); 558 | transition: .3s ease; 559 | cursor: pointer; 560 | z-index: 1000; 561 | } 562 | 563 | .sectFlex .storyText { 564 | width: 100%; 565 | padding: 3%; 566 | } 567 | 568 | .storyText h3 { 569 | font-size: 3rem; 570 | font-weight: 600; 571 | margin-bottom: 15px; 572 | } 573 | 574 | .storyText p { 575 | font-size: 1.4rem; 576 | font-weight: 500; 577 | margin-bottom: 15px; 578 | } 579 | 580 | @media (max-width: 991px) { 581 | .sectFlex { 582 | flex-direction: column; 583 | gap: 20px 0; 584 | width: 100%; 585 | align-items: center; 586 | justify-content: center; 587 | text-align: center; 588 | padding: 3% 0%; 589 | /* padding-right: 5%; */ 590 | } 591 | 592 | .storySection { 593 | padding: 2% 0%; 594 | padding-bottom: 3%; 595 | padding-right: 7%; 596 | } 597 | 598 | .sectFlex .storyImg { 599 | width: 90%; 600 | margin: auto; 601 | } 602 | } 603 | 604 | .teamSection { 605 | padding: 2% 7%; 606 | padding-bottom: 3%; 607 | background: var(--text-color); 608 | display: flex; 609 | align-items: center; 610 | justify-content: center; 611 | flex-direction: column; 612 | width: 100%; 613 | } 614 | 615 | 616 | .teamFlex { 617 | display: flex; 618 | align-items: center; 619 | justify-content: space-between; 620 | flex-direction: row; 621 | gap: 30px; 622 | padding: 2% 7%; 623 | width: 100%; 624 | } 625 | 626 | .teamFlex .teamMember { 627 | width: 100%; 628 | height: 400px; 629 | object-fit: cover; 630 | border-radius: 20px; 631 | position: relative; 632 | overflow: hidden; 633 | transition: .3s ease; 634 | cursor: pointer; 635 | z-index: 1000; 636 | border: 50px 0 0; 637 | background-color: var(--main-color); 638 | position: relative; 639 | } 640 | 641 | .teamMember img { 642 | width: 100%; 643 | height: 100%; 644 | object-fit: cover; 645 | border-radius: 20px; 646 | /* box-shadow: 0 0 10px var(--main-color); */ 647 | position: absolute; 648 | top: 0; 649 | left: 0; 650 | width: 100%; 651 | height: 100%; 652 | object-fit: cover; 653 | border-radius: 20px; 654 | box-shadow: 0 0 10px var(--main-color); 655 | transition: .3s ease; 656 | cursor: pointer; 657 | z-index: 1000; 658 | } 659 | 660 | .data { 661 | position: absolute; 662 | top: 0%; 663 | left: 0%; 664 | width: 100%; 665 | height: 100%; 666 | display: flex; 667 | align-items: center; 668 | justify-content: center; 669 | flex-direction: column; 670 | background-color: rgba(0, 0, 0, 0.5); 671 | z-index: 1000; 672 | opacity: 0; 673 | } 674 | 675 | .teamMember:hover .data { 676 | opacity: 1; 677 | z-index: 1000; 678 | } 679 | 680 | .teamMember:hover img { 681 | transform: scale(1.1); 682 | transition: .3s ease; 683 | } 684 | 685 | .data div { 686 | position: absolute; 687 | bottom: 0%; 688 | left: 0%; 689 | transform: translateX(-50%); 690 | /* display: flex; 691 | align-items: center; 692 | justify-content: center; */ 693 | /* flex-direction: column; */ 694 | z-index: 1000; 695 | text-align: center; 696 | transition: bottom .3s ease, 697 | left .3s ease; 698 | } 699 | 700 | .data h3 { 701 | /* position: absolute; */ 702 | font-size: 3rem; 703 | font-weight: 600; 704 | margin-bottom: 0px; 705 | color: var(--main-color); 706 | text-align: center; 707 | } 708 | 709 | .data p { 710 | text-align: center; 711 | font-size: 1.4rem; 712 | font-weight: 500; 713 | margin-bottom: 30px; 714 | color: var(--main-color); 715 | } 716 | 717 | .data div a { 718 | text-decoration: none; 719 | color: var(--main-color); 720 | border: 1px solid var(--main-color); 721 | border-radius: 50%; 722 | padding: 10px 10px 5px 10px; 723 | margin-top: 20px; 724 | margin-right: 10px; 725 | text-align: center; 726 | place-items: center; 727 | } 728 | 729 | .data div a:hover { 730 | background-color: var(--main-color); 731 | color: var(--text-color); 732 | border: 1px solid var(--main-color); 733 | transition: 0.3s ease; 734 | } 735 | 736 | .data div a i { 737 | font-size: 1.7rem; 738 | } 739 | 740 | .teamMember:hover .data div { 741 | bottom: 20%; 742 | left: 50%; 743 | transition: top .3s ease, 744 | left .3s ease; 745 | } 746 | 747 | @media (max-width: 1200px) { 748 | .teamFlex { 749 | flex-direction: column; 750 | gap: 30px 0; 751 | padding: 3% 0%; 752 | /* padding-right: 5%; */ 753 | } 754 | 755 | .teamSection { 756 | padding: 2% 0%; 757 | padding-bottom: 3%; 758 | /* padding-right: 7%; */ 759 | } 760 | 761 | .teamFlex .teamMember { 762 | width: 90%; 763 | /* margin: auto; */ 764 | } 765 | 766 | .teamMember { 767 | /* height: 300px; */ 768 | height: 100%; 769 | } 770 | } 771 | 772 | 773 | 774 | 775 | 776 | 777 | /* NEWLSTERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR */ 778 | 779 | .newsLetterSection { 780 | min-height: 100vh; 781 | background-color: var(--text-color); 782 | /* padding: 8% 8%; */ 783 | /* padding-bottom: 3%; */ 784 | padding-left: 8%; 785 | padding-right: 8%; 786 | display: flex; 787 | align-items: center; 788 | justify-content: center; 789 | width: 100%; 790 | } 791 | 792 | .newsFlex { 793 | display: flex; 794 | align-items: center; 795 | justify-content: space-between; 796 | width: 100%; 797 | gap: 30px 0; 798 | flex-wrap: wrap; 799 | background: #cccccc48; 800 | border-radius: 10px; 801 | padding: 20px; 802 | } 803 | 804 | .newsFlex div h1 { 805 | font-size: 4rem; 806 | font-weight: 600; 807 | } 808 | 809 | .newsFlex div p { 810 | font-size: 1.5rem; 811 | margin-top: 20px; 812 | margin-bottom: 20px; 813 | } 814 | 815 | .newsFlex div form div { 816 | display: flex; 817 | align-items: center; 818 | justify-content: space-between; 819 | flex-wrap: wrap; 820 | background: var(--text-color); 821 | border-radius: 30px; 822 | padding: 10px 20px; 823 | gap: 10px; 824 | position: relative; 825 | } 826 | 827 | .newsFlex div form div i { 828 | position: absolute; 829 | left: 10px; 830 | background-color: var(--main-color); 831 | padding: 10px; 832 | border-radius: 50%; 833 | font-size: 1.3rem; 834 | color: var(--text-color); 835 | } 836 | 837 | .newsFlex div form div input { 838 | padding: 10px 30px; 839 | border: none; 840 | outline: none; 841 | } 842 | 843 | .newsFlex div form button { 844 | padding: 10px 30px; 845 | border: none; 846 | outline: none; 847 | background-color: var(--main-color); 848 | color: var(--text-color); 849 | border-radius: 30px; 850 | cursor: pointer; 851 | font-size: 1.3rem; 852 | font-weight: 600; 853 | transition: 0.3s ease; 854 | outline: none; 855 | border: 1px solid transparent; 856 | } 857 | 858 | .newsFlex div form button:hover { 859 | transition: 0.3s ease; 860 | background-color: var(--text-color); 861 | color: var(--main-color); 862 | border: 1px solid var(--main-color); 863 | } 864 | 865 | .newsFlex div img { 866 | border-radius: 10px; 867 | height: 100%; 868 | /* width: 100%; */ 869 | height: 300px; 870 | width: 450px; 871 | } 872 | 873 | @media (max-width: 1200px) { 874 | 875 | .newsFlex .newsContent, 876 | .newsFlex .newsImg { 877 | width: 100%; 878 | } 879 | 880 | .newsFlex .newsImg img { 881 | width: 100%; 882 | height: 100%; 883 | } 884 | 885 | .newsLetterSection { 886 | padding-top: 5%; 887 | padding-bottom: 3%; 888 | } 889 | } 890 | 891 | @media (max-width: 768px) { 892 | .newsFlex div h1 { 893 | font-size: 3rem; 894 | } 895 | 896 | .newsFlex div form button { 897 | display: none; 898 | } 899 | 900 | .on { 901 | display: block !important; 902 | } 903 | 904 | .newsFlex div form div i { 905 | position: absolute; 906 | left: 10px; 907 | background-color: var(--main-color); 908 | padding: 10px; 909 | border-radius: 50%; 910 | font-size: 1.3rem; 911 | color: var(--text-color); 912 | } 913 | 914 | .newsFlex div form div input { 915 | padding: 10px 30px; 916 | border: none; 917 | width: 100%; 918 | outline: none; 919 | } 920 | 921 | } -------------------------------------------------------------------------------- /assest/css/contact.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | scroll-behavior: smooth; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | ::-webkit-scrollbar { 10 | width: 5px; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | background-color: var(--main-color); 15 | } 16 | 17 | ::-webkit-scrollbar-track { 18 | background-color: var(--text-color); 19 | width: 50px; 20 | } 21 | 22 | :root { 23 | --text-color: white; 24 | /* --bg-color: #080808; 25 | --second-bg-color: #13131313; 26 | */ 27 | --main-color: orange; 28 | } 29 | 30 | html { 31 | font-size: 60%; 32 | } 33 | 34 | body { 35 | background: #161616; 36 | background: url('/images/bg2.jpeg') no-repeat; 37 | background-size: cover; 38 | background-position: center; 39 | background-attachment: fixed; 40 | position: relative; 41 | } 42 | 43 | .header { 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | padding: 1rem 8% 1rem; 49 | background: rgba(0, 0, 0, 0.3); 50 | background: transparent; 51 | backdrop-filter: blur(10px); 52 | background: black; 53 | display: flex; 54 | align-items: center; 55 | justify-content: space-between; 56 | z-index: 10000; 57 | } 58 | 59 | .logo { 60 | font-size: 2.5rem; 61 | color: var(--text-color); 62 | font-weight: 800; 63 | cursor: pointer; 64 | transition: 0.3s ease; 65 | text-decoration: none; 66 | } 67 | 68 | .logo:hover { 69 | transform: scale(1.1); 70 | transition: 0.3s ease; 71 | } 72 | 73 | .logo span { 74 | text-shadow: 0 0 25px var(--main-color); 75 | color: orange; 76 | font-size: 3rem; 77 | font-weight: 700; 78 | } 79 | 80 | .navbar a { 81 | font-size: 1.5rem; 82 | color: var(--text-color); 83 | margin-left: 4rem; 84 | font-weight: 500; 85 | transition: 0.3s ease; 86 | border-bottom: 3px solid transparent; 87 | text-decoration: none; 88 | } 89 | 90 | .navbar a:hover, 91 | .navbar a.active { 92 | border-bottom: 3px solid var(--main-color); 93 | } 94 | 95 | .hide { 96 | display: flex; 97 | align-items: center; 98 | justify-content: center; 99 | gap: 0 10px; 100 | } 101 | 102 | #menu-icon { 103 | font-size: 3.6rem; 104 | color: var(--text-color); 105 | display: none; 106 | cursor: pointer; 107 | } 108 | 109 | .iv { 110 | font-size: 2.3rem; 111 | cursor: pointer; 112 | color: var(--text-color); 113 | cursor: pointer; 114 | display: none; 115 | } 116 | 117 | details summary { 118 | list-style: none; 119 | width: max-content; 120 | padding: 5px 10px; 121 | cursor: pointer; 122 | z-index: 100; 123 | } 124 | 125 | details { 126 | position: relative; 127 | z-index: 100; 128 | display: none; 129 | } 130 | 131 | .hidden { 132 | display: none; 133 | } 134 | 135 | details ul { 136 | position: absolute; 137 | top: 45px; 138 | right: 0; 139 | background: #000; 140 | backdrop-filter: blur(10px); 141 | border: 1px solid var(--main-color); 142 | box-shadow: 0 10px 50px var(--text-color); 143 | padding: 10px; 144 | border-radius: 10px; 145 | z-index: 100; 146 | } 147 | 148 | details ul li { 149 | z-index: 100; 150 | width: 150px; 151 | border-radius: 5px; 152 | cursor: pointer; 153 | display: grid; 154 | grid-template-columns: 20px 1fr; 155 | grid-template-rows: 48px; 156 | gap: 10px; 157 | justify-content: center; 158 | align-items: center; 159 | padding: 0 10px; 160 | text-align: left; 161 | transition: 0.3s ease; 162 | font-size: 14px; 163 | color: var(--text-color); 164 | } 165 | 166 | details ul li i { 167 | color: var(--main-color); 168 | } 169 | 170 | details ul li:hover { 171 | background-color: white; 172 | color: #000; 173 | } 174 | 175 | .icons { 176 | display: flex; 177 | align-items: center; 178 | justify-content: space-between; 179 | } 180 | 181 | .icons a { 182 | text-decoration: none; 183 | } 184 | 185 | .icons a i { 186 | font-size: 2.5rem; 187 | color: var(--text-color); 188 | margin-left: 1.3rem; 189 | transition: 0.3s ease; 190 | } 191 | 192 | .icons a i:hover { 193 | transform: scale(1.1); 194 | transition: 0.3s ease; 195 | color: var(--main-color); 196 | } 197 | 198 | 199 | 200 | @media (max-width: 1285px) { 201 | html { 202 | font-size: 55%; 203 | } 204 | } 205 | 206 | @media (max-width: 991px) { 207 | header { 208 | padding: 2rem 3%; 209 | } 210 | 211 | .section { 212 | min-height: 100vh; 213 | padding: 10rem 3% 2rem; 214 | } 215 | } 216 | 217 | 218 | 219 | @media (max-width: 1200px) { 220 | #menu-icon { 221 | display: block; 222 | } 223 | 224 | .iv { 225 | display: block; 226 | } 227 | 228 | details { 229 | display: block; 230 | } 231 | 232 | .icons { 233 | display: none; 234 | } 235 | 236 | .navbar { 237 | position: absolute; 238 | top: 100%; 239 | right: 0; 240 | width: 50%; 241 | height: 100vh; 242 | padding: 1rem 3%; 243 | background: rgba(0, 0, 0, 0.8); 244 | backdrop-filter: blur(20px); 245 | border-bottom-left-radius: 2rem; 246 | border-left: 2px solid var(--main-color); 247 | display: none; 248 | } 249 | 250 | .navbar.active { 251 | display: block; 252 | } 253 | 254 | .navbar a { 255 | display: block; 256 | font-size: 1.7rem; 257 | margin: 3rem 0; 258 | color: white; 259 | } 260 | } 261 | 262 | 263 | 264 | 265 | 266 | 267 | /* FOOOOOOOOOOOOOOOOOOOOOOOTERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR */ 268 | 269 | footer { 270 | background-color: var(--text-color); 271 | padding: 8% 0; 272 | padding-bottom: 0; 273 | /* position: absolute; */ 274 | width: 100%; 275 | } 276 | 277 | footer .logoHead { 278 | border-bottom: 1px solid #ccc; 279 | border-top: 1px solid #ccc; 280 | padding: 20px; 281 | } 282 | 283 | footer .logoHead h1 { 284 | font-size: 40px; 285 | font-weight: 900; 286 | text-align: center; 287 | } 288 | 289 | footer .logoHead h1 span { 290 | font-weight: 800; 291 | font-size: 50px; 292 | color: var(--main-color); 293 | } 294 | 295 | footer .footerFlex { 296 | display: flex; 297 | align-items: center; 298 | justify-content: space-between; 299 | flex-wrap: wrap; 300 | padding: 3% 8%; 301 | } 302 | 303 | .footerFlex div h3 { 304 | font-size: 1.7rem; 305 | font-weight: 600; 306 | margin-bottom: 15px; 307 | } 308 | 309 | .footerFlex div a { 310 | font-size: 1.5rem; 311 | font-weight: 500; 312 | color: #777; 313 | display: block; 314 | margin-bottom: 10px; 315 | text-decoration: none; 316 | transition: .3s ease; 317 | } 318 | 319 | .footerFlex div a:hover { 320 | color: var(--main-color); 321 | transition: .3s ease; 322 | } 323 | 324 | .copyrightSec { 325 | padding: 20px 0; 326 | text-align: center; 327 | display: flex; 328 | align-items: center; 329 | justify-content: space-between; 330 | flex-wrap: wrap; 331 | gap: 20px 0; 332 | word-wrap: 100%; 333 | padding: 1.5% 8%; 334 | background: var(--main-color); 335 | } 336 | 337 | .copyrightSec p { 338 | font-size: 1.5rem; 339 | font-weight: 500; 340 | color: var(--text-color); 341 | } 342 | 343 | .copyrightSec .socialMedia { 344 | display: flex; 345 | align-items: center; 346 | 347 | gap: 10px; 348 | } 349 | 350 | .copyrightSec .socialMedia a { 351 | font-size: 1.5rem; 352 | font-weight: 500; 353 | color: var(--text-color); 354 | text-decoration: none; 355 | background: var(--text-color); 356 | padding: 5px 5px; 357 | border-radius: 50%; 358 | text-align: center; 359 | color: var(--main-color); 360 | transition: .3s ease; 361 | display: grid; 362 | place-items: center; 363 | border: 1px solid transparent; 364 | } 365 | 366 | .copyrightSec .socialMedia a:hover { 367 | color: var(--text-color); 368 | transition: .3s ease; 369 | border: 1px solid var(--text-color); 370 | background: var(--main-color); 371 | } 372 | 373 | .socialMedia a i { 374 | font-size: 2rem; 375 | } 376 | 377 | @media (max-width: 899px) { 378 | .footerFlex { 379 | flex-direction: column; 380 | gap: 30px 0; 381 | width: 100%; 382 | align-items: center; 383 | justify-content: center; 384 | text-align: center; 385 | } 386 | 387 | .footerFlex div { 388 | width: 100%; 389 | } 390 | 391 | .copyrightSec { 392 | padding: 20px 0; 393 | text-align: center; 394 | display: flex; 395 | align-items: center; 396 | justify-content: center; 397 | flex-wrap: wrap; 398 | gap: 20px 0; 399 | padding: 2% 8%; 400 | width: 100%; 401 | } 402 | 403 | .copyrightSec .socialMedia { 404 | display: flex; 405 | align-items: center; 406 | gap: 10px; 407 | width: 100%; 408 | justify-content: center; 409 | } 410 | } 411 | 412 | .contact { 413 | background-color: var(--text-color); 414 | padding: 0% 0%; 415 | padding-bottom: 0; 416 | /* position: absolute; */ 417 | width: 100%; 418 | min-height: 100vh; 419 | } 420 | 421 | .contact .contactbg { 422 | /* background-image: url('/images/contactbg.jpeg'); */ 423 | background: url('../../images/contactbg.jpeg') no-repeat; 424 | background-size: cover; 425 | background-position: center; 426 | background-repeat: no-repeat; 427 | height: 30vh; 428 | height: 400px; 429 | position: relative; 430 | display: flex; 431 | align-items: center; 432 | text-align: center; 433 | justify-content: center; 434 | width: 100%; 435 | } 436 | 437 | .contact .contactbg::after { 438 | content: ''; 439 | position: absolute; 440 | top: 0; 441 | left: 0; 442 | width: 100%; 443 | height: 400px; 444 | background: rgba(0, 0, 0, 0.6); 445 | } 446 | 447 | .contactbg div { 448 | position: relative; 449 | padding: 0 5%; 450 | z-index: 1000; 451 | } 452 | 453 | .contactbg div h1 { 454 | font-size: 4rem; 455 | font-weight: 600; 456 | text-align: center; 457 | color: var(--main-color); 458 | } 459 | 460 | .contactbg div p { 461 | font-size: 20px; 462 | font-size: 1.7rem; 463 | font-weight: 500; 464 | text-align: center; 465 | color: var(--text-color); 466 | } 467 | 468 | .contactFlex { 469 | display: flex; 470 | align-items: center; 471 | justify-content: center; 472 | /* flex-wrap: wrap; */ 473 | padding: 3% 8%; 474 | gap: 30px 50px; 475 | width: 100%; 476 | } 477 | 478 | @media (max-width: 1111px) { 479 | .contactFlex { 480 | display: flex; 481 | align-items: center; 482 | justify-content: center; 483 | flex-wrap: wrap; 484 | padding: 3% 8%; 485 | gap: 50px 50px; 486 | width: 100%; 487 | } 488 | } 489 | 490 | .contactInfo { 491 | display: flex; 492 | align-items: start; 493 | flex-wrap: wrap; 494 | gap: 10px 0; 495 | width: 100%; 496 | flex-direction: column; 497 | justify-content: start; 498 | margin-top: 30px; 499 | } 500 | 501 | .contactInfo h2 { 502 | font-size: 3rem; 503 | font-weight: 700; 504 | margin-bottom: 10px; 505 | } 506 | 507 | .contactInfo p { 508 | font-size: 1.5rem; 509 | font-weight: 400; 510 | color: #777; 511 | margin-bottom: 10px; 512 | } 513 | 514 | .contactInfo .media { 515 | display: flex; 516 | flex-direction: column; 517 | align-items: start; 518 | justify-content: start; 519 | gap: 20px; 520 | width: 100%; 521 | } 522 | 523 | .media div { 524 | width: 100%; 525 | background: #cccccc48; 526 | /* padding: 20px; */ 527 | display: flex; 528 | align-items: center; 529 | justify-content: start; 530 | gap: 20px; 531 | } 532 | 533 | .media div i { 534 | height: 100%; 535 | background: var(--main-color); 536 | font-size: 20px; 537 | padding: 20px; 538 | cursor: pointer; 539 | color: var(--text-color); 540 | } 541 | 542 | .contactInfo .media a { 543 | display: flex; 544 | align-items: start; 545 | justify-content: start; 546 | flex-direction: column; 547 | gap: 5px; 548 | font-size: 1.7rem; 549 | font-weight: 500; 550 | color: var(--text-color); 551 | text-decoration: none; 552 | padding: 0px 20px 0px 10px; 553 | color: var(--main-color); 554 | transition: .3s ease; 555 | border: 1px solid transparent; 556 | height: 100%; 557 | } 558 | 559 | .media a span { 560 | font-size: 1.5rem; 561 | } 562 | 563 | .social { 564 | margin-top: 20px; 565 | display: flex; 566 | align-items: start; 567 | justify-content: start; 568 | flex-direction: column; 569 | gap: 10px; 570 | } 571 | 572 | .social h3 { 573 | font-size: 3rem; 574 | font-weight: 700; 575 | margin-bottom: 10px; 576 | } 577 | 578 | .social div { 579 | width: 100%; 580 | display: flex; 581 | align-items: start; 582 | justify-content: start; 583 | gap: 10px; 584 | } 585 | 586 | .social div a { 587 | border-radius: 50%; 588 | background: var(--text-color); 589 | border: 1px solid var(--main-color); 590 | padding: 10px; 591 | color: var(--main-color); 592 | text-decoration: none; 593 | transition: .3s ease; 594 | } 595 | 596 | .social div a i { 597 | font-size: 20px; 598 | } 599 | 600 | .social div a:hover { 601 | background-color: var(--main-color); 602 | border: 1px solid transparent; 603 | transition: .3s ease; 604 | transform: translateY(-5px); 605 | } 606 | 607 | .social div a:hover i { 608 | color: var(--text-color); 609 | } 610 | 611 | .contactForm { 612 | width: 100%; 613 | display: flex; 614 | align-items: center; 615 | text-align: center; 616 | justify-content: start; 617 | flex-direction: column; 618 | border-radius: 10px; 619 | background: var(--main-color); 620 | padding: 20px; 621 | } 622 | 623 | .contactForm h2 { 624 | font-size: 3rem; 625 | font-weight: 700; 626 | margin-bottom: 5px; 627 | color: var(--text-color); 628 | text-align: center; 629 | } 630 | 631 | .contactForm p { 632 | font-size: 1.5rem; 633 | font-weight: 400; 634 | color: var(--text-color); 635 | margin-bottom: 20px; 636 | text-align: center; 637 | } 638 | 639 | form { 640 | width: 100%; 641 | } 642 | 643 | .contactForm .inputBox { 644 | display: flex; 645 | align-items: start; 646 | justify-content: start; 647 | flex-direction: column; 648 | gap: 5px; 649 | width: 100%; 650 | margin-bottom: 20px; 651 | } 652 | 653 | .contactForm .inputBox label { 654 | font-size: 1.3rem; 655 | font-weight: 400; 656 | color: var(--text-color); 657 | margin-bottom: 5px; 658 | } 659 | 660 | .contactForm .inputBox input, 661 | .contactForm .inputBox textarea { 662 | width: 100%; 663 | padding: 10px; 664 | border: 1px solid var(--text-color); 665 | border-radius: 5px; 666 | outline: none; 667 | font-size: 1.3rem; 668 | font-weight: 400; 669 | resize: none; 670 | } 671 | 672 | .contactForm .inputBox textarea { 673 | height: 100px; 674 | } 675 | 676 | .contactForm .inputBox input:focus, 677 | .contactForm .inputBox textarea:focus { 678 | border: 1px solid var(--main-color); 679 | transition: .3s ease; 680 | } 681 | 682 | .contactForm form button { 683 | width: 100%; 684 | padding: 10px 20px; 685 | border-radius: 30px; 686 | border: none; 687 | background: transparent; 688 | cursor: pointer; 689 | outline: none; 690 | border: 1px solid var(--text-color); 691 | transition: .3s ease; 692 | color: var(--text-color); 693 | font-size: 16px; 694 | } 695 | 696 | form button:hover { 697 | color: var(--main-color); 698 | background-color: var(--text-color); 699 | border: 1px solid var(--main-color); 700 | transition: .3s ease; 701 | } 702 | 703 | 704 | .newsLetterSection { 705 | min-height: 100vh; 706 | background-color: var(--text-color); 707 | /* padding: 8% 8%; */ 708 | /* padding-bottom: 3%; */ 709 | padding-left: 8%; 710 | padding-right: 8%; 711 | display: flex; 712 | align-items: center; 713 | justify-content: center; 714 | width: 100%; 715 | } 716 | 717 | .newsFlex { 718 | display: flex; 719 | align-items: center; 720 | justify-content: space-between; 721 | width: 100%; 722 | gap: 30px 0; 723 | flex-wrap: wrap; 724 | background: #cccccc48; 725 | border-radius: 10px; 726 | padding: 20px; 727 | } 728 | 729 | .newsFlex div h1 { 730 | font-size: 4rem; 731 | font-weight: 600; 732 | } 733 | 734 | .newsFlex div p { 735 | font-size: 1.5rem; 736 | margin-top: 20px; 737 | margin-bottom: 20px; 738 | } 739 | 740 | .newsFlex div form div { 741 | display: flex; 742 | align-items: center; 743 | justify-content: space-between; 744 | flex-wrap: wrap; 745 | background: var(--text-color); 746 | border-radius: 30px; 747 | padding: 10px 20px; 748 | gap: 10px; 749 | position: relative; 750 | } 751 | 752 | .newsFlex div form div i { 753 | position: absolute; 754 | left: 10px; 755 | background-color: var(--main-color); 756 | padding: 10px; 757 | border-radius: 50%; 758 | font-size: 1.3rem; 759 | color: var(--text-color); 760 | } 761 | 762 | .newsFlex div form div input { 763 | padding: 10px 30px; 764 | border: none; 765 | outline: none; 766 | } 767 | 768 | .newsFlex div form button { 769 | padding: 10px 30px; 770 | border: none; 771 | outline: none; 772 | background-color: var(--main-color); 773 | color: var(--text-color); 774 | border-radius: 30px; 775 | cursor: pointer; 776 | font-size: 1.3rem; 777 | font-weight: 600; 778 | transition: 0.3s ease; 779 | outline: none; 780 | border: 1px solid transparent; 781 | } 782 | 783 | .newsFlex div form button:hover { 784 | transition: 0.3s ease; 785 | background-color: var(--text-color); 786 | color: var(--main-color); 787 | border: 1px solid var(--main-color); 788 | } 789 | 790 | .newsFlex div img { 791 | border-radius: 10px; 792 | height: 100%; 793 | /* width: 100%; */ 794 | height: 300px; 795 | width: 450px; 796 | } 797 | 798 | @media (max-width: 1200px) { 799 | 800 | .newsFlex .newsContent, 801 | .newsFlex .newsImg { 802 | width: 100%; 803 | } 804 | 805 | .newsFlex .newsImg img { 806 | width: 100%; 807 | height: 100%; 808 | } 809 | 810 | .newsLetterSection { 811 | padding-top: 5%; 812 | padding-bottom: 3%; 813 | } 814 | } 815 | 816 | @media (max-width: 768px) { 817 | .newsFlex div h1 { 818 | font-size: 3rem; 819 | } 820 | 821 | .newsFlex div form button { 822 | display: none; 823 | } 824 | 825 | .on { 826 | display: block !important; 827 | } 828 | 829 | .newsFlex div form div i { 830 | position: absolute; 831 | left: 10px; 832 | background-color: var(--main-color); 833 | padding: 10px; 834 | border-radius: 50%; 835 | font-size: 1.3rem; 836 | color: var(--text-color); 837 | } 838 | 839 | .newsFlex div form div input { 840 | padding: 10px 30px; 841 | border: none; 842 | width: 100%; 843 | outline: none; 844 | } 845 | 846 | } -------------------------------------------------------------------------------- /assest/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | scroll-behavior: smooth; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | ::-webkit-scrollbar { 10 | width: 5px; 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | background-color: var(--main-color); 15 | } 16 | 17 | ::-webkit-scrollbar-track { 18 | background-color: var(--text-color); 19 | width: 50px; 20 | } 21 | 22 | :root { 23 | --text-color: white; 24 | /* --bg-color: #080808; 25 | --second-bg-color: #13131313; 26 | */ 27 | --main-color: orange; 28 | } 29 | 30 | html { 31 | font-size: 60%; 32 | } 33 | 34 | body { 35 | background: #161616; 36 | background: url('../../images/bg2.jpeg') no-repeat; 37 | /* background: url('/images/bg2.jpeg') no-repeat; */ 38 | background-size: cover; 39 | background-position: center; 40 | background-attachment: fixed; 41 | } 42 | 43 | .header { 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | padding: 1rem 8% 1rem; 49 | background: rgba(0, 0, 0, 0.3); 50 | background: transparent; 51 | backdrop-filter: blur(10px); 52 | background: black; 53 | display: flex; 54 | align-items: center; 55 | justify-content: space-between; 56 | z-index: 5; 57 | } 58 | 59 | .logo { 60 | font-size: 2.5rem; 61 | color: var(--text-color); 62 | font-weight: 800; 63 | cursor: pointer; 64 | transition: 0.3s ease; 65 | text-decoration: none; 66 | } 67 | 68 | .logo:hover { 69 | transform: scale(1.1); 70 | transition: 0.3s ease; 71 | } 72 | 73 | .logo span { 74 | text-shadow: 0 0 25px var(--main-color); 75 | color: orange; 76 | font-size: 3rem; 77 | font-weight: 700; 78 | } 79 | 80 | .navbar a { 81 | font-size: 1.5rem; 82 | color: var(--text-color); 83 | margin-left: 4rem; 84 | font-weight: 500; 85 | transition: 0.3s ease; 86 | border-bottom: 3px solid transparent; 87 | text-decoration: none; 88 | } 89 | 90 | .navbar a:hover, 91 | .navbar a.active { 92 | border-bottom: 3px solid var(--main-color); 93 | } 94 | 95 | .hide { 96 | display: flex; 97 | align-items: center; 98 | justify-content: center; 99 | gap: 0 10px; 100 | } 101 | 102 | #menu-icon { 103 | font-size: 3.6rem; 104 | color: var(--text-color); 105 | display: none; 106 | cursor: pointer; 107 | } 108 | 109 | .iv { 110 | font-size: 2.3rem; 111 | cursor: pointer; 112 | color: var(--text-color); 113 | cursor: pointer; 114 | display: none; 115 | } 116 | 117 | details summary { 118 | list-style: none; 119 | width: max-content; 120 | padding: 5px 10px; 121 | cursor: pointer; 122 | z-index: 100; 123 | } 124 | 125 | details { 126 | position: relative; 127 | z-index: 100; 128 | display: none; 129 | } 130 | 131 | .hidden { 132 | display: none; 133 | } 134 | 135 | details ul { 136 | position: absolute; 137 | top: 45px; 138 | right: 0; 139 | background: #000; 140 | backdrop-filter: blur(10px); 141 | border: 1px solid var(--main-color); 142 | box-shadow: 0 10px 50px var(--text-color); 143 | padding: 10px; 144 | border-radius: 10px; 145 | z-index: 100; 146 | } 147 | 148 | details ul li { 149 | z-index: 100; 150 | width: 150px; 151 | border-radius: 5px; 152 | cursor: pointer; 153 | display: grid; 154 | grid-template-columns: 20px 1fr; 155 | grid-template-rows: 48px; 156 | gap: 10px; 157 | justify-content: center; 158 | align-items: center; 159 | padding: 0 10px; 160 | text-align: left; 161 | transition: 0.3s ease; 162 | font-size: 14px; 163 | color: var(--text-color); 164 | } 165 | 166 | details ul li i { 167 | color: var(--main-color); 168 | } 169 | 170 | details ul li:hover { 171 | background-color: white; 172 | color: #000; 173 | } 174 | 175 | .icons { 176 | display: flex; 177 | align-items: center; 178 | justify-content: space-between; 179 | } 180 | 181 | .icons a { 182 | text-decoration: none; 183 | } 184 | 185 | .icons a i { 186 | font-size: 2.5rem; 187 | color: var(--text-color); 188 | margin-left: 1.3rem; 189 | transition: 0.3s ease; 190 | } 191 | 192 | .icons a i:hover { 193 | transform: scale(1.1); 194 | transition: 0.3s ease; 195 | color: var(--main-color); 196 | } 197 | 198 | 199 | 200 | @media (max-width: 1285px) { 201 | html { 202 | font-size: 55%; 203 | } 204 | } 205 | 206 | @media (max-width: 991px) { 207 | header { 208 | padding: 2rem 3%; 209 | } 210 | 211 | .section { 212 | min-height: 100vh; 213 | padding: 10rem 3% 2rem; 214 | } 215 | } 216 | 217 | 218 | 219 | @media (max-width: 1200px) { 220 | #menu-icon { 221 | display: block; 222 | } 223 | 224 | .iv { 225 | display: block; 226 | } 227 | 228 | details { 229 | display: block; 230 | } 231 | 232 | .icons { 233 | display: none; 234 | } 235 | 236 | .navbar { 237 | position: absolute; 238 | top: 100%; 239 | right: 0; 240 | width: 50%; 241 | height: 100vh; 242 | padding: 1rem 3%; 243 | background: rgba(0, 0, 0, 0.8); 244 | backdrop-filter: blur(20px); 245 | border-bottom-left-radius: 2rem; 246 | border-left: 2px solid var(--main-color); 247 | display: none; 248 | } 249 | 250 | .navbar.active { 251 | display: block; 252 | } 253 | 254 | .navbar a { 255 | display: block; 256 | font-size: 1.7rem; 257 | margin: 3rem 0; 258 | color: white; 259 | } 260 | } 261 | 262 | .home { 263 | min-height: 100vh; 264 | display: flex; 265 | align-items: center; 266 | justify-content: space-between; 267 | width: 100%; 268 | padding: 0rem 5%; 269 | padding: 5rem 8% 0rem; 270 | flex-wrap: wrap; 271 | } 272 | 273 | .home .col .span { 274 | background-color: rgba(0, 0, 0, 0.247); 275 | color: #ccc; 276 | padding: 7px 10px; 277 | font-size: 14px; 278 | border-radius: 20px; 279 | letter-spacing: 2px; 280 | margin-bottom: 10px; 281 | display: inline-block; 282 | } 283 | 284 | .home .col h1 { 285 | font-size: 45px; 286 | font-weight: 600; 287 | margin-bottom: 5px; 288 | color: var(--text-color); 289 | line-height: 1.3; 290 | } 291 | 292 | .home .col p { 293 | font-size: 14px; 294 | font-weight: 400; 295 | color: #ccc; 296 | margin-top: 20px; 297 | margin-bottom: 10px; 298 | line-height: 1.5; 299 | width: 85vmin; 300 | } 301 | 302 | .home .col .anchor { 303 | display: flex; 304 | align-items: center; 305 | justify-content: start; 306 | gap: 0 10px; 307 | } 308 | 309 | .home .col .anchor button { 310 | margin: 10px 0; 311 | padding: 10px 20px; 312 | background: var(--main-color); 313 | color: #fff; 314 | cursor: pointer; 315 | font-size: 14px; 316 | font-weight: 600; 317 | letter-spacing: 2px; 318 | border-radius: 25px; 319 | transition: 0.3s ease; 320 | display: flex; 321 | align-items: center; 322 | justify-content: center; 323 | gap: 0 5px; 324 | border: 1px solid transparent; 325 | outline: none; 326 | } 327 | 328 | .home .col .anchor button i { 329 | font-size: 17px; 330 | transition: 0.3s ease; 331 | } 332 | 333 | .home .col .anchor button:hover { 334 | border: 1px solid #ccc; 335 | background: transparent; 336 | transition: 0.3s ease; 337 | } 338 | 339 | .home .col .anchor a { 340 | text-decoration: none; 341 | border-bottom: 2px solid var(--main-color); 342 | color: var(--text-color); 343 | font-size: 14px; 344 | font-weight: 600; 345 | transition: 0.3s ease; 346 | } 347 | 348 | .home .col .reviews { 349 | display: flex; 350 | align-items: center; 351 | justify-content: start; 352 | gap: 0 20px; 353 | margin-top: 30px; 354 | } 355 | 356 | .home .col .reviews div { 357 | cursor: pointer; 358 | } 359 | 360 | .home .col .reviews div h3 { 361 | font-size: 20px; 362 | font-weight: 600; 363 | color: var(--text-color); 364 | } 365 | 366 | .home .col .reviews div h4 { 367 | font-size: 13px; 368 | font-weight: 500; 369 | color: var(--text-color); 370 | } 371 | 372 | .column { 373 | display: flex; 374 | align-items: center; 375 | justify-content: center; 376 | gap: 0 20px; 377 | width: 500px; 378 | overflow: hidden; 379 | } 380 | 381 | .div { 382 | width: 100px; 383 | height: 430px; 384 | position: relative; 385 | } 386 | 387 | .div img { 388 | width: 100%; 389 | height: 100%; 390 | object-fit: cover; 391 | border-radius: 10px; 392 | } 393 | 394 | .div .h4 { 395 | position: absolute; 396 | color: var(--text-color); 397 | bottom: 90px; 398 | left: 0px; 399 | transform: rotate(-90deg); 400 | font-size: 20px; 401 | font-weight: 600; 402 | text-transform: uppercase; 403 | z-index: 1; 404 | right: 0; 405 | letter-spacing: 3px; 406 | } 407 | 408 | .div.act { 409 | width: 330px; 410 | height: 430px; 411 | position: relative; 412 | } 413 | 414 | .div.act img { 415 | width: 100%; 416 | height: 100%; 417 | object-fit: cover; 418 | border-radius: 10px; 419 | } 420 | 421 | .div.act h4 { 422 | position: absolute; 423 | color: var(--text-color); 424 | bottom: 20px; 425 | left: 20px; 426 | font-size: 20px; 427 | font-weight: 600; 428 | text-transform: uppercase; 429 | } 430 | 431 | .slider-container { 432 | display: flex; 433 | align-items: center; 434 | justify-content: center; 435 | /* width: 400px; 436 | overflow: auto; 437 | overflow-y: hidden; 438 | overflow-x: scroll; 439 | height: 470px; */ 440 | 441 | } 442 | 443 | .slider-images { 444 | display: flex; 445 | align-items: center; 446 | justify-content: center; 447 | gap: 21px; 448 | } 449 | 450 | .slider-images img { 451 | width: 100%; 452 | height: 100%; 453 | object-fit: cover; 454 | border-radius: 10px; 455 | } 456 | 457 | .slider-img { 458 | width: 100px; 459 | border-radius: 10px; 460 | cursor: pointer; 461 | position: relative; 462 | transition: 0.3s ease; 463 | } 464 | 465 | .slider-images .slider-img:first-child, 466 | .slider-images .slider-img:last-child { 467 | height: 270px; 468 | } 469 | 470 | .slider-images .slider-img:nth-child(2), 471 | .slider-images .slider-img:nth-child(6) { 472 | height: 330px; 473 | } 474 | 475 | .slider-images .slider-img:nth-child(3), 476 | .slider-images .slider-img:nth-child(4), 477 | .slider-images .slider-img:nth-child(5) { 478 | height: 370px; 479 | } 480 | 481 | .slider-img h1 { 482 | position: absolute; 483 | top: 50%; 484 | left: -10px; 485 | font-size: 20px; 486 | font-weight: 700; 487 | text-transform: uppercase; 488 | color: var(--text-color); 489 | transform: rotate(270deg); 490 | } 491 | 492 | .slider-img.act { 493 | width: auto !important; 494 | height: 430px !important; 495 | } 496 | 497 | .slider-img.act h1 { 498 | color: var(--main-color); 499 | left: 50%; 500 | transform: translate(-50%, -50%) rotate(0); 501 | } 502 | 503 | .new { 504 | min-height: 100vh; 505 | display: flex; 506 | align-items: center; 507 | justify-content: space-between; 508 | flex-direction: row; 509 | /* flex-wrap: wrap; */ 510 | background: #fff; 511 | padding: 10% 8%; 512 | width: 100%; 513 | } 514 | 515 | .box1 .fl { 516 | display: flex; 517 | align-items: center; 518 | justify-content: space-between; 519 | flex-wrap: wrap; 520 | background: #cccccc48; 521 | border-radius: 10px; 522 | padding: 20px; 523 | } 524 | 525 | .box2 .fle { 526 | display: flex; 527 | align-items: start; 528 | justify-content: space-between; 529 | flex-direction: column; 530 | background: #cccccc48; 531 | border-radius: 10px; 532 | padding: 20px; 533 | /* height: 90vh; */ 534 | width: 100%; 535 | } 536 | 537 | .box2 .fle img { 538 | width: 300px; 539 | } 540 | 541 | .box1 .fle { 542 | display: flex; 543 | align-items: center; 544 | justify-content: space-between; 545 | flex-wrap: wrap; 546 | background: #cccccc48; 547 | border-radius: 10px; 548 | padding: 20px; 549 | } 550 | 551 | .fel { 552 | display: flex; 553 | align-items: center; 554 | justify-content: space-between; 555 | flex-wrap: wrap; 556 | gap: 0 20px; 557 | margin-top: 15px; 558 | } 559 | 560 | .color { 561 | background: var(--main-color); 562 | padding: 20px; 563 | height: 270px; 564 | width: 270px; 565 | display: flex; 566 | align-items: center; 567 | justify-content: center; 568 | flex-direction: column; 569 | border-radius: 10px; 570 | } 571 | 572 | @media (max-width: 1300px) { 573 | .new { 574 | flex-direction: column; 575 | } 576 | 577 | .flex { 578 | width: 100%; 579 | } 580 | 581 | .box1 { 582 | width: 100%; 583 | } 584 | 585 | .color { 586 | width: 100%; 587 | margin-top: 15px; 588 | margin-bottom: 15px; 589 | } 590 | 591 | .box1 .fl { 592 | width: 100%; 593 | } 594 | 595 | .box2 .fle { 596 | width: 100%; 597 | /* height: 90vh; */ 598 | height: auto; 599 | flex-direction: column; 600 | } 601 | 602 | .box2 { 603 | width: 100%; 604 | } 605 | 606 | .fel { 607 | width: 100%; 608 | } 609 | 610 | .fle { 611 | width: 100%; 612 | } 613 | } 614 | 615 | .collect { 616 | background-color: #fff; 617 | color: #777; 618 | padding: 7px 10px; 619 | font-size: 14px; 620 | font-weight: 600; 621 | border-radius: 20px; 622 | letter-spacing: 2px; 623 | margin-bottom: 10px; 624 | display: inline-block; 625 | border: 1px solid #ccc; 626 | } 627 | 628 | .h2 { 629 | color: var(--text-color); 630 | font-size: 30px; 631 | } 632 | 633 | .cole { 634 | color: var(--main-color); 635 | } 636 | 637 | .h3 { 638 | font-size: 2.2rem; 639 | font-weight: 600; 640 | margin-bottom: 10px; 641 | } 642 | 643 | .ul { 644 | list-style: none; 645 | margin-bottom: 10px; 646 | } 647 | 648 | .ul li { 649 | font-size: 14px; 650 | font-weight: 500; 651 | } 652 | 653 | .a { 654 | font-size: 14px; 655 | border-bottom: 2px solid var(--main-color); 656 | text-decoration: none; 657 | color: var(--main-color); 658 | } 659 | 660 | .a i { 661 | font-size: 15px; 662 | } 663 | 664 | .featured { 665 | min-height: 100vh; 666 | display: flex; 667 | align-items: center; 668 | justify-content: space-between; 669 | flex-direction: column; 670 | background: var(--text-color); 671 | width: 100%; 672 | padding: 7% 8%; 673 | } 674 | 675 | .head { 676 | display: flex; 677 | align-items: center; 678 | justify-content: space-between; 679 | flex-wrap: wrap; 680 | width: 100%; 681 | gap: 5px 20px; 682 | margin-bottom: 10px; 683 | } 684 | 685 | .fea { 686 | font-size: 35px; 687 | font-weight: 500; 688 | } 689 | 690 | .bt { 691 | font-size: 25px; 692 | font-weight: 600; 693 | color: var(--text-color); 694 | border: 1px solid transparent; 695 | background: var(--main-color); 696 | width: 100px; 697 | padding: 3px; 698 | cursor: pointer; 699 | border-radius: 30px; 700 | transition: .3s ease; 701 | outline: none; 702 | } 703 | 704 | .bt:hover { 705 | transition: .3s ease; 706 | background: var(--text-color); 707 | color: var(--main-color); 708 | border: 1px solid var(--main-color); 709 | } 710 | 711 | .grid { 712 | display: grid; 713 | grid-template-columns: repeat(6, 1fr); 714 | width: 100%; 715 | grid-gap: 20px 10px; 716 | text-align: center; 717 | } 718 | 719 | .width { 720 | padding: 20px 10px; 721 | background: #cccccc48; 722 | border-radius: 50%; 723 | text-align: center; 724 | margin-bottom: 15px; 725 | } 726 | 727 | .width img { 728 | width: 120px; 729 | height: 130px; 730 | object-fit: cover; 731 | border-radius: 10px; 732 | } 733 | 734 | @media (max-width: 1200px) { 735 | .grid { 736 | grid-template-columns: repeat(3, 1fr); 737 | } 738 | 739 | .head { 740 | margin-bottom: 20px; 741 | } 742 | } 743 | 744 | @media (max-width: 768px) { 745 | .grid { 746 | grid-template-columns: repeat(2, 1fr); 747 | } 748 | 749 | .width img { 750 | width: 100px; 751 | height: 100px; 752 | object-fit: cover; 753 | } 754 | 755 | .width { 756 | padding: 20px 10px; 757 | } 758 | 759 | .head { 760 | margin-bottom: 20px; 761 | } 762 | 763 | .fea { 764 | font-size: 25px; 765 | font-weight: 500; 766 | } 767 | 768 | .bt { 769 | font-size: 20px; 770 | font-weight: 600; 771 | color: var(--main-color); 772 | border: 1px solid #ccc; 773 | background: transparent; 774 | width: 90px; 775 | padding: 2px; 776 | } 777 | } 778 | 779 | 780 | .h { 781 | font-size: 17px; 782 | font-weight: 500; 783 | } 784 | 785 | .p { 786 | font-size: 13px; 787 | color: #777; 788 | } 789 | 790 | .dots { 791 | display: flex; 792 | align-items: center; 793 | justify-content: center; 794 | gap: 0 10px; 795 | margin-top: 25px; 796 | } 797 | 798 | 799 | .dots div { 800 | width: 15px; 801 | height: 15px; 802 | border-radius: 50%; 803 | border: 1px solid var(--main-color); 804 | cursor: pointer; 805 | } 806 | 807 | .dots div.actv { 808 | border: 1px solid var(--main-color); 809 | background: var(--main-color); 810 | } 811 | 812 | 813 | .hideOne, 814 | .hideTwo, 815 | .hideThree { 816 | transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 817 | opacity: 1; 818 | transform: scale(1); 819 | } 820 | 821 | .products { 822 | display: flex; 823 | align-items: center; 824 | justify-content: space-between; 825 | flex-direction: column; 826 | min-height: 100vh; 827 | background: var(--text-color); 828 | padding: 8% 8%; 829 | } 830 | 831 | .view { 832 | font-size: 16px; 833 | font-weight: 400; 834 | color: var(--text-color); 835 | border: 1px solid transparent; 836 | background: var(--main-color); 837 | padding: 10px 20px; 838 | cursor: pointer; 839 | border-radius: 30px; 840 | transition: .3s ease; 841 | outline: none; 842 | } 843 | 844 | .view:hover { 845 | transition: .3s ease; 846 | background: transparent; 847 | color: var(--main-color); 848 | border: 1px solid var(--main-color); 849 | } 850 | 851 | .headings { 852 | display: flex; 853 | align-items: center; 854 | justify-content: start; 855 | flex-wrap: wrap; 856 | width: 100%; 857 | gap: 5px 25px; 858 | margin-bottom: 10px; 859 | margin-top: 20px; 860 | } 861 | 862 | .headings h3 { 863 | font-size: 1.5rem; 864 | font-weight: 500; 865 | border-bottom: 1px solid transparent; 866 | cursor: pointer; 867 | } 868 | 869 | .hes { 870 | display: none; 871 | position: relative; 872 | width: 150px; 873 | } 874 | 875 | .hes .drop { 876 | position: absolute; 877 | left: 20px; 878 | right: 0; 879 | width: 100%; 880 | bottom: -50%; 881 | /* top: -100%; */ 882 | padding: 10px 20px; 883 | background: var(--main-color); 884 | border-radius: 5px; 885 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 886 | transition: all 0.3s ease-in-out; 887 | color: var(--text-color); 888 | } 889 | 890 | .drop.sow { 891 | display: none; 892 | } 893 | 894 | .drop h3 { 895 | display: block; 896 | margin-bottom: 10px; 897 | width: 100%; 898 | border-bottom: 1px solid transparent; 899 | } 900 | 901 | .drop h3:hover { 902 | border-bottom: 1px solid white; 903 | } 904 | 905 | .headings h3.now { 906 | border-bottom: 1px solid var(--main-color); 907 | } 908 | 909 | .productGrid { 910 | display: grid; 911 | grid-template-columns: repeat(3, 2fr); 912 | width: 100%; 913 | grid-gap: 20px 30px; 914 | } 915 | 916 | @media (max-width: 1200px) { 917 | .productGrid { 918 | grid-template-columns: repeat(2, 2fr); 919 | } 920 | 921 | } 922 | 923 | @media (max-width: 768px) { 924 | .productGrid { 925 | grid-template-columns: repeat(1, 1fr); 926 | } 927 | 928 | .hes { 929 | display: block; 930 | } 931 | 932 | .lR, 933 | .dR, 934 | .oR, 935 | .iR { 936 | display: none; 937 | } 938 | } 939 | 940 | .productGrid .start { 941 | position: relative; 942 | background-color: #cccccc48; 943 | border-radius: 10px; 944 | height: 400px; 945 | display: flex; 946 | align-items: center; 947 | justify-content: center; 948 | margin-top: 20px; 949 | cursor: pointer; 950 | } 951 | 952 | .start .price { 953 | position: absolute; 954 | top: 10px; 955 | /* left: 10px; */ 956 | width: 100%; 957 | display: flex; 958 | align-items: center; 959 | justify-content: space-between; 960 | padding: 5px 20px; 961 | } 962 | 963 | .price h4 { 964 | font-size: 12px; 965 | font-weight: 400; 966 | color: var(--text-color); 967 | background-color: var(--main-color); 968 | border-radius: 30px; 969 | padding: 5px; 970 | } 971 | 972 | .price div i { 973 | font-size: 17px; 974 | padding: 5px; 975 | background-color: var(--text-color); 976 | border-radius: 50%; 977 | } 978 | 979 | .start .img-box img { 980 | object-fit: cover; 981 | border-radius: 10px; 982 | } 983 | 984 | .start .desc { 985 | display: flex; 986 | align-items: center; 987 | justify-content: space-between; 988 | position: absolute; 989 | bottom: 0px; 990 | background: var(--main-color); 991 | width: 100%; 992 | padding: 10px 20px; 993 | border-radius: 0px 0px 10px 10px; 994 | } 995 | 996 | .desc h3 { 997 | font-size: 14px; 998 | font-weight: 400; 999 | color: var(--text-color); 1000 | } 1001 | 1002 | .desc div i { 1003 | font-size: 18px; 1004 | padding: 10px; 1005 | text-align: center; 1006 | background-color: var(--text-color); 1007 | border-radius: 50%; 1008 | color: var(--main-color); 1009 | } 1010 | 1011 | .saleSection { 1012 | min-height: 100vh; 1013 | display: flex; 1014 | align-items: center; 1015 | justify-content: space-around; 1016 | flex-wrap: wrap; 1017 | padding: 5% 8%; 1018 | padding-bottom: 3%; 1019 | background: var(--text-color); 1020 | } 1021 | 1022 | .saleSect { 1023 | background: #cccccc48; 1024 | border-radius: 10px; 1025 | padding: 20px; 1026 | display: flex; 1027 | align-items: start; 1028 | justify-content: center; 1029 | flex-direction: column; 1030 | height: 450px; 1031 | gap: 20px 0; 1032 | } 1033 | 1034 | .flex { 1035 | display: flex; 1036 | align-items: center; 1037 | justify-content: space-around; 1038 | flex-wrap: wrap; 1039 | gap: 30px; 1040 | width: 100%; 1041 | } 1042 | 1043 | .flexTwo { 1044 | display: flex; 1045 | align-items: center; 1046 | justify-content: space-around; 1047 | flex-wrap: wrap; 1048 | gap: 30px; 1049 | width: 100%; 1050 | } 1051 | 1052 | .flash { 1053 | font-size: 25px; 1054 | font-weight: 500; 1055 | } 1056 | 1057 | .flashPara { 1058 | font-size: 14px; 1059 | font-weight: 400; 1060 | color: #777; 1061 | } 1062 | 1063 | .timer { 1064 | text-align: center; 1065 | font-size: 17px; 1066 | font-weight: 500; 1067 | color: var(--main-color); 1068 | margin-bottom: 10px; 1069 | cursor: pointer; 1070 | } 1071 | 1072 | .time { 1073 | font-size: 14px; 1074 | cursor: pointer; 1075 | font-weight: 400; 1076 | color: #777; 1077 | padding: 5px 10px; 1078 | margin-right: 10px; 1079 | text-align: center; 1080 | border-radius: 5px; 1081 | border: none; 1082 | outline: none; 1083 | background-color: var(--text-color); 1084 | } 1085 | 1086 | .flex div img { 1087 | height: 100%; 1088 | width: 100%; 1089 | object-fit: cover; 1090 | } 1091 | 1092 | .pR { 1093 | font-size: 14px; 1094 | font-weight: 700; 1095 | } 1096 | 1097 | .lT { 1098 | font-size: 14px; 1099 | font-weight: 400; 1100 | color: #777; 1101 | text-decoration: line-through; 1102 | } 1103 | 1104 | .vn { 1105 | font-size: 20px; 1106 | font-weight: 500; 1107 | color: var(--main-color); 1108 | color: #000; 1109 | margin-bottom: 10px; 1110 | } 1111 | 1112 | .pN { 1113 | font-size: 14px; 1114 | font-weight: 400; 1115 | color: #777; 1116 | margin-bottom: 20px; 1117 | } 1118 | 1119 | .shop { 1120 | font-size: 15px; 1121 | font-weight: 400; 1122 | margin-bottom: 10px; 1123 | border-radius: 30px; 1124 | border: 1px solid transparent; 1125 | background-color: var(--main-color); 1126 | color: var(--text-color); 1127 | padding: 10px 30px; 1128 | margin: 0; 1129 | cursor: pointer; 1130 | transition: .3s ease; 1131 | } 1132 | 1133 | .shop:hover { 1134 | transition: .3s ease; 1135 | background-color: transparent; 1136 | color: var(--main-color); 1137 | border: 1px solid var(--main-color); 1138 | } 1139 | 1140 | .twoBox { 1141 | display: flex; 1142 | align-items: center; 1143 | justify-content: space-between; 1144 | flex-direction: column; 1145 | gap: 30px; 1146 | } 1147 | 1148 | .rel { 1149 | position: relative; 1150 | display: flex; 1151 | align-items: center; 1152 | justify-content: space-between; 1153 | flex-direction: column; 1154 | background-color: #cccccc48; 1155 | border-radius: 10px; 1156 | padding: 5px 0; 1157 | width: 100%; 1158 | } 1159 | 1160 | .rel img { 1161 | width: 100%; 1162 | height: 100%; 1163 | width: 300px; 1164 | height: 200px; 1165 | } 1166 | 1167 | .rel div { 1168 | position: absolute; 1169 | display: flex; 1170 | align-items: center; 1171 | justify-content: space-between; 1172 | padding: 10px; 1173 | width: 100%; 1174 | bottom: 0; 1175 | } 1176 | 1177 | .rel div h3 { 1178 | font-size: 14px; 1179 | font-weight: 600; 1180 | } 1181 | 1182 | .rel div button { 1183 | font-size: 14px; 1184 | font-weight: 600; 1185 | color: var(--main-color); 1186 | background-color: transparent; 1187 | border: 1px solid var(--main-color); 1188 | padding: 5px 20px; 1189 | cursor: pointer; 1190 | border-radius: 30px; 1191 | transition: .3s ease; 1192 | } 1193 | 1194 | .rel div button:hover { 1195 | transition: .3s ease; 1196 | background-color: var(--main-color); 1197 | color: var(--text-color); 1198 | border: 1px solid var(--main-color); 1199 | } 1200 | 1201 | @media (max-width: 1200px) { 1202 | .saleSect { 1203 | height: auto; 1204 | gap: 30px 0; 1205 | width: 100%; 1206 | } 1207 | 1208 | .twoBox { 1209 | display: flex; 1210 | align-items: center; 1211 | justify-content: space-between; 1212 | flex-direction: column; 1213 | gap: 30px; 1214 | margin-top: 30px; 1215 | width: 100%; 1216 | } 1217 | } 1218 | 1219 | .dealFlex { 1220 | display: flex; 1221 | align-items: center; 1222 | justify-content: space-around; 1223 | flex-wrap: wrap; 1224 | gap: 30px; 1225 | width: 100%; 1226 | padding: 5% 8%; 1227 | padding-bottom: 2%; 1228 | min-height: 100vh; 1229 | background-color: var(--text-color); 1230 | } 1231 | 1232 | .dealBoxOne { 1233 | background: url('../../images/dealBg.jpeg') no-repeat; 1234 | /* background: url('/images/dealBg.jpeg') no-repeat; */ 1235 | background-size: cover; 1236 | background-position: center; 1237 | padding: 20px; 1238 | height: 450px; 1239 | width: 450px; 1240 | border-radius: 10px; 1241 | display: flex; 1242 | align-items: start; 1243 | justify-content: center; 1244 | flex-direction: column; 1245 | } 1246 | 1247 | .dealBoxOne div { 1248 | display: flex; 1249 | align-items: start; 1250 | justify-content: start; 1251 | gap: 20px; 1252 | margin-bottom: 20px; 1253 | } 1254 | 1255 | .dealBoxOne div h3 { 1256 | font-size: 18px; 1257 | font-weight: 500; 1258 | color: #ccc; 1259 | } 1260 | 1261 | .dealBoxOne div button { 1262 | font-size: 12px; 1263 | font-weight: 600; 1264 | color: var(--main-color); 1265 | background-color: var(--text-color); 1266 | border: 1px solid transparent; 1267 | padding: 3px 15px; 1268 | cursor: pointer; 1269 | border-radius: 30px; 1270 | transition: .3s ease; 1271 | } 1272 | 1273 | .dealBoxOne div button:hover { 1274 | transition: .3s ease; 1275 | background-color: transparent; 1276 | color: var(--text-color); 1277 | border: 1px solid var(--main-color); 1278 | } 1279 | 1280 | .dealBoxOne h1 { 1281 | font-size: 30px; 1282 | font-weight: 500; 1283 | color: var(--text-color); 1284 | word-spacing: 5px; 1285 | margin-bottom: 20px; 1286 | } 1287 | 1288 | .dealBoxOne p { 1289 | font-size: 14px; 1290 | font-weight: 400; 1291 | color: #ccc; 1292 | margin-bottom: 20px; 1293 | } 1294 | 1295 | .dealBoxTwo { 1296 | background: #cccccc48; 1297 | padding: 20px; 1298 | height: 100%; 1299 | border-radius: 10px; 1300 | display: flex; 1301 | align-items: start; 1302 | justify-content: center; 1303 | flex-direction: column; 1304 | height: 450px; 1305 | width: 450px; 1306 | } 1307 | 1308 | .dealBoxTwo h3 { 1309 | font-size: 18px; 1310 | font-weight: 600; 1311 | color: #000; 1312 | margin-bottom: 20px; 1313 | } 1314 | 1315 | .dealBoxTwo h1 { 1316 | font-size: 30px; 1317 | font-weight: 700; 1318 | color: #000; 1319 | margin-bottom: 20px; 1320 | } 1321 | 1322 | .dealBoxTwo p { 1323 | font-size: 15px; 1324 | font-weight: 400; 1325 | color: #000; 1326 | margin-bottom: 20px; 1327 | } 1328 | 1329 | @media (max-width: 1200px) { 1330 | .dealFlex { 1331 | justify-content: center; 1332 | flex-wrap: wrap; 1333 | gap: 30px; 1334 | width: 100%; 1335 | padding: 5% 8%; 1336 | padding-bottom: 5%; 1337 | } 1338 | 1339 | .dealBoxOne { 1340 | width: 100%; 1341 | height: 100%; 1342 | padding: 30px; 1343 | } 1344 | 1345 | .dealBoxTwo { 1346 | width: 100%; 1347 | height: 100%; 1348 | padding: 30px; 1349 | } 1350 | } 1351 | 1352 | .clientSection { 1353 | padding: 8% 8%; 1354 | padding-bottom: 3%; 1355 | min-height: 100vh; 1356 | background-color: var(--text-color); 1357 | width: 100%; 1358 | } 1359 | 1360 | .clientSec { 1361 | display: flex; 1362 | align-items: center; 1363 | justify-content: space-between; 1364 | /* flex-wrap: wrap; */ 1365 | flex-direction: row; 1366 | width: 100%; 1367 | gap: 30px; 1368 | } 1369 | 1370 | .clientOne, 1371 | .clientTwo { 1372 | display: flex; 1373 | align-items: center; 1374 | justify-content: center; 1375 | gap: 20px 30px; 1376 | padding: 10px; 1377 | border-radius: 10px; 1378 | flex-direction: row; 1379 | background-color: var(--main-color); 1380 | cursor: pointer; 1381 | margin-top: 20px; 1382 | } 1383 | 1384 | .clientOne div img, 1385 | .clientTwo div img { 1386 | width: 300px; 1387 | height: 350px; 1388 | border-radius: 10px; 1389 | } 1390 | 1391 | .clientOne div p, 1392 | .clientTwo div p { 1393 | font-size: 14px; 1394 | font-size: 1.3rem; 1395 | color: #ffffffe1; 1396 | line-height: 1.8; 1397 | margin-bottom: 20px; 1398 | padding: 20px 0; 1399 | border-bottom: 1px solid #ffffffe1; 1400 | } 1401 | 1402 | .clientOne div h3, 1403 | .clientTwo div h3 { 1404 | font-size: 1.3rem; 1405 | font-weight: 600; 1406 | color: #000; 1407 | margin-top: 30px; 1408 | } 1409 | 1410 | @media (max-width: 1200px) { 1411 | .clientSec { 1412 | flex-direction: column; 1413 | gap: 30px 0; 1414 | width: 100%; 1415 | } 1416 | 1417 | .disp { 1418 | display: block !important; 1419 | } 1420 | 1421 | .clientTwo { 1422 | background-color: var(--main-color) !important; 1423 | } 1424 | } 1425 | 1426 | @media (max-width: 768px) { 1427 | .clientSec { 1428 | flex-direction: column; 1429 | gap: 30px 0; 1430 | width: 100%; 1431 | } 1432 | 1433 | .clientOne, 1434 | .clientTwo { 1435 | flex-direction: column; 1436 | gap: 20px 0; 1437 | padding: 0px; 1438 | } 1439 | 1440 | .clientOne div img, 1441 | .clientTwo div img { 1442 | height: 350px; 1443 | width: 100%; 1444 | border-radius: 10px 10px 0 0; 1445 | } 1446 | 1447 | .clientOne div, 1448 | .clientTwo div { 1449 | width: 100%; 1450 | } 1451 | 1452 | .gap { 1453 | padding: 10px; 1454 | } 1455 | 1456 | .clientOne div p, 1457 | .clientTwo div p { 1458 | font-size: 1.5rem; 1459 | } 1460 | } 1461 | 1462 | .blogSection { 1463 | /* flex-direction: column; */ 1464 | gap: 20px; 1465 | min-height: 100vh; 1466 | background: var(--text-color); 1467 | padding: 8% 9%; 1468 | padding-bottom: 3%; 1469 | } 1470 | 1471 | .blogSect { 1472 | display: flex; 1473 | align-items: center; 1474 | justify-content: space-between; 1475 | flex-wrap: wrap; 1476 | gap: 30px 0px; 1477 | width: 100%; 1478 | margin-top: 30px; 1479 | text-align: center; 1480 | } 1481 | 1482 | .blogSect div { 1483 | padding: 0px; 1484 | cursor: pointer; 1485 | border-radius: 10px; 1486 | } 1487 | 1488 | .blogOne div, 1489 | .blogTwo div, 1490 | .blogThree div { 1491 | width: 100%; 1492 | } 1493 | 1494 | .blogOne div img, 1495 | .blogTwo div img, 1496 | .blogThree div img { 1497 | border-radius: 10px; 1498 | width: 100%; 1499 | height: 100%; 1500 | width: 330px; 1501 | height: 250px; 1502 | } 1503 | 1504 | .blogOne h3, 1505 | .blogTwo h3, 1506 | .blogThree h3 { 1507 | font-size: 1.6rem; 1508 | font-weight: 600; 1509 | margin-top: 20px; 1510 | } 1511 | 1512 | .blogOne p, 1513 | .blogTwo p, 1514 | .blogThree p { 1515 | font-size: 13px; 1516 | margin-top: 8px; 1517 | } 1518 | 1519 | .blogOne p span, 1520 | .blogTwo p span, 1521 | .blogThree p span { 1522 | font-weight: 600; 1523 | } 1524 | 1525 | .blogOne p small, 1526 | .blogTwo p small, 1527 | .blogThree p small { 1528 | color: var(--main-color); 1529 | } 1530 | 1531 | @media (max-width: 1300px) { 1532 | .blogSect div { 1533 | padding: 0px; 1534 | cursor: pointer; 1535 | border-radius: 10px; 1536 | width: 100%; 1537 | } 1538 | 1539 | .blogOne div img, 1540 | .blogTwo div img, 1541 | .blogThree div img { 1542 | border-radius: 10px; 1543 | width: 100%; 1544 | height: 350px; 1545 | } 1546 | } 1547 | 1548 | @media (max-width: 768px) { 1549 | .blogSect div { 1550 | padding: 0px; 1551 | cursor: pointer; 1552 | border-radius: 10px; 1553 | width: 100%; 1554 | } 1555 | 1556 | .blogOne div img, 1557 | .blogTwo div img, 1558 | .blogThree div img { 1559 | border-radius: 10px; 1560 | width: 100%; 1561 | height: 100%; 1562 | } 1563 | } 1564 | 1565 | .faqSection { 1566 | min-height: 100vh; 1567 | background: var(--text-color); 1568 | padding: 6% 8%; 1569 | padding-bottom: 4%; 1570 | } 1571 | 1572 | .faqHead { 1573 | text-align: center; 1574 | } 1575 | 1576 | .faqHead h1 { 1577 | font-size: 3.5rem; 1578 | font-weight: 500; 1579 | } 1580 | 1581 | .faqFlexDiv { 1582 | display: flex; 1583 | align-items: center; 1584 | justify-content: center; 1585 | flex-direction: column; 1586 | gap: 30px; 1587 | width: 100%; 1588 | margin-top: 20px; 1589 | } 1590 | 1591 | .faqOne, 1592 | .faqTwo, 1593 | .faqThree, 1594 | .faqFour, 1595 | .faqFive { 1596 | width: 100%; 1597 | } 1598 | 1599 | .ques { 1600 | background-color: #cccccc48; 1601 | display: flex; 1602 | align-items: center; 1603 | width: 100%; 1604 | justify-content: space-between; 1605 | padding: 10px 20px; 1606 | border-radius: 10px; 1607 | } 1608 | 1609 | .ques h4 { 1610 | font-size: 1.7rem; 1611 | font-weight: 600; 1612 | } 1613 | 1614 | .ques .shop { 1615 | padding: 3px 20px; 1616 | border: 1px solid var(--main-color); 1617 | background-color: transparent; 1618 | color: var(--main-color); 1619 | outline: none; 1620 | } 1621 | 1622 | .ques .shop:hover { 1623 | background-color: var(--main-color); 1624 | color: var(--text-color); 1625 | } 1626 | 1627 | .faqAns { 1628 | padding: 30px 20px; 1629 | background: var(--main-color); 1630 | border-radius: 0px 0 10px 10px; 1631 | } 1632 | 1633 | .faqAns p { 1634 | text-align: center; 1635 | color: var(--text-color); 1636 | font-size: 1.5rem; 1637 | } 1638 | 1639 | @media (max-width: 768px) { 1640 | .ques h4 { 1641 | font-size: 1.5rem; 1642 | } 1643 | 1644 | .ques p { 1645 | font-size: 1.2rem; 1646 | } 1647 | } 1648 | 1649 | .newsLetterSection { 1650 | min-height: 100vh; 1651 | background-color: var(--text-color); 1652 | /* padding: 8% 8%; */ 1653 | /* padding-bottom: 3%; */ 1654 | padding-left: 8%; 1655 | padding-right: 8%; 1656 | display: flex; 1657 | align-items: center; 1658 | justify-content: center; 1659 | width: 100%; 1660 | } 1661 | 1662 | .newsFlex { 1663 | display: flex; 1664 | align-items: center; 1665 | justify-content: space-between; 1666 | width: 100%; 1667 | gap: 30px 0; 1668 | flex-wrap: wrap; 1669 | background: #cccccc48; 1670 | border-radius: 10px; 1671 | padding: 20px; 1672 | } 1673 | 1674 | .newsFlex div h1 { 1675 | font-size: 4rem; 1676 | font-weight: 600; 1677 | } 1678 | 1679 | .newsFlex div p { 1680 | font-size: 1.5rem; 1681 | margin-top: 20px; 1682 | margin-bottom: 20px; 1683 | } 1684 | 1685 | .newsFlex div form div { 1686 | display: flex; 1687 | align-items: center; 1688 | justify-content: space-between; 1689 | flex-wrap: wrap; 1690 | background: var(--text-color); 1691 | border-radius: 30px; 1692 | padding: 10px 20px; 1693 | gap: 10px; 1694 | position: relative; 1695 | } 1696 | 1697 | .newsFlex div form div i { 1698 | position: absolute; 1699 | left: 10px; 1700 | background-color: var(--main-color); 1701 | padding: 10px; 1702 | border-radius: 50%; 1703 | font-size: 1.3rem; 1704 | color: var(--text-color); 1705 | } 1706 | 1707 | .newsFlex div form div input { 1708 | padding: 10px 30px; 1709 | border: none; 1710 | outline: none; 1711 | } 1712 | 1713 | .newsFlex div form button { 1714 | padding: 10px 30px; 1715 | border: none; 1716 | outline: none; 1717 | background-color: var(--main-color); 1718 | color: var(--text-color); 1719 | border-radius: 30px; 1720 | cursor: pointer; 1721 | font-size: 1.3rem; 1722 | font-weight: 600; 1723 | transition: 0.3s ease; 1724 | outline: none; 1725 | border: 1px solid transparent; 1726 | } 1727 | 1728 | .newsFlex div form button:hover { 1729 | transition: 0.3s ease; 1730 | background-color: var(--text-color); 1731 | color: var(--main-color); 1732 | border: 1px solid var(--main-color); 1733 | } 1734 | 1735 | .newsFlex div img { 1736 | border-radius: 10px; 1737 | height: 100%; 1738 | /* width: 100%; */ 1739 | height: 300px; 1740 | width: 450px; 1741 | } 1742 | 1743 | @media (max-width: 1200px) { 1744 | 1745 | .newsFlex .newsContent, 1746 | .newsFlex .newsImg { 1747 | width: 100%; 1748 | } 1749 | 1750 | .newsFlex .newsImg img { 1751 | width: 100%; 1752 | height: 100%; 1753 | } 1754 | } 1755 | 1756 | @media (max-width: 768px) { 1757 | .newsFlex div h1 { 1758 | font-size: 3rem; 1759 | } 1760 | 1761 | .newsFlex div form button { 1762 | display: none; 1763 | } 1764 | 1765 | .on { 1766 | display: block !important; 1767 | } 1768 | 1769 | .newsFlex div form div i { 1770 | position: absolute; 1771 | left: 10px; 1772 | background-color: var(--main-color); 1773 | padding: 10px; 1774 | border-radius: 50%; 1775 | font-size: 1.3rem; 1776 | color: var(--text-color); 1777 | } 1778 | 1779 | .newsFlex div form div input { 1780 | padding: 10px 30px; 1781 | border: none; 1782 | width: 100%; 1783 | outline: none; 1784 | } 1785 | 1786 | } 1787 | 1788 | footer { 1789 | background-color: var(--text-color); 1790 | padding: 8% 0; 1791 | padding-bottom: 0; 1792 | } 1793 | 1794 | footer .logoHead { 1795 | border-bottom: 1px solid #ccc; 1796 | border-top: 1px solid #ccc; 1797 | padding: 20px; 1798 | } 1799 | 1800 | footer .logoHead h1 { 1801 | font-size: 40px; 1802 | font-weight: 900; 1803 | text-align: center; 1804 | } 1805 | 1806 | footer .logoHead h1 span { 1807 | font-weight: 800; 1808 | font-size: 50px; 1809 | color: var(--main-color); 1810 | } 1811 | 1812 | footer .footerFlex { 1813 | display: flex; 1814 | align-items: center; 1815 | justify-content: space-between; 1816 | flex-wrap: wrap; 1817 | padding: 3% 8%; 1818 | } 1819 | 1820 | .footerFlex div h3 { 1821 | font-size: 1.7rem; 1822 | font-weight: 600; 1823 | margin-bottom: 15px; 1824 | } 1825 | 1826 | .footerFlex div a { 1827 | font-size: 1.5rem; 1828 | font-weight: 500; 1829 | color: #777; 1830 | display: block; 1831 | margin-bottom: 10px; 1832 | text-decoration: none; 1833 | transition: .3s ease; 1834 | } 1835 | 1836 | .footerFlex div a:hover { 1837 | color: var(--main-color); 1838 | transition: .3s ease; 1839 | } 1840 | 1841 | .copyrightSec { 1842 | padding: 20px 0; 1843 | text-align: center; 1844 | display: flex; 1845 | align-items: center; 1846 | justify-content: space-between; 1847 | flex-wrap: wrap; 1848 | gap: 20px 0; 1849 | word-wrap: 100%; 1850 | padding: 1.5% 8%; 1851 | background: var(--main-color); 1852 | } 1853 | 1854 | .copyrightSec p { 1855 | font-size: 1.5rem; 1856 | font-weight: 500; 1857 | color: var(--text-color); 1858 | } 1859 | 1860 | .copyrightSec .socialMedia { 1861 | display: flex; 1862 | align-items: center; 1863 | 1864 | gap: 10px; 1865 | } 1866 | 1867 | .copyrightSec .socialMedia a { 1868 | font-size: 1.5rem; 1869 | font-weight: 500; 1870 | color: var(--text-color); 1871 | text-decoration: none; 1872 | background: var(--text-color); 1873 | padding: 5px 5px; 1874 | border-radius: 50%; 1875 | text-align: center; 1876 | color: var(--main-color); 1877 | transition: .3s ease; 1878 | display: grid; 1879 | place-items: center; 1880 | border: 1px solid transparent; 1881 | } 1882 | 1883 | .copyrightSec .socialMedia a:hover { 1884 | color: var(--text-color); 1885 | transition: .3s ease; 1886 | border: 1px solid var(--text-color); 1887 | background: var(--main-color); 1888 | } 1889 | 1890 | .socialMedia a i { 1891 | font-size: 2rem; 1892 | } 1893 | 1894 | @media (max-width: 899px) { 1895 | .footerFlex { 1896 | flex-direction: column; 1897 | gap: 30px 0; 1898 | width: 100%; 1899 | align-items: center; 1900 | justify-content: center; 1901 | text-align: center; 1902 | } 1903 | 1904 | .footerFlex div { 1905 | width: 100%; 1906 | } 1907 | 1908 | .copyrightSec { 1909 | padding: 20px 0; 1910 | text-align: center; 1911 | display: flex; 1912 | align-items: center; 1913 | justify-content: center; 1914 | flex-wrap: wrap; 1915 | gap: 20px 0; 1916 | padding: 2% 8%; 1917 | width: 100%; 1918 | } 1919 | 1920 | .copyrightSec .socialMedia { 1921 | display: flex; 1922 | align-items: center; 1923 | gap: 10px; 1924 | width: 100%; 1925 | justify-content: center; 1926 | } 1927 | } -------------------------------------------------------------------------------- /assest/js/script.js: -------------------------------------------------------------------------------- 1 | let menuIcon = document.querySelector('#menu-icon'); 2 | let navbar = document.querySelector('.navbar'); 3 | menuIcon.onclick = (e) => { 4 | e.preventDefault(); 5 | menuIcon.classList.toggle('bx-x'); 6 | navbar.classList.toggle('active'); 7 | } 8 | 9 | 10 | let sections = document.querySelectorAll('section'); 11 | let navLinks = document.querySelectorAll('header nav a'); 12 | window.onscroll = () => { 13 | sections.forEach(sec => { 14 | let top = window.scrollY; 15 | let offset = sec.offsetTop - 150; 16 | let height = sec.offsetHeight; 17 | let id = sec.getAttribute('id'); 18 | 19 | 20 | if (top >= offset && top < offset + height) { 21 | navLinks.forEach(links => { 22 | links.classList.remove('active'); 23 | document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); 24 | 25 | }) 26 | } 27 | }) 28 | } 29 | 30 | 31 | 32 | // REVIEW SECTION ANIMATIONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN 33 | const dispValues = document.querySelectorAll('.num'); 34 | let interval = 8000; 35 | 36 | dispValues.forEach((dispValue) => { 37 | let startValue = 700; 38 | let endValue = parseInt(dispValue.getAttribute('data-val')) 39 | let value = parseInt(dispValue.textContent); 40 | let duration = Math.floor(interval / endValue); 41 | let counter = setInterval(() => { 42 | startValue += 5; 43 | dispValue.textContent = startValue; 44 | if (startValue == endValue) { 45 | clearInterval(counter); 46 | } 47 | }, duration) 48 | }) 49 | 50 | 51 | 52 | // FEATURED SECTIONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn 53 | 54 | const hideOne = document.querySelector('.hideOne'); 55 | const hideTwo = document.querySelector('.hideTwo'); 56 | const hideThree = document.querySelector('.hideThree'); 57 | const clckOne = document.querySelector('.clckOne'); 58 | const clckTwo = document.querySelector('.clckTwo'); 59 | const clckThree = document.querySelector('.clckThree'); 60 | const btNext = document.getElementById('btNext'); 61 | const btPrev = document.getElementById('btPrev'); 62 | 63 | const fadeOut = (element, callback) => { 64 | element.style.opacity = '0'; 65 | element.style.transform = 'scale(0.8)'; 66 | setTimeout(() => { 67 | element.style.display = 'none'; 68 | callback(); 69 | }, 300); // 300ms to match the CSS transition duration 70 | }; 71 | 72 | const fadeIn = (element) => { 73 | element.style.display = 'grid'; 74 | setTimeout(() => { 75 | element.style.opacity = '1'; 76 | element.style.transform = 'scale(1)'; 77 | }, 50); // A small delay to ensure the display property has taken effect 78 | }; 79 | 80 | const showHideContent = (toShow, toHide1, toHide2) => { 81 | fadeOut(toHide1, () => { 82 | fadeOut(toHide2, () => { 83 | fadeIn(toShow); 84 | }); 85 | }); 86 | }; 87 | 88 | const updateActiveDot = () => { 89 | clckOne.classList.remove('actv'); 90 | clckTwo.classList.remove('actv'); 91 | clckThree.classList.remove('actv'); 92 | if (hideOne.style.display === 'grid') { 93 | clckOne.classList.add('actv'); 94 | } else if (hideTwo.style.display === 'grid') { 95 | clckTwo.classList.add('actv'); 96 | } else if (hideThree.style.display === 'grid') { 97 | clckThree.classList.add('actv'); 98 | } 99 | }; 100 | 101 | clckOne.addEventListener('click', () => { 102 | showHideContent(hideThree, hideOne, hideTwo); 103 | clckOne.classList.add('actv'); 104 | clckTwo.classList.remove('actv'); 105 | clckThree.classList.remove('actv'); 106 | }); 107 | 108 | clckTwo.addEventListener('click', () => { 109 | showHideContent(hideOne, hideTwo, hideThree); 110 | clckOne.classList.remove('actv'); 111 | clckTwo.classList.add('actv'); 112 | clckThree.classList.remove('actv'); 113 | }); 114 | 115 | clckThree.addEventListener('click', () => { 116 | showHideContent(hideTwo, hideOne, hideThree); 117 | clckOne.classList.remove('actv'); 118 | clckTwo.classList.remove('actv'); 119 | clckThree.classList.add('actv'); 120 | }); 121 | 122 | btNext.addEventListener('click', () => { 123 | if (hideOne.style.display === 'grid') { 124 | showHideContent(hideTwo, hideOne, hideThree); 125 | clckOne.classList.remove('actv'); 126 | clckTwo.classList.add('actv'); 127 | } else if (hideTwo.style.display === 'grid') { 128 | showHideContent(hideThree, hideOne, hideTwo); 129 | clckTwo.classList.remove('actv'); 130 | clckThree.classList.add('actv'); 131 | } else if (hideThree.style.display === 'grid') { 132 | showHideContent(hideOne, hideTwo, hideThree); 133 | clckThree.classList.remove('actv'); 134 | clckOne.classList.add('actv'); 135 | } 136 | }); 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | // PRODUCTSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 152 | const bedRoom = document.querySelector('.bedRoom'); 153 | const livingRoom = document.querySelector('.livingRoom'); 154 | const diningRoom = document.querySelector('.diningRoom'); 155 | const outDoor = document.querySelector('.outDoor'); 156 | const inDoor = document.querySelector('.inDoor'); 157 | 158 | const bR = document.querySelector('.bR'); 159 | const lR = document.querySelector('.lR'); 160 | const dR = document.querySelector('.dR'); 161 | const oR = document.querySelector('.oR'); 162 | const iR = document.querySelector('.iR'); 163 | 164 | bR.addEventListener('click', () => { 165 | bR.classList.add('now'); 166 | lR.classList.remove('now'); 167 | dR.classList.remove('now'); 168 | oR.classList.remove('now'); 169 | iR.classList.remove('now'); 170 | bedRoom.style.display = 'grid'; 171 | livingRoom.style.display = 'none'; 172 | diningRoom.style.display = 'none'; 173 | outDoor.style.display = 'none'; 174 | inDoor.style.display = 'none'; 175 | }); 176 | 177 | lR.addEventListener('click', () => { 178 | bR.classList.remove('now'); 179 | lR.classList.add('now'); 180 | dR.classList.remove('now'); 181 | oR.classList.remove('now'); 182 | iR.classList.remove('now'); 183 | bedRoom.style.display = 'none'; 184 | livingRoom.style.display = 'grid'; 185 | diningRoom.style.display = 'none'; 186 | outDoor.style.display = 'none'; 187 | inDoor.style.display = 'none'; 188 | }); 189 | 190 | dR.addEventListener('click', () => { 191 | bR.classList.remove('now'); 192 | lR.classList.remove('now'); 193 | dR.classList.add('now'); 194 | oR.classList.remove('now'); 195 | iR.classList.remove('now'); 196 | bedRoom.style.display = 'none'; 197 | livingRoom.style.display = 'none'; 198 | diningRoom.style.display = 'grid'; 199 | outDoor.style.display = 'none'; 200 | inDoor.style.display = 'none'; 201 | }); 202 | 203 | oR.addEventListener('click', () => { 204 | bR.classList.remove('now'); 205 | lR.classList.remove('now'); 206 | dR.classList.remove('now'); 207 | oR.classList.add('now'); 208 | iR.classList.remove('now'); 209 | bedRoom.style.display = 'none'; 210 | livingRoom.style.display = 'none'; 211 | diningRoom.style.display = 'none'; 212 | outDoor.style.display = 'grid'; 213 | inDoor.style.display = 'none'; 214 | }); 215 | 216 | iR.addEventListener('click', () => { 217 | bR.classList.remove('now'); 218 | lR.classList.remove('now'); 219 | dR.classList.remove('now'); 220 | oR.classList.remove('now'); 221 | iR.classList.add('now'); 222 | bedRoom.style.display = 'none'; 223 | livingRoom.style.display = 'none'; 224 | diningRoom.style.display = 'none'; 225 | outDoor.style.display = 'none'; 226 | inDoor.style.display = 'grid'; 227 | }); 228 | 229 | const drop = document.querySelector('.drop'); 230 | const colon = document.querySelector('.hes'); 231 | 232 | colon.addEventListener('click', () => { 233 | drop.classList.toggle('sow'); 234 | }); -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FurniFlex - Contact Us 8 | 9 | 10 | 11 | 14 | 15 | 18 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 38 |
39 | 40 |
41 | 42 | 43 | 44 |
    45 |
  • 46 | 47 | Search 48 |
    • 49 |
  • 50 | 51 | Like 52 |
    • 53 |
  • 54 | 55 | Add to cart 56 |
    • 57 |
  • 58 | 59 | Profile 60 |
    • 61 |
62 |
63 |
64 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 |

Contact Us

94 |

Feel free to reach out to us at any time. We are here to help.

95 |
96 |
97 |
98 |
99 |

Get In Touch

100 |

We are here for you every step of the way. Whether you have questions, need order assistance, or 101 | want to share feedback, our friendly customer support team is ready to assist. Our team is here 102 | to help! Reach out to via

103 |
104 | 113 | 122 | 131 |
132 | 149 |
150 | 151 |
152 |

Drop Us A Line

153 |

Your email address will not be published!

154 |
155 |
156 | 157 | 158 |
159 |
160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 |
168 | 169 | 171 |
172 | 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 |
181 |
182 |
183 |

Subscribe To Our 184 |
185 | NewsLetter 186 |

187 |

Subscribe to our email newsletter today to recieve updates on the latest news

188 |
189 |
190 | 191 | 192 | 193 |
194 | 196 |
197 |
198 |
199 | 200 |
201 |
202 |
203 |
204 | 205 | 206 | 207 | 247 | 248 | 249 | 252 | 253 | 254 | 255 | 291 | 292 | 293 | 294 | -------------------------------------------------------------------------------- /images/aboutUs2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/aboutUs2.jpeg -------------------------------------------------------------------------------- /images/aboutus.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/aboutus.jpeg -------------------------------------------------------------------------------- /images/aboutus3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/aboutus3.jpeg -------------------------------------------------------------------------------- /images/arm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/arm.png -------------------------------------------------------------------------------- /images/armchair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/armchair.png -------------------------------------------------------------------------------- /images/bed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bed.png -------------------------------------------------------------------------------- /images/bedroom.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bedroom.jpeg -------------------------------------------------------------------------------- /images/bg1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bg1.jpeg -------------------------------------------------------------------------------- /images/bg2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bg2.jpeg -------------------------------------------------------------------------------- /images/bg3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bg3.jpeg -------------------------------------------------------------------------------- /images/blog1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/blog1.jpeg -------------------------------------------------------------------------------- /images/blog2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/blog2.jpeg -------------------------------------------------------------------------------- /images/blog3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/blog3.jpeg -------------------------------------------------------------------------------- /images/bookShelf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/bookShelf.png -------------------------------------------------------------------------------- /images/client1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/client1.jpeg -------------------------------------------------------------------------------- /images/client2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/client2.jpeg -------------------------------------------------------------------------------- /images/contactbg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/contactbg.jpeg -------------------------------------------------------------------------------- /images/dealBg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/dealBg.jpeg -------------------------------------------------------------------------------- /images/dinnertable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/dinnertable.png -------------------------------------------------------------------------------- /images/lamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/lamp.png -------------------------------------------------------------------------------- /images/livingroom.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/livingroom.jpeg -------------------------------------------------------------------------------- /images/newsletterimg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/newsletterimg.jpeg -------------------------------------------------------------------------------- /images/pillow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/pillow.png -------------------------------------------------------------------------------- /images/roundTable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/roundTable.png -------------------------------------------------------------------------------- /images/rusticCoffeetable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/rusticCoffeetable.png -------------------------------------------------------------------------------- /images/sidetable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/sidetable.png -------------------------------------------------------------------------------- /images/sofa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/sofa.png -------------------------------------------------------------------------------- /images/story1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/story1.jpeg -------------------------------------------------------------------------------- /images/story2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/story2.jpeg -------------------------------------------------------------------------------- /images/story3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/story3.jpeg -------------------------------------------------------------------------------- /images/story4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/story4.jpeg -------------------------------------------------------------------------------- /images/story5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/story5.jpeg -------------------------------------------------------------------------------- /images/team1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/team1.jpeg -------------------------------------------------------------------------------- /images/team2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/team2.jpeg -------------------------------------------------------------------------------- /images/team3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/team3.jpeg -------------------------------------------------------------------------------- /images/vintageLeathe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/vintageLeathe.png -------------------------------------------------------------------------------- /images/waitingroom.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/waitingroom.jpeg -------------------------------------------------------------------------------- /images/wallclock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kiranShamsHere/Ecommerce-furnitureWebsite/6af98dfc69ec0b532964d6104a284f86efdf6be0/images/wallclock.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FurniFlex | Website 8 | 9 | 10 | 13 | 14 | 17 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 37 |
38 | 39 |
40 | 41 | 42 | 43 |
    44 |
  • 45 | 46 | Search 47 |
    • 48 |
  • 49 | 50 | Like 51 |
    • 52 |
  • 53 | 54 | Add to cart 55 |
    • 56 |
  • 57 | 58 | Profile 59 |
    • 60 |
61 |
62 |
63 | 72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |
87 | 88 |
89 |
90 |
91 | FURNITURE DESIGNS IDEAS 92 |

93 | Modern Interior 94 |
95 | Design Studio 96 |

97 |

98 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eius sed expedita, laudantium numquam 99 | modi amet iure necessitatibus officia sit molestias nobis laboriosam ad labore temporibus tenetur 100 | inventore quos saepe! 101 |

102 |
103 | 107 | Follow Instagram 108 |
109 |
110 |
111 |

112 | 00 113 | 114 |

115 |

Unique Styles

116 |
117 |
118 |

119 | 00 120 | 121 |

122 |

Happy Customers

123 |
124 |
125 |

126 | 00 127 | 128 |

129 |

Certified Outlets

130 |
131 | 132 |
133 |
134 | 135 | 136 | 137 | 138 |
139 |
140 |
141 |
142 |
143 |
144 | NEW COLLECTION 145 |

Center Table

146 |
    147 |
  • Square table
    • 148 |
  • Round table
    • 149 |
  • Wooden table
    • 150 |
  • Glass table
    • 151 |
152 | 153 | 154 | View All 155 | 156 | 157 | 158 |
159 |
160 | 161 |
162 |
163 |
164 |
165 |
166 | NEW COLLECTION 167 |

Lighting Lamp

168 |
    169 |
  • Flore lamps
    • 170 |
  • Tripod lamps
    • 171 |
  • Table lamps
    • 172 |
  • Study lamps
    • 173 |
174 | 175 | 176 | View All 177 | 178 | 179 | 180 |
181 |
182 | 183 |
184 |
185 |
186 | GET DISCOUNT 187 |

20% OFFER

188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 |
196 | NEW COLLECTION 197 |

Accent Chairs

198 |
    199 |
  • Arm chair
    • 200 |
  • Wing chair
    • 201 |
  • Cafe chair
    • 202 |
  • Wheel chair
    • 203 |
204 | 205 | 206 | View All 207 | 208 | 209 | 210 |
211 |
212 | 213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |

Featured Categories

221 |
222 |
223 | 226 | 229 |
230 |
231 |
232 |
233 |
234 | 235 |
236 |

Side Table

237 |

Discover 120 Products

238 |
239 |
240 |
241 | 242 |
243 |

Arm Chair

244 |

Discover 45 Products

245 |
246 |
247 |
248 | 249 |
250 |

Dinner Table

251 |

Discover 120 Products

252 |
253 |
254 |
255 | 256 |
257 |

Pillow

258 |

Discover 150 Products

259 |
260 |
261 |
262 | 263 |
264 |

Wall Clock

265 |

Discover 40 Products

266 |
267 |
268 |
269 | 270 |
271 |

Sofa

272 |

Discover 80 Products

273 |
274 |
275 | 276 | 320 | 321 | 366 | 367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |

Trending Products 377 |
378 | For You! 379 |

380 |
381 |
382 | 385 | 389 |
390 |
391 |
392 |

Bed Room

393 |

Living Room

394 |

Dining Room

395 |

Outdoor

396 |

Indoor

397 |
398 |

399 | 400 |

401 |
402 |

Living Room

403 |

Dining Room

404 |

Outdoor

405 |

Indoor

406 |
407 |
408 |
409 |
410 |
411 |
412 | 413 |
414 |
415 |

-20%

416 |
417 | 418 |
419 |
420 |
421 |

Bed 422 |
423 | $235.99 424 |

425 |
426 | 427 |
428 |
429 |
430 |
431 |
432 | 433 |
434 |
435 |

-20%

436 |
437 | 438 |
439 |
440 |
441 |

Bed 442 |
443 | $235.99 444 |

445 |
446 | 447 |
448 |
449 |
450 |
451 |
452 | 453 |
454 |
455 |

-20%

456 |
457 | 458 |
459 |
460 |
461 |

Bed 462 |
463 | $235.99 464 |

465 |
466 | 467 |
468 |
469 |
470 | 471 |
472 |
473 | 474 |
475 |
476 |

-20%

477 |
478 | 479 |
480 |
481 |
482 |

Bed 483 |
484 | $235.99 485 |

486 |
487 | 488 |
489 |
490 |
491 |
492 |
493 | 494 |
495 |
496 |

-20%

497 |
498 | 499 |
500 |
501 |
502 |

Bed 503 |
504 | $235.99 505 |

506 |
507 | 508 |
509 |
510 |
511 |
512 |
513 | 514 |
515 |
516 |

-20%

517 |
518 | 519 |
520 |
521 |
522 |

Bed 523 |
524 | $235.99 525 |

526 |
527 | 528 |
529 |
530 |
531 |
532 | 533 | 656 | 657 | 780 | 781 | 904 | 1027 | 1028 |
1029 |
1030 |
1031 |
1032 |
1033 |

Flash Sale!

1034 |

Act fast to grab incredible deals on 1035 |
1036 | furniture pieces in our limited-time flash sale. 1037 |

1038 |
1039 |
1040 |

1041 | 1042 | End Time 1043 |

1044 | 1045 | 1046 | 1047 |
1048 |
1049 |
1050 |
1051 | 1052 |
1053 |

$ 577

1054 |

&777

1055 |
1056 |
1057 |
1058 |

Vintage Leather Armchair

1059 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. 1060 |
1061 | Voluptate tempora tempore quie velit qui voluptates! 1062 |

1063 | 1066 |
1067 |
1068 |
1069 | 1070 | 1071 | 1072 |
1073 |
1074 | 1075 |
1076 |

Rustic Coffee Table

1077 | 1080 |
1081 |
1082 |
1083 | 1084 |
1085 |

Modern Book Shelf

1086 | 1089 |
1090 |
1091 |
1092 |
1093 |
1094 |
1095 |
1096 |

Exclusive Offer

1097 | 1098 |
1099 |

Best Online 1100 |
1101 | Deals, Free Stuff 1102 |

1103 |

Only on this week... Don't miss

1104 | 1108 |
1109 |
1110 |

Regular Offer

1111 |

10% cash-back 1112 |
1113 | on personal care 1114 |

1115 |

Max cashback: $12. Code: CADHL8894

1116 | 1120 |
1121 |
1122 |
1123 |
1124 |
1125 |

Don't Take Our Word, 1126 |
1127 | See What Our Client Say! 1128 |

1129 |
1130 |
1131 | 1134 | 1137 |
1138 |
1139 | 1140 |
1141 |
1142 |
1143 | 1144 |
1145 |
1146 |

1147 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum enim fugiat laboriosam 1148 | adipisci, 1149 | odio 1150 | commodi cumque error necessitatibus unde veritatis sapiente, doloribus asperiores delectus 1151 | fugit! 1152 | Mollitia maxime non odio. Reprehenderit? 1153 |

1154 |

John Doe.

1155 |

- London, Us

1156 |
1157 |
1158 |
1159 |
1160 | 1161 |
1162 | 1174 |
1175 |
1176 |
1177 |
1178 |
1179 |
1180 |

1181 | Explore Our Latest Blog 1182 |

1183 |
1184 |
1185 | 1189 |
1190 |
1191 |
1192 |
1193 |
1194 | 1195 |
1196 |

First Time Home Owner Ideas

1197 |

1198 | by 1199 | 1200 | Robert Watson 1201 | 1202 | on 1203 | June 23, 2022 1204 |

1205 |
1206 | 1207 |
1208 |
1209 | 1210 |
1211 |

How To Keep Your Furniture Clean

1212 |

1213 | by 1214 | 1215 | John Fox 1216 | 1217 | on 1218 | Apr 13, 2023 1219 |

1220 |
1221 | 1222 |
1223 |
1224 | 1225 |
1226 |

Small Space Furniture Apartment Ideas

1227 |

1228 | by 1229 | 1230 | Kritisan Doe 1231 | 1232 | on 1233 | May 13, 2024 1234 |

1235 |
1236 | 1237 |
1238 |
1239 | 1240 |
1241 |
1242 |

Got Questions? We've 1243 |
1244 | Got Answers! 1245 |

1246 |
1247 |
1248 |
1249 |
1250 |

What materials are your furniture made of?

1251 | 1254 |
1255 |
1256 |

1257 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ullam tenetur, magnam, 1258 | placeat dolorem odit enim explicabo porro nemo in iste facere modi culpa eligendi voluptatum 1259 | sint possimus. Facere, tenetur? 1260 | 1261 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum deleniti, et reiciendis 1262 | corrupti dignissimos a natus! Incidunt quaerat velit asperiores, expedita laboriosam omnis 1263 | corrupti harum fuga, facilis magni saepe. Rem? 1264 |

1265 |
1266 |
1267 | 1268 |
1269 |
1270 |

What is your return and exchange policy?

1271 | 1274 |
1275 |
1276 |

1277 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ullam tenetur, magnam, 1278 | placeat dolorem odit enim explicabo porro nemo in iste facere modi culpa eligendi voluptatum 1279 | sint possimus. Facere, tenetur? 1280 | 1281 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum deleniti, et reiciendis 1282 | corrupti dignissimos a natus! Incidunt quaerat velit asperiores, expedita laboriosam omnis 1283 | corrupti harum fuga, facilis magni saepe. Rem? 1284 |

1285 |
1286 |
1287 | 1288 |
1289 |
1290 |

How do I choose the right furniture for my space?

1291 | 1294 |
1295 |
1296 |

1297 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ullam tenetur, magnam, 1298 | placeat dolorem odit enim explicabo porro nemo in iste facere modi culpa eligendi voluptatum 1299 | sint possimus. Facere, tenetur? 1300 | 1301 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum deleniti, et reiciendis 1302 | corrupti dignissimos a natus! Incidunt quaerat velit asperiores, expedita laboriosam omnis 1303 | corrupti harum fuga, facilis magni saepe. Rem? 1304 |

1305 |
1306 |
1307 | 1308 |
1309 |
1310 |

What is your deliver process?

1311 | 1314 |
1315 |
1316 |

1317 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ullam tenetur, magnam, 1318 | placeat dolorem odit enim explicabo porro nemo in iste facere modi culpa eligendi voluptatum 1319 | sint possimus. Facere, tenetur? 1320 | 1321 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum deleniti, et reiciendis 1322 | corrupti dignissimos a natus! Incidunt quaerat velit asperiores, expedita laboriosam omnis 1323 | corrupti harum fuga, facilis magni saepe. Rem? 1324 |

1325 |
1326 |
1327 | 1328 |
1329 |
1330 |

How do I contact customer support for assistance?

1331 | 1334 |
1335 |
1336 |

1337 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ullam tenetur, magnam, 1338 | placeat dolorem odit enim explicabo porro nemo in iste facere modi culpa eligendi voluptatum 1339 | sint possimus. Facere, tenetur? 1340 | 1341 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum deleniti, et reiciendis 1342 | corrupti dignissimos a natus! Incidunt quaerat velit asperiores, expedita laboriosam omnis 1343 | corrupti harum fuga, facilis magni saepe. Rem? 1344 |

1345 |
1346 |
1347 |
1348 |
1349 | 1350 |
1351 |
1352 |
1353 |

Subscribe To Our 1354 |
1355 | NewsLetter 1356 |

1357 |

Subscribe to our email newsletter today to recieve updates on the latest news

1358 |
1359 |
1360 | 1361 | 1362 | 1363 |
1364 | 1366 |
1367 |
1368 |
1369 | 1370 |
1371 |
1372 |
1373 | 1374 |
1375 | 1376 | 1416 | 1417 | 1420 | 1421 | 1422 | 1423 | 1459 | 1460 | 1461 | 1462 | --------------------------------------------------------------------------------