| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nifty Tech Finds Apps</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| padding: 2rem; |
| } |
| |
| .card { |
| transition: all 0.3s ease; |
| transform: translateY(0); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| background: rgba(255,255,255,0.9); |
| backdrop-filter: blur(10px); |
| border-radius: 16px; |
| overflow: hidden; |
| border: 1px solid rgba(255,255,255,0.3); |
| } |
| |
| .card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
| } |
| |
| .card-image { |
| height: 200px; |
| background-size: cover; |
| background-position: center; |
| transition: all 0.5s ease; |
| } |
| |
| .card:hover .card-image { |
| transform: scale(1.05); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .btn { |
| transition: all 0.3s ease; |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border-radius: 50px; |
| padding: 0.75rem 1.5rem; |
| font-weight: 500; |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); |
| } |
| |
| .tag { |
| display: inline-block; |
| padding: 0.25rem 0.75rem; |
| border-radius: 50px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| margin-right: 0.5rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.6s ease forwards; |
| } |
| |
| .delay-1 { |
| animation-delay: 0.2s; |
| } |
| |
| .delay-2 { |
| animation-delay: 0.4s; |
| } |
| |
| .delay-3 { |
| animation-delay: 0.6s; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="max-w-6xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">Nifty Tech Finds</h1> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Discover innovative web apps designed to enhance your well-being, self-discovery, and creativity.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="card animate-fade-in delay-1"> |
| <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> |
| <div class="p-6"> |
| <div class="flex flex-wrap mb-4"> |
| <span class="tag bg-blue-100 text-blue-800">Wellness</span> |
| <span class="tag bg-purple-100 text-purple-800">Mindfulness</span> |
| <span class="tag bg-green-100 text-green-800">Relaxation</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-gray-800">Meditation Tool</h3> |
| <p class="text-gray-600 mb-6">A beautifully designed meditation companion that helps you find peace and focus through guided sessions, breathing exercises, and ambient sounds.</p> |
| <div class="flex justify-between items-center"> |
| <a href="https://niftytechfinds.com/meditation-tool/" target="_blank" class="btn"> |
| <i class="fas fa-external-link-alt mr-2"></i> Try It Now |
| </a> |
| <div class="flex space-x-2 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card animate-fade-in delay-2"> |
| <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> |
| <div class="p-6"> |
| <div class="flex flex-wrap mb-4"> |
| <span class="tag bg-red-100 text-red-800">Psychology</span> |
| <span class="tag bg-yellow-100 text-yellow-800">Self-Discovery</span> |
| <span class="tag bg-indigo-100 text-indigo-800">Assessment</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-gray-800">DOPE Personality Test</h3> |
| <p class="text-gray-600 mb-6">Discover your personality type with this insightful assessment based on the DOPE bird model (Dove, Owl, Peacock, Eagle). Learn about your strengths and communication style.</p> |
| <div class="flex justify-between items-center"> |
| <a href="https://niftytechfinds.com/personality-trait-dope-test/" target="_blank" class="btn"> |
| <i class="fas fa-external-link-alt mr-2"></i> Take The Test |
| </a> |
| <div class="flex space-x-2 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="far fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card animate-fade-in delay-3"> |
| <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> |
| <div class="p-6"> |
| <div class="flex flex-wrap mb-4"> |
| <span class="tag bg-pink-100 text-pink-800">Art</span> |
| <span class="tag bg-teal-100 text-teal-800">Creativity</span> |
| <span class="tag bg-orange-100 text-orange-800">Therapeutic</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-gray-800">Mandala Creator</h3> |
| <p class="text-gray-600 mb-6">A digital mandala drawing tool that combines art therapy with creative expression. Create symmetrical designs that can help reduce stress and improve focus.</p> |
| <div class="flex justify-between items-center"> |
| <a href="https://niftytechfinds.com/mandala/" target="_blank" class="btn"> |
| <i class="fas fa-paint-brush mr-2"></i> Start Creating |
| </a> |
| <div class="flex space-x-2 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 text-center"> |
| <p class="text-gray-500 mb-4">Which app will you try first?</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#" class="text-blue-500 hover:text-blue-700 transition-colors"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-pink-500 hover:text-pink-700 transition-colors"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-700 hover:text-gray-900 transition-colors"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </html> |
