|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Optimally Organic-Fulvic Acid | Organic Health Supplement Online Store</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> |
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
.mobile-menu { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.hero-slider { |
|
|
background-image: url('https://www.optimallyorganic.com/cdn/shop/files/Optimally_Organic_Fulvic_Ionic_Minerals_Superfood_Cali_Company_300x.jpg?v=1742343256'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.testimonial-card { |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.testimonial-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
.product-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans text-gray-800"> |
|
|
|
|
|
<div class="bg-green-800 text-white text-sm py-2 px-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span>💰 Earn 1 point for every $1 you spend</span> |
|
|
<a href="#" class="font-bold hover:underline">Join now</a> |
|
|
<a href="#" class="font-bold hover:underline">Earn 25 points</a> |
|
|
</div> |
|
|
<div> |
|
|
<span>Already a member?</span> |
|
|
<a href="#" class="font-bold hover:underline ml-2">Log in</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="text-2xl font-bold text-green-800"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/OO_Logo_140x.png?v=1645639331" alt="Optimally Organic" class="h-12"> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<div class="dropdown relative"> |
|
|
<button class="font-medium hover:text-green-700 flex items-center"> |
|
|
Shop <i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-50"> |
|
|
<div class="grid grid-cols-2 gap-4 p-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-green-800 mb-2">Products</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Shop All</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">100 Wild Plant Enzymes & Probiotics</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Acerola Cherry Powder</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Barley Grass Juice Powder</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-green-800 mb-2">Categories</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Fulvic Ionic Minerals</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Red Pine Needle Oil</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Probiotics & Enzymes</a></li> |
|
|
<li><a href="#" class="text-sm hover:text-green-700">Supergreen Powders</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="font-medium hover:text-green-700">Collections</a> |
|
|
<a href="#" class="font-medium hover:text-green-700">Package Deals</a> |
|
|
<div class="dropdown relative"> |
|
|
<button class="font-medium hover:text-green-700 flex items-center"> |
|
|
Info <i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48 z-50"> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Fulvic Acid Benefits</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">The Total Wellness Protocol</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="font-medium hover:text-green-700">Contact</a> |
|
|
<a href="#" class="font-medium hover:text-green-700">About</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="dropdown relative hidden md:block"> |
|
|
<button class="flex items-center"> |
|
|
<span class="mr-1">English</span> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-32 right-0 z-50"> |
|
|
<a href="#" class="block px-4 py-1 hover:bg-gray-100">English</a> |
|
|
<a href="#" class="block px-4 py-1 hover:bg-gray-100">français</a> |
|
|
<a href="#" class="block px-4 py-1 hover:bg-gray-100">Deutsch</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="hover:text-green-700"><i class="fas fa-search"></i></a> |
|
|
<a href="#" class="hover:text-green-700"><i class="fas fa-user"></i></a> |
|
|
<a href="#" class="hover:text-green-700 relative"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
<span class="absolute -top-2 -right-2 bg-green-700 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white absolute w-full z-50 shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<button class="flex items-center justify-between w-full font-medium py-2"> |
|
|
<span>Shop</span> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</button> |
|
|
<div class="pl-4 hidden"> |
|
|
<a href="#" class="block py-2">All Products</a> |
|
|
<a href="#" class="block py-2">Fulvic Ionic Minerals</a> |
|
|
<a href="#" class="block py-2">Red Pine Needle Oil</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="block font-medium py-2">Collections</a> |
|
|
<a href="#" class="block font-medium py-2">Package Deals</a> |
|
|
<div> |
|
|
<button class="flex items-center justify-between w-full font-medium py-2"> |
|
|
<span>Info</span> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</button> |
|
|
<div class="pl-4 hidden"> |
|
|
<a href="#" class="block py-2">Fulvic Acid Benefits</a> |
|
|
<a href="#" class="block py-2">Wellness Protocol</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="block font-medium py-2">Contact</a> |
|
|
<a href="#" class="block font-medium py-2">About</a> |
|
|
<div class="pt-4 border-t"> |
|
|
<a href="#" class="block font-medium py-2">Log in</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-slider bg-green-100 py-16 md:py-24 text-center"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto bg-white bg-opacity-90 p-8 rounded-lg shadow-lg"> |
|
|
<p class="text-green-800 font-bold mb-4">Free Shipping on all USA orders over $100!</p> |
|
|
<h1 class="text-3xl md:text-5xl font-bold text-green-800 mb-6">Beyond Organic - Wild Grown - Non GMO - RAW - BIOACTIVE</h1> |
|
|
<p class="text-xl text-gray-700 mb-8">Natural products that work!</p> |
|
|
<a href="#" class="bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-8 rounded-full transition duration-300">Shop Now</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-green-800 mb-12">Our Featured Products</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Fulvic_180x.jpg?v=1649781845" alt="Fulvic Ionic Minerals" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">Fulvic Ionic Minerals™</h3> |
|
|
<p class="text-gray-600 mb-4">Bio-Available Ancient Plant Based Ionic Fulvic Acid, Humic Acid, Electrolytes, Every Essential Amino Acid, & 77 Trace Minerals...</p> |
|
|
<a href="#" class="text-green-700 font-semibold hover:underline">View Products</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/03._Red_Pine_Needle_Oil_e0318ec4-a59f-4261-867f-33b4b2355743_180x.jpg?v=1676838478" alt="Red Pine Needle Oil" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">Red Pine Needle Oil</h3> |
|
|
<p class="text-gray-600 mb-4">The Ultimate Plant Based Extract for Immune Defense & Anti-Aging! Cleanse the body of Viruses, Bacteria, Parasites, Candida...</p> |
|
|
<a href="#" class="text-green-700 font-semibold hover:underline">View Products</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Supergreens-bag-front-side_b34ab75c-1fed-4cee-a309-5437ab636656_180x.jpg?v=1722021147" alt="Supergreens" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">Supergreens Powders</h3> |
|
|
<p class="text-gray-600 mb-4">Raw, Organic & Bio-Active. Never Heated & Free of Chemicals, Carriers & Preservatives. Juiced for optimal nutrient impact...</p> |
|
|
<a href="#" class="text-green-700 font-semibold hover:underline">View Products</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/100WPEP_product_shot_-_angle_revisioned_%7Bwidth%7Dx.png?v=1676842274" alt="Probiotics" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">Probiotics & Enzymes</h3> |
|
|
<p class="text-gray-600 mb-4">Our 5 Year Fermented Bio-Active Powerhouse combines the dynamic probiotics strains of 100 different wild plant species...</p> |
|
|
<a href="#" class="text-green-700 font-semibold hover:underline">View Products</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-green-700 text-4xl mb-4"> |
|
|
<i class="fas fa-spa"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">BEAUTY FROM THE INSIDE OUT</h3> |
|
|
<p class="text-gray-600">Fulvic Ionic Minerals & Red Pine Needle Oil for Cellular Regeneration and Increased Metabolism. Nourish your Skin, Hair & Nails!</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-green-700 text-4xl mb-4"> |
|
|
<i class="fas fa-leaf"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">CLEANSE TOXINS</h3> |
|
|
<p class="text-gray-600">Cleansing Toxins that have Built Up in your Body over a Lifetime has NEVER been Easier with Fulvic Ionic Minerals & Red Pine Needle Oil!</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-green-700 text-4xl mb-4"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">FEEL YOUR BEST</h3> |
|
|
<p class="text-gray-600">Start your Day with Fulvic Ionic Minerals & Red Pine Oil for Increased Energy, Strength, Mental Focus and Joint Mobility!</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md text-center"> |
|
|
<div class="text-green-700 text-4xl mb-4"> |
|
|
<i class="fas fa-smile"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-green-800 mb-2">LIVE LONGER & HAPPIER</h3> |
|
|
<p class="text-gray-600">Fulvic Ionic Minerals & Red Pine Needle Oil are the Missing Links to Nutrition, Optimal Health & Positive Emotions. The Keys to Longevity!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-green-800 mb-4">BioActive Concentrated Herbal Extracts</h2> |
|
|
<p class="text-center text-gray-600 max-w-3xl mx-auto mb-12"> |
|
|
ALCOHOL FREE - CHEMICAL FREE - NEVER HEATED - FULVIC ACID TRANSPORT |
|
|
The Most Bio-Active, Pure and Raw Extracts on Earth! |
|
|
</p> |
|
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md border border-gray-100"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Testosterone-Enhancement-1_%7Bwidth%7Dx.jpg?v=1738455314" alt="Testosterone Boost Extract" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-green-800">Testosterone Boost Extract 2oz</h3> |
|
|
<p class="text-green-700 font-bold my-2">$47.95</p> |
|
|
<button class="w-full bg-green-700 hover:bg-green-800 text-white py-2 rounded transition duration-300">Add to cart</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md border border-gray-100"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Prostate-Relief-1_%7Bwidth%7Dx.jpg?v=1738455375" alt="Prostate Relief Extract" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-green-800">Prostate Relief Extract 2oz</h3> |
|
|
<p class="text-green-700 font-bold my-2">$47.95</p> |
|
|
<button class="w-full bg-green-700 hover:bg-green-800 text-white py-2 rounded transition duration-300">Add to cart</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md border border-gray-100"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Natural-Energy-1_%7Bwidth%7Dx.jpg?v=1738455445" alt="Natural Energy Extract" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-green-800">Natural Energy Extract 2oz</h3> |
|
|
<p class="text-green-700 font-bold my-2">$47.95</p> |
|
|
<button class="w-full bg-green-700 hover:bg-green-800 text-white py-2 rounded transition duration-300">Add to cart</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md border border-gray-100"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Menopause-Comfort-1_%7Bwidth%7Dx.jpg?v=1738455517" alt="Menopause Comfort Extract" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-green-800">Menopause Comfort Extract 2oz</h3> |
|
|
<p class="text-green-700 font-bold my-2">$47.95</p> |
|
|
<button class="w-full bg-green-700 hover:bg-green-800 text-white py-2 rounded transition duration-300">Add to cart</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<a href="#" class="inline-block bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
|
|
View all extracts |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-3xl font-bold text-green-800 mb-4">Optimally Organic Makes Healthy Living Easy For the Whole Family.</h2> |
|
|
<p class="text-gray-700 mb-6"> |
|
|
Combating toxins and ensuring your body is receiving everything it requires just got easier! |
|
|
Optimal Health & Wellness can easily be achieved by adding a few drops of our Nutrient Dense |
|
|
superfoods to water or your favorite foods or drinks. Delicious, nutritious, and convenient. |
|
|
</p> |
|
|
<a href="#" class="inline-block bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
|
|
View All Products |
|
|
</a> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/Family1_%7Bwidth%7Dx.jpg?v=1678659668" alt="Family using Optimally Organic products" class="rounded-lg shadow-lg w-full"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-green-800 mb-12">What our customers are saying</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="testimonial-card bg-white p-6 rounded-lg border border-gray-200"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<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> |
|
|
<p class="text-gray-700 italic mb-4"> |
|
|
"Thank you for your life saving products. Your Total Wellness Protocol has blessed me greatly. You are forever in my prayers." |
|
|
</p> |
|
|
<p class="font-semibold text-green-800">Lucille P</p> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-white p-6 rounded-lg border border-gray-200"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<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> |
|
|
<p class="text-gray-700 italic mb-4"> |
|
|
"I will never travel without Red Pine Needle Oil or Fulvic Ionic Minerals. Simple and foolproof." |
|
|
</p> |
|
|
<p class="font-semibold text-green-800">Marcus S.</p> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card bg-white p-6 rounded-lg border border-gray-200"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<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> |
|
|
<p class="text-gray-700 italic mb-4"> |
|
|
"I have noticed my skin is very soft, clear and silky and I have only been on the Fulvic Ionic Minerals X350 for 4 days. I am truly Amazed :) Thank you so much!!" |
|
|
</p> |
|
|
<p class="font-semibold text-green-800">Angie L.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-green-800 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">join our community</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Sign up to get special offers, free giveaways, and once-in-a-lifetime deals. |
|
|
</p> |
|
|
<div class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800"> |
|
|
<button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-r font-bold transition duration-300"> |
|
|
Join now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-12 pb-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-400">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-green-400">Shop</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Collections</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Package Deals</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Info</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-400">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-green-400">Contact</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">About</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Testimonials</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Weight Loss</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-400">Information</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-green-400">Privacy</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Terms and Conditions</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Affiliate Program</a></li> |
|
|
<li><a href="#" class="hover:text-green-400">Refund policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-400">JOIN US</h3> |
|
|
<p class="mb-4">Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-2 rounded-l focus:outline-none text-gray-800"> |
|
|
<button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r font-bold transition duration-300"> |
|
|
Join |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<a href="#" class="text-2xl font-bold text-green-400"> |
|
|
<img src="https://www.optimallyorganic.com/cdn/shop/files/OO_Logo_x75@2x.png?v=1645639331" alt="Optimally Organic" class="h-10"> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm text-gray-400"> |
|
|
<p> |
|
|
The products and statements made about specific products on this web site have not been evaluated |
|
|
by the United States Food and Drug Administration (FDA) and are not intended to diagnose, treat, |
|
|
cure or prevent disease. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const dropdowns = document.querySelectorAll('.dropdown'); |
|
|
dropdowns.forEach(dropdown => { |
|
|
const button = dropdown.querySelector('button'); |
|
|
const menu = dropdown.querySelector('.dropdown-menu'); |
|
|
|
|
|
button.addEventListener('click', () => { |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!dropdown.contains(e.target)) { |
|
|
menu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</html> |
