Hugging Face's logo

Spaces:
ProjectGenesis
/
new-ui-1
Running

App Files Community
ProjectGenesis commited on
Commit
9cc3a15
·
verified ·
1 Parent(s): 98306e2

add an image place holder for each game card - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +19 -19
index.html CHANGED
@@ -385,7 +385,7 @@
385
  <div class="relative card-hover">
386
  <div class="w-28 h-28 rounded-xl overflow-hidden">
387
  <div class="relative w-full h-full">
388
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
389
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
390
  <i class="fas fa-play text-xs"></i>
391
  </div>
@@ -398,7 +398,7 @@
398
  <div class="relative card-hover">
399
  <div class="w-28 h-28 rounded-xl overflow-hidden">
400
  <div class="relative w-full h-full">
401
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
402
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
403
  <i class="fas fa-play text-xs"></i>
404
  </div>
@@ -410,7 +410,7 @@
410
  <div class="relative card-hover">
411
  <div class="w-28 h-28 rounded-xl overflow-hidden">
412
  <div class="relative w-full h-full">
413
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
414
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
415
  <i class="fas fa-play text-xs"></i>
416
  </div>
@@ -423,7 +423,7 @@
423
  <div class="relative card-hover">
424
  <div class="w-28 h-28 rounded-xl overflow-hidden">
425
  <div class="relative w-full h-full">
426
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
427
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
428
  <i class="fas fa-play text-xs"></i>
429
  </div>
@@ -435,7 +435,7 @@
435
  <div class="relative card-hover">
436
  <div class="w-28 h-28 rounded-xl overflow-hidden">
437
  <div class="relative w-full h-full">
438
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
439
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
440
  <i class="fas fa-play text-xs"></i>
441
  </div>
@@ -448,7 +448,7 @@
448
  <div class="relative card-hover">
449
  <div class="w-28 h-28 rounded-xl overflow-hidden">
450
  <div class="relative w-full h-full">
451
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
452
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
453
  <i class="fas fa-play text-xs"></i>
454
  </div>
@@ -461,7 +461,7 @@
461
  <div class="relative card-hover">
462
  <div class="w-28 h-28 rounded-xl overflow-hidden">
463
  <div class="relative w-full h-full">
464
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
465
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
466
  <i class="fas fa-play text-xs"></i>
467
  </div>
@@ -473,7 +473,7 @@
473
  <div class="relative card-hover">
474
  <div class="w-28 h-28 rounded-xl overflow-hidden">
475
  <div class="relative w-full h-full">
476
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
477
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
478
  <i class="fas fa-play text-xs"></i>
479
  </div>
@@ -486,7 +486,7 @@
486
  <div class="relative card-hover">
487
  <div class="w-28 h-28 rounded-xl overflow-hidden">
488
  <div class="relative w-full h-full">
489
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=112&h=112&fit=crop" class="w-full h-full object-cover">
490
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
491
  <i class="fas fa-play text-xs"></i>
492
  </div>
@@ -498,7 +498,7 @@
498
  <div class="relative card-hover">
499
  <div class="w-28 h-28 rounded-xl overflow-hidden">
500
  <div class="relative w-full h-full">
501
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=112&h=112&fit=crop" class="w-full h-full object-cover">
502
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
503
  <i class="fas fa-play text-xs"></i>
504
  </div>
@@ -627,7 +627,7 @@
627
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
628
  <div class="relative">
629
  <div class="rounded-xl overflow-hidden h-40">
630
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
631
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
632
  </div>
633
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -645,7 +645,7 @@
645
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
646
  <div class="relative">
647
  <div class="rounded-xl overflow-hidden h-40">
648
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
649
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
650
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
651
  New
@@ -666,7 +666,7 @@
666
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
667
  <div class="relative">
668
  <div class="rounded-xl overflow-hidden h-40">
669
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
670
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
671
  </div>
672
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -690,7 +690,7 @@
690
  <div class="relative card-hover floating">
691
  <div class="relative">
692
  <div class="rounded-xl overflow-hidden h-40">
693
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
694
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
695
  </div>
696
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -708,7 +708,7 @@
708
  <div class="relative card-hover floating">
709
  <div class="relative">
710
  <div class="rounded-xl overflow-hidden h-40">
711
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
712
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
713
  </div>
714
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -726,7 +726,7 @@
726
  <div class="relative card-hover floating">
727
  <div class="relative">
728
  <div class="rounded-xl overflow-hidden h-40">
729
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
730
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
731
  </div>
732
  <div class="absolute bottom-0 left-0 right-0 p-3">
@@ -750,7 +750,7 @@
750
  <div class="relative card-hover floating">
751
  <div class="relative">
752
  <div class="rounded-xl overflow-hidden h-40">
753
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
754
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
755
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
756
  New
@@ -771,7 +771,7 @@
771
  <div class="relative card-hover floating">
772
  <div class="relative">
773
  <div class="rounded-xl overflow-hidden h-40">
774
- <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce11?w=300&h=160&fit=crop" class="w-full h-full object-cover">
775
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
776
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
777
  New
@@ -792,7 +792,7 @@
792
  <div class="relative card-hover floating">
793
  <div class="relative">
794
  <div class="rounded-xl overflow-hidden h-40">
795
- <img src="https://images.unsplash.com/photo-1615715757401-f30e7b27b912?w=300&h=160&fit=crop" class="w-full h-full object-cover">
796
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
797
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
798
  New
 
385
  <div class="relative card-hover">
386
  <div class="w-28 h-28 rounded-xl overflow-hidden">
387
  <div class="relative w-full h-full">
388
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
389
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
390
  <i class="fas fa-play text-xs"></i>
391
  </div>
 
398
  <div class="relative card-hover">
399
  <div class="w-28 h-28 rounded-xl overflow-hidden">
400
  <div class="relative w-full h-full">
401
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
402
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
403
  <i class="fas fa-play text-xs"></i>
404
  </div>
 
410
  <div class="relative card-hover">
411
  <div class="w-28 h-28 rounded-xl overflow-hidden">
412
  <div class="relative w-full h-full">
413
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
414
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
415
  <i class="fas fa-play text-xs"></i>
416
  </div>
 
423
  <div class="relative card-hover">
424
  <div class="w-28 h-28 rounded-xl overflow-hidden">
425
  <div class="relative w-full h-full">
426
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
427
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
428
  <i class="fas fa-play text-xs"></i>
429
  </div>
 
435
  <div class="relative card-hover">
436
  <div class="w-28 h-28 rounded-xl overflow-hidden">
437
  <div class="relative w-full h-full">
438
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
439
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
440
  <i class="fas fa-play text-xs"></i>
441
  </div>
 
448
  <div class="relative card-hover">
449
  <div class="w-28 h-28 rounded-xl overflow-hidden">
450
  <div class="relative w-full h-full">
451
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
452
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
453
  <i class="fas fa-play text-xs"></i>
454
  </div>
 
461
  <div class="relative card-hover">
462
  <div class="w-28 h-28 rounded-xl overflow-hidden">
463
  <div class="relative w-full h-full">
464
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
465
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
466
  <i class="fas fa-play text-xs"></i>
467
  </div>
 
473
  <div class="relative card-hover">
474
  <div class="w-28 h-28 rounded-xl overflow-hidden">
475
  <div class="relative w-full h-full">
476
+ <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
477
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
478
  <i class="fas fa-play text-xs"></i>
479
  </div>
 
486
  <div class="relative card-hover">
487
  <div class="w-28 h-28 rounded-xl overflow-hidden">
488
  <div class="relative w-full h-full">
489
+ <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
490
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
491
  <i class="fas fa-play text-xs"></i>
492
  </div>
 
498
  <div class="relative card-hover">
499
  <div class="w-28 h-28 rounded-xl overflow-hidden">
500
  <div class="relative w-full h-full">
501
+ <img src="https://via.placeholder.com/112x112/1A1A1A/333333?text=Game" class="w-full h-full object-cover">
502
  <div class="absolute top-1 right-1 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center">
503
  <i class="fas fa-play text-xs"></i>
504
  </div>
 
627
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(5deg) rotateX(5deg);">
628
  <div class="relative">
629
  <div class="rounded-xl overflow-hidden h-40">
630
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
631
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
632
  </div>
633
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
645
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
646
  <div class="relative">
647
  <div class="rounded-xl overflow-hidden h-40">
648
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
649
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
650
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
651
  New
 
666
  <div class="transform transition-transform duration-500 card-hover floating" style="transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);">
667
  <div class="relative">
668
  <div class="rounded-xl overflow-hidden h-40">
669
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
670
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
671
  </div>
672
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
690
  <div class="relative card-hover floating">
691
  <div class="relative">
692
  <div class="rounded-xl overflow-hidden h-40">
693
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
694
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
695
  </div>
696
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
708
  <div class="relative card-hover floating">
709
  <div class="relative">
710
  <div class="rounded-xl overflow-hidden h-40">
711
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
712
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
713
  </div>
714
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
726
  <div class="relative card-hover floating">
727
  <div class="relative">
728
  <div class="rounded-xl overflow-hidden h-40">
729
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
730
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
731
  </div>
732
  <div class="absolute bottom-0 left-0 right-0 p-3">
 
750
  <div class="relative card-hover floating">
751
  <div class="relative">
752
  <div class="rounded-xl overflow-hidden h-40">
753
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
754
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
755
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
756
  New
 
771
  <div class="relative card-hover floating">
772
  <div class="relative">
773
  <div class="rounded-xl overflow-hidden h-40">
774
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
775
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
776
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
777
  New
 
792
  <div class="relative card-hover floating">
793
  <div class="relative">
794
  <div class="rounded-xl overflow-hidden h-40">
795
+ <img src="https://i.postimg.cc/MTQFQdpj/temp-Image-ONx-Xwu.avif" class="w-full h-full object-cover">
796
  <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
797
  <div class="absolute top-2 left-2 bg-niopurple rounded-full px-2 py-0.5 text-xs">
798
  New