Hugging Face's logo

Spaces:
WizardImon
/
cstone-category
Running

App Files Community
WizardImon commited on
Commit
cd4e8b2
·
verified ·
1 Parent(s): d3250de

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +504 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cstone Category
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cstone-category
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,504 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Stone Collection | ClassicQuartzStone UK</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropdown:hover .dropdown-menu {
11
+ display: block;
12
+ }
13
+ .product-card:hover .product-overlay {
14
+ opacity: 1;
15
+ }
16
+ .filter-section {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .filter-section.collapsed {
20
+ max-height: 60px;
21
+ overflow: hidden;
22
+ }
23
+ .filter-toggle::after {
24
+ content: '+';
25
+ position: absolute;
26
+ right: 10px;
27
+ top: 50%;
28
+ transform: translateY(-50%);
29
+ }
30
+ .filter-toggle.collapsed::after {
31
+ content: '-';
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="font-sans bg-gray-50">
36
+ <!-- Top Bar -->
37
+ <div class="bg-gray-800 text-white py-2 px-4 text-sm">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div>
40
+ <i class="fas fa-phone-alt mr-2"></i> (+44) 0118 986 1113
41
+ <i class="fas fa-envelope ml-4 mr-2"></i> info@classicquartzstone.com
42
+ </div>
43
+ <div class="flex space-x-4">
44
+ <a href="#" class="hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a>
45
+ <a href="#" class="hover:text-yellow-300"><i class="fab fa-google"></i></a>
46
+ <a href="#" class="hover:text-yellow-300"><i class="fab fa-instagram"></i></a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Header -->
52
+ <header class="bg-white shadow-md">
53
+ <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
54
+ <div class="flex items-center mb-4 md:mb-0">
55
+ <a href="https://www.classicquartzstone.com/" class="flex items-center">
56
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2019/01/CQS-Stone-UK.png" alt="ClassicQuartzStone UK" class="h-12 mr-2">
57
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2019/01/CQS-Stone-UK.png" alt="ClassicQuartzStone UK" class="h-12">
58
+ </a>
59
+ </div>
60
+
61
+ <nav class="w-full md:w-auto">
62
+ <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 text-gray-800 font-medium">
63
+ <li><a href="https://www.classicquartzstone.com/" class="hover:text-yellow-600 transition">HOME</a></li>
64
+ <li><a href="https://www.classicquartzstone.com/about-us/" class="hover:text-yellow-600 transition">ABOUT US</a></li>
65
+
66
+ <li class="dropdown relative group">
67
+ <a href="#" class="hover:text-yellow-600 transition flex items-center">
68
+ OUR PRODUCTS <i class="fas fa-chevron-down ml-1 text-xs"></i>
69
+ </a>
70
+ <ul class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block">
71
+ <li><a href="https://www.classicquartzstone.com/product-category/stone-collection/" class="block px-4 py-2 hover:bg-gray-100">STONE COLLECTION</a></li>
72
+ <li><a href="https://www.classicquartzstone.com/diamond-range/" class="block px-4 py-2 hover:bg-gray-100">DIAMOND RANGE</a></li>
73
+ <li><a href="https://www.classicquartzstone.com/coante-range/" class="block px-4 py-2 hover:bg-gray-100">COANTE RANGE</a></li>
74
+ <li><a href="https://www.classicquartzstone.com/supreme-range/" class="block px-4 py-2 hover:bg-gray-100">SUPREME RANGE</a></li>
75
+ <li><a href="https://www.classicquartzstone.com/wholesale-quartz-brillo-slabs-range/" class="block px-4 py-2 hover:bg-gray-100">BRILLO RANGE</a></li>
76
+ <li><a href="https://www.classicquartzstone.com/wholesale-classic-quartz-slabs-range/" class="block px-4 py-2 hover:bg-gray-100">CLASSIC RANGE</a></li>
77
+ </ul>
78
+ </li>
79
+
80
+ <li><a href="https://www.classicquartzstone.com/quartz-designs/" class="hover:text-yellow-600 transition">QUARTZ SLAB DESIGNS</a></li>
81
+
82
+ <li class="dropdown relative group">
83
+ <a href="#" class="hover:text-yellow-600 transition flex items-center">
84
+ OUR SERVICES <i class="fas fa-chevron-down ml-1 text-xs"></i>
85
+ </a>
86
+ <ul class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-10 hidden group-hover:block">
87
+ <li><a href="https://www.classicquartzstone.com/faq/" class="block px-4 py-2 hover:bg-gray-100">FAQ</a></li>
88
+ <li><a href="https://www.classicquartzstone.com/marketing-materials-quartz-catalogue/" class="block px-4 py-2 hover:bg-gray-100">MARKETING MATERIALS</a></li>
89
+ <li><a href="https://www.classicquartzstone.com/quartz-warranty/" class="block px-4 py-2 hover:bg-gray-100">QUARTZ WARRANTY</a></li>
90
+ </ul>
91
+ </li>
92
+
93
+ <li><a href="https://www.classicquartzstone.com/contact-us/" class="hover:text-yellow-600 transition">CONTACT</a></li>
94
+ </ul>
95
+ </nav>
96
+ </div>
97
+ </header>
98
+
99
+ <!-- Breadcrumb -->
100
+ <div class="bg-gray-100 py-3">
101
+ <div class="container mx-auto px-4">
102
+ <nav class="flex" aria-label="Breadcrumb">
103
+ <ol class="inline-flex items-center space-x-1 md:space-x-3">
104
+ <li class="inline-flex items-center">
105
+ <a href="https://www.classicquartzstone.com/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-yellow-600">
106
+ <i class="fas fa-home mr-2"></i>
107
+ Home
108
+ </a>
109
+ </li>
110
+ <li aria-current="page">
111
+ <div class="flex items-center">
112
+ <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
113
+ <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Stone Collection</span>
114
+ </div>
115
+ </li>
116
+ </ol>
117
+ </nav>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Page Header -->
122
+ <div class="bg-gradient-to-r from-gray-800 to-gray-600 py-12">
123
+ <div class="container mx-auto px-4 text-center">
124
+ <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Stone Collection</h1>
125
+ <p class="text-gray-300 max-w-2xl mx-auto">Discover our premium selection of quartz slabs and porcelain surfaces for your next project</p>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Main Content -->
130
+ <div class="container mx-auto px-4 py-8">
131
+ <div class="flex flex-col lg:flex-row gap-8">
132
+ <!-- Filters Sidebar -->
133
+ <div class="w-full lg:w-1/4">
134
+ <div class="bg-white p-4 shadow rounded-lg mb-6">
135
+ <h3 class="text-lg font-semibold mb-4">Search</h3>
136
+ <div class="relative">
137
+ <input type="text" placeholder="Search products..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500">
138
+ <button class="absolute right-2 top-2 text-gray-500">
139
+ <i class="fas fa-search"></i>
140
+ </button>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="bg-white p-4 shadow rounded-lg mb-6">
145
+ <h3 class="text-lg font-semibold mb-4">Filter by Brand</h3>
146
+ <ul class="space-y-2">
147
+ <li>
148
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
149
+ <span>Classic Quartz Stone</span>
150
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">84</span>
151
+ </a>
152
+ </li>
153
+ <li>
154
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
155
+ <span>Horizon Stone</span>
156
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">69</span>
157
+ </a>
158
+ </li>
159
+ </ul>
160
+ </div>
161
+
162
+ <!-- Collapsible Filter Sections -->
163
+ <div class="bg-white p-4 shadow rounded-lg mb-6">
164
+ <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('color')">
165
+ Filter by Colour
166
+ </div>
167
+ <div class="filter-section" id="color-filter">
168
+ <ul class="space-y-2">
169
+ <li>
170
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
171
+ <span>Black</span>
172
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">18</span>
173
+ </a>
174
+ </li>
175
+ <li>
176
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
177
+ <span>Grey</span>
178
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">107</span>
179
+ </a>
180
+ </li>
181
+ <li>
182
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
183
+ <span>Multicoloured</span>
184
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">114</span>
185
+ </a>
186
+ </li>
187
+ <li>
188
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
189
+ <span>White</span>
190
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">124</span>
191
+ </a>
192
+ </li>
193
+ </ul>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="bg-white p-4 shadow rounded-lg mb-6">
198
+ <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('range')">
199
+ Filter by Range
200
+ </div>
201
+ <div class="filter-section" id="range-filter">
202
+ <ul class="space-y-2">
203
+ <li>
204
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
205
+ <span>Classic</span>
206
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">4</span>
207
+ </a>
208
+ </li>
209
+ <li>
210
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
211
+ <span>Supreme</span>
212
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">2</span>
213
+ </a>
214
+ </li>
215
+ <li>
216
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
217
+ <span>Construction</span>
218
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">9</span>
219
+ </a>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="bg-white p-4 shadow rounded-lg mb-6">
226
+ <div class="filter-toggle cursor-pointer font-semibold text-lg mb-2 relative" onclick="toggleFilter('style')">
227
+ Filter by Style
228
+ </div>
229
+ <div class="filter-section" id="style-filter">
230
+ <ul class="space-y-2">
231
+ <li>
232
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
233
+ <span>Granulate</span>
234
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">26</span>
235
+ </a>
236
+ </li>
237
+ <li>
238
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
239
+ <span>Marbled</span>
240
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">156</span>
241
+ </a>
242
+ </li>
243
+ <li>
244
+ <a href="#" class="flex items-center justify-between text-gray-700 hover:text-yellow-600">
245
+ <span>Solid</span>
246
+ <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">14</span>
247
+ </a>
248
+ </li>
249
+ </ul>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Products Grid -->
255
+ <div class="w-full lg:w-3/4">
256
+ <div class="flex justify-between items-center mb-6">
257
+ <p class="text-gray-600">Showing 1–12 of 183 results</p>
258
+ <div class="flex items-center">
259
+ <span class="mr-2 text-gray-600">Sort by:</span>
260
+ <select class="border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-500">
261
+ <option>Default</option>
262
+ <option>Price: Low to High</option>
263
+ <option>Price: High to Low</option>
264
+ <option>Newest</option>
265
+ </select>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
270
+ <!-- Product Card 1 -->
271
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
272
+ <div class="relative overflow-hidden">
273
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/ARABESCATO_Porcelain-rotated-270x270_c.jpg" alt="ARABESCATO" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
274
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
275
+ <a href="https://www.classicquartzstone.com/arabescato-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
276
+ </div>
277
+ </div>
278
+ <div class="p-4">
279
+ <h3 class="text-lg font-semibold mb-2">ARABESCATO</h3>
280
+ <div class="flex justify-between items-center">
281
+ <span class="text-gray-600">Porcelain</span>
282
+ <button class="text-yellow-600 hover:text-yellow-700">
283
+ <i class="far fa-heart"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Product Card 2 -->
290
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
291
+ <div class="relative overflow-hidden">
292
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/ARABESCATO-VIOLA-Porcelain-Slabs-rotated-270x270_c.jpg" alt="ARABESCATO VIOLA" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
293
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
294
+ <a href="https://www.classicquartzstone.com/arabescato-viola/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
295
+ </div>
296
+ </div>
297
+ <div class="p-4">
298
+ <h3 class="text-lg font-semibold mb-2">ARABESCATO VIOLA</h3>
299
+ <div class="flex justify-between items-center">
300
+ <span class="text-gray-600">Porcelain</span>
301
+ <button class="text-yellow-600 hover:text-yellow-700">
302
+ <i class="far fa-heart"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Product Card 3 -->
309
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
310
+ <div class="relative overflow-hidden">
311
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/BORGHETTO_Porcelain-SLabs-rotated-270x270_c.jpg" alt="BORGHETTO" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
312
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
313
+ <a href="https://www.classicquartzstone.com/borghetto-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
314
+ </div>
315
+ </div>
316
+ <div class="p-4">
317
+ <h3 class="text-lg font-semibold mb-2">BORGHETTO</h3>
318
+ <div class="flex justify-between items-center">
319
+ <span class="text-gray-600">Porcelain</span>
320
+ <button class="text-yellow-600 hover:text-yellow-700">
321
+ <i class="far fa-heart"></i>
322
+ </button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Product Card 4 -->
328
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
329
+ <div class="relative overflow-hidden">
330
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CALACATTA-DORATO_Porcelain-Slabs-rotated-270x270_c.jpg" alt="CALACATTA DORATO" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
331
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
332
+ <a href="https://www.classicquartzstone.com/calacatta-dorato-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
333
+ </div>
334
+ </div>
335
+ <div class="p-4">
336
+ <h3 class="text-lg font-semibold mb-2">CALACATTA DORATO</h3>
337
+ <div class="flex justify-between items-center">
338
+ <span class="text-gray-600">Porcelain</span>
339
+ <button class="text-yellow-600 hover:text-yellow-700">
340
+ <i class="far fa-heart"></i>
341
+ </button>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Product Card 5 -->
347
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
348
+ <div class="relative overflow-hidden">
349
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CALACATTA-ORO-Porcelain-Slabs-rotated-270x270_c.jpg" alt="CALACATTA ORO" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
350
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
351
+ <a href="https://www.classicquartzstone.com/calacatta-oro-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
352
+ </div>
353
+ </div>
354
+ <div class="p-4">
355
+ <h3 class="text-lg font-semibold mb-2">CALACATTA ORO</h3>
356
+ <div class="flex justify-between items-center">
357
+ <span class="text-gray-600">Porcelain</span>
358
+ <button class="text-yellow-600 hover:text-yellow-700">
359
+ <i class="far fa-heart"></i>
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Product Card 6 -->
366
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden relative">
367
+ <div class="relative overflow-hidden">
368
+ <img src="https://www.classicquartzstone.com/wp-content/uploads/2024/06/CARAVAGGIO-GOLD_-Porcelain-Slabs-rotated-270x270_c.jpg" alt="CARAVAGGIO GOLD" class="w-full h-64 object-cover transition duration-300 hover:scale-105">
369
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition duration-300">
370
+ <a href="https://www.classicquartzstone.com/caravaggio-gold-porcelain/" class="bg-white text-gray-800 px-4 py-2 rounded-md font-medium hover:bg-yellow-500 transition">View Details</a>
371
+ </div>
372
+ </div>
373
+ <div class="p-4">
374
+ <h3 class="text-lg font-semibold mb-2">CARAVAGGIO GOLD</h3>
375
+ <div class="flex justify-between items-center">
376
+ <span class="text-gray-600">Porcelain</span>
377
+ <button class="text-yellow-600 hover:text-yellow-700">
378
+ <i class="far fa-heart"></i>
379
+ </button>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Pagination -->
386
+ <div class="flex justify-center mt-8">
387
+ <nav class="inline-flex rounded-md shadow">
388
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium rounded-l-md hover:bg-gray-50">Previous</a>
389
+ <a href="#" class="px-4 py-2 border-t border-b border-gray-300 bg-yellow-500 text-white font-medium">1</a>
390
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50">2</a>
391
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50">3</a>
392
+ <a href="#" class="px-4 py-2 border border-gray-300 bg-white text-gray-700 font-medium rounded-r-md hover:bg-gray-50">Next</a>
393
+ </nav>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Footer -->
400
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
401
+ <div class="container mx-auto px-4">
402
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
403
+ <div>
404
+ <h3 class="text-xl font-bold mb-4">CLASSIC QUARTZ STONE</h3>
405
+ <p class="mb-2">Unit 7, Nimrod Industrial Estate</p>
406
+ <p class="mb-2">Reading, RG2 0EB</p>
407
+ <p class="mb-4">Phone: (+44) 0118 986 1113</p>
408
+ <p>info@classicquartzstone.com</p>
409
+ </div>
410
+
411
+ <div>
412
+ <h3 class="text-xl font-bold mb-4">QUICK LINKS</h3>
413
+ <ul class="space-y-2">
414
+ <li><a href="#" class="hover:text-yellow-400 transition">Home</a></li>
415
+ <li><a href="#" class="hover:text-yellow-400 transition">About Us</a></li>
416
+ <li><a href="#" class="hover:text-yellow-400 transition">Our Products</a></li>
417
+ <li><a href="#" class="hover:text-yellow-400 transition">Quartz Slab Designs</a></li>
418
+ <li><a href="#" class="hover:text-yellow-400 transition">Contact</a></li>
419
+ </ul>
420
+ </div>
421
+
422
+ <div>
423
+ <h3 class="text-xl font-bold mb-4">FOLLOW US</h3>
424
+ <div class="flex space-x-4 mb-4">
425
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition">
426
+ <i class="fab fa-facebook-f"></i>
427
+ </a>
428
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition">
429
+ <i class="fab fa-google"></i>
430
+ </a>
431
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-yellow-500 transition">
432
+ <i class="fab fa-instagram"></i>
433
+ </a>
434
+ </div>
435
+ <p class="text-gray-400">Subscribe to our newsletter</p>
436
+ <div class="mt-2 flex">
437
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-800">
438
+ <button class="bg-yellow-500 text-white px-4 py-2 rounded-r-md hover:bg-yellow-600 transition">Subscribe</button>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="border-t border-gray-700 pt-6">
444
+ <div class="flex flex-col md:flex-row justify-between items-center">
445
+ <p class="text-gray-400 mb-4 md:mb-0">© 2025 CLASSIC QUARTZ STONE | ALL RIGHTS RESERVED</p>
446
+ <div class="flex space-x-4">
447
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">BLOG</a>
448
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">TERMS & CONDITIONS</a>
449
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">PRIVACY POLICY</a>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </footer>
455
+
456
+ <!-- Back to Top Button -->
457
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-yellow-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-600 transition opacity-0 invisible">
458
+ <i class="fas fa-arrow-up"></i>
459
+ </button>
460
+
461
+ <script>
462
+ // Toggle filter sections
463
+ function toggleFilter(filterId) {
464
+ const filter = document.getElementById(`${filterId}-filter`);
465
+ const toggle = document.querySelector(`[onclick="toggleFilter('${filterId}')"]`);
466
+
467
+ filter.classList.toggle('collapsed');
468
+ toggle.classList.toggle('collapsed');
469
+ }
470
+
471
+ // Initialize all filters as collapsed
472
+ document.addEventListener('DOMContentLoaded', function() {
473
+ const filters = ['color', 'range', 'style'];
474
+ filters.forEach(filterId => {
475
+ const filter = document.getElementById(`${filterId}-filter`);
476
+ const toggle = document.querySelector(`[onclick="toggleFilter('${filterId}')"]`);
477
+
478
+ filter.classList.add('collapsed');
479
+ toggle.classList.add('collapsed');
480
+ });
481
+
482
+ // Back to top button
483
+ const backToTopButton = document.getElementById('back-to-top');
484
+
485
+ window.addEventListener('scroll', function() {
486
+ if (window.pageYOffset > 300) {
487
+ backToTopButton.classList.remove('opacity-0', 'invisible');
488
+ backToTopButton.classList.add('opacity-100', 'visible');
489
+ } else {
490
+ backToTopButton.classList.remove('opacity-100', 'visible');
491
+ backToTopButton.classList.add('opacity-0', 'invisible');
492
+ }
493
+ });
494
+
495
+ backToTopButton.addEventListener('click', function() {
496
+ window.scrollTo({
497
+ top: 0,
498
+ behavior: 'smooth'
499
+ });
500
+ });
501
+ });
502
+ </script>
503
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WizardImon/cstone-category" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
+ </html>