Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

Replace placeholder.co with placehold.co in image URLs

#26
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/26
Discussion Files changed
+19
-19
Files changed (3) hide show
  1. data.js +3 -3
  2. index.html +11 -11
  3. product.html +5 -5
data.js CHANGED
@@ -5,20 +5,20 @@ const products = [
5
  name: "Product 1",
6
  description: "This is the first product.",
7
  price: 25.00,
8
- image: "https://placeholder.co/200x300"
9
  },
10
  {
11
  id: "2",
12
  name: "Product 2",
13
  description: "This is the second product.",
14
  price: 50.00,
15
- image: "https://placeholder.co/200x300"
16
  },
17
  {
18
  id: "3",
19
  name: "Product 3",
20
  description: "This is the third product.",
21
  price: 75.00,
22
- image: "https://placeholder.co/200x300"
23
  }
24
  ];
 
5
  name: "Product 1",
6
  description: "This is the first product.",
7
  price: 25.00,
8
+ image: "https://placehold.co/200x300"
9
  },
10
  {
11
  id: "2",
12
  name: "Product 2",
13
  description: "This is the second product.",
14
  price: 50.00,
15
+ image: "https://placehold.co/200x300"
16
  },
17
  {
18
  id: "3",
19
  name: "Product 3",
20
  description: "This is the third product.",
21
  price: 75.00,
22
+ image: "https://placehold.co/200x300"
23
  }
24
  ];
index.html CHANGED
@@ -26,13 +26,13 @@
26
 
27
  <div class="carousel">
28
  <div class="carousel-item">
29
- <img src="https://placeholder.co/800x300" alt="Featured Product 1" class="w-full rounded-md">
30
  </div>
31
  <div class="carousel-item">
32
- <img src="https://placeholder.co/800x300" alt="Featured Product 2" class="w-full rounded-md">
33
  </div>
34
  <div class="carousel-item">
35
- <img src="https://placeholder.co/800x300" alt="Featured Product 3" class="w-full rounded-md">
36
  </div>
37
  </div>
38
 
@@ -41,7 +41,7 @@
41
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
42
  <!-- Product 1 -->
43
  <div class="product-card">
44
- <img src="https://placeholder.co/200x300" alt="Product 1" class="w-full rounded-md">
45
  <h3 class="text-lg font-semibold">Product 1</h3>
46
  <p class="text-gray-600">$19.99</p>
47
  <div class="flex items-center">
@@ -55,7 +55,7 @@
55
  </div>
56
  <!-- Product 2 -->
57
  <div class="product-card">
58
- <img src="https://placeholder.co/200x300" alt="Product 2" class="w-full rounded-md">
59
  <h3 class="text-lg font-semibold">Product 2</h3>
60
  <p class="text-gray-600">$29.99</p>
61
  <div class="flex items-center">
@@ -69,7 +69,7 @@
69
  </div>
70
  <!-- Product 3 -->
71
  <div class="product-card">
72
- <img src="https://placeholder.co/200x300" alt="Product 3" class="w-full rounded-md">
73
  <h3 class="text-lg font-semibold">Product 3</h3>
74
  <p class="text-gray-600">$39.99</p>
75
  <div class="flex items-center">
@@ -83,7 +83,7 @@
83
  </div>
84
  <!-- Product 4 -->
85
  <div class="product-card">
86
- <img src="https://placeholder.co/200x300" alt="Product 4" class="w-full rounded-md">
87
  <h3 class="text-lg font-semibold">Product 4</h3>
88
  <p class="text-gray-600">$49.99</p>
89
  <div class="flex items-center">
@@ -97,7 +97,7 @@
97
  </div>
98
  <!-- Product 5 -->
99
  <div class="product-card">
100
- <img src="https://placeholder.co/200x300" alt="Product 5" class="w-full rounded-md">
101
  <h3 class="text-lg font-semibold">Product 5</h3>
102
  <p class="text-gray-600">$59.99</p>
103
  <div class="flex items-center">
@@ -111,7 +111,7 @@
111
  </div>
112
  <!-- Product 6 -->
113
  <div class="product-card">
114
- <img src="https://placeholder.co/200x300" alt="Product 6" class="w-full rounded-md">
115
  <h3 class="text-lg font-semibold">Product 6</h3>
116
  <p class="text-gray-600">$69.99</p>
117
  <div class="flex items-center">
@@ -125,7 +125,7 @@
125
  </div>
126
  <!-- Product 7 -->
127
  <div class="product-card">
128
- <img src="https://placeholder.co/200x300" alt="Product 7" class="w-full rounded-md">
129
  <h3 class="text-lg font-semibold">Product 7</h3>
130
  <p class="text-gray-600">$79.99</p>
131
  <div class="flex items-center">
@@ -139,7 +139,7 @@
139
  </div>
140
  <!-- Product 8 -->
141
  <div class="product-card">
142
- <img src="https://placeholder.co/200x300" alt="Product 8" class="w-full rounded-md">
143
  <h3 class="text-lg font-semibold">Product 8</h3>
144
  <p class="text-gray-600">$89.99</p>
145
  <div class="flex items-center">
 
26
 
27
  <div class="carousel">
28
  <div class="carousel-item">
29
+ <img src="https://placehold.co/800x300" alt="Featured Product 1" class="w-full rounded-md">
30
  </div>
31
  <div class="carousel-item">
32
+ <img src="https://placehold.co/800x300" alt="Featured Product 2" class="w-full rounded-md">
33
  </div>
34
  <div class="carousel-item">
35
+ <img src="https://placehold.co/800x300" alt="Featured Product 3" class="w-full rounded-md">
36
  </div>
37
  </div>
38
 
 
41
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
42
  <!-- Product 1 -->
43
  <div class="product-card">
44
+ <img src="https://placehold.co/200x300" alt="Product 1" class="w-full rounded-md">
45
  <h3 class="text-lg font-semibold">Product 1</h3>
46
  <p class="text-gray-600">$19.99</p>
47
  <div class="flex items-center">
 
55
  </div>
56
  <!-- Product 2 -->
57
  <div class="product-card">
58
+ <img src="https://placehold.co/200x300" alt="Product 2" class="w-full rounded-md">
59
  <h3 class="text-lg font-semibold">Product 2</h3>
60
  <p class="text-gray-600">$29.99</p>
61
  <div class="flex items-center">
 
69
  </div>
70
  <!-- Product 3 -->
71
  <div class="product-card">
72
+ <img src="https://placehold.co/200x300" alt="Product 3" class="w-full rounded-md">
73
  <h3 class="text-lg font-semibold">Product 3</h3>
74
  <p class="text-gray-600">$39.99</p>
75
  <div class="flex items-center">
 
83
  </div>
84
  <!-- Product 4 -->
85
  <div class="product-card">
86
+ <img src="https://placehold.co/200x300" alt="Product 4" class="w-full rounded-md">
87
  <h3 class="text-lg font-semibold">Product 4</h3>
88
  <p class="text-gray-600">$49.99</p>
89
  <div class="flex items-center">
 
97
  </div>
98
  <!-- Product 5 -->
99
  <div class="product-card">
100
+ <img src="https://placehold.co/200x300" alt="Product 5" class="w-full rounded-md">
101
  <h3 class="text-lg font-semibold">Product 5</h3>
102
  <p class="text-gray-600">$59.99</p>
103
  <div class="flex items-center">
 
111
  </div>
112
  <!-- Product 6 -->
113
  <div class="product-card">
114
+ <img src="https://placehold.co/200x300" alt="Product 6" class="w-full rounded-md">
115
  <h3 class="text-lg font-semibold">Product 6</h3>
116
  <p class="text-gray-600">$69.99</p>
117
  <div class="flex items-center">
 
125
  </div>
126
  <!-- Product 7 -->
127
  <div class="product-card">
128
+ <img src="https://placehold.co/200x300" alt="Product 7" class="w-full rounded-md">
129
  <h3 class="text-lg font-semibold">Product 7</h3>
130
  <p class="text-gray-600">$79.99</p>
131
  <div class="flex items-center">
 
139
  </div>
140
  <!-- Product 8 -->
141
  <div class="product-card">
142
+ <img src="https://placehold.co/200x300" alt="Product 8" class="w-full rounded-md">
143
  <h3 class="text-lg font-semibold">Product 8</h3>
144
  <p class="text-gray-600">$89.99</p>
145
  <div class="flex items-center">
product.html CHANGED
@@ -27,12 +27,12 @@
27
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
28
  <div>
29
  <div class="image-gallery">
30
- <img src="https://placeholder.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
31
  <div class="grid grid-cols-4 gap-2">
32
- <img src="https://placeholder.co/100x100" alt="Product Image 2" class="w-full rounded-md">
33
- <img src="https://placeholder.co/100x100" alt="Product Image 3" class="w-full rounded-md">
34
- <img src="https://placeholder.co/100x100" alt="Product Image 4" class="w-full rounded-md">
35
- <img src="https://placeholder.co/100x100" alt="Product Image 5" class="w-full rounded-md">
36
  </div>
37
  </div>
38
  </div>
 
27
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
28
  <div>
29
  <div class="image-gallery">
30
+ <img src="https://placehold.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
31
  <div class="grid grid-cols-4 gap-2">
32
+ <img src="https://placehold.co/100x100" alt="Product Image 2" class="w-full rounded-md">
33
+ <img src="https://placehold.co/100x100" alt="Product Image 3" class="w-full rounded-md">
34
+ <img src="https://placehold.co/100x100" alt="Product Image 4" class="w-full rounded-md">
35
+ <img src="https://placehold.co/100x100" alt="Product Image 5" class="w-full rounded-md">
36
  </div>
37
  </div>
38
  </div>