| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Complete Care - Women's Wellbeing & Lifestyle Companion</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=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); |
| |
| :root { |
| --primary: #FF6B8B; |
| --secondary: #6B8CFF; |
| --accent: #FFC96B; |
| --light: #FFF5F7; |
| --dark: #333333; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| color: var(--dark); |
| background-color: #fefefe; |
| } |
| |
| .heading-font { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #FF6B8B 0%, #6B8CFF 100%); |
| } |
| |
| .category-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
| } |
| |
| .testimonial-card { |
| background: linear-gradient(to bottom right, white, #FFF5F7); |
| } |
| |
| .nav-link:hover { |
| color: var(--primary); |
| } |
| |
| .btn-primary { |
| background-color: var(--primary); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| background-color: #e05d7a; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(255, 107, 139, 0.3); |
| } |
| |
| .btn-secondary { |
| background-color: var(--secondary); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-secondary:hover { |
| background-color: #5a7ae8; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 8px rgba(107, 140, 255, 0.3); |
| } |
| |
| .feature-icon { |
| color: var(--primary); |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .article-card:hover .article-title { |
| color: var(--primary); |
| } |
| |
| .newsletter-input:focus { |
| outline: none; |
| box-shadow: 0 0 0 2px var(--primary); |
| } |
| |
| .scroll-hidden { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .scroll-hidden::-webkit-scrollbar { |
| display: none; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease forwards; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="flex items-center"> |
| <i class="fas fa-heart text-3xl mr-2" style="color: var(--primary);"></i> |
| <span class="heading-font text-2xl font-bold text-gray-800">Complete Care</span> |
| </a> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-pink-500 transition">Home</a> |
| <a href="#categories" class="nav-link text-gray-700 hover:text-pink-500 transition">Categories</a> |
| <a href="#features" class="nav-link text-gray-700 hover:text-pink-500 transition">Features</a> |
| <a href="#articles" class="nav-link text-gray-700 hover:text-pink-500 transition">Articles</a> |
| <a href="#community" class="nav-link text-gray-700 hover:text-pink-500 transition">Community</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <button class="hidden md:block btn-primary text-white px-4 py-2 rounded-full font-medium"> |
| Sign In |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero-gradient text-white py-16 md:py-24"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in" style="animation-delay: 0.2s;"> |
| <h1 class="heading-font text-4xl md:text-5xl lg:text-6xl font-bold mb-6"> |
| Your Everyday Companion for Wellbeing & Lifestyle |
| </h1> |
| <p class="text-lg md:text-xl mb-8 opacity-90"> |
| Empowering women with trusted information, inspiration, and smart tools for taking care of themselves and their homes. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="btn-primary text-white px-6 py-3 rounded-full font-medium text-lg"> |
| Explore Categories |
| </button> |
| <button class="bg-white text-pink-600 px-6 py-3 rounded-full font-medium text-lg border border-white hover:bg-transparent hover:text-white transition"> |
| Join Community |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center animate-fade-in" style="animation-delay: 0.4s;"> |
| <img src="https://images.unsplash.com/photo-1498758536662-35b82cd15e29?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Woman enjoying self-care" |
| class="rounded-xl shadow-2xl w-full max-w-md"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="categories" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Explore Our Key Categories</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto"> |
| Comprehensive resources covering all aspects of women's wellbeing and lifestyle |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-spa text-2xl text-pink-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Skin Care</h3> |
| <p class="text-gray-600 mb-4"> |
| In-depth comparisons of skincare products, expert advice, and guides tailored to your skin type. |
| </p> |
| <a href="#" class="text-pink-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-cut text-2xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Hair Care</h3> |
| <p class="text-gray-600 mb-4"> |
| Explore tips, routines, and product reviews for healthy, beautiful hair at every stage. |
| </p> |
| <a href="#" class="text-blue-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-brain text-2xl text-purple-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Mental & Physical Health</h3> |
| <p class="text-gray-600 mb-4"> |
| Guidance on maintaining emotional balance, stress relief, and daily wellness routines. |
| </p> |
| <a href="#" class="text-purple-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-running text-2xl text-green-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Fitness & Yoga</h3> |
| <p class="text-gray-600 mb-4"> |
| Home-friendly workouts, beginner yoga poses, and fitness gear suggestions for all levels. |
| </p> |
| <a href="#" class="text-green-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-tshirt text-2xl text-yellow-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Fashion & Style</h3> |
| <p class="text-gray-600 mb-4"> |
| Curated fashion tips for every occasion, seasonal styling advice, and outfit inspiration. |
| </p> |
| <a href="#" class="text-yellow-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="category-card bg-white rounded-xl p-6 shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-home text-2xl text-indigo-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Home Décor & Organization</h3> |
| <p class="text-gray-600 mb-4"> |
| Creative ideas for decorating your home and organizing spaces to create a relaxing atmosphere. |
| </p> |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> |
| Learn More <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Why Choose Complete Care?</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto"> |
| Our platform offers unique features designed to make your wellbeing journey easier and more effective |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="text-center p-6 rounded-xl bg-gray-50"> |
| <div class="feature-icon"> |
| <i class="fas fa-balance-scale"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Product Comparisons</h3> |
| <p class="text-gray-600"> |
| Side-by-side comparisons of prices, features, and user ratings to help you make informed decisions. |
| </p> |
| </div> |
| |
| |
| <div class="text-center p-6 rounded-xl bg-gray-50"> |
| <div class="feature-icon"> |
| <i class="fas fa-user-md"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Expert Advice</h3> |
| <p class="text-gray-600"> |
| Tips and insights from professionals in beauty, health, home care, and interior design. |
| </p> |
| </div> |
| |
| |
| <div class="text-center p-6 rounded-xl bg-gray-50"> |
| <div class="feature-icon"> |
| <i class="fas fa-comments"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Community Reviews</h3> |
| <p class="text-gray-600"> |
| Honest feedback and recommendations from real users who've tried products and routines. |
| </p> |
| </div> |
| |
| |
| <div class="text-center p-6 rounded-xl bg-gray-50"> |
| <div class="feature-icon"> |
| <i class="fas fa-share-alt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Social Integration</h3> |
| <p class="text-gray-600"> |
| Easily share articles and ideas through your favorite platforms and stay connected. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="articles" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="heading-font text-3xl font-bold">Popular Articles</h2> |
| <a href="#" class="text-pink-600 font-medium flex items-center"> |
| View All <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" |
| alt="Skincare products" |
| class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Skin Care</span> |
| <span class="mx-2">•</span> |
| <span>5 min read</span> |
| </div> |
| <h3 class="article-title text-xl font-bold mb-3 transition duration-300"> |
| The Ultimate Guide to Choosing the Right Moisturizer for Your Skin Type |
| </h3> |
| <p class="text-gray-600 mb-4"> |
| Learn how to select the perfect moisturizer based on your skin's unique needs and concerns. |
| </p> |
| <a href="#" class="text-pink-600 font-medium flex items-center"> |
| Read Article <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Yoga pose" |
| class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Fitness & Yoga</span> |
| <span class="mx-2">•</span> |
| <span>8 min read</span> |
| </div> |
| <h3 class="article-title text-xl font-bold mb-3 transition duration-300"> |
| 10 Yoga Poses to Relieve Stress and Improve Sleep Quality |
| </h3> |
| <p class="text-gray-600 mb-4"> |
| Simple yet effective yoga sequences you can do before bed to unwind and prepare for restful sleep. |
| </p> |
| <a href="#" class="text-pink-600 font-medium flex items-center"> |
| Read Article <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="article-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 hover:shadow-lg"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1556909212-d5b604d0c90d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Home organization" |
| class="w-full h-full object-cover transition duration-500 hover:scale-105"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 mb-2"> |
| <span>Home Organization</span> |
| <span class="mx-2">•</span> |
| <span>6 min read</span> |
| </div> |
| <h3 class="article-title text-xl font-bold mb-3 transition duration-300"> |
| Minimalist Home Organization: 5 Smart Hacks for Small Spaces |
| </h3> |
| <p class="text-gray-600 mb-4"> |
| Transform your living space with these clever organization solutions that maximize every inch. |
| </p> |
| <a href="#" class="text-pink-600 font-medium flex items-center"> |
| Read Article <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="community" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">What Our Community Says</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto"> |
| Hear from women who have transformed their wellbeing and lifestyle with Complete Care |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" |
| alt="Sarah Johnson" |
| class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-bold">Sarah Johnson</h4> |
| <p class="text-gray-500 text-sm">Marketing Executive</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "Complete Care helped me find the perfect skincare routine for my sensitive skin. The product comparisons saved me so much time and money!" |
| </p> |
| <div class="flex 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 class="testimonial-card p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" |
| alt="Priya Patel" |
| class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-bold">Priya Patel</h4> |
| <p class="text-gray-500 text-sm">Yoga Instructor</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "The fitness section has been a game-changer for my home workouts. I love the variety of routines and the expert advice on proper form." |
| </p> |
| <div class="flex 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 class="testimonial-card p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" |
| alt="Maria Gonzalez" |
| class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-bold">Maria Gonzalez</h4> |
| <p class="text-gray-500 text-sm">Interior Designer</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| "As a busy mom, the home organization tips have been invaluable. I've completely transformed my small apartment thanks to Complete Care!" |
| </p> |
| <div class="flex 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> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Join Our Community</h2> |
| <p class="text-lg mb-8 opacity-90"> |
| Subscribe to our newsletter for weekly wellbeing tips, exclusive content, and special offers |
| </p> |
| |
| <div class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> |
| <input type="email" |
| placeholder="Your email address" |
| class="newsletter-input flex-grow px-4 py-3 rounded-full text-gray-800 focus:outline-none"> |
| <button class="btn-secondary text-white px-6 py-3 rounded-full font-medium whitespace-nowrap"> |
| Subscribe Now |
| </button> |
| </div> |
| |
| <p class="text-sm mt-4 opacity-80"> |
| We respect your privacy. Unsubscribe at any time. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| |
| <div> |
| <a href="#" class="flex items-center mb-6"> |
| <i class="fas fa-heart text-3xl mr-2" style="color: var(--primary);"></i> |
| <span class="heading-font text-2xl font-bold">Complete Care</span> |
| </a> |
| <p class="text-gray-400 mb-4"> |
| Your everyday companion for women's wellbeing and lifestyle. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-pinterest-p"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Categories</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Skin Care</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Hair Care</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mental Health</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Fitness & Yoga</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Fashion & Style</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Product Reviews</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Expert Advice</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community Forum</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-400"> |
| <p>© 2023 Complete Care. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="backToTop" class="fixed bottom-6 right-6 bg-pink-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-opacity duration-300 opacity-0 invisible"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const backToTopButton = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.animate-fade-in'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', animateOnScroll); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mmmm25/mona" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
