dav1dbartos/hookedonhandmade-hooks
0
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>PVhackovani | Háčkované věci</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');13 body {14 font-family: 'Poppins', sans-serif;15 }16 .handmade-bg {17 background-image: url('http://static.photos/textures/1200x630/42');18 background-size: cover;19 background-position: center;20 background-blend-mode: overlay;21 }22 .product-card:hover {23 transform: translateY(-5px);24 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);25 }26 .yarn-animation {27 animation: float 6s ease-in-out infinite;28 }29 @keyframes float {30 0%, 100% { transform: translateY(0); }31 50% { transform: translateY(-15px); }32 }33 </style>34</head>35<body class="bg-amber-50">36 <!-- Navigation -->37 <nav class="bg-white shadow-sm sticky top-0 z-50">38 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">39 <div class="flex justify-between h-16">40 <div class="flex items-center">41 <img src="http://static.photos/craft/200x200/1" class="w-8 h-8 rounded-full mr-2" alt="Crochet Logo">42<span class="text-xl font-bold text-amber-900 font-serif">PVhackovani</span>43 </div>44 <div class="flex items-center space-x-8">45 <a href="#" class="text-amber-900 hover:text-amber-600 transition">Home</a>46 <a href="#" class="text-amber-900 hover:text-amber-600 transition">About</a>47 </div>48 </div>49 </div>50 </nav>51 52 <!-- Hero Section -->53 <section class="handmade-bg bg-amber-100 py-20">54 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">55 <div class="md:flex items-center">56 <div class="md:w-1/2 mb-10 md:mb-0">57 <h1 class="text-4xl md:text-5xl font-bold text-amber-900 mb-4 font-serif">Handcrafted Crochet Treasures</h1>58 <p class="text-lg text-amber-800 mb-8">Each stitch woven with love and care. Discover unique handmade crochet items that add warmth to your life.</p>59</div>60 <div class="md:w-1/2 flex justify-center">61 <div class="relative yarn-animation">62 <img src="http://static.photos/craft/640x360/1" alt="Crochet yarn balls" class="rounded-lg shadow-xl w-full max-w-md">63 </div>64 </div>65 </div>66 </div>67 </section>68 <!-- Gallery Section -->69 <section class="py-16 bg-white">70 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">71 <div class="text-center mb-12">72 <h2 class="text-3xl font-bold text-amber-900 mb-4 font-serif">Our Creations Gallery</h2>73 <p class="text-amber-700 max-w-2xl mx-auto">Browse our collection of handcrafted crochet items</p>74 </div>75 76 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">77 <!-- Gallery Items -->78 79 80 81 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg" 82 data-images='["http://static.photos/craft/640x360/1", "http://static.photos/craft/640x360/101", "http://static.photos/craft/640x360/102"]'>83 <div class="relative overflow-hidden h-48">84 <img src="http://static.photos/craft/640x360/1" alt="Crochet Blanket" class="w-full h-full object-cover transition duration-500 hover:scale-110">85 <div class="absolute inset-0 flex items-center justify-between px-4 opacity-100">86 <button class="image-prev bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-70 transition">87 <i data-feather="chevron-left" class="w-5 h-5"></i>88 </button>89 <button class="image-next bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-70 transition">90 <i data-feather="chevron-right" class="w-5 h-5"></i>91 </button>92 </div>93 </div>94 <div class="p-4">95 <h3 class="font-bold text-amber-900">Cozy Blanket</h3>96 <p class="text-sm text-gray-600">View Gallery</p>97 </div>98 </div>99 100 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg"101 data-images='["http://static.photos/craft/640x360/2", "http://static.photos/craft/640x360/201", "http://static.photos/craft/640x360/202", "http://static.photos/craft/640x360/203", "http://static.photos/craft/640x360/204"]'>102 <div class="relative overflow-hidden h-48">103 <img src="http://static.photos/craft/640x360/2" alt="Amigurumi Bunny" class="w-full h-full object-cover transition duration-500 hover:scale-110">104 <div class="absolute inset-0 flex items-center justify-between px-4 opacity-100">105 <button class="image-prev bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-70 transition">106 <i data-feather="chevron-left" class="w-5 h-5"></i>107 </button>108 <button class="image-next bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-70 transition">109 <i data-feather="chevron-right" class="w-5 h-5"></i>110 </button>111 </div>112 </div>113 <div class="p-4">114 <h3 class="font-bold text-amber-900">Amigurumi Bunny</h3>115 <p class="text-sm text-gray-600">View Gallery</p>116 </div>117 </div>118 119 120 121 122 123 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">124 <div class="relative overflow-hidden h-48">125 <img src="http://static.photos/craft/640x360/2" alt="Amigurumi Bunny" class="w-full h-full object-cover transition duration-500 hover:scale-110">126 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">127 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>128 </div>129 </div>130 <div class="p-4">131 <h3 class="font-bold text-amber-900">Amigurumi Bunny</h3>132 <p class="text-sm text-gray-600">View Gallery</p>133 </div>134 </div>135 136 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">137 <div class="relative overflow-hidden h-48">138 <img src="http://static.photos/craft/640x360/3" alt="Winter Beanie" class="w-full h-full object-cover transition duration-500 hover:scale-110">139 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">140 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>141 </div>142 </div>143 <div class="p-4">144 <h3 class="font-bold text-amber-900">Winter Beanie</h3>145 <p class="text-sm text-gray-600">View Gallery</p>146</div>147 </div>148 149 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">150 <div class="relative overflow-hidden h-48">151 <img src="http://static.photos/craft/640x360/4" alt="Crochet Scarf" class="w-full h-full object-cover transition duration-500 hover:scale-110">152 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">153 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>154 </div>155 </div>156 <div class="p-4">157 <h3 class="font-bold text-amber-900">Cozy Scarf</h3>158 <p class="text-sm text-gray-600">View Gallery</p>159</div>160 </div>161 162 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">163 <div class="relative overflow-hidden h-48">164 <img src="http://static.photos/craft/640x360/5" alt="Granny Square Bag" class="w-full h-full object-cover transition duration-500 hover:scale-110">165 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">166 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>167 </div>168 </div>169 <div class="p-4">170 <h3 class="font-bold text-amber-900">Granny Square Bag</h3>171 <p class="text-sm text-gray-600">View Gallery</p>172</div>173 </div>174 175 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">176 <div class="relative overflow-hidden h-48">177 <img src="http://static.photos/craft/640x360/6" alt="Baby Booties" class="w-full h-full object-cover transition duration-500 hover:scale-110">178 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">179 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>180 </div>181 </div>182 <div class="p-4">183 <h3 class="font-bold text-amber-900">Baby Booties</h3>184 <p class="text-sm text-gray-600">View Gallery</p>185</div>186 </div>187 188 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">189 <div class="relative overflow-hidden h-48">190 <img src="http://static.photos/craft/640x360/7" alt="Market Tote" class="w-full h-full object-cover transition duration-500 hover:scale-110">191 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">192 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>193 </div>194 </div>195 <div class="p-4">196 <h3 class="font-bold text-amber-900">Market Tote</h3>197 <p class="text-sm text-gray-600">View Gallery</p>198</div>199 </div>200 201 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">202 <div class="relative overflow-hidden h-48">203 <img src="http://static.photos/craft/640x360/8" alt="Cat Ear Headband" class="w-full h-full object-cover transition duration-500 hover:scale-110">204 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">205 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>206 </div>207 </div>208 <div class="p-4">209 <h3 class="font-bold text-amber-900">Cat Ear Headband</h3>210 <p class="text-sm text-gray-600">View Gallery</p>211</div>212 </div>213 214 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">215 <div class="relative overflow-hidden h-48">216 <img src="http://static.photos/craft/640x360/9" alt="Coffee Cozy" class="w-full h-full object-cover transition duration-500 hover:scale-110">217 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">218 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>219 </div>220 </div>221 <div class="p-4">222 <h3 class="font-bold text-amber-900">Coffee Cozy</h3>223 <p class="text-sm text-gray-600">View Gallery</p>224</div>225 </div>226 227 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">228 <div class="relative overflow-hidden h-48">229 <img src="http://static.photos/craft/640x360/10" alt="Potholder Set" class="w-full h-full object-cover transition duration-500 hover:scale-110">230 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">231 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>232 </div>233 </div>234 <div class="p-4">235 <h3 class="font-bold text-amber-900">Potholder Set</h3>236 <p class="text-sm text-gray-600">View Gallery</p>237</div>238 </div>239 240 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">241 <div class="relative overflow-hidden h-48">242 <img src="http://static.photos/craft/640x360/11" alt="Basket" class="w-full h-full object-cover transition duration-500 hover:scale-110">243 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">244 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>245 </div>246 </div>247 <div class="p-4">248 <h3 class="font-bold text-amber-900">Storage Basket</h3>249 <p class="text-sm text-gray-600">View Gallery</p>250</div>251 </div>252 253 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">254 <div class="relative overflow-hidden h-48">255 <img src="http://static.photos/craft/640x360/12" alt="Headband" class="w-full h-full object-cover transition duration-500 hover:scale-110">256 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">257 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>258 </div>259 </div>260 <div class="p-4">261 <h3 class="font-bold text-amber-900">Floral Headband</h3>262 <p class="text-sm text-gray-600">View Gallery</p>263</div>264 </div>265 266 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">267 <div class="relative overflow-hidden h-48">268 <img src="http://static.photos/craft/640x360/13" alt="Amigurumi Bear" class="w-full h-full object-cover transition duration-500 hover:scale-110">269 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">270 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>271 </div>272 </div>273 <div class="p-4">274 <h3 class="font-bold text-amber-900">Amigurumi Bear</h3>275 <p class="text-sm text-gray-600">View Gallery</p>276</div>277 </div>278 279 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">280 <div class="relative overflow-hidden h-48">281 <img src="http://static.photos/craft/640x360/14" alt="Lace Shawl" class="w-full h-full object-cover transition duration-500 hover:scale-110">282 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">283 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>284 </div>285 </div>286 <div class="p-4">287 <h3 class="font-bold text-amber-900">Lace Shawl</h3>288 <p class="text-sm text-gray-600">View Gallery</p>289</div>290 </div>291 292 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">293 <div class="relative overflow-hidden h-48">294 <img src="http://static.photos/craft/640x360/15" alt="Mittens" class="w-full h-full object-cover transition duration-500 hover:scale-110">295 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">296 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>297 </div>298 </div>299 <div class="p-4">300 <h3 class="font-bold text-amber-900">Wool Mittens</h3>301 <p class="text-sm text-gray-600">View Gallery</p>302</div>303 </div>304 305 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">306 <div class="relative overflow-hidden h-48">307 <img src="http://static.photos/craft/640x360/16" alt="Coasters" class="w-full h-full object-cover transition duration-500 hover:scale-110">308 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">309 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>310 </div>311 </div>312 <div class="p-4">313 <h3 class="font-bold text-amber-900">Coaster Set</h3>314 <p class="text-sm text-gray-600">View Gallery</p>315</div>316 </div>317 318 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">319 <div class="relative overflow-hidden h-48">320 <img src="http://static.photos/craft/640x360/17" alt="Bookmark" class="w-full h-full object-cover transition duration-500 hover:scale-110">321 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">322 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>323 </div>324 </div>325 <div class="p-4">326 <h3 class="font-bold text-amber-900">Bookmark Set</h3>327 <p class="text-sm text-gray-600">View Gallery</p>328</div>329 </div>330 331 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">332 <div class="relative overflow-hidden h-48">333 <img src="http://static.photos/craft/640x360/18" alt="Bath Mat" class="w-full h-full object-cover transition duration-500 hover:scale-110">334 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">335 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>336 </div>337 </div>338 <div class="p-4">339 <h3 class="font-bold text-amber-900">Bath Mat</h3>340 <p class="text-sm text-gray-600">View Gallery</p>341</div>342 </div>343 344 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">345 <div class="relative overflow-hidden h-48">346 <img src="http://static.photos/craft/640x360/19" alt="Sun Hat" class="w-full h-full object-cover transition duration-500 hover:scale-110">347 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">348 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>349 </div>350 </div>351 <div class="p-4">352 <h3 class="font-bold text-amber-900">Sun Hat</h3>353 <p class="text-sm text-gray-600">View Gallery</p>354</div>355 </div>356 357 <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md transition duration-300 hover:shadow-lg">358 <div class="relative overflow-hidden h-48">359 <img src="http://static.photos/craft/640x360/20" alt="Plant Hanger" class="w-full h-full object-cover transition duration-500 hover:scale-110">360 <div class="absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center opacity-0 hover:opacity-100 hover:bg-opacity-20 transition">361 <button class="bg-amber-600 text-white px-4 py-2 rounded-full">View Details</button>362 </div>363 </div>364 <div class="p-4">365 <h3 class="font-bold text-amber-900">Plant Hanger</h3>366 <p class="text-sm text-gray-600">View Gallery</p>367</div>368 </div>369 </div>370 371 </div>372 </section>373<!-- Footer -->374 <footer class="bg-amber-800 text-amber-100 py-12">375 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">376 <div class="grid grid-cols-1 md:grid-cols-2 gap-40">377 <div>378 <h3 class="text-lg font-bold mb-4 flex items-center">379 <i data-feather="package" class="w-6 h-6 mr-2"></i> HookedOnHandmade380 </h3>381 <p class="text-sm">Handcrafted crochet items made with love and premium materials.</p>382 </div>383 <div>384 <h3 class="text-lg font-bold mb-4">Kontakt</h3>385 <div class="flex space-x-4 mb-4">386 </div>387 <p class="text-sm mb-2">388 <i data-feather="mail" class="w-4 h-4 inline mr-2"></i> hello@hookedonhandmade.com389 </p>390 <p class="text-sm">391 <i data-feather="phone" class="w-4 h-4 inline mr-2"></i> (555) 123-4567392 </p>393 </div>394 </div>395 <div class="border-t border-amber-700 mt-12 pt-8 text-sm text-center">396 <p>© 2025 PVhackovani</p>397 </div>398</div>399 </footer>400 <script>401 feather.replace();402 403 // Initialize image cycling for gallery items404 document.querySelectorAll('.gallery-item').forEach(item => {405 // Attempt to parse the data-images attribute.406 // Use an empty array if the attribute is missing or invalid.407 const imagesAttr = item.getAttribute('data-images');408 let images = [];409 410 if (imagesAttr) {411 try {412 images = JSON.parse(imagesAttr);413 } catch (e) {414 console.error("Error parsing data-images JSON for a gallery item:", e);415 }416 }417 418 const imgElement = item.querySelector('img');419 const imageNextButton = item.querySelector('.image-next');420 const imagePrevButton = item.querySelector('.image-prev');421 422 // Only set up rotation if we have more than one image AND the navigation buttons exist.423 if (images.length > 1 && imgElement && imageNextButton && imagePrevButton) {424 let currentImageIndex = 0;425 426 imageNextButton.addEventListener('click', (e) => {427 e.stopPropagation(); // Stop event from propagating (e.g., to the parent item link)428 currentImageIndex = (currentImageIndex + 1) % images.length;429 imgElement.src = images[currentImageIndex];430 });431 432 imagePrevButton.addEventListener('click', (e) => {433 e.stopPropagation(); // Stop event from propagating434 // The formula handles negative indexing for seamless loop435 currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;436 imgElement.src = images[currentImageIndex];437 });438 } else {439 // Optional: Hide navigation buttons if there's only one image or none specified440 // This ensures items without rotation don't show the buttons441 if (imageNextButton) imageNextButton.parentElement.style.display = 'none';442 }443 });444 445 // Simple animation for scroll reveal446document.addEventListener('DOMContentLoaded', function() {447 const observer = new IntersectionObserver((entries) => {448 entries.forEach(entry => {449 if (entry.isIntersecting) {450 entry.target.classList.add('animate-fadeIn');451 }452 });453 }, {454 threshold: 0.1455 });456 457 document.querySelectorAll('.product-card, section').forEach((section) => {458 observer.observe(section);459 });460 });461 </script>462</body>463</html>464