Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29
smolSWE commited on
Commit
d64bea0
·
verified ·
1 Parent(s): f282b32

Implement homepage and product page

Browse files

Implemented product listing, search bar, carousel on homepage and product details page.

Files changed (2) hide show
  1. index.html +130 -2
  2. product.html +19 -2
index.html CHANGED
@@ -6,6 +6,7 @@
6
  <title>Amazon Clone</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
 
9
  </head>
10
  <body>
11
  <nav class="bg-gray-800 p-4 text-white">
@@ -22,9 +23,136 @@
22
  </nav>
23
 
24
  <main class="container mx-auto mt-8">
25
- <h1>Welcome to Amazon</h1>
26
- <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
 
 
27
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </main>
29
 
30
  <footer class="bg-gray-800 p-4 text-white text-center mt-8">
 
6
  <title>Amazon Clone</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10
  </head>
11
  <body>
12
  <nav class="bg-gray-800 p-4 text-white">
 
23
  </nav>
24
 
25
  <main class="container mx-auto mt-8">
26
+
27
+ <div class="carousel">
28
+ <div class="carousel-item">
29
+ <img src="https://picsum.photos/id/237/800/300" alt="Featured Product 1" class="w-full rounded-md">
30
  </div>
31
+ <div class="carousel-item">
32
+ <img src="https://picsum.photos/id/238/800/300" alt="Featured Product 2" class="w-full rounded-md">
33
+ </div>
34
+ <div class="carousel-item">
35
+ <img src="https://picsum.photos/id/239/800/300" alt="Featured Product 3" class="w-full rounded-md">
36
+ </div>
37
+ </div>
38
+
39
+ <section class="product-listing">
40
+ <h2 class="text-2xl font-bold mb-4">Products</h2>
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://picsum.photos/id/10/200/300" 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">
48
+ <i class="fas fa-star text-yellow-500"></i>
49
+ <i class="fas fa-star text-yellow-500"></i>
50
+ <i class="fas fa-star text-yellow-500"></i>
51
+ <i class="fas fa-star text-yellow-500"></i>
52
+ <i class="fas fa-star-half-alt text-yellow-500"></i>
53
+ <span class="text-gray-600 ml-2">4.5</span>
54
+ </div>
55
+ </div>
56
+ <!-- Product 2 -->
57
+ <div class="product-card">
58
+ <img src="https://picsum.photos/id/11/200/300" 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">
62
+ <i class="fas fa-star text-yellow-500"></i>
63
+ <i class="fas fa-star text-yellow-500"></i>
64
+ <i class="fas fa-star text-yellow-500"></i>
65
+ <i class="fas fa-star text-yellow-500"></i>
66
+ <i class="fas fa-star text-yellow-500"></i>
67
+ <span class="text-gray-600 ml-2">5.0</span>
68
+ </div>
69
+ </div>
70
+ <!-- Product 3 -->
71
+ <div class="product-card">
72
+ <img src="https://picsum.photos/id/12/200/300" 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">
76
+ <i class="fas fa-star text-yellow-500"></i>
77
+ <i class="fas fa-star text-yellow-500"></i>
78
+ <i class="fas fa-star text-yellow-500"></i>
79
+ <i class="fas fa-star-half-alt text-yellow-500"></i>
80
+ <i class="far fa-star text-yellow-500"></i>
81
+ <span class="text-gray-600 ml-2">3.5</span>
82
+ </div>
83
+ </div>
84
+ <!-- Product 4 -->
85
+ <div class="product-card">
86
+ <img src="https://picsum.photos/id/13/200/300" 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">
90
+ <i class="fas fa-star text-yellow-500"></i>
91
+ <i class="fas fa-star text-yellow-500"></i>
92
+ <i class="fas fa-star text-yellow-500"></i>
93
+ <i class="fas fa-star text-yellow-500"></i>
94
+ <i class="far fa-star text-yellow-500"></i>
95
+ <span class="text-gray-600 ml-2">4.0</span>
96
+ </div>
97
+ </div>
98
+ <!-- Product 5 -->
99
+ <div class="product-card">
100
+ <img src="https://picsum.photos/id/14/200/300" 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">
104
+ <i class="fas fa-star text-yellow-500"></i>
105
+ <i class="fas fa-star text-yellow-500"></i>
106
+ <i class="fas fa-star text-yellow-500"></i>
107
+ <i class="fas fa-star text-yellow-500"></i>
108
+ <i class="fas fa-star-half-alt text-yellow-500"></i>
109
+ <span class="text-gray-600 ml-2">4.5</span>
110
+ </div>
111
+ </div>
112
+ <!-- Product 6 -->
113
+ <div class="product-card">
114
+ <img src="https://picsum.photos/id/15/200/300" 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">
118
+ <i class="fas fa-star text-yellow-500"></i>
119
+ <i class="fas fa-star text-yellow-500"></i>
120
+ <i class="fas fa-star text-yellow-500"></i>
121
+ <i class="fas fa-star text-yellow-500"></i>
122
+ <i class="fas fa-star text-yellow-500"></i>
123
+ <span class="text-gray-600 ml-2">5.0</span>
124
+ </div>
125
+ </div>
126
+ <!-- Product 7 -->
127
+ <div class="product-card">
128
+ <img src="https://picsum.photos/id/16/200/300" 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">
132
+ <i class="fas fa-star text-yellow-500"></i>
133
+ <i class="fas fa-star text-yellow-500"></i>
134
+ <i class="fas fa-star text-yellow-500"></i>
135
+ <i class="fas fa-star-half-alt text-yellow-500"></i>
136
+ <i class="far fa-star text-yellow-500"></i>
137
+ <span class="text-gray-600 ml-2">3.5</span>
138
+ </div>
139
+ </div>
140
+ <!-- Product 8 -->
141
+ <div class="product-card">
142
+ <img src="https://picsum.photos/id/17/200/300" 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">
146
+ <i class="fas fa-star text-yellow-500"></i>
147
+ <i class="fas fa-star text-yellow-500"></i>
148
+ <i class="fas fa-star text-yellow-500"></i>
149
+ <i class="fas fa-star text-yellow-500"></i>
150
+ <i class="far fa-star text-yellow-500"></i>
151
+ <span class="text-gray-600 ml-2">4.0</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
  </main>
157
 
158
  <footer class="bg-gray-800 p-4 text-white text-center mt-8">
product.html CHANGED
@@ -6,6 +6,7 @@
6
  <title>Product Details - Amazon Clone</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
 
9
  </head>
10
  <body>
11
  <nav class="bg-gray-800 p-4 text-white">
@@ -24,12 +25,28 @@
24
  <main class="container mx-auto mt-8">
25
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
26
  <div>
27
- <img src="https://via.placeholder.com/400" alt="Product Image" class="w-full rounded-md">
 
 
 
 
 
 
 
 
28
  </div>
29
  <div>
30
  <h1 class="text-2xl font-bold">Product Title</h1>
31
- <p class="text-gray-600">Product Description</p>
32
  <p class="text-xl font-semibold">$99.99</p>
 
 
 
 
 
 
 
 
33
  <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Add to Cart</button>
34
  </div>
35
  </div>
 
6
  <title>Product Details - Amazon Clone</title>
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="style.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10
  </head>
11
  <body>
12
  <nav class="bg-gray-800 p-4 text-white">
 
25
  <main class="container mx-auto mt-8">
26
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
27
  <div>
28
+ <div class="image-gallery">
29
+ <img src="https://picsum.photos/id/101/400/400" alt="Product Image 1" class="w-full rounded-md mb-2">
30
+ <div class="grid grid-cols-4 gap-2">
31
+ <img src="https://picsum.photos/id/102/100/100" alt="Product Image 2" class="w-full rounded-md">
32
+ <img src="https://picsum.photos/id/103/100/100" alt="Product Image 3" class="w-full rounded-md">
33
+ <img src="https://picsum.photos/id/104/100/100" alt="Product Image 4" class="w-full rounded-md">
34
+ <img src="https://picsum.photos/id/105/100/100" alt="Product Image 5" class="w-full rounded-md">
35
+ </div>
36
+ </div>
37
  </div>
38
  <div>
39
  <h1 class="text-2xl font-bold">Product Title</h1>
40
+ <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
41
  <p class="text-xl font-semibold">$99.99</p>
42
+ <div class="flex items-center mb-4">
43
+ <i class="fas fa-star text-yellow-500"></i>
44
+ <i class="fas fa-star text-yellow-500"></i>
45
+ <i class="fas fa-star text-yellow-500"></i>
46
+ <i class="fas fa-star text-yellow-500"></i>
47
+ <i class="fas fa-star-half-alt text-yellow-500"></i>
48
+ <span class="text-gray-600 ml-2">4.5</span>
49
+ </div>
50
  <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Add to Cart</button>
51
  </div>
52
  </div>