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