schlafstern/handmade-harmony-haven
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Patterns | Handmade Harmony Haven</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10</head>11<body class="bg-gray-50 text-gray-900 font-sans antialiased">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-12">15 <div class="text-center mb-12">16 <h1 class="text-4xl font-bold mb-4">Crochet & Knitting Patterns</h1>17 <p class="text-lg text-gray-600 max-w-2xl mx-auto">Discover beautiful patterns for all skill levels. Instant download after purchase.</p>18 </div>19 20 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">21 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">22 <div class="h-64 bg-gradient-to-br from-pink-200 to-purple-200 flex items-center justify-center">23 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>24 </div>25 <div class="p-6">26 <div class="flex justify-between items-start mb-2">27 <h3 class="text-xl font-semibold">Cozy Winter Blanket</h3>28 <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Beginner</span>29 </div>30 <p class="text-gray-600 mb-4">Beautiful chunky knit blanket perfect for winter nights.</p>31 <div class="flex justify-between items-center">32 <span class="font-bold text-primary-600">$8.99</span>33 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">34 <i data-feather="shopping-cart" class="w-4 h-4"></i>35 <span>Add to Cart</span>36 </button>37 </div>38 </div>39 </div>40 41 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">42 <div class="h-64 bg-gradient-to-br from-blue-200 to-green-200 flex items-center justify-center">43 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>44 </div>45 <div class="p-6">46 <div class="flex justify-between items-start mb-2">47 <h3 class="text-xl font-semibold">Amigurumi Bunny</h3>48 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Intermediate</span>49 </div>50 <p class="text-gray-600 mb-4">Adorable crochet bunny plushie with step-by-step photos.</p>51 <div class="flex justify-between items-center">52 <span class="font-bold text-primary-600">$6.99</span>53 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">54 <i data-feather="shopping-cart" class="w-4 h-4"></i>55 <span>Add to Cart</span>56 </button>57 </div>58 </div>59 </div>60 61 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">62 <div class="h-64 bg-gradient-to-br from-purple-200 to-indigo-200 flex items-center justify-center">63 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>64 </div>65 <div class="p-6">66 <div class="flex justify-between items-start mb-2">67 <h3 class="text-xl font-semibold">Lace Shawl</h3>68 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Advanced</span>69 </div>70 <p class="text-gray-600 mb-4">Elegant lace shawl pattern with detailed charts.</p>71 <div class="flex justify-between items-center">72 <span class="font-bold text-primary-600">$10.99</span>73 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">74 <i data-feather="shopping-cart" class="w-4 h-4"></i>75 <span>Add to Cart</span>76 </button>77 </div>78 </div>79 </div>80 81 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">82 <div class="h-64 bg-gradient-to-br from-green-200 to-yellow-200 flex items-center justify-center">83 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>84 </div>85 <div class="p-6">86 <div class="flex justify-between items-start mb-2">87 <h3 class="text-xl font-semibold">Baby Booties</h3>88 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Beginner</span>89 </div>90 <p class="text-gray-600 mb-4">Quick and easy baby booties in three different sizes.</p>91 <div class="flex justify-between items-center">92 <span class="font-bold text-primary-600">$5.99</span>93 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">94 <i data-feather="shopping-cart" class="w-4 h-4"></i>95 <span>Add to Cart</span>96 </button>97 </div>98 </div>99 </div>100 101 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">102 <div class="h-64 bg-gradient-to-br from-yellow-200 to-orange-200 flex items-center justify-center">103 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>104 </div>105 <div class="p-6">106 <div class="flex justify-between items-start mb-2">107 <h3 class="text-xl font-semibold">Market Bag</h3>108 <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Intermediate</span>109 </div>110 <p class="text-gray-600 mb-4">Reusable cotton market bag with sturdy handles.</p>111 <div class="flex justify-between items-center">112 <span class="font-bold text-primary-600">$7.99</span>113 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">114 <i data-feather="shopping-cart" class="w-4 h-4"></i>115 <span>Add to Cart</span>116 </button>117 </div>118 </div>119 </div>120 121 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">122 <div class="h-64 bg-gradient-to-br from-red-200 to-pink-200 flex items-center justify-center">123 <i data-feather="file-text" class="w-12 h-12 text-gray-700"></i>124 </div>125 <div class="p-6">126 <div class="flex justify-between items-start mb-2">127 <h3 class="text-xl font-semibold">Cable Knit Sweater</h3>128 <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Advanced</span>129 </div>130 <p class="text-gray-600 mb-4">Classic cable knit sweater pattern with multiple sizes.</p>131 <div class="flex justify-between items-center">132 <span class="font-bold text-primary-600">$12.99</span>133 <button class="text-primary-600 hover:text-primary-800 flex items-center gap-1">134 <i data-feather="shopping-cart" class="w-4 h-4"></i>135 <span>Add to Cart</span>136 </button>137 </div>138 </div>139 </div>140 </div>141 </main>142 143 <custom-footer></custom-footer>144 145 <script src="components/navbar.js"></script>146 <script src="components/footer.js"></script>147 <script src="script.js"></script>148 <script>149 feather.replace();150 </script>151</body>152</html>