204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam odit quae modi cumque, dolorum id quaerat repudiandae tenetur facere veritatis inventore nam sequi. Id ipsam, odio rerum doloremque quam natus perferendis saepe est sapiente optio, ab dolore quaerat temporibus quia non, neque mollitia earum? Ab soluta magnam officiis quasi deleniti, tempora in ex vitae praesentium quaerat facere saepe laudantium temporibus nesciunt recusandae voluptas totam, iste nihil amet et. Fugiat iste eaque provident at omnis. Non asperiores rem fuga id vel ipsum libero corporis? Voluptatem, ullam omnis. Assumenda ipsa sunt sit quidem eligendi reiciendis, deleniti voluptatibus, molestias vel, ab ea quam?
88 |
93 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima fugit ad impedit libero quis. Ipsam totam accusantium non minima excepturi nemo doloremque, inventore dolores at aperiam voluptates voluptatem maiores odit. Unde dolorum similique facilis veritatis exercitationem excepturi sunt, non at quis deleniti! Mollitia quaerat temporibus reprehenderit neque esse unde minima sed illo, perferendis quidem eum voluptatem ipsam aliquam modi doloremque error. Odit amet veniam necessitatibus quis ad voluptate quidem laudantium, quia vitae quisquam dolorem deleniti temporibus reiciendis, rerum delectus quo cupiditate velit consequuntur neque eum est vero? Perspiciatis architecto provident illo sequi reprehenderit quasi excepturi hic sint perferendis, tempore cupiditate.
97 | 98 |On order over $1000
116 |Within 30 days
121 |World Wide
126 |Of products
131 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* ===( CODE AASHU )=== */
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | outline: none;
7 | font-family: 'Merriweather', serif;
8 | }
9 | /* top navbar */
10 | .top-navbar{
11 | display: flex;
12 | justify-content: space-between;
13 | }
14 | .top-navbar p{
15 | margin-top: 13px;
16 | margin-left: 15px;
17 | }
18 | .top-navbar .icons{
19 | margin-top: 13px;
20 | margin-right: 15px;
21 | }
22 | .top-navbar a{
23 | text-decoration: none;
24 | color: black;
25 | margin-left: 10px;
26 | }
27 | .top-navbar a img{
28 | margin-bottom: 3px;
29 | }
30 | .top-navbar a:hover{
31 | color: black;
32 | }
33 | @media screen and (max-width:400px){
34 | .top-navbar a{
35 | font-size: 13px;
36 | }
37 | .top-navbar a img{
38 | width: 15px;
39 | }
40 | .top-navbar p{
41 | font-size: 13px;
42 | }
43 | }
44 | @media screen and (max-width:320px){
45 | .top-navbar a{
46 | font-size: 10px;
47 | }
48 | .top-navbar a img{
49 | width: 13px;
50 | }
51 | .top-navbar p{
52 | font-size: 10px;
53 | }
54 | }
55 | @media screen and (max-width:318px){
56 | .top-navbar a{
57 | font-size: 8px;
58 | margin-left: 0;
59 | }
60 | .top-navbar a img{
61 | width: 10px;
62 | margin-left: 0;
63 | }
64 | .top-navbar p{
65 | font-size: 10px;
66 | margin-top: 20px;
67 | }
68 | }
69 | /* top navbar */
70 |
71 | /* navbar */
72 | #navbar{
73 | background-color: rgb(67 0 86);
74 | }
75 | #logo{
76 | margin-left: 15px;
77 | color: white;
78 | font-size: 25px;
79 | font-weight: bold;
80 | margin-bottom: 6px;
81 | }
82 | #logo span{
83 | color: #ffc800;
84 | }
85 | #logo #span1{
86 | font-size: 30px;
87 | }
88 | .navbar-nav{
89 | margin-left: 20px;
90 | }
91 | .nav-item{
92 | margin-left: 10px;
93 | }
94 | .nav-item .nav-link{
95 | color: white;
96 | margin-left: 2px;
97 | text-shadow: 0px 0px 1px black;
98 | transition: 0.5s ease;
99 | }
100 | .nav-item .nav-link:hover{
101 | color: #ffc800;
102 | }
103 | .dropdown-menu li a{
104 | color: white;
105 | transition: 0.5s ease;
106 | }
107 | .dropdown-menu li a:hover{
108 | background-color: rgb(67 0 86);
109 | color: #ffc800;
110 | }
111 | #search input{
112 | border-radius: 50px;
113 | border: none;
114 | }
115 | #search button{
116 | border-radius: 50px;
117 | color: white;
118 | border: 1px solid #ffc800;
119 | background-color: #ffc800;
120 | }
121 | /* navbar */
122 |
123 |
124 |
125 |
126 | /* home content */
127 | .home{
128 | width: 100%;
129 | height: 80vh;
130 | display: flex;
131 | align-items: center;
132 | justify-content: center;
133 | flex-wrap: wrap;
134 | position: relative;
135 | background-color: #a9a9a92b;
136 | z-index: 0;
137 | }
138 | .home .img{
139 | flex: 1 1 300px;
140 | }
141 | .home .img img{
142 | margin-top: 30px;
143 | width: 100%;
144 | }
145 | .home .content{
146 | flex: 1 1 400px;
147 | margin-top: 20px;
148 | }
149 | .content h1{
150 | color: rgb(67 0 86);
151 | font-weight: bold;
152 | margin-left: 23px;
153 | font-size: 55px;
154 | text-shadow: -1px 1px 1px black;
155 | }
156 | .content h1 span{
157 | color: rgb(67 0 86);
158 | text-shadow: 1px 1px 1px black;
159 | }
160 | #span2{
161 | color: #ffc800;
162 | }
163 | .content p{
164 | margin-left: 23px;
165 | }
166 | .btn{
167 | margin-left: 13px;
168 | }
169 | .btn button{
170 | width: 150px;
171 | height: 32px;
172 | letter-spacing: 3px;
173 | background-color: rgb(67 0 86);
174 | color: white;
175 | border-radius: 5px;
176 | border: none;
177 | transition: 0.5s ease;
178 | cursor: pointer;
179 | }
180 | .btn button:hover{
181 | background-color: #ffc800;
182 | color: black;
183 | border: none;
184 | }
185 | @media screen and (max-width:1200px){
186 | .home{
187 | height: 90vh;
188 | }
189 | }
190 | @media screen and (max-width:799px){
191 | .home{
192 | height: 140vh;
193 | }
194 | }
195 | @media screen and (max-width:550px){
196 | .home{
197 | height: 110vh;
198 | }
199 | }
200 | @media screen and (max-width:420px){
201 | .content h1{
202 | font-size: 45px;
203 | }
204 | }
205 | @media screen and (max-width:320px){
206 | .content h1{
207 | font-size: 36px;
208 | }
209 | }
210 | /* home content */
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 | /* product cards */
220 | #product-cards{
221 | margin-top: 100px;
222 | }
223 | #product-cards h1{
224 | color: #ffc800;
225 | text-shadow: 1px 1px 1px black;
226 | border-bottom: 2px solid #ffc800;
227 | }
228 | #product-cards .card h3{
229 | font-size: 20px;
230 | color: black;
231 | }
232 | #product-cards .card p{
233 | font-size: 12px;
234 | margin-top: 5px;
235 | color: black;
236 | }
237 | .star i{
238 | margin-left: 5px;
239 | font-size: 13px;
240 | }
241 | .checked{
242 | color: #ffc800;
243 | }
244 | #product-cards .card h2{
245 | font-size: 20px;
246 | color: black;
247 | margin-top: 20px;
248 | }
249 | #product-cards .card h2 span{
250 | float: right;
251 | color: black;
252 | cursor: pointer;
253 | }
254 | @media screen and (max-width:1000px){
255 | #product-cards .card h3{
256 | font-size: 15px;
257 | }
258 | }
259 | /* product cards */
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 | /* other cards */
269 | #other-cards{
270 | margin-top: 30px;
271 | }
272 | #other-cards .card{
273 | background-color: #a9a9a92b;
274 | }
275 | #other-cards .card h3{
276 | margin-top: 30px;
277 | color: black;
278 | margin-left: 10px;
279 | letter-spacing: 3px;
280 | }
281 | #other-cards .card h5{
282 | margin-top: 15px;
283 | font-weight: 100;
284 | font-size: 18px;
285 | color: black;
286 | margin-left: 10px;
287 | letter-spacing: 3px;
288 | border-bottom: 2px solid black;
289 | width: 220px;
290 | }
291 | #other-cards .card p{
292 | margin-top: 10px;
293 | font-weight: 100;
294 | font-size: 15px;
295 | color: black;
296 | margin-left: 10px;
297 | letter-spacing: 3px;
298 | }
299 | #shopnow{
300 | width: 130px;
301 | height: 30px;
302 | margin-top: 10px;
303 | margin-left: 10px;
304 | letter-spacing: 3px;
305 | color: white;
306 | background-color: black;
307 | font-weight: bold;
308 | border: none;
309 | cursor: pointer;
310 | }
311 |
312 | @media screen and (max-width:1000px){
313 | #other-cards .card h3{
314 | margin-top: 5px;
315 | font-size: 20px;
316 | }
317 | #other-cards .card h5{
318 | margin-top: 5px;
319 | font-size: 15px;
320 | }
321 | #other-cards .card p{
322 | margin-top: 0px;
323 | }
324 | #shopnow{
325 | margin-top: 0px;
326 | width: 120px;
327 | height: 30px;
328 | font-size: 16px;
329 | }
330 | }
331 | /* other cards */
332 |
333 |
334 |
335 |
336 |
337 |
338 | /* banner */
339 | .banner{
340 | margin-top: 60px;
341 | width: 100%;
342 | height: 80vh;
343 | display: flex;
344 | align-items: center;
345 | justify-content: center;
346 | flex-wrap: wrap;
347 | position: relative;
348 | background-color: #a9a9a92b;
349 | z-index: 0;
350 | }
351 | .banner .img{
352 | flex: 1 1 300px;
353 | }
354 | .banner .img img{
355 | margin-top: 30px;
356 | width: 100%;
357 | }
358 | .banner .content{
359 | flex: 1 1 400px;
360 | margin-top: 20px;
361 | }
362 | .banner .content h1{
363 | color: rgb(67 0 86);
364 | font-weight: bold;
365 | margin-left: 23px;
366 | font-size: 55px;
367 | text-shadow: -1px 1px 1px black;
368 | }
369 | .banner .content h1 span{
370 | color: rgb(67 0 86);
371 | text-shadow: 1px 1px 1px black;
372 | }
373 | #span2{
374 | color: #ffc800;
375 | }
376 | .banner .content p{
377 | margin-left: 23px;
378 | }
379 | .btn{
380 | margin-left: 13px;
381 | }
382 | .btn button{
383 | width: 150px;
384 | height: 32px;
385 | letter-spacing: 3px;
386 | background-color: rgb(67 0 86);
387 | color: white;
388 | border-radius: 5px;
389 | border: none;
390 | transition: 0.5s ease;
391 | cursor: pointer;
392 | }
393 | .btn button:hover{
394 | background-color: #ffc800;
395 | color: black;
396 | border: none;
397 | }
398 | @media screen and (max-width:1200px){
399 | .banner{
400 | height: 90vh;
401 | }
402 | }
403 | @media screen and (max-width:799px){
404 | .banner{
405 | height: 140vh;
406 | }
407 | }
408 | @media screen and (max-width:550px){
409 | .banner{
410 | height: 110vh;
411 | }
412 | }
413 | @media screen and (max-width:420px){
414 | .banner .content h1{
415 | font-size: 45px;
416 | }
417 | }
418 | @media screen and (max-width:320px){
419 | .banner .content h1{
420 | font-size: 36px;
421 | }
422 | }
423 | /* banner */
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 | /* other cards */
434 | #other{
435 | margin-top: 50px;
436 | }
437 | #other .card{
438 | box-shadow: rgba(17,12,46, 0.15) 0px 48px 100px 0px;
439 | }
440 | #other .card h3{
441 | margin-top: 10px;
442 | color: white;
443 | text-shadow: 1px 1px 1px black;
444 | letter-spacing: 3px;
445 | font-weight: bold;
446 | }
447 | #other .card p{
448 | margin-top: 10px;
449 | color: white;
450 | text-shadow: 0px 1px 1px black;
451 | letter-spacing: 3px;
452 | font-weight: bold;
453 | }
454 | /* other cards */
455 |
456 |
457 |
458 |
459 | /* offer */
460 | #offer{
461 | margin-top: 100px;
462 | }
463 | #offer i{
464 | font-size: 32px;
465 | color: black;
466 | }
467 | /* offer */
468 |
469 |
470 |
471 |
472 | /* newslater */
473 | #newslater{
474 | margin-top: 100px;
475 | }
476 | #newslater h3{
477 | font-size: 25px;
478 | letter-spacing: 3px;
479 | }
480 | .input{
481 | margin-top: 30px;
482 | }
483 | .input input{
484 | width: 350px;
485 | height: 36px;
486 | letter-spacing: 2px;
487 | border-radius: 3px;
488 | border: 1px solid black;
489 | padding-left: 5px;
490 | }
491 | #subscribe{
492 | width: 200px;
493 | height: 36px;
494 | margin-left: 10px;
495 | border-radius: 3px;
496 | border: none;
497 | background-color: #ffc800;
498 | color: white;
499 | letter-spacing: 3px;
500 | font-weight: bold;
501 | text-shadow: 0px 0px 1px black;
502 | }
503 | @media screen and (max-width:465px){
504 | .input input{
505 | width: 280px;
506 | }
507 | #subscribe{
508 | margin-top: 10px;
509 | }
510 | }
511 | @media screen and (max-width:250px){
512 | .input input{
513 | width: 150px;
514 | }
515 | #subscribe{
516 | width: 150px;
517 | }
518 | }
519 | /* newslater */
520 |
521 |
522 |
523 |
524 | /* footer */
525 | #footer{
526 | padding: 0 0 30px 0px;
527 | color: white;
528 | font-size: 14px;
529 | background-color: rgb(67 0 86);
530 | margin-top: 100px;
531 | }
532 | #footer .footer-top{
533 | padding: 60px 0 30px 0;
534 | background-color: rgb(67 0 86);
535 | color: white;
536 | }
537 | #footer .footer-top .footer-contact{
538 | margin-bottom: 30px;
539 | }
540 | #footer .footer-top .footer-contact h3{
541 | color: #ffc800;
542 | }
543 | #footer .footer-top .footer-contact h4{
544 | font-size: 22px;
545 | margin: 0 0 30px 0;
546 | padding: 2px 0 2px 0;
547 | line-height: 1;
548 | font-weight: 700;
549 | }
550 | #footer .footer-top .footer-contact p{
551 | font-size: 14px;
552 | line-height: 24px;
553 | margin-bottom: 0;
554 | color: white;
555 | }
556 | #footer .footer-top h4{
557 | font-size: 16px;
558 | font-weight: bold;
559 | position: relative;
560 | padding-bottom: 12px;
561 | }
562 | #footer .footer-top .footer-links{
563 | margin-bottom: 30px;
564 | margin-top: 10px;
565 | }
566 | #footer .footer-top .footer-links h4{
567 | color: #ffc800;
568 | }
569 | #footer .footer-top .footer-links ul{
570 | list-style: none;
571 | padding: 0;
572 | margin: 0;
573 | }
574 | #footer .footer-top .footer-links ul li{
575 | padding: 10px 0;
576 | display: flex;
577 | align-items: center;
578 | }
579 | #footer .footer-top .footer-links ul li a{
580 | text-decoration: none;
581 | color: white;
582 | display: inline-block;
583 | line-height: 1;
584 | font-weight: bold;
585 | transition: 0.5s ease;
586 | }
587 | #footer .footer-top .footer-links ul li a:hover{
588 | color: #ffc800;
589 | }
590 | #footer .footer-top .socail-links a{
591 | font-size: 18px;
592 | display: inline-block;
593 | text-decoration: none;
594 | background-color: #373737;
595 | color: white;
596 | line-height: 1;
597 | padding: 8px 0;
598 | margin-right: 4px;
599 | border-radius: 50%;
600 | text-align: center;
601 | width: 36px;
602 | transition: 0.5s ease;
603 | }
604 | #footer .footer-top .socail-links a:hover{
605 | background-color: #ffc800;
606 | color: white;
607 | }
608 | #footer .copyright{
609 | text-align: center;
610 | float: left;
611 | }
612 | #footer .credits{
613 | float: right;
614 | text-align: center;
615 | font-size: 13px;
616 | }
617 | #footer .credits a{
618 | color: #ffc800;
619 | }
620 | /* footer */
621 |
622 |
623 |
624 |
625 | html{
626 | scroll-behavior: smooth;
627 | }
628 | .arrow{
629 | position: fixed;
630 | width: 50px;
631 | height: 50px;
632 | bottom: 50px;
633 | right: 50px;
634 | text-decoration: none;
635 | text-align: center;
636 | line-height: 50px;
637 | }
638 |
639 |
640 |
641 |
642 |
643 | /* login */
644 | #login{
645 | width: 65%;
646 | height: 70vh;
647 | background-color: rgb(67 0 86);
648 | margin-top: 35px;
649 | border-radius: 10px;
650 | box-shadow: rgba(17,12, 46, 0.15) 0px 48px 100px 0px;
651 | }
652 | #side1 h3{
653 | color: #ffc800;
654 | font-weight: bold;
655 | margin-top: 200px;
656 | }
657 | #side2{
658 | background-color: white;
659 | height: 70vh;
660 | border-radius: 10px;
661 | }
662 | #side2 h3{
663 | margin-top: 30px;
664 | color: #ffc800;
665 | font-weight: bold;
666 | text-shadow: 0px 1px 1px black;
667 | }
668 | .input2 input{
669 | margin-top: 15px;
670 | width: 300px;
671 | border: none;
672 | border-bottom: 2px solid #ffc800;
673 | }
674 | .input2 input ::placeholder{
675 | font-weight: bold;
676 | }
677 | #btnlogin{
678 | padding-top: 10px;
679 | }
680 | #btnlogin a{
681 | padding: 10px;
682 | text-decoration: none;
683 | border-radius: 15px;
684 | background-color: #ffc800;
685 | color: white;
686 | font-weight: bold;
687 | border: none;
688 | text-shadow: 0px 0px 1px black;
689 | }
690 | #side2 p{
691 | margin-top: 10px;
692 | }
693 | @media screen and (max-width:991px){
694 | .input2 input{
695 | width: 250px;
696 | }
697 | }
698 | @media screen and (max-width:765px){
699 | .input2 input{
700 | width: 260px;
701 | }
702 | #side2{
703 | height: 60vh;
704 | }
705 | }
706 | /* login */
707 |
708 |
709 |
710 |
711 | /* about */
712 | #about{
713 | margin-top: 30px;
714 | }
715 | #about h3{
716 | font-weight: bold;
717 | color: #ffc800;
718 | text-shadow: 0px 1px 1px black;
719 | }
720 | #about button{
721 | width: 150px;
722 | height: 36px;
723 | color: white;
724 | background-color: rgb(67 0 86);
725 | border-radius: 5px;
726 | cursor: pointer;
727 | }
728 | /* about */
729 |
730 |
731 |
732 |
733 |
734 | /* contact */
735 | #contact{
736 | margin-top: 50px;
737 | }
738 | #contact .card{
739 | height: 80px;
740 | margin-top: 20px;
741 | box-shadow: rgba(100, 100, 111 ,0.2) 0px 7px 29px 0px;
742 | }
743 | #contact .card i{
744 | margin-top: 10px;
745 | margin-left: 10px;
746 | font-size: 15px;
747 | color: rgb(67 0 86);
748 | font-weight: bold;
749 | letter-spacing: 3px;
750 | }
751 | #contact .card h6{
752 | margin-left: 10px;
753 | margin-top: 10px;
754 | letter-spacing: 3px;
755 | font-weight: bold;
756 | color: rgb(67 0 86);
757 | }
758 | .messagebtn button{
759 | margin-top: 30px;
760 | width: 200px;
761 | height: 33px;
762 | background: transparent;
763 | border: 2px solid rgb(67 0 86);
764 | font-weight: bold;
765 | letter-spacing: 3px;
766 | transition: 0.5s ease;
767 | cursor: pointer;
768 | }
769 | .messagebtn button:hover{
770 | background-color: rgb(67 0 86);
771 | color: white;
772 | }
773 | /* contact */
774 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
131 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta,
132 | saepe.
Lorem ipsum dolor sit amet consectetur.
133 |
138 | 
149 | Lorem ipsum dolor sit amet.
152 |
168 | Lorem ipsum dolor sit amet.
171 |
187 | Lorem ipsum dolor sit amet.
190 |
206 | Lorem ipsum dolor sit amet.
209 |
228 | Lorem ipsum dolor sit amet.
231 |
247 | Lorem ipsum dolor sit amet.
250 |
266 | Lorem ipsum dolor sit amet.
269 |
285 | Lorem ipsum dolor sit amet.
288 |
311 |
317 | 
322 |
328 |
343 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta,
344 | saepe.
Lorem ipsum dolor sit amet consectetur.
345 |
350 | 
360 | Lorem ipsum dolor sit amet.
363 |
379 | Lorem ipsum dolor sit amet.
382 |
398 | Lorem ipsum dolor sit amet.
401 |
417 | Lorem ipsum dolor sit amet.
420 |
441 |
445 | 
450 |
454 | 
459 |
463 | 
473 | Lorem ipsum dolor sit amet.
476 |
492 | Lorem ipsum dolor sit amet.
495 |
511 | Lorem ipsum dolor sit amet.
514 |
530 | Lorem ipsum dolor sit amet.
533 |
552 | Lorem ipsum dolor sit amet.
555 |
571 | Lorem ipsum dolor sit amet.
574 |
590 | Lorem ipsum dolor sit amet.
593 |
609 | Lorem ipsum dolor sit amet.
612 |On order over $1000
636 |Within 30 days
641 |World Wide
646 |Of products
651 |
739 |
740 |
745 |
746 |
747 |
--------------------------------------------------------------------------------
Login