oussama123456789/hyperlink-haven
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>HyperLink Haven</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 100: '#d1e8ff',17 500: '#3b82f6',18 900: '#1e3a8a',19 },20 secondary: {21 100: '#f0fdf4',22 500: '#10b981',23 900: '#064e3b',24 }25 }26 }27 }28 }29 </script>30 <style>31 .link-card:hover {32 transform: translateY(-5px);33 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);34 }35 .nav-link:hover {36 color: #3b82f6;37 }38 </style>39</head>40<body class="bg-gray-50 min-h-screen">41 <!-- Navigation -->42 <nav class="bg-white shadow-sm">43 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">44 <div class="flex justify-between h-16">45 <div class="flex items-center">46 <i data-feather="link" class="text-primary-500"></i>47 <span class="ml-2 text-xl font-semibold text-gray-900">HyperLink Haven</span>48 </div>49 <div class="hidden md:flex items-center space-x-8">50 <a href="#" class="nav-link text-gray-700 hover:text-primary-500 transition-colors">Home</a>51 <a href="#" class="nav-link text-gray-700 hover:text-primary-500 transition-colors">Collections</a>52 <a href="#" class="nav-link text-gray-700 hover:text-primary-500 transition-colors">About</a>53 <a href="#" class="nav-link text-gray-700 hover:text-primary-500 transition-colors">Contact</a>54 </div>55 <div class="flex items-center">56 <button class="p-2 rounded-full bg-primary-100 text-primary-500 hover:bg-primary-200 transition-colors">57 <i data-feather="user"></i>58 </button>59 </div>60 </div>61 </div>62 </nav>63 64 <!-- Hero Section -->65 <header class="bg-gradient-to-r from-primary-100 to-secondary-100 py-20">66 <div class="max-w-4xl mx-auto text-center px-4">67 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Your Ultimate Link Collection</h1>68 <p class="text-xl text-gray-700 mb-8">Organize, share, and access your favorite links from anywhere</p>69 <div class="flex justify-center space-x-4">70 <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">Get Started</a>71 <a href="#" class="border border-gray-300 hover:bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors">Learn More</a>72 </div>73 </div>74 </header>75 76 <!-- Main Content -->77 <main class="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">78 <!-- Categories Section -->79 <section class="mb-16">80 <h2 class="text-2xl font-bold text-gray-900 mb-8">Browse Categories</h2>81 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">82 <a href="#" class="link-card bg-white rounded-lg shadow-md p-6 flex items-center transition-all duration-300">83 <div class="bg-primary-100 p-3 rounded-full mr-4">84 <i data-feather="globe" class="text-primary-500"></i>85 </div>86 <div>87 <h3 class="font-semibold text-gray-900">Web Development</h3>88 <p class="text-sm text-gray-500">42 links</p>89 </div>90 </a>91 <a href="#" class="link-card bg-white rounded-lg shadow-md p-6 flex items-center transition-all duration-300">92 <div class="bg-secondary-100 p-3 rounded-full mr-4">93 <i data-feather="code" class="text-secondary-500"></i>94 </div>95 <div>96 <h3 class="font-semibold text-gray-900">Programming</h3>97 <p class="text-sm text-gray-500">36 links</p>98 </div>99 </a>100 <a href="#" class="link-card bg-white rounded-lg shadow-md p-6 flex items-center transition-all duration-300">101 <div class="bg-yellow-100 p-3 rounded-full mr-4">102 <i data-feather="book" class="text-yellow-500"></i>103 </div>104 <div>105 <h3 class="font-semibold text-gray-900">Learning</h3>106 <p class="text-sm text-gray-500">28 links</p>107 </div>108 </a>109 <a href="#" class="link-card bg-white rounded-lg shadow-md p-6 flex items-center transition-all duration-300">110 <div class="bg-purple-100 p-3 rounded-full mr-4">111 <i data-feather="tool" class="text-purple-500"></i>112 </div>113 <div>114 <h3 class="font-semibold text-gray-900">Tools</h3>115 <p class="text-sm text-gray-500">31 links</p>116 </div>117 </a>118 </div>119 </section>120 121 <!-- Featured Links -->122 <section>123 <div class="flex justify-between items-center mb-8">124 <h2 class="text-2xl font-bold text-gray-900">Featured Links</h2>125 <a href="#" class="text-primary-500 hover:text-primary-600 font-medium">View All</a>126 </div>127 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">128 <a href="#" class="link-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">129 <div class="h-40 bg-primary-100 flex items-center justify-center">130 <i data-feather="link-2" class="text-primary-500" width="48" height="48"></i>131 </div>132 <div class="p-6">133 <h3 class="font-bold text-lg text-gray-900 mb-2">Awesome UI Resources</h3>134 <p class="text-gray-600 mb-4">Collection of the best UI design resources and tools</p>135 <div class="flex justify-between items-center">136 <span class="text-sm text-gray-500">Updated 2 days ago</span>137 <span class="text-xs px-2 py-1 bg-gray-100 rounded-full text-gray-700">Web Design</span>138 </div>139 </div>140 </a>141 <a href="#" class="link-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">142 <div class="h-40 bg-secondary-100 flex items-center justify-center">143 <i data-feather="code" class="text-secondary-500" width="48" height="48"></i>144 </div>145 <div class="p-6">146 <h3 class="font-bold text-lg text-gray-900 mb-2">JavaScript Libraries</h3>147 <p class="text-gray-600 mb-4">Essential JS libraries for modern web development</p>148 <div class="flex justify-between items-center">149 <span class="text-sm text-gray-500">Updated 1 week ago</span>150 <span class="text-xs px-2 py-1 bg-gray-100 rounded-full text-gray-700">Programming</span>151 </div>152 </div>153 </a>154 </div>155 </section>156 </main>157 158 <!-- Footer -->159 <footer class="bg-gray-800 text-white py-12">160 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">161 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">162 <div>163 <h3 class="text-lg font-semibold mb-4">HyperLink Haven</h3>164 <p class="text-gray-400">Organize and share your favorite links with the world.</p>165 </div>166 <div>167 <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">Links</h4>168 <ul class="space-y-2">169 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Home</a></li>170 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Features</a></li>171 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Pricing</a></li>172 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">About</a></li>173 </ul>174 </div>175 <div>176 <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">Resources</h4>177 <ul class="space-y-2">178 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Documentation</a></li>179 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Tutorials</a></li>180 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">API</a></li>181 <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Help Center</a></li>182 </ul>183 </div>184 <div>185 <h4 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">Connect</h4>186 <div class="flex space-x-4">187 <a href="#" class="text-gray-300 hover:text-white transition-colors"><i data-feather="twitter"></i></a>188 <a href="#" class="text-gray-300 hover:text-white transition-colors"><i data-feather="facebook"></i></a>189 <a href="#" class="text-gray-300 hover:text-white transition-colors"><i data-feather="instagram"></i></a>190 <a href="#" class="text-gray-300 hover:text-white transition-colors"><i data-feather="github"></i></a>191 </div>192 </div>193 </div>194 <div class="mt-12 pt-8 border-t border-gray-700 text-center text-gray-400 text-sm">195 <p>© 2023 HyperLink Haven. All rights reserved.</p>196 </div>197 </div>198 </footer>199 200 <script>201 feather.replace();202 </script>203</body>204</html>205