";
208 |
209 |
210 | }
211 |
212 | while ($row = mysqli_fetch_assoc($result)) {
213 | $pid = $row['pid'];
214 | $pname = $row['pname'];
215 | if (strlen($pname) > 35) {
216 | $pname = substr($pname, 0, 35) . '...';
217 | }
218 | $desc = $row['description'];
219 | $qty = $row['qtyavail'];
220 | $price = $row['price'];
221 | $cat = $row['category'];
222 | $img = $row['img'];
223 | $brand = $row['brand'];
224 |
225 | $query2 = "SELECT pid, AVG(rating) AS average_rating FROM reviews where pid = $pid GROUP BY pid ";
226 |
227 | $result2 = mysqli_query($con, $query2);
228 |
229 | $row2 = mysqli_fetch_assoc($result2);
230 |
231 | if ($row2) {
232 | $stars = $row2['average_rating'];
233 | } else {
234 | $stars = 0;
235 | }
236 | $stars = round($stars, 0);
237 |
238 | $empty = 5 - $stars;
239 |
240 | echo "
241 |
242 |
243 |
244 |
$brand
245 |
$pname
246 |
";
247 | for ($i = 1; $i <= $stars; $i++) {
248 | echo "
256 |
$$price
257 |
258 |
259 |
260 | ";
261 | }
262 |
263 | if ($result) {
264 |
265 | echo "
266 |
315 |
IDENTITY
316 |
454 |
455 | Review
466 |
467 |
515 |
516 | ";
517 | } else {
518 | echo "
ORDER INFO
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 | Order ID
527 | Date Ordered
528 | Date Delivered
529 | Total Price
530 | Address
531 | Review
532 |
533 |
534 | ";
535 |
536 | include("include/connect.php");
537 |
538 | $aid = $_SESSION['aid'];
539 |
540 | $query = "SELECT * FROM orders join accounts on orders.aid = accounts.aid where orders.aid = $aid";
541 |
542 |
543 | $result = mysqli_query($con, $query);
544 |
545 | while ($row = mysqli_fetch_assoc($result)) {
546 | $oid = $row['oid'];
547 | $dateod = $row['dateod'];
548 | $datedel = $row['datedel'];
549 | $add = $row['address'];
550 | $pri = $row['total'];
551 | if (empty($datedel))
552 | $datedel = "Not Delivered";
553 | echo "
554 |
555 |
556 |
557 | $oid
558 | $dateod
559 | $datedel
560 | $pri
561 | $add
562 | ";
563 | if ($datedel != "Not Delivered") {
564 |
565 | $query1 = "select* from reviews where oid = $oid";
566 | $r = mysqli_query($con, $query1);
567 | $w = mysqli_fetch_assoc($r);
568 | if (empty($w))
569 | echo "Review Reviewed ";
572 | }
573 | echo " ";
574 | }
575 |
576 | echo "
577 |
578 |
579 |
580 |
";
581 | }
582 | ?>
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
Contact
593 |
594 | Address: Street 2, Johar Town Block A,Lahore
595 |
596 |
597 |
598 | Phone: +92324953752
599 |
600 |
601 | Hours: 9am-5pm
602 |
603 |
611 |
Secured Payment Gateways
612 |
613 |
615 |
2021. byteBazaar. HTML CSS
616 |
618 |
619 |
620 |
621 |
657 |
658 |
659 |
660 |
661 |
662 |
663 |
664 |
--------------------------------------------------------------------------------
/website/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: "Spartan", sans-serif;
8 | }
9 |
10 | html {
11 | scroll-behavior: smooth;
12 | }
13 |
14 | /* Global Styles */
15 |
16 | h1 {
17 | font-size: 50px;
18 | line-height: 64px;
19 | color: #222;
20 | }
21 |
22 | h2 {
23 | font-size: 46px;
24 | line-height: 54px;
25 | color: #222;
26 | }
27 |
28 | h4 {
29 | font-size: 20px;
30 | color: #222;
31 | }
32 |
33 | h6 {
34 | font-weight: 700;
35 | font-size: 12px;
36 | }
37 |
38 | p {
39 | font-size: 16px;
40 | color: #465b52;
41 | margin: 15px 0 20px 0;
42 | }
43 |
44 | .section-p1 {
45 | padding: 40px 80px;
46 | }
47 |
48 | .section-m1 {
49 | margin: 40px 0;
50 | }
51 |
52 | button.normal {
53 | font-size: 14px;
54 | font-weight: 600;
55 | padding: 15px 30px;
56 | color: #000;
57 | background-color: #fff;
58 | border-radius: 4px;
59 | cursor: pointer;
60 | border: none;
61 | outline: none;
62 | transition: 0.2s;
63 | }
64 |
65 | body {
66 | width: 100%;
67 | }
68 |
69 | /* header start */
70 | #header {
71 | display: flex;
72 | align-items: center;
73 | justify-content: space-between;
74 | padding: 20px 80px;
75 | background: #e3e6f3;
76 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
77 | position: sticky;
78 | z-index: 999;
79 | top: 0;
80 | left: 0;
81 | }
82 |
83 | #navbar {
84 | display: flex;
85 | align-items: center;
86 | justify-content: center;
87 | }
88 |
89 | #navbar li {
90 | list-style: none;
91 | padding: 0 20px;
92 | position: relative;
93 | }
94 |
95 | #navbar li a {
96 | text-decoration: none;
97 | font-size: 16px;
98 | font-weight: 600;
99 | color: #1a1a1a;
100 | transition: 0.3s ease;
101 | }
102 |
103 | #navbar li a:hover,
104 | #navbar li a.active {
105 | color: #088178;
106 | }
107 |
108 | #navbar li a.active::after,
109 | #navbar li a:hover::after {
110 | content: "";
111 | width: 30%;
112 | height: 2px;
113 | background: #088178;
114 | position: absolute;
115 | bottom: -4px;
116 | left: 20px;
117 | }
118 |
119 | #mobile {
120 | display: none;
121 | align-items: center;
122 | }
123 |
124 | #close {
125 | display: none;
126 | }
127 |
128 | /* home page */
129 |
130 | #hero {
131 | background-image: url("img/hero4.png");
132 | height: 90vh;
133 | width: 100%;
134 | background-size: cover;
135 | background-position: top 25% right 0;
136 | padding: 0 80px;
137 | display: flex;
138 | flex-direction: column;
139 | align-items: flex-start;
140 | justify-content: center;
141 | color: #e3e6f3;
142 | }
143 |
144 | #hero h4,
145 | #hero h2,
146 | #hero h1,
147 | #hero p,
148 | #hero button {
149 | color: #e3e6f3;
150 | }
151 |
152 | #hero h4 {
153 | padding-bottom: 15px;
154 | }
155 |
156 | #hero h1 {
157 | color: #088178;
158 | }
159 |
160 | #hero button {
161 | background-image: url("img/button.png");
162 | background-color: transparent;
163 | color: #088178;
164 | border: 0;
165 | padding: 14px 80px 14px 65px;
166 | background-repeat: no-repeat;
167 | cursor: pointer;
168 | font-weight: 700;
169 | font-size: 15px;
170 | }
171 |
172 | #feature {
173 | display: flex;
174 | align-items: center;
175 | justify-content: space-between;
176 | flex-wrap: wrap;
177 | }
178 |
179 | #feature .fe-box {
180 | width: 180px;
181 | text-align: center;
182 | padding: 25px 15px;
183 | box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
184 | border: 1px solid #cce7d0;
185 | border-radius: 4px;
186 | margin: 15px 0;
187 | }
188 |
189 | #feature .fe-box:hover {
190 | box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
191 | }
192 |
193 | #feature .fe-box img {
194 | width: 100%;
195 | margin-bottom: 10px;
196 | }
197 |
198 | #feature .fe-box h6 {
199 | padding: 9px 8px 6px 8px;
200 | line-height: 1;
201 | border-radius: 4px;
202 | color: #088178;
203 | background-color: #fddde4;
204 | }
205 |
206 | #feature .fe-box:nth-child(2) h6 {
207 | background-color: #cdebbc;
208 | }
209 |
210 | #feature .fe-box:nth-child(3) h6 {
211 | background-color: #d1e8f2;
212 | }
213 |
214 | #feature .fe-box:nth-child(4) h6 {
215 | background-color: #cdd4f8;
216 | }
217 |
218 | #feature .fe-box:nth-child(5) h6 {
219 | background-color: #f6dbf6;
220 | }
221 |
222 | #feature .fe-box:nth-child(6) h6 {
223 | background-color: #fff2e5;
224 | }
225 |
226 | #product1 {
227 | text-align: center;
228 |
229 | }
230 |
231 | #product1 .pro-container {
232 | display: flex;
233 | justify-content: left;
234 | padding-top: 20px;
235 | flex-wrap: wrap;
236 |
237 | }
238 |
239 | #product1 .pro {
240 | width: 14%;
241 | height: 20%;
242 | min-width: 250px;
243 | padding: 10px 12px;
244 | border: 1px solid #cce7d0;
245 | border-radius: 25px;
246 | cursor: pointer;
247 | box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
248 | margin: 15px;
249 | transition: 0.2s ease;
250 | position: relative;
251 | }
252 |
253 | #product1 .pro:hover {
254 | box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
255 | }
256 |
257 | #product1 .pro img {
258 | width: 100%;
259 | border-radius: 20px;
260 | }
261 |
262 | #product1 .pro .des {
263 | text-align: start;
264 | padding: 10px 0;
265 | }
266 |
267 | #product1 .pro .des span {
268 | color: #606063;
269 | font-size: 12px;
270 | }
271 |
272 | #product1 .pro .des h5 {
273 | padding-top: 7px;
274 | color: #1a1a1a;
275 | font-size: 14px;
276 | }
277 |
278 | #product1 .pro .des i {
279 | font-size: 12px;
280 | color: rgb(243, 181, 25);
281 | }
282 |
283 | #product1 .pro .des h4 {
284 | padding-top: 7px;
285 | font-size: 15px;
286 | font-weight: 700;
287 | color: #088178;
288 | }
289 |
290 | #product1 .pro .cart {
291 | width: 40px;
292 | height: 40px;
293 | line-height: 40px;
294 | border-radius: 50px;
295 | background-color: #e8f6ea;
296 | font-weight: 500;
297 | color: #088178;
298 | position: absolute;
299 | bottom: 20px;
300 | right: 10px;
301 | }
302 |
303 | #banner {
304 | display: flex;
305 | flex-direction: column;
306 | justify-content: center;
307 | align-items: center;
308 | text-align: center;
309 | background-image: url("img/banner/b2.jpg");
310 | width: 100%;
311 | height: 40vh;
312 | background-size: cover;
313 | background-position: center;
314 | }
315 |
316 | #banner h4 {
317 | color: #fff;
318 | font-size: 16px;
319 | }
320 |
321 | #banner h2 {
322 | color: #fff;
323 | font-size: 30px;
324 | padding: 10px 0;
325 | }
326 |
327 | #banner h2 span {
328 | color: #ef3636;
329 | }
330 |
331 | #banner button:hover {
332 | background: #088178;
333 | color: #fff;
334 | }
335 |
336 | #sm-banner {
337 | display: flex;
338 | justify-content: space-between;
339 | flex-wrap: wrap;
340 | }
341 |
342 | #sm-banner .banner-box {
343 | display: flex;
344 | flex-direction: column;
345 | justify-content: center;
346 | align-items: flex-start;
347 | background-image: url("img/banner/b30.jpg");
348 | min-width: 800px;
349 | height: 50vh;
350 | background-size: cover;
351 | background-position: center;
352 | padding: 30px;
353 | }
354 |
355 | #sm-banner .banner-box2 {
356 | background-image: url("img/banner/b32.jpg");
357 | }
358 |
359 | #sm-banner h4 {
360 | color: #fff;
361 | font-size: 20px;
362 | font-weight: 300;
363 | }
364 |
365 | #sm-banner h2 {
366 | color: #fff;
367 | font-size: 28px;
368 | font-weight: 800;
369 | }
370 |
371 | #sm-banner span {
372 | color: #fff;
373 | font-size: 14px;
374 | font-weight: 500;
375 | padding-bottom: 15px;
376 | }
377 |
378 | button.white {
379 | font-size: 13px;
380 | font-weight: 600;
381 | padding: 11px 18px;
382 | color: #fff;
383 | background-color: transparent;
384 | border-radius: 4px;
385 | cursor: pointer;
386 | border: 1px solid #fff;
387 | outline: none;
388 | transition: 0.2s;
389 | }
390 |
391 | #sm-banner .banner-box:hover button {
392 | background: #088178;
393 | border: 1px solid #088178;
394 | }
395 |
396 | #banner3 {
397 | display: flex;
398 | justify-content: space-between;
399 | flex-wrap: wrap;
400 | padding: 0 80px;
401 | }
402 |
403 | #banner3 .banner-box {
404 | display: flex;
405 | flex-direction: column;
406 | justify-content: center;
407 | align-items: flex-start;
408 | background-image: url("img/banner/b31.jpg");
409 | min-width: 30%;
410 | height: 30vh;
411 | background-size: cover;
412 | background-position: center;
413 | padding: 20px;
414 | margin-bottom: 20px;
415 | }
416 |
417 | #banner3 .banner-box2 {
418 | background-image: url("img/banner/p1.jpg");
419 | }
420 |
421 | #banner3 .banner-box3 {
422 | background-image: url("img/banner/b34.jpeg");
423 | }
424 |
425 | #banner3 h2 {
426 | color: #fff;
427 | font-weight: 900;
428 | font-size: 22px;
429 | }
430 |
431 | #banner3 h3 {
432 | color: #ec544e;
433 | font-weight: 800;
434 | font-size: 15px;
435 | }
436 |
437 | #newsletter {
438 | display: flex;
439 | justify-content: space-between;
440 | flex-wrap: wrap;
441 | align-items: center;
442 | background-color: url("img/banner/b14.png");
443 | background-repeat: no-repeat;
444 | background-position: 20% 30%;
445 | background-color: #041e42;
446 | }
447 |
448 | #newsletter h4 {
449 | font-size: 22px;
450 | font-weight: 700;
451 | color: #fff;
452 | }
453 |
454 | #newsletter p {
455 | font-size: 14px;
456 | font-weight: 600;
457 | color: #818ea0;
458 | }
459 |
460 | #newsletter p span {
461 | color: #ffbd27;
462 | }
463 |
464 | #newsletter .form {
465 | display: flex;
466 | width: 40%;
467 | }
468 |
469 | #newsletter input {
470 | height: 3.125rem;
471 | padding: 0 1.25em;
472 | font-size: 14px;
473 | width: 100%;
474 | border: 1px solid transparent;
475 | border-radius: 4px;
476 | outline: none;
477 | border-top-right-radius: 0;
478 | border-bottom-right-radius: 0;
479 | }
480 |
481 | #newsletter button {
482 | background-color: #088178;
483 | color: #fff;
484 | white-space: nowrap;
485 | border-top-left-radius: 0;
486 | border-bottom-left-radius: 0;
487 | }
488 |
489 | footer {
490 | display: flex;
491 | flex-wrap: wrap;
492 | justify-content: space-between;
493 | }
494 |
495 | footer .col {
496 | display: flex;
497 | flex-direction: column;
498 | align-items: flex-start;
499 | margin-bottom: 20px;
500 | }
501 |
502 | footer .logo {
503 | margin-bottom: 30px;
504 | }
505 |
506 | footer h4 {
507 | font-size: 14px;
508 | padding-bottom: 20px;
509 | }
510 |
511 | footer a {
512 | font-size: 13px;
513 | margin: 0 0 8px 0;
514 | text-decoration: none;
515 | color: #222;
516 | }
517 |
518 | footer p {
519 | font-size: 13px;
520 | margin: 0 0 8px 0;
521 | }
522 |
523 | footer a:hover {
524 | color: #088178;
525 | }
526 |
527 | footer .copyright {
528 | width: 100%;
529 | text-align: center;
530 | }
531 |
532 | /*shop*/
533 | #page-header {
534 | background-image: url("img/banner/p1.jpg");
535 | width: 100%;
536 | height: 40vh;
537 | background-size: cover;
538 | display: flex;
539 | justify-content: center;
540 | text-align: center;
541 | flex-direction: column;
542 | padding: 14px;
543 | }
544 |
545 | #page-header h2,
546 | #page-header p {
547 | color: #ffbd27;
548 | }
549 |
550 | #pagination {
551 | text-align: center;
552 | }
553 |
554 | #pagination a {
555 | text-decoration: none;
556 | background-color: #088178;
557 | padding: 15px 20px;
558 | border-radius: 4px;
559 | color: #fff;
560 | font-weight: 600;
561 | }
562 |
563 | #pagination a i {
564 | font-size: 16px;
565 | font-weight: 600;
566 | }
567 |
568 | /*Single Product */
569 |
570 | #prodetails {
571 | display: flex;
572 | margin-top: 20px;
573 | }
574 |
575 | #prodetails .single-pro-image {
576 | width: 40%;
577 | margin-right: 50px;
578 | }
579 |
580 | .small-img-group {
581 | display: flex;
582 | justify-content: space-between;
583 | }
584 |
585 | .small-img-col {
586 | flex-basis: 24%;
587 | cursor: pointer;
588 | }
589 |
590 | #prodetails .single-pro-details {
591 | width: 50%;
592 | padding-top: 30px;
593 | }
594 |
595 | #prodetails .single-pro-details h4 {
596 | padding: 40px 0 20px 0;
597 | }
598 |
599 | #prodetails .single-pro-details h2 {
600 | font-size: 26px;
601 | }
602 |
603 | #prodetails .single-pro-details select {
604 | display: block;
605 | padding: 5px 10px;
606 | margin-bottom: 10px;
607 | }
608 |
609 | #prodetails .single-pro-details input {
610 | width: 50px;
611 | height: 47px;
612 | padding-left: 10px;
613 | font-size: 16px;
614 | margin-right: 10px;
615 | }
616 |
617 | #prodetails .single-pro-details input:focus {
618 | outline: none;
619 | }
620 |
621 | #prodetails .single-pro-details button {
622 | background: #088178;
623 | color: #fff;
624 | }
625 |
626 | #prodetails .single-pro-details span {
627 | line-height: 25px;
628 | }
629 |
630 | @media (max-width: 799px) {
631 | .section-p1 {
632 | padding: 40px 40px;
633 | }
634 |
635 | #navbar {
636 | display: flex;
637 | flex-direction: column;
638 | align-items: flex-start;
639 | justify-content: flex-start;
640 | position: fixed;
641 | top: 0;
642 | right: -300px;
643 | height: 100vh;
644 | width: 300px;
645 | background-color: #e3e6f3;
646 | box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
647 | padding: 80px 0 0 10px;
648 | transition: 0.3s;
649 | }
650 |
651 | #navbar.active {
652 | right: 0px;
653 | }
654 |
655 | #navbar li {
656 | margin-bottom: 25px;
657 | }
658 |
659 | #mobile {
660 | display: flex;
661 | align-items: center;
662 | }
663 |
664 | #mobile i {
665 | color: #1a1a1a;
666 | font-size: 24px;
667 | padding-left: 20px;
668 | }
669 |
670 | #close {
671 | display: initial;
672 | position: absolute;
673 | top: 30px;
674 | left: 30px;
675 | color: #222;
676 | font-size: 24px;
677 | }
678 |
679 | #lg-bag {
680 | display: none;
681 | }
682 |
683 | #hero {
684 | height: 70vh;
685 | padding: 0 80px;
686 | background-position: top 30% right 30%;
687 | }
688 |
689 | #feature {
690 | justify-content: center;
691 | }
692 |
693 | #feature .fe-box {
694 | margin: 15px 15px;
695 | }
696 |
697 | #product1 .pro-container {
698 | justify-content: center;
699 | }
700 |
701 | #product1 .pro {
702 | margin: 15px;
703 | }
704 |
705 |
706 |
707 | #banner {
708 | height: 20vh;
709 | }
710 |
711 | #sm-banner .banner-box {
712 | min-width: 100%;
713 | height: 30vh;
714 | }
715 |
716 | #banner3 {
717 | padding: 0 40px;
718 | }
719 |
720 | #banner3 .banner-box {
721 | width: 28%;
722 | }
723 |
724 | #banner3 .form {
725 | width: 70%;
726 | }
727 |
728 | #form-details {
729 | padding: 40px;
730 | }
731 |
732 | #form-details form {
733 | width: 50%;
734 | }
735 | }
736 |
737 | @media (max-width: 477px) {
738 | .section-p1 {
739 | padding: 20px;
740 | }
741 |
742 | #lg-bag {
743 | display: none;
744 | }
745 |
746 | #header {
747 | padding: 10 px 30px;
748 | }
749 |
750 | h1 {
751 | font-size: 38px;
752 | }
753 |
754 | h2 {
755 | font-size: 32px;
756 | }
757 |
758 | #hero {
759 | padding: 0 20px;
760 | background-position: 55%;
761 | }
762 |
763 | #feature {
764 | justify-content: space-between;
765 | }
766 |
767 | #feature .fe-box {
768 | width: 155px;
769 | margin: 0 0 15px 0;
770 | }
771 |
772 | #product1 .pro {
773 | width: 100%;
774 | }
775 |
776 | #banner {
777 | height: 40vh;
778 | }
779 |
780 | #sm-banner .banner-box {
781 | height: 40vh;
782 | }
783 |
784 | #sm-banner .banner-box2 {
785 | margin-top: 20px;
786 | }
787 |
788 | #banner3 {
789 | padding: 0 20px;
790 | }
791 |
792 | #banner3 .banner-box {
793 | width: 100%;
794 | }
795 |
796 | #newsletter {
797 | padding: 40px 20px;
798 | }
799 |
800 | #newsletter .form {
801 | width: 100%;
802 | }
803 |
804 | footer .copyright {
805 | text-align: start;
806 | }
807 |
808 | #prodetails {
809 | display: flex;
810 | flex-direction: column;
811 | }
812 |
813 | #prodetails .single-pro-image {
814 | width: 100%;
815 | margin-right: 0px;
816 | }
817 |
818 | #prodetails .single-pro-details {
819 | width: 100%;
820 | }
821 |
822 | #about-head {
823 | display: flex;
824 | flex-direction: column;
825 | align-items: center;
826 | }
827 |
828 | #about-head img {
829 | width: 100%;
830 | margin-bottom: 20px;
831 | }
832 |
833 | #contact-details {
834 | flex-direction: column;
835 | }
836 |
837 | #contact-details .details {
838 | width: 100%;
839 | margin-bottom: 30px;
840 | }
841 |
842 | #contact-details .map {
843 | width: 100%;
844 | }
845 |
846 | #form-details {
847 | margin: 10px;
848 | padding: 30px 10px;
849 | flex-wrap: wrap;
850 | }
851 |
852 | #cart-add {
853 | flex-direction: column;
854 | }
855 |
856 | #coupon {
857 | width: 100%;
858 | }
859 |
860 | #subtotal {
861 | width: 100%;
862 | padding: 20px;
863 | }
864 | }
865 |
866 | #page-header.about-header {
867 | background-image: url("img/about/b50.jpg");
868 | }
869 |
870 | #about-head {
871 | display: flex;
872 | align-items: center;
873 | }
874 |
875 | #about-head img {
876 | width: 50%;
877 | height: auto;
878 | }
879 |
880 | #about-head div {
881 | padding-left: 40px;
882 | }
883 |
884 | #contact-details {
885 | display: flex;
886 | align-items: center;
887 | justify-content: space-between;
888 | }
889 |
890 | #contact-details .details {
891 | width: 40%;
892 | }
893 |
894 | #contact-details .details h2,
895 | #form-details form h2 {
896 | font-size: 26px;
897 | line-height: 35px;
898 | padding: 20px 0;
899 | }
900 |
901 | #contact-details .details span,
902 | #form-details form span {
903 | font-size: 12px;
904 | }
905 |
906 | #contact-details .details h3 {
907 | font-size: 16px;
908 | padding-bottom: 15px;
909 | }
910 |
911 | #contact-details .details li {
912 | list-style: none;
913 | display: flex;
914 | padding: 10px 0;
915 | }
916 |
917 | #contact-details .details li i {
918 | font-size: 14px;
919 | padding-right: 22px;
920 | }
921 |
922 | #contact-details .details li p {
923 | margin: 0;
924 | font-size: 14px;
925 | }
926 |
927 | #contact-details .map {
928 | width: 55%;
929 | height: 400px;
930 | }
931 |
932 | #contact-details .map iframe {
933 | width: 100%;
934 | height: 100%;
935 | }
936 |
937 | #form-details {
938 | display: flex;
939 | justify-content: space-between;
940 | margin: 30px;
941 | padding: 80px;
942 | border: 1px solid #e1e1e1;
943 | }
944 |
945 | #form-details form {
946 | width: 65%;
947 | display: flex;
948 | flex-direction: column;
949 | align-items: flex-start;
950 | }
951 |
952 | #form-details form input,
953 | #form-details form textarea {
954 | width: 100%;
955 | padding: 12px 15px;
956 | outline: none;
957 | margin-bottom: 20px;
958 | border: 1px solid #e1e1e1;
959 | }
960 |
961 | #form-details form button {
962 | background-color: #088178;
963 | color: #fff;
964 | }
965 |
966 | #form-details .people div {
967 | padding-bottom: 25px;
968 | display: flex;
969 | align-items: flex-start;
970 | }
971 |
972 | #form-details .people div img {
973 | width: 65px;
974 | height: 65px;
975 | object-fit: cover;
976 | margin-right: 15px;
977 | }
978 |
979 | #form-details .people div p {
980 | margin: 0;
981 | font-size: 13px;
982 | line-height: 25px;
983 | }
984 |
985 | #form-details .people div p span {
986 | display: block;
987 | font-size: 16px;
988 | font-weight: 600;
989 | color: #000;
990 | }
991 |
992 | #cart {
993 | overflow-x: auto;
994 | }
995 |
996 | #cart table {
997 | width: 100%;
998 | border-collapse: collapse;
999 | table-layout: fixed;
1000 | white-space: nowrap;
1001 | }
1002 |
1003 | #cart table img {
1004 | width: 70px;
1005 | }
1006 |
1007 | #cart table td:nth-child(1) {
1008 | width: 100px;
1009 | text-align: center;
1010 | }
1011 |
1012 | #cart table td:nth-child(2) {
1013 | width: 150px;
1014 | text-align: center;
1015 | }
1016 |
1017 | #cart table td:nth-child(3) {
1018 | width: 250px;
1019 | text-align: center;
1020 | }
1021 |
1022 | #cart table td:nth-child(4),
1023 | #cart table td:nth-child(5),
1024 | #cart table td:nth-child(6) {
1025 | width: 150px;
1026 | text-align: center;
1027 | }
1028 |
1029 | #cart table td:nth-child(5) input {
1030 | width: 70px;
1031 | padding: 10px 5px 10px 15px;
1032 | }
1033 |
1034 | #cart table thead {
1035 | border: 1px solid #e2e9e1;
1036 | border-left: none;
1037 | border-right: none;
1038 | }
1039 |
1040 | #cart table thead td {
1041 | font-weight: 700;
1042 | text-transform: uppercase;
1043 | font-size: 13px;
1044 | padding: 18px 0;
1045 | }
1046 |
1047 | #cart table tbody tr td {
1048 | padding-top: 15px;
1049 | }
1050 |
1051 | #cart table tbody td {
1052 | font-size: 13px;
1053 | }
1054 |
1055 | #cart-add {
1056 | display: flex;
1057 | flex-wrap: wrap;
1058 | justify-content: space-between;
1059 | }
1060 |
1061 | #coupon {
1062 | width: 50%;
1063 | margin-bottom: 30px;
1064 | }
1065 |
1066 | #coupon h3 {
1067 | padding-bottom: 15px;
1068 | }
1069 |
1070 | #coupon input {
1071 | padding: 10px 20px;
1072 | outline: none;
1073 | width: 60%;
1074 | margin-right: 10px;
1075 | border: 1px solid #e2e9e1;
1076 | }
1077 |
1078 | #coupon button,
1079 | #subtotal button {
1080 | background-color: #088178;
1081 | color: #fff;
1082 | padding: 12px 20px;
1083 | }
1084 |
1085 | #subtotal {
1086 | width: 50%;
1087 | margin-bottom: 30px;
1088 | border: 1px solid #e2e9e1;
1089 | padding: 30px;
1090 | }
1091 |
1092 | #subtotal table {
1093 | border-collapse: collapse;
1094 | width: 100%;
1095 | margin-bottom: 20px;
1096 | }
1097 |
1098 | #subtotal table td {
1099 | width: 50%;
1100 | border: 1px solid #e2e9e1;
1101 | padding: 10px;
1102 | font-size: 13px;
1103 | }
1104 |
1105 | #form {
1106 | background-color: white;
1107 | margin: 0px;
1108 | padding: 30px 20px;
1109 | text-align: center;
1110 | box-shadow: 1px 1px 4px 1px #e6e6e6;
1111 | }
1112 |
1113 | .input1 {
1114 | display: block;
1115 | width: 30%;
1116 | margin: 40px auto;
1117 | padding: 10px 5px;
1118 | border: none;
1119 | border-bottom: 0.01rem dimgray solid;
1120 | outline: none;
1121 | }
1122 |
1123 | .select1 {
1124 | display: block;
1125 | width: 30%;
1126 | margin: 40px auto;
1127 | padding: 10px 5px;
1128 | border: none;
1129 | border-bottom: 0.01rem dimgray solid;
1130 | outline: none;
1131 | }
1132 |
1133 | .btn {
1134 | outline: none;
1135 | border: none;
1136 | padding: 10px 30px;
1137 | background-color: navy;
1138 | color: white;
1139 | border-radius: 1rem;
1140 | width: 20%;
1141 | cursor: pointer;
1142 | }
1143 |
1144 | a.signn {
1145 | color: #465b52;
1146 | font-size: 18px;
1147 | }
1148 |
1149 | div.sign {
1150 | display: flex;
1151 | margin: 30px 0;
1152 | justify-content: center;
1153 | }
1154 |
1155 | div.titlecheck {
1156 | display: flex;
1157 | margin: 30px 0;
1158 | justify-content: center;
1159 | }
1160 |
1161 | .d-flex {
1162 | display: flex;
1163 | flex-direction: row;
1164 | background: #f6f6f6;
1165 | border-radius: 0 0px 5px;
1166 | padding: 25px;
1167 | justify-content: space-between;
1168 | }
1169 |
1170 | .Yorder {
1171 | margin-right: 200px;
1172 | height: 600px;
1173 | padding: 20px;
1174 | border: 1px solid #dadada;
1175 | background-color: white;
1176 | padding: 30px;
1177 |
1178 | box-shadow: 1px 1px 4px 1px #e6e6e6;
1179 | width: 428px;
1180 | overflow: auto;
1181 | }
1182 |
1183 | .container {
1184 | width: 100%;
1185 | padding-right: 15px;
1186 | padding-left: 15px;
1187 | margin-right: auto;
1188 | margin-left: auto;
1189 | }
1190 |
1191 | #form1 {
1192 | background-color: white;
1193 | margin-left: 100px;
1194 | padding: 30px;
1195 | text-align: left;
1196 | box-shadow: 1px 1px 4px 1px #e6e6e6;
1197 | width: 800px;
1198 | }
1199 |
1200 | .btn1 {
1201 | outline: none;
1202 | border: none;
1203 | padding: 10px 30px;
1204 | background-color: navy;
1205 | color: white;
1206 | border-radius: 1rem;
1207 | width: 80%;
1208 | cursor: pointer;
1209 | margin-left: 70px;
1210 | }
1211 |
1212 | .btn112 {
1213 | outline: none;
1214 | border: none;
1215 | padding: 10px 30px;
1216 | background-color: navy;
1217 | color: white;
1218 | border-radius: 1rem;
1219 | width: 80%;
1220 | cursor: pointer;
1221 | margin-top: 30px;
1222 | margin-left: 70px;
1223 | }
1224 |
1225 | .table1 {
1226 | margin: 0;
1227 | padding: 0;
1228 | }
1229 |
1230 | .th1 {
1231 | border-bottom: 1px solid #dadada;
1232 | padding: 10px 0;
1233 | }
1234 |
1235 | .tr1 > td:nth-child(1) {
1236 | text-align: left;
1237 | color: #2d2d2a;
1238 | }
1239 |
1240 | .tr1 > td:nth-child(2) {
1241 | text-align: right;
1242 | color: #52ad9c;
1243 | }
1244 |
1245 | .td1 {
1246 | border-bottom: 1px solid #dadada;
1247 | padding: 25px 25px 25px 0;
1248 | }
1249 |
1250 | .input2 {
1251 | margin: 15px 10px;
1252 | margin-left: 80px;
1253 |
1254 | }
1255 |
1256 | .btn2 {
1257 | outline: none;
1258 | border: none;
1259 | padding: 10px 30px;
1260 | background-color: navy;
1261 | color: white;
1262 | border-radius: 1rem;
1263 | width: 80%;
1264 | cursor: pointer;
1265 | margin-left: 40px;
1266 | margin-top: 80px;
1267 | }
1268 |
1269 | .title {
1270 | padding-top: 15px;
1271 | position: absolute;
1272 | left: 45%;
1273 | }
1274 |
1275 | .icon-count {
1276 | background-color: #ff0000;
1277 | color: #fff;
1278 | float: right;
1279 | font-size: 11px;
1280 | left: -25px;
1281 | padding: 2px;
1282 | position: relative;
1283 | }
1284 |
1285 | /* End */
1286 |
1287 | /* Sidenav */
1288 | .sidenav {
1289 | background-color: #fff;
1290 | color: #333;
1291 | margin-top: 100px;
1292 | border-bottom-right-radius: 25px;
1293 | height: 86%;
1294 | left: 0;
1295 | overflow-x: hidden;
1296 | padding-top: 20px;
1297 | position: absolute;
1298 | top: 70px;
1299 | width: 250px;
1300 | }
1301 |
1302 | .url {
1303 | margin: 20px 0px;
1304 | }
1305 |
1306 | .profile {
1307 | margin-bottom: 20px;
1308 | margin-top: -12px;
1309 | text-align: center;
1310 | }
1311 |
1312 | .profile img {
1313 | border-radius: 50%;
1314 | box-shadow: 0px 0px 5px 1px grey;
1315 | }
1316 |
1317 | .name {
1318 | font-size: 20px;
1319 | font-weight: bold;
1320 | padding-top: 20px;
1321 | }
1322 |
1323 | .job {
1324 | font-size: 16px;
1325 | font-weight: bold;
1326 | padding-top: 10px;
1327 | }
1328 |
1329 | .url,
1330 | hr {
1331 | text-align: center;
1332 | }
1333 |
1334 | .url hr {
1335 | margin-left: 20%;
1336 | width: 60%;
1337 | }
1338 |
1339 | .url a {
1340 | color: #fff;
1341 | display: block;
1342 | font-size: 20px;
1343 | margin: 20px;
1344 | padding: 6px 8px;
1345 | text-decoration: none;
1346 | }
1347 |
1348 | .url a:hover,
1349 | .url .active {
1350 | background-color: #e8f5ff;
1351 | border-radius: 28px;
1352 | color: #000;
1353 | margin-left: 14%;
1354 | width: 65%;
1355 | }
1356 |
1357 | /* End */
1358 |
1359 | /* Main */
1360 | .main {
1361 | margin-top: 2%;
1362 | margin-left: 29%;
1363 | font-size: 28px;
1364 | padding: 0 10px;
1365 | width: 58%;
1366 | }
1367 |
1368 | .main h2 {
1369 | color: #333;
1370 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
1371 | font-size: 24px;
1372 | margin-bottom: 10px;
1373 | }
1374 |
1375 | .main .card {
1376 | background-color: #fff;
1377 | border-radius: 18px;
1378 | box-shadow: 1px 1px 8px 0 grey;
1379 | height: auto;
1380 | margin-bottom: 30px;
1381 | padding: 20px 0 20px 50px;
1382 | }
1383 |
1384 | .main .card table {
1385 | border: none;
1386 | font-size: 16px;
1387 | height: 270px;
1388 | width: 80%;
1389 | }
1390 |
1391 | .edit {
1392 | position: absolute;
1393 | color: #e7e7e8;
1394 | right: 14%;
1395 | }
1396 |
1397 | .social-media {
1398 | text-align: center;
1399 | width: 90%;
1400 | }
1401 |
1402 | .social-media span {
1403 | margin: 0 10px;
1404 | }
1405 |
1406 | .fa-facebook:hover {
1407 | color: #4267b3 !important;
1408 | }
1409 |
1410 | .fa-twitter:hover {
1411 | color: #1da1f2 !important;
1412 | }
1413 |
1414 | .fa-instagram:hover {
1415 | color: #ce2b94 !important;
1416 | }
1417 |
1418 | .fa-invision:hover {
1419 | color: #f83263 !important;
1420 | }
1421 |
1422 | .fa-github:hover {
1423 | color: #161414 !important;
1424 | }
1425 |
1426 | .fa-whatsapp:hover {
1427 | color: #25d366 !important;
1428 | }
1429 |
1430 | .fa-snapchat:hover {
1431 | color: #fffb01 !important;
1432 | }
1433 |
1434 | /* End */
1435 |
--------------------------------------------------------------------------------
14 |
15 | 
69 | 
87 | 
91 | 
95 | 
99 | 
103 | 
107 | 
97 | 
105 | 
113 |