|
|
<!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> |
