Spaces:
Running
Running
Upload 143 files
Browse filesThis view is limited to 50 files because it contains too many changes.
See raw diff
- .gitattributes +18 -0
- README.md +0 -11
- about.html +403 -0
- contact.html +479 -0
- fruits.html +372 -0
- fruits_list/apple.html +365 -0
- fruits_list/banana.html +360 -0
- fruits_list/grapes.html +360 -0
- fruits_list/mango.html +360 -0
- fruits_list/orange.html +360 -0
- fruits_list/pineapple.html +361 -0
- fruits_list/strawberry.html +360 -0
- fruits_list/watermelon.html +360 -0
- fruits_variety_set/apple_varieties/envy-apple.html +378 -0
- fruits_variety_set/apple_varieties/fuji-apple.html +359 -0
- fruits_variety_set/apple_varieties/himachal-apple.html +355 -0
- fruits_variety_set/apple_varieties/honeycrisp-apple.html +356 -0
- fruits_variety_set/apple_varieties/jazz-apple.html +358 -0
- fruits_variety_set/apple_varieties/kinnaur-apple.html +355 -0
- fruits_variety_set/apple_varieties/ooty-apple.html +359 -0
- fruits_variety_set/banana_varities/cavendish-banana.html +355 -0
- fruits_variety_set/banana_varities/g9-banana.html +355 -0
- fruits_variety_set/banana_varities/hill-banana.html +355 -0
- fruits_variety_set/banana_varities/red-banana.html +355 -0
- fruits_variety_set/banana_varities/yellakki-banana.html +358 -0
- fruits_variety_set/grapes_varieties/black-cornith-grape.html +356 -0
- fruits_variety_set/grapes_varieties/concord-grape.html +355 -0
- fruits_variety_set/grapes_varieties/cotton-candy-grape.html +355 -0
- fruits_variety_set/grapes_varieties/moon-drop-grape.html +355 -0
- fruits_variety_set/grapes_varieties/muscat-grape.html +355 -0
- fruits_variety_set/grapes_varieties/ruby-seedless-grape.html +355 -0
- fruits_variety_set/mango_varieties/alphonso-mango.html +355 -0
- fruits_variety_set/mango_varieties/dasheri-mango.html +355 -0
- fruits_variety_set/mango_varieties/haden-mango.html +355 -0
- fruits_variety_set/mango_varieties/kesar-mango.html +355 -0
- fruits_variety_set/mango_varieties/palmer-mango.html +355 -0
- fruits_variety_set/mango_varieties/tommy-atkins-mango.html +355 -0
- fruits_variety_set/orange_varities/blood-orange.html +355 -0
- fruits_variety_set/orange_varities/cara-cara-orange.html +355 -0
- fruits_variety_set/orange_varities/mandarin-orange.html +355 -0
- fruits_variety_set/orange_varities/navel-orange.html +355 -0
- fruits_variety_set/orange_varities/tangelo-orange.html +355 -0
- fruits_variety_set/orange_varities/valencia-orange.html +355 -0
- fruits_variety_set/pineapple_varieties/golden-sweet-pineapple.html +355 -0
- fruits_variety_set/pineapple_varieties/md-2-pineapple.html +355 -0
- fruits_variety_set/pineapple_varieties/perolera-pineapple.html +355 -0
- fruits_variety_set/pineapple_varieties/queen-pineapple.html +355 -0
- fruits_variety_set/pineapple_varieties/red-spanish-pineapple.html +355 -0
- fruits_variety_set/pineapple_varieties/smooth-cayenne-pineapple.html +355 -0
- fruits_variety_set/strawberry_variety/albion-strawberry.html +355 -0
.gitattributes
CHANGED
|
@@ -33,3 +33,21 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
| 36 |
+
website_screenshots/about_page.png filter=lfs diff=lfs merge=lfs -text
|
| 37 |
+
website_screenshots/Apple[[:space:]]Varieties[[:space:]]_[[:space:]]Organic[[:space:]]vs[[:space:]]Hybrid.png filter=lfs diff=lfs merge=lfs -text
|
| 38 |
+
website_screenshots/apple_variety1.PNG filter=lfs diff=lfs merge=lfs -text
|
| 39 |
+
website_screenshots/apple_veriety_details2.PNG filter=lfs diff=lfs merge=lfs -text
|
| 40 |
+
website_screenshots/Carrot[[:space:]]Varieties[[:space:]]_[[:space:]]Organic[[:space:]]vs[[:space:]]Hybrid.png filter=lfs diff=lfs merge=lfs -text
|
| 41 |
+
website_screenshots/contact_page.png filter=lfs diff=lfs merge=lfs -text
|
| 42 |
+
website_screenshots/fruits_page1.PNG filter=lfs diff=lfs merge=lfs -text
|
| 43 |
+
website_screenshots/fruits_page2.PNG filter=lfs diff=lfs merge=lfs -text
|
| 44 |
+
website_screenshots/fruits_section.png filter=lfs diff=lfs merge=lfs -text
|
| 45 |
+
website_screenshots/home_page.png filter=lfs diff=lfs merge=lfs -text
|
| 46 |
+
website_screenshots/homepage1.PNG filter=lfs diff=lfs merge=lfs -text
|
| 47 |
+
website_screenshots/homepage2.PNG filter=lfs diff=lfs merge=lfs -text
|
| 48 |
+
website_screenshots/Nantes[[:space:]]Carrot[[:space:]]_[[:space:]]Health[[:space:]]Benefits[[:space:]]&[[:space:]]Issues[[:space:]]Solved.png filter=lfs diff=lfs merge=lfs -text
|
| 49 |
+
website_screenshots/Ooty[[:space:]]Apple[[:space:]]_[[:space:]]Health[[:space:]]Benefits[[:space:]]&[[:space:]]Issues[[:space:]]Solved.png filter=lfs diff=lfs merge=lfs -text
|
| 50 |
+
website_screenshots/orange_fruit1.PNG filter=lfs diff=lfs merge=lfs -text
|
| 51 |
+
website_screenshots/orangeveati2.PNG filter=lfs diff=lfs merge=lfs -text
|
| 52 |
+
website_screenshots/ortange-fruit2.PNG filter=lfs diff=lfs merge=lfs -text
|
| 53 |
+
website_screenshots/vegetables_section.png filter=lfs diff=lfs merge=lfs -text
|
README.md
CHANGED
|
@@ -1,11 +0,0 @@
|
|
| 1 |
-
---
|
| 2 |
-
title: Fruits Veggies Ui
|
| 3 |
-
emoji: ⚡
|
| 4 |
-
colorFrom: yellow
|
| 5 |
-
colorTo: yellow
|
| 6 |
-
sdk: static
|
| 7 |
-
pinned: false
|
| 8 |
-
short_description: Welcome to the Fruits & Vegetables Variety Comparison
|
| 9 |
-
---
|
| 10 |
-
|
| 11 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
about.html
ADDED
|
@@ -0,0 +1,403 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
|
| 4 |
+
<head>
|
| 5 |
+
<meta charset="UTF-8">
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
+
<title>About Us | NatureCompare</title>
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 10 |
+
rel="stylesheet" />
|
| 11 |
+
|
| 12 |
+
|
| 13 |
+
<style>
|
| 14 |
+
/* General Styles */
|
| 15 |
+
body {
|
| 16 |
+
font-family: 'Poppins', sans-serif;
|
| 17 |
+
margin: 0;
|
| 18 |
+
padding: 0;
|
| 19 |
+
text-align: center;
|
| 20 |
+
background: #f8f9fa;
|
| 21 |
+
color: #333;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
/* About Us Hero Section */
|
| 25 |
+
.about-hero {
|
| 26 |
+
background: url('https://static.vecteezy.com/system/resources/previews/036/185/881/non_2x/ai-generated-green-soft-background-free-photo.jpg') center/cover no-repeat;
|
| 27 |
+
height: 60vh;
|
| 28 |
+
display: flex;
|
| 29 |
+
align-items: center;
|
| 30 |
+
justify-content: center;
|
| 31 |
+
position: relative;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.about-overlay {
|
| 35 |
+
background: rgba(0, 0, 0, 0.5);
|
| 36 |
+
padding: 20px 40px;
|
| 37 |
+
border-radius: 10px;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.about-overlay h2 {
|
| 41 |
+
color: white;
|
| 42 |
+
font-size: 2.5em;
|
| 43 |
+
margin: 0;
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
/* About Us Text */
|
| 47 |
+
.about-content {
|
| 48 |
+
padding: 40px 20px;
|
| 49 |
+
font-size: 1.2em;
|
| 50 |
+
max-width: 600px;
|
| 51 |
+
margin: auto;
|
| 52 |
+
line-height: 1.6;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
|
| 56 |
+
/* Dark Mode Navigation Styles */
|
| 57 |
+
body.dark nav {
|
| 58 |
+
background-color: #333;
|
| 59 |
+
/* Dark background for the navigation bar */
|
| 60 |
+
color: #f1f1f1;
|
| 61 |
+
/* Light text color */
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
body.dark nav a {
|
| 65 |
+
color: #f1f1f1;
|
| 66 |
+
/* Light text color for links */
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
body.dark nav a:hover {
|
| 70 |
+
color: #4a7c59;
|
| 71 |
+
/* Highlight color for hovered links */
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
body.dark .logo a {
|
| 75 |
+
color: #f1f1f1;
|
| 76 |
+
/* Light text color for the logo */
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
body.dark .hamburger span {
|
| 80 |
+
background-color: #f1f1f1;
|
| 81 |
+
/* Light color for hamburger menu lines */
|
| 82 |
+
}
|
| 83 |
+
</style>
|
| 84 |
+
|
| 85 |
+
|
| 86 |
+
|
| 87 |
+
|
| 88 |
+
|
| 89 |
+
|
| 90 |
+
|
| 91 |
+
|
| 92 |
+
|
| 93 |
+
|
| 94 |
+
|
| 95 |
+
|
| 96 |
+
<script src="script.js"></script>
|
| 97 |
+
</head>
|
| 98 |
+
|
| 99 |
+
<body>
|
| 100 |
+
|
| 101 |
+
<header>
|
| 102 |
+
<nav>
|
| 103 |
+
<div class="logo">
|
| 104 |
+
<a href="index.html">NatureCompare</a>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="hamburger">
|
| 107 |
+
<span></span>
|
| 108 |
+
<span></span>
|
| 109 |
+
<span></span>
|
| 110 |
+
</div>
|
| 111 |
+
<ul class="nav-links">
|
| 112 |
+
<li><a href="index.html">Home</a></li>
|
| 113 |
+
<li><a href="fruits.html">Fruits</a></li>
|
| 114 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 115 |
+
<li><a href="about.html" class="active">About</a></li>
|
| 116 |
+
<li><a href="contact.html">Contact</a></li>
|
| 117 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 118 |
+
</ul>
|
| 119 |
+
</nav>
|
| 120 |
+
</header>
|
| 121 |
+
<!-- Hero Section with About Us -->
|
| 122 |
+
<section class="about-hero">
|
| 123 |
+
<div class="about-overlay">
|
| 124 |
+
<h2>About Us</h2>
|
| 125 |
+
</div>
|
| 126 |
+
</section>
|
| 127 |
+
|
| 128 |
+
<!-- About Us Content -->
|
| 129 |
+
<section class="about-content">
|
| 130 |
+
<p>We believe in transparency when it comes to food choices.
|
| 131 |
+
Our goal is to help you compare organic and hybrid produce
|
| 132 |
+
with data-backed insights. Make informed decisions for a
|
| 133 |
+
healthier and sustainable future.</p>
|
| 134 |
+
</section>
|
| 135 |
+
|
| 136 |
+
|
| 137 |
+
|
| 138 |
+
|
| 139 |
+
|
| 140 |
+
|
| 141 |
+
|
| 142 |
+
|
| 143 |
+
|
| 144 |
+
<style>
|
| 145 |
+
/* Footer Styles */
|
| 146 |
+
.footer {
|
| 147 |
+
background-color: white;
|
| 148 |
+
border-radius: 0.5rem;
|
| 149 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 150 |
+
margin: 1rem;
|
| 151 |
+
padding: 1.5rem;
|
| 152 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
.footer-content {
|
| 156 |
+
width: 100%;
|
| 157 |
+
max-width: 1200px;
|
| 158 |
+
margin: 0 auto;
|
| 159 |
+
display: flex;
|
| 160 |
+
flex-direction: column;
|
| 161 |
+
align-items: center;
|
| 162 |
+
justify-content: center;
|
| 163 |
+
}
|
| 164 |
+
|
| 165 |
+
.footer-links {
|
| 166 |
+
display: flex;
|
| 167 |
+
flex-wrap: wrap;
|
| 168 |
+
justify-content: center;
|
| 169 |
+
font-size: 0.875rem;
|
| 170 |
+
color: #4a5568;
|
| 171 |
+
margin: 0;
|
| 172 |
+
padding: 0;
|
| 173 |
+
list-style-type: none;
|
| 174 |
+
}
|
| 175 |
+
|
| 176 |
+
.footer-links li {
|
| 177 |
+
margin-right: 1rem;
|
| 178 |
+
}
|
| 179 |
+
|
| 180 |
+
.footer-links a {
|
| 181 |
+
text-decoration: none;
|
| 182 |
+
color: inherit;
|
| 183 |
+
transition: color 0.3s ease;
|
| 184 |
+
}
|
| 185 |
+
|
| 186 |
+
.footer-divider {
|
| 187 |
+
margin-top: 1.5rem;
|
| 188 |
+
margin-bottom: 1.5rem;
|
| 189 |
+
border-color: #e2e8f0;
|
| 190 |
+
}
|
| 191 |
+
|
| 192 |
+
.footer-credit {
|
| 193 |
+
text-align: center;
|
| 194 |
+
font-size: 0.875rem;
|
| 195 |
+
color: #6b7280;
|
| 196 |
+
}
|
| 197 |
+
|
| 198 |
+
.footer-credit a {
|
| 199 |
+
text-decoration: none;
|
| 200 |
+
color: #4a5568;
|
| 201 |
+
}
|
| 202 |
+
|
| 203 |
+
/* Dark Mode Footer Styles */
|
| 204 |
+
body.dark .footer {
|
| 205 |
+
background-color: #333;
|
| 206 |
+
color: #f1f1f1;
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
+
body.dark .footer-links a {
|
| 210 |
+
color: #f1f1f1;
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
body.dark .footer-divider {
|
| 214 |
+
border-color: #555;
|
| 215 |
+
}
|
| 216 |
+
|
| 217 |
+
body.dark .footer-credit a {
|
| 218 |
+
color: #f1f1f1;
|
| 219 |
+
}
|
| 220 |
+
</style>
|
| 221 |
+
|
| 222 |
+
|
| 223 |
+
|
| 224 |
+
|
| 225 |
+
<style>
|
| 226 |
+
/* Footer Styles */
|
| 227 |
+
.footer {
|
| 228 |
+
background-color: white;
|
| 229 |
+
border-radius: 0.5rem;
|
| 230 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 231 |
+
margin: 1rem;
|
| 232 |
+
padding: 1.5rem;
|
| 233 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
|
| 236 |
+
.footer-content {
|
| 237 |
+
width: 100%;
|
| 238 |
+
max-width: 1200px;
|
| 239 |
+
margin: 0 auto;
|
| 240 |
+
display: flex;
|
| 241 |
+
flex-direction: column;
|
| 242 |
+
align-items: center;
|
| 243 |
+
justify-content: center;
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
.footer-links {
|
| 247 |
+
display: flex;
|
| 248 |
+
flex-wrap: wrap;
|
| 249 |
+
justify-content: center;
|
| 250 |
+
font-size: 0.875rem;
|
| 251 |
+
color: #4a5568;
|
| 252 |
+
margin: 0;
|
| 253 |
+
padding: 0;
|
| 254 |
+
list-style-type: none;
|
| 255 |
+
}
|
| 256 |
+
|
| 257 |
+
.footer-links li {
|
| 258 |
+
margin-right: 1rem;
|
| 259 |
+
}
|
| 260 |
+
|
| 261 |
+
.footer-links a {
|
| 262 |
+
text-decoration: none;
|
| 263 |
+
color: inherit;
|
| 264 |
+
transition: color 0.3s ease;
|
| 265 |
+
}
|
| 266 |
+
|
| 267 |
+
.footer-divider {
|
| 268 |
+
margin-top: 1.5rem;
|
| 269 |
+
margin-bottom: 1.5rem;
|
| 270 |
+
border-color: #e2e8f0;
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
.footer-credit {
|
| 274 |
+
text-align: center;
|
| 275 |
+
font-size: 0.875rem;
|
| 276 |
+
color: #6b7280;
|
| 277 |
+
}
|
| 278 |
+
|
| 279 |
+
.footer-credit a {
|
| 280 |
+
text-decoration: none;
|
| 281 |
+
color: #4a5568;
|
| 282 |
+
}
|
| 283 |
+
|
| 284 |
+
/* Dark Mode Footer Styles */
|
| 285 |
+
body.dark .footer {
|
| 286 |
+
background-color: #333;
|
| 287 |
+
color: #f1f1f1;
|
| 288 |
+
}
|
| 289 |
+
|
| 290 |
+
body.dark .footer-links a {
|
| 291 |
+
color: #f1f1f1;
|
| 292 |
+
}
|
| 293 |
+
|
| 294 |
+
body.dark .footer-divider {
|
| 295 |
+
border-color: #555;
|
| 296 |
+
}
|
| 297 |
+
|
| 298 |
+
body.dark .footer-credit a {
|
| 299 |
+
color: #f1f1f1;
|
| 300 |
+
}
|
| 301 |
+
</style>
|
| 302 |
+
|
| 303 |
+
|
| 304 |
+
|
| 305 |
+
|
| 306 |
+
|
| 307 |
+
<footer class="footer">
|
| 308 |
+
<div class="footer-content">
|
| 309 |
+
<ul class="footer-links">
|
| 310 |
+
<li><a href="index.html">Home</a></li>
|
| 311 |
+
<li><a href="fruits.html">Fruits</a></li>
|
| 312 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 313 |
+
<li><a href="about.html">About</a></li>
|
| 314 |
+
<li><a href="contact.html">Contact</a></li>
|
| 315 |
+
</ul>
|
| 316 |
+
</div>
|
| 317 |
+
<hr class="footer-divider" />
|
| 318 |
+
<div class="footer-credit">
|
| 319 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 320 |
+
</div>
|
| 321 |
+
</footer>
|
| 322 |
+
|
| 323 |
+
<style>
|
| 324 |
+
/* Footer Styles */
|
| 325 |
+
.footer {
|
| 326 |
+
background-color: white;
|
| 327 |
+
border-radius: 0.5rem;
|
| 328 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 329 |
+
margin: 1rem;
|
| 330 |
+
padding: 1.5rem;
|
| 331 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 332 |
+
}
|
| 333 |
+
|
| 334 |
+
.footer-content {
|
| 335 |
+
width: 100%;
|
| 336 |
+
max-width: 1200px;
|
| 337 |
+
margin: 0 auto;
|
| 338 |
+
display: flex;
|
| 339 |
+
flex-direction: column;
|
| 340 |
+
align-items: center;
|
| 341 |
+
justify-content: center;
|
| 342 |
+
}
|
| 343 |
+
|
| 344 |
+
.footer-links {
|
| 345 |
+
display: flex;
|
| 346 |
+
flex-wrap: wrap;
|
| 347 |
+
justify-content: center;
|
| 348 |
+
font-size: 0.875rem;
|
| 349 |
+
color: #4a5568;
|
| 350 |
+
margin: 0;
|
| 351 |
+
padding: 0;
|
| 352 |
+
list-style-type: none;
|
| 353 |
+
}
|
| 354 |
+
|
| 355 |
+
.footer-links li {
|
| 356 |
+
margin-right: 1rem;
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
.footer-links a {
|
| 360 |
+
text-decoration: none;
|
| 361 |
+
color: inherit;
|
| 362 |
+
transition: color 0.3s ease;
|
| 363 |
+
}
|
| 364 |
+
|
| 365 |
+
.footer-divider {
|
| 366 |
+
margin-top: 1.5rem;
|
| 367 |
+
margin-bottom: 1.5rem;
|
| 368 |
+
border-color: #e2e8f0;
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
.footer-credit {
|
| 372 |
+
text-align: center;
|
| 373 |
+
font-size: 0.875rem;
|
| 374 |
+
color: #6b7280;
|
| 375 |
+
}
|
| 376 |
+
|
| 377 |
+
.footer-credit a {
|
| 378 |
+
text-decoration: none;
|
| 379 |
+
color: #4a5568;
|
| 380 |
+
}
|
| 381 |
+
|
| 382 |
+
/* Dark Mode Footer Styles */
|
| 383 |
+
body.dark .footer {
|
| 384 |
+
background-color: #333;
|
| 385 |
+
color: #f1f1f1;
|
| 386 |
+
}
|
| 387 |
+
|
| 388 |
+
body.dark .footer-links a {
|
| 389 |
+
color: #f1f1f1;
|
| 390 |
+
}
|
| 391 |
+
|
| 392 |
+
body.dark .footer-divider {
|
| 393 |
+
border-color: #555;
|
| 394 |
+
}
|
| 395 |
+
|
| 396 |
+
body.dark .footer-credit a {
|
| 397 |
+
color: #f1f1f1;
|
| 398 |
+
}
|
| 399 |
+
</style>
|
| 400 |
+
|
| 401 |
+
</body>
|
| 402 |
+
|
| 403 |
+
</html>
|
contact.html
ADDED
|
@@ -0,0 +1,479 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
|
| 4 |
+
<head>
|
| 5 |
+
<meta charset="UTF-8">
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
+
<title>About Us | NatureCompare</title>
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
|
| 10 |
+
<style>
|
| 11 |
+
/* General Styles */
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Poppins', sans-serif;
|
| 14 |
+
margin: 0;
|
| 15 |
+
padding: 0;
|
| 16 |
+
text-align: center;
|
| 17 |
+
background: #f8f9fa;
|
| 18 |
+
color: #333;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
/* About Us Hero Section */
|
| 22 |
+
.about-hero {
|
| 23 |
+
background: url('https://static.vecteezy.com/system/resources/previews/036/185/881/non_2x/ai-generated-green-soft-background-free-photo.jpg') center/cover no-repeat;
|
| 24 |
+
height: 60vh;
|
| 25 |
+
display: flex;
|
| 26 |
+
align-items: center;
|
| 27 |
+
justify-content: center;
|
| 28 |
+
position: relative;
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
.about-overlay {
|
| 32 |
+
background: rgba(0, 0, 0, 0.5);
|
| 33 |
+
padding: 20px 40px;
|
| 34 |
+
border-radius: 10px;
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.about-overlay h2 {
|
| 38 |
+
color: white;
|
| 39 |
+
font-size: 2.5em;
|
| 40 |
+
margin: 0;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
/* About Us Text */
|
| 44 |
+
.about-content {
|
| 45 |
+
padding: 40px 20px;
|
| 46 |
+
font-size: 1.2em;
|
| 47 |
+
max-width: 600px;
|
| 48 |
+
margin: auto;
|
| 49 |
+
line-height: 1.6;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
body {
|
| 53 |
+
font-family: 'Poppins', sans-serif;
|
| 54 |
+
margin: 0;
|
| 55 |
+
padding: 0;
|
| 56 |
+
text-align: center;
|
| 57 |
+
background: #f8f9fa;
|
| 58 |
+
color: #333;
|
| 59 |
+
}
|
| 60 |
+
|
| 61 |
+
.contact-hero {
|
| 62 |
+
background: url('https://static.vecteezy.com/system/resources/previews/036/185/881/non_2x/ai-generated-green-soft-background-free-photo.jpg') center/cover no-repeat;
|
| 63 |
+
height: 50vh;
|
| 64 |
+
display: flex;
|
| 65 |
+
align-items: center;
|
| 66 |
+
justify-content: center;
|
| 67 |
+
position: relative;
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
.contact-overlay {
|
| 71 |
+
background: rgba(0, 0, 0, 0.5);
|
| 72 |
+
padding: 30px 50px;
|
| 73 |
+
border-radius: 10px;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.contact-overlay h2 {
|
| 77 |
+
color: white;
|
| 78 |
+
font-size: 2.5em;
|
| 79 |
+
margin: 0;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
.contact-form {
|
| 83 |
+
padding: 50px 30px;
|
| 84 |
+
max-width: 600px;
|
| 85 |
+
margin: 40px auto;
|
| 86 |
+
background: white;
|
| 87 |
+
border-radius: 10px;
|
| 88 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
| 89 |
+
text-align: left;
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
.contact-form h3 {
|
| 93 |
+
margin-bottom: 20px;
|
| 94 |
+
text-align: center;
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.contact-form p {
|
| 98 |
+
margin-bottom: 20px;
|
| 99 |
+
text-align: center;
|
| 100 |
+
}
|
| 101 |
+
|
| 102 |
+
.contact-form input,
|
| 103 |
+
.contact-form textarea {
|
| 104 |
+
width: calc(100% - 20px);
|
| 105 |
+
padding: 10px;
|
| 106 |
+
margin: 10px 10px 20px 10px;
|
| 107 |
+
border: 1px solid #ddd;
|
| 108 |
+
border-radius: 5px;
|
| 109 |
+
display: block;
|
| 110 |
+
}
|
| 111 |
+
|
| 112 |
+
.contact-form button {
|
| 113 |
+
background: #28a745;
|
| 114 |
+
color: white;
|
| 115 |
+
border: none;
|
| 116 |
+
padding: 12px 25px;
|
| 117 |
+
cursor: pointer;
|
| 118 |
+
border-radius: 5px;
|
| 119 |
+
display: block;
|
| 120 |
+
margin: 0 auto;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
.contact-form button:hover {
|
| 124 |
+
background: #218838;
|
| 125 |
+
}
|
| 126 |
+
|
| 127 |
+
/* Dark Mode Navigation Styles */
|
| 128 |
+
body.dark nav {
|
| 129 |
+
background-color: #333;
|
| 130 |
+
/* Dark background for the navigation bar */
|
| 131 |
+
color: #f1f1f1;
|
| 132 |
+
/* Light text color */
|
| 133 |
+
}
|
| 134 |
+
|
| 135 |
+
body.dark nav a {
|
| 136 |
+
color: #f1f1f1;
|
| 137 |
+
/* Light text color for links */
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
body.dark nav a:hover {
|
| 141 |
+
color: #4a7c59;
|
| 142 |
+
/* Highlight color for hovered links */
|
| 143 |
+
}
|
| 144 |
+
|
| 145 |
+
body.dark .logo a {
|
| 146 |
+
color: #f1f1f1;
|
| 147 |
+
/* Light text color for the logo */
|
| 148 |
+
}
|
| 149 |
+
|
| 150 |
+
body.dark .hamburger span {
|
| 151 |
+
background-color: #f1f1f1;
|
| 152 |
+
/* Light color for hamburger menu lines */
|
| 153 |
+
}
|
| 154 |
+
</style>
|
| 155 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 156 |
+
rel="stylesheet" />
|
| 157 |
+
|
| 158 |
+
|
| 159 |
+
|
| 160 |
+
|
| 161 |
+
|
| 162 |
+
|
| 163 |
+
|
| 164 |
+
|
| 165 |
+
|
| 166 |
+
|
| 167 |
+
|
| 168 |
+
<script src="script.js"></script>
|
| 169 |
+
</head>
|
| 170 |
+
|
| 171 |
+
<body>
|
| 172 |
+
|
| 173 |
+
<header>
|
| 174 |
+
<nav>
|
| 175 |
+
<div class="logo">
|
| 176 |
+
<a href="index.html">NatureCompare</a>
|
| 177 |
+
</div>
|
| 178 |
+
<div class="hamburger">
|
| 179 |
+
<span></span>
|
| 180 |
+
<span></span>
|
| 181 |
+
<span></span>
|
| 182 |
+
</div>
|
| 183 |
+
<ul class="nav-links">
|
| 184 |
+
<li><a href="index.html">Home</a></li>
|
| 185 |
+
<li><a href="fruits.html">Fruits</a></li>
|
| 186 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 187 |
+
<li><a href="about.html">About</a></li>
|
| 188 |
+
<li><a href="contact.html" class="active">Contact</a></li>
|
| 189 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 190 |
+
</ul>
|
| 191 |
+
</nav>
|
| 192 |
+
</header>
|
| 193 |
+
<!-- Hero Section with About Us -->
|
| 194 |
+
<section class="about-hero">
|
| 195 |
+
<div class="about-overlay">
|
| 196 |
+
<h2>Contact Us</h2>
|
| 197 |
+
</div>
|
| 198 |
+
</section>
|
| 199 |
+
|
| 200 |
+
<section class="contact-form">
|
| 201 |
+
<h3>Get in Touch</h3>
|
| 202 |
+
<p>Have questions? Reach out to us below!</p>
|
| 203 |
+
<form>
|
| 204 |
+
<input type="text" placeholder="Your Name" required>
|
| 205 |
+
<input type="email" placeholder="Your Email" required>
|
| 206 |
+
<textarea rows="5" placeholder="Your Message" required></textarea>
|
| 207 |
+
<button type="submit">Send Message</button>
|
| 208 |
+
</form>
|
| 209 |
+
</section>
|
| 210 |
+
|
| 211 |
+
|
| 212 |
+
|
| 213 |
+
|
| 214 |
+
|
| 215 |
+
|
| 216 |
+
|
| 217 |
+
|
| 218 |
+
|
| 219 |
+
<style>
|
| 220 |
+
/* Footer Styles */
|
| 221 |
+
.footer {
|
| 222 |
+
background-color: white;
|
| 223 |
+
border-radius: 0.5rem;
|
| 224 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 225 |
+
margin: 1rem;
|
| 226 |
+
padding: 1.5rem;
|
| 227 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 228 |
+
}
|
| 229 |
+
|
| 230 |
+
.footer-content {
|
| 231 |
+
width: 100%;
|
| 232 |
+
max-width: 1200px;
|
| 233 |
+
margin: 0 auto;
|
| 234 |
+
display: flex;
|
| 235 |
+
flex-direction: column;
|
| 236 |
+
align-items: center;
|
| 237 |
+
justify-content: center;
|
| 238 |
+
}
|
| 239 |
+
|
| 240 |
+
.footer-links {
|
| 241 |
+
display: flex;
|
| 242 |
+
flex-wrap: wrap;
|
| 243 |
+
justify-content: center;
|
| 244 |
+
font-size: 0.875rem;
|
| 245 |
+
color: #4a5568;
|
| 246 |
+
margin: 0;
|
| 247 |
+
padding: 0;
|
| 248 |
+
list-style-type: none;
|
| 249 |
+
}
|
| 250 |
+
|
| 251 |
+
.footer-links li {
|
| 252 |
+
margin-right: 1rem;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
.footer-links a {
|
| 256 |
+
text-decoration: none;
|
| 257 |
+
color: inherit;
|
| 258 |
+
transition: color 0.3s ease;
|
| 259 |
+
}
|
| 260 |
+
|
| 261 |
+
.footer-divider {
|
| 262 |
+
margin-top: 1.5rem;
|
| 263 |
+
margin-bottom: 1.5rem;
|
| 264 |
+
border-color: #e2e8f0;
|
| 265 |
+
}
|
| 266 |
+
|
| 267 |
+
.footer-credit {
|
| 268 |
+
text-align: center;
|
| 269 |
+
font-size: 0.875rem;
|
| 270 |
+
color: #6b7280;
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
.footer-credit a {
|
| 274 |
+
text-decoration: none;
|
| 275 |
+
color: #4a5568;
|
| 276 |
+
}
|
| 277 |
+
|
| 278 |
+
/* Dark Mode Footer Styles */
|
| 279 |
+
body.dark .footer {
|
| 280 |
+
background-color: #333;
|
| 281 |
+
color: #f1f1f1;
|
| 282 |
+
}
|
| 283 |
+
|
| 284 |
+
body.dark .footer-links a {
|
| 285 |
+
color: #f1f1f1;
|
| 286 |
+
}
|
| 287 |
+
|
| 288 |
+
body.dark .footer-divider {
|
| 289 |
+
border-color: #555;
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
+
body.dark .footer-credit a {
|
| 293 |
+
color: #f1f1f1;
|
| 294 |
+
}
|
| 295 |
+
</style>
|
| 296 |
+
|
| 297 |
+
|
| 298 |
+
|
| 299 |
+
|
| 300 |
+
<style>
|
| 301 |
+
/* Footer Styles */
|
| 302 |
+
.footer {
|
| 303 |
+
background-color: white;
|
| 304 |
+
border-radius: 0.5rem;
|
| 305 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 306 |
+
margin: 1rem;
|
| 307 |
+
padding: 1.5rem;
|
| 308 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
.footer-content {
|
| 312 |
+
width: 100%;
|
| 313 |
+
max-width: 1200px;
|
| 314 |
+
margin: 0 auto;
|
| 315 |
+
display: flex;
|
| 316 |
+
flex-direction: column;
|
| 317 |
+
align-items: center;
|
| 318 |
+
justify-content: center;
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
.footer-links {
|
| 322 |
+
display: flex;
|
| 323 |
+
flex-wrap: wrap;
|
| 324 |
+
justify-content: center;
|
| 325 |
+
font-size: 0.875rem;
|
| 326 |
+
color: #4a5568;
|
| 327 |
+
margin: 0;
|
| 328 |
+
padding: 0;
|
| 329 |
+
list-style-type: none;
|
| 330 |
+
}
|
| 331 |
+
|
| 332 |
+
.footer-links li {
|
| 333 |
+
margin-right: 1rem;
|
| 334 |
+
}
|
| 335 |
+
|
| 336 |
+
.footer-links a {
|
| 337 |
+
text-decoration: none;
|
| 338 |
+
color: inherit;
|
| 339 |
+
transition: color 0.3s ease;
|
| 340 |
+
}
|
| 341 |
+
|
| 342 |
+
.footer-divider {
|
| 343 |
+
margin-top: 1.5rem;
|
| 344 |
+
margin-bottom: 1.5rem;
|
| 345 |
+
border-color: #e2e8f0;
|
| 346 |
+
}
|
| 347 |
+
|
| 348 |
+
.footer-credit {
|
| 349 |
+
text-align: center;
|
| 350 |
+
font-size: 0.875rem;
|
| 351 |
+
color: #6b7280;
|
| 352 |
+
}
|
| 353 |
+
|
| 354 |
+
.footer-credit a {
|
| 355 |
+
text-decoration: none;
|
| 356 |
+
color: #4a5568;
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
/* Dark Mode Footer Styles */
|
| 360 |
+
body.dark .footer {
|
| 361 |
+
background-color: #333;
|
| 362 |
+
color: #f1f1f1;
|
| 363 |
+
}
|
| 364 |
+
|
| 365 |
+
body.dark .footer-links a {
|
| 366 |
+
color: #f1f1f1;
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
body.dark .footer-divider {
|
| 370 |
+
border-color: #555;
|
| 371 |
+
}
|
| 372 |
+
|
| 373 |
+
body.dark .footer-credit a {
|
| 374 |
+
color: #f1f1f1;
|
| 375 |
+
}
|
| 376 |
+
</style>
|
| 377 |
+
|
| 378 |
+
|
| 379 |
+
|
| 380 |
+
|
| 381 |
+
|
| 382 |
+
<footer class="footer">
|
| 383 |
+
<div class="footer-content">
|
| 384 |
+
<ul class="footer-links">
|
| 385 |
+
<li><a href="index.html">Home</a></li>
|
| 386 |
+
<li><a href="fruits.html">Fruits</a></li>
|
| 387 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 388 |
+
<li><a href="about.html">About</a></li>
|
| 389 |
+
<li><a href="contact.html">Contact</a></li>
|
| 390 |
+
</ul>
|
| 391 |
+
</div>
|
| 392 |
+
<hr class="footer-divider" />
|
| 393 |
+
<div class="footer-credit">
|
| 394 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 395 |
+
</div>
|
| 396 |
+
</footer>
|
| 397 |
+
|
| 398 |
+
<style>
|
| 399 |
+
/* Footer Styles */
|
| 400 |
+
.footer {
|
| 401 |
+
background-color: white;
|
| 402 |
+
border-radius: 0.5rem;
|
| 403 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 404 |
+
margin: 1rem;
|
| 405 |
+
padding: 1.5rem;
|
| 406 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 407 |
+
}
|
| 408 |
+
|
| 409 |
+
.footer-content {
|
| 410 |
+
width: 100%;
|
| 411 |
+
max-width: 1200px;
|
| 412 |
+
margin: 0 auto;
|
| 413 |
+
display: flex;
|
| 414 |
+
flex-direction: column;
|
| 415 |
+
align-items: center;
|
| 416 |
+
justify-content: center;
|
| 417 |
+
}
|
| 418 |
+
|
| 419 |
+
.footer-links {
|
| 420 |
+
display: flex;
|
| 421 |
+
flex-wrap: wrap;
|
| 422 |
+
justify-content: center;
|
| 423 |
+
font-size: 0.875rem;
|
| 424 |
+
color: #4a5568;
|
| 425 |
+
margin: 0;
|
| 426 |
+
padding: 0;
|
| 427 |
+
list-style-type: none;
|
| 428 |
+
}
|
| 429 |
+
|
| 430 |
+
.footer-links li {
|
| 431 |
+
margin-right: 1rem;
|
| 432 |
+
}
|
| 433 |
+
|
| 434 |
+
.footer-links a {
|
| 435 |
+
text-decoration: none;
|
| 436 |
+
color: inherit;
|
| 437 |
+
transition: color 0.3s ease;
|
| 438 |
+
}
|
| 439 |
+
|
| 440 |
+
.footer-divider {
|
| 441 |
+
margin-top: 1.5rem;
|
| 442 |
+
margin-bottom: 1.5rem;
|
| 443 |
+
border-color: #e2e8f0;
|
| 444 |
+
}
|
| 445 |
+
|
| 446 |
+
.footer-credit {
|
| 447 |
+
text-align: center;
|
| 448 |
+
font-size: 0.875rem;
|
| 449 |
+
color: #6b7280;
|
| 450 |
+
}
|
| 451 |
+
|
| 452 |
+
.footer-credit a {
|
| 453 |
+
text-decoration: none;
|
| 454 |
+
color: #4a5568;
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
/* Dark Mode Footer Styles */
|
| 458 |
+
body.dark .footer {
|
| 459 |
+
background-color: #333;
|
| 460 |
+
color: #f1f1f1;
|
| 461 |
+
}
|
| 462 |
+
|
| 463 |
+
body.dark .footer-links a {
|
| 464 |
+
color: #f1f1f1;
|
| 465 |
+
}
|
| 466 |
+
|
| 467 |
+
body.dark .footer-divider {
|
| 468 |
+
border-color: #555;
|
| 469 |
+
}
|
| 470 |
+
|
| 471 |
+
body.dark .footer-credit a {
|
| 472 |
+
color: #f1f1f1;
|
| 473 |
+
}
|
| 474 |
+
</style>
|
| 475 |
+
|
| 476 |
+
</body>
|
| 477 |
+
|
| 478 |
+
</html>
|
| 479 |
+
</div>
|
fruits.html
ADDED
|
@@ -0,0 +1,372 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Fruits | Organic vs Non-Organic</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="style.css" />
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
<script src="script.js"></script>
|
| 24 |
+
</head>
|
| 25 |
+
<body>
|
| 26 |
+
<!-- Header & Navigation -->
|
| 27 |
+
<header>
|
| 28 |
+
<nav>
|
| 29 |
+
<div class="logo">
|
| 30 |
+
<a href="index.html">NatureCompare</a>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="hamburger">
|
| 33 |
+
<span></span>
|
| 34 |
+
<span></span>
|
| 35 |
+
<span></span>
|
| 36 |
+
</div>
|
| 37 |
+
<ul class="nav-links">
|
| 38 |
+
<li><a href="index.html">Home</a></li>
|
| 39 |
+
<li><a href="fruits.html" class="active">Fruits</a></li>
|
| 40 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 41 |
+
<li><a href="about.html">About</a></li>
|
| 42 |
+
<li><a href="contact.html">Contact</a></li>
|
| 43 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 44 |
+
</ul>
|
| 45 |
+
</nav>
|
| 46 |
+
</header>
|
| 47 |
+
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Fruits Header Section -->
|
| 50 |
+
<section class="fruits-header">
|
| 51 |
+
<h1>Explore Fruits</h1>
|
| 52 |
+
<p>Click on a fruit to view its varieties and benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Categories & Card Section -->
|
| 56 |
+
<section id="categories" class="categories">
|
| 57 |
+
<div class="category-cards">
|
| 58 |
+
<a href="fruits_list/apple.html" class="card">
|
| 59 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.1y3_ZSNeXCbqjWFFGocLWAHaE3?pid=ImgDet&w=178&h=117&c=7&dpr=1.5');">
|
| 60 |
+
<div class="card-overlay"></div>
|
| 61 |
+
</div>
|
| 62 |
+
<div class="card-content">
|
| 63 |
+
<h3>Apple</h3>
|
| 64 |
+
<p>Discover different apple varieties and their benefits</p>
|
| 65 |
+
</div>
|
| 66 |
+
</a>
|
| 67 |
+
<a href="fruits_list/banana.html" class="card">
|
| 68 |
+
<div class="card-image" style="background-image: url('https://m.media-amazon.com/images/I/51ebZJ+DR4L._SL1500_.jpg');">
|
| 69 |
+
<div class="card-overlay"></div>
|
| 70 |
+
</div>
|
| 71 |
+
<div class="card-content">
|
| 72 |
+
<h3>Banana</h3>
|
| 73 |
+
<p>Explore banana types and their nutritional value</p>
|
| 74 |
+
</div>
|
| 75 |
+
</a>
|
| 76 |
+
<a href="fruits_list/orange.html" class="card">
|
| 77 |
+
<div class="card-image" style="background-image: url('https://i.pinimg.com/originals/7a/bc/56/7abc56bd727d28f14f21e267815f9489.jpg');">
|
| 78 |
+
<div class="card-overlay"></div>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="card-content">
|
| 81 |
+
<h3>Orange</h3>
|
| 82 |
+
<p>Learn about different orange varieties and their uses</p>
|
| 83 |
+
</div>
|
| 84 |
+
</a>
|
| 85 |
+
<a href="fruits_list/mango.html" class="card">
|
| 86 |
+
<div class="card-image" style="background-image: url('https://cdn.pixabay.com/photo/2022/06/16/07/45/fruit-7265287_1280.jpg');">
|
| 87 |
+
<div class="card-overlay"></div>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Mango</h3>
|
| 91 |
+
<p>Explore mango varieties and their delicious flavors</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="fruits_list/strawberry.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://wallpapercave.com/wp/wp4079878.jpg');">
|
| 96 |
+
<div class="card-overlay"></div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="card-content">
|
| 99 |
+
<h3>Strawberry</h3>
|
| 100 |
+
<p>Sweet, juicy, and packed with vitamins</p>
|
| 101 |
+
</div>
|
| 102 |
+
</a>
|
| 103 |
+
<a href="fruits_list/grapes.html" class="card">
|
| 104 |
+
<div class="card-image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/36/Kyoho-grape.jpg');">
|
| 105 |
+
<div class="card-overlay"></div>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="card-content">
|
| 108 |
+
<h3>Grapes</h3>
|
| 109 |
+
<p>Perfect for snacking and making wine</p>
|
| 110 |
+
</div>
|
| 111 |
+
</a>
|
| 112 |
+
<a href="fruits_list/pineapple.html" class="card">
|
| 113 |
+
<div class="card-image" style="background-image: url('https://img.freepik.com/premium-photo/bunch-pineapples-pineapple-stand_958808-5941.jpg');">
|
| 114 |
+
<div class="card-overlay"></div>
|
| 115 |
+
</div>
|
| 116 |
+
<div class="card-content">
|
| 117 |
+
<h3>Pineapple</h3>
|
| 118 |
+
<p>Tropical fruit known for its sweet and tangy taste</p>
|
| 119 |
+
</div>
|
| 120 |
+
</a>
|
| 121 |
+
<a href="fruits_list/watermelon.html" class="card">
|
| 122 |
+
<div class="card-image" style="background-image: url('https://www.thespruce.com/thmb/pjDqYUU4EG1y_fNU4x23WCbqLXA=/4238x2827/filters:fill(auto,1)/when-to-harvest-watermelon-2539591-04-f7f99d3a73d846cb9d453f8a6f0cc7ee.jpg');">
|
| 123 |
+
<div class="card-overlay"></div>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="card-content">
|
| 126 |
+
<h3>Watermelon</h3>
|
| 127 |
+
<p>Refreshing and hydrating summer fruit</p>
|
| 128 |
+
</div>
|
| 129 |
+
</a>
|
| 130 |
+
</div>
|
| 131 |
+
</section>
|
| 132 |
+
</main>
|
| 133 |
+
|
| 134 |
+
|
| 135 |
+
|
| 136 |
+
|
| 137 |
+
|
| 138 |
+
|
| 139 |
+
|
| 140 |
+
|
| 141 |
+
|
| 142 |
+
|
| 143 |
+
|
| 144 |
+
<style>
|
| 145 |
+
/* Footer Styles */
|
| 146 |
+
.footer {
|
| 147 |
+
background-color: white;
|
| 148 |
+
border-radius: 0.5rem;
|
| 149 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 150 |
+
margin: 1rem;
|
| 151 |
+
padding: 1.5rem;
|
| 152 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 153 |
+
}
|
| 154 |
+
.footer-content {
|
| 155 |
+
width: 100%;
|
| 156 |
+
max-width: 1200px;
|
| 157 |
+
margin: 0 auto;
|
| 158 |
+
display: flex;
|
| 159 |
+
flex-direction: column;
|
| 160 |
+
align-items: center;
|
| 161 |
+
justify-content: center;
|
| 162 |
+
}
|
| 163 |
+
.footer-links {
|
| 164 |
+
display: flex;
|
| 165 |
+
flex-wrap: wrap;
|
| 166 |
+
justify-content: center;
|
| 167 |
+
font-size: 0.875rem;
|
| 168 |
+
color: #4a5568;
|
| 169 |
+
margin: 0;
|
| 170 |
+
padding: 0;
|
| 171 |
+
list-style-type: none;
|
| 172 |
+
}
|
| 173 |
+
.footer-links li {
|
| 174 |
+
margin-right: 1rem;
|
| 175 |
+
}
|
| 176 |
+
.footer-links a {
|
| 177 |
+
text-decoration: none;
|
| 178 |
+
color: inherit;
|
| 179 |
+
transition: color 0.3s ease;
|
| 180 |
+
}
|
| 181 |
+
.footer-divider {
|
| 182 |
+
margin-top: 1.5rem;
|
| 183 |
+
margin-bottom: 1.5rem;
|
| 184 |
+
border-color: #e2e8f0;
|
| 185 |
+
}
|
| 186 |
+
.footer-credit {
|
| 187 |
+
text-align: center;
|
| 188 |
+
font-size: 0.875rem;
|
| 189 |
+
color: #6b7280;
|
| 190 |
+
}
|
| 191 |
+
.footer-credit a {
|
| 192 |
+
text-decoration: none;
|
| 193 |
+
color: #4a5568;
|
| 194 |
+
}
|
| 195 |
+
|
| 196 |
+
/* Dark Mode Footer Styles */
|
| 197 |
+
body.dark .footer {
|
| 198 |
+
background-color: #333;
|
| 199 |
+
color: #f1f1f1;
|
| 200 |
+
}
|
| 201 |
+
body.dark .footer-links a {
|
| 202 |
+
color: #f1f1f1;
|
| 203 |
+
}
|
| 204 |
+
body.dark .footer-divider {
|
| 205 |
+
border-color: #555;
|
| 206 |
+
}
|
| 207 |
+
body.dark .footer-credit a {
|
| 208 |
+
color: #f1f1f1;
|
| 209 |
+
}
|
| 210 |
+
</style>
|
| 211 |
+
|
| 212 |
+
|
| 213 |
+
|
| 214 |
+
|
| 215 |
+
<style>
|
| 216 |
+
/* Footer Styles */
|
| 217 |
+
.footer {
|
| 218 |
+
background-color: white;
|
| 219 |
+
border-radius: 0.5rem;
|
| 220 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 221 |
+
margin: 1rem;
|
| 222 |
+
padding: 1.5rem;
|
| 223 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 224 |
+
}
|
| 225 |
+
.footer-content {
|
| 226 |
+
width: 100%;
|
| 227 |
+
max-width: 1200px;
|
| 228 |
+
margin: 0 auto;
|
| 229 |
+
display: flex;
|
| 230 |
+
flex-direction: column;
|
| 231 |
+
align-items: center;
|
| 232 |
+
justify-content: center;
|
| 233 |
+
}
|
| 234 |
+
.footer-links {
|
| 235 |
+
display: flex;
|
| 236 |
+
flex-wrap: wrap;
|
| 237 |
+
justify-content: center;
|
| 238 |
+
font-size: 0.875rem;
|
| 239 |
+
color: #4a5568;
|
| 240 |
+
margin: 0;
|
| 241 |
+
padding: 0;
|
| 242 |
+
list-style-type: none;
|
| 243 |
+
}
|
| 244 |
+
.footer-links li {
|
| 245 |
+
margin-right: 1rem;
|
| 246 |
+
}
|
| 247 |
+
.footer-links a {
|
| 248 |
+
text-decoration: none;
|
| 249 |
+
color: inherit;
|
| 250 |
+
transition: color 0.3s ease;
|
| 251 |
+
}
|
| 252 |
+
.footer-divider {
|
| 253 |
+
margin-top: 1.5rem;
|
| 254 |
+
margin-bottom: 1.5rem;
|
| 255 |
+
border-color: #e2e8f0;
|
| 256 |
+
}
|
| 257 |
+
.footer-credit {
|
| 258 |
+
text-align: center;
|
| 259 |
+
font-size: 0.875rem;
|
| 260 |
+
color: #6b7280;
|
| 261 |
+
}
|
| 262 |
+
.footer-credit a {
|
| 263 |
+
text-decoration: none;
|
| 264 |
+
color: #4a5568;
|
| 265 |
+
}
|
| 266 |
+
|
| 267 |
+
/* Dark Mode Footer Styles */
|
| 268 |
+
body.dark .footer {
|
| 269 |
+
background-color: #333;
|
| 270 |
+
color: #f1f1f1;
|
| 271 |
+
}
|
| 272 |
+
body.dark .footer-links a {
|
| 273 |
+
color: #f1f1f1;
|
| 274 |
+
}
|
| 275 |
+
body.dark .footer-divider {
|
| 276 |
+
border-color: #555;
|
| 277 |
+
}
|
| 278 |
+
body.dark .footer-credit a {
|
| 279 |
+
color: #f1f1f1;
|
| 280 |
+
}
|
| 281 |
+
</style>
|
| 282 |
+
|
| 283 |
+
|
| 284 |
+
|
| 285 |
+
|
| 286 |
+
|
| 287 |
+
<footer class="footer">
|
| 288 |
+
<div class="footer-content">
|
| 289 |
+
<ul class="footer-links">
|
| 290 |
+
<li><a href="index.html">Home</a></li>
|
| 291 |
+
<li><a href="fruits.html">Fruits</a></li>
|
| 292 |
+
<li><a href="vegetables.html">Vegetables</a></li>
|
| 293 |
+
<li><a href="about.html">About</a></li>
|
| 294 |
+
<li><a href="contact.html">Contact</a></li>
|
| 295 |
+
</ul>
|
| 296 |
+
</div>
|
| 297 |
+
<hr class="footer-divider" />
|
| 298 |
+
<div class="footer-credit">
|
| 299 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 300 |
+
</div>
|
| 301 |
+
</footer>
|
| 302 |
+
|
| 303 |
+
<style>
|
| 304 |
+
/* Footer Styles */
|
| 305 |
+
.footer {
|
| 306 |
+
background-color: white;
|
| 307 |
+
border-radius: 0.5rem;
|
| 308 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 309 |
+
margin: 1rem;
|
| 310 |
+
padding: 1.5rem;
|
| 311 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 312 |
+
}
|
| 313 |
+
.footer-content {
|
| 314 |
+
width: 100%;
|
| 315 |
+
max-width: 1200px;
|
| 316 |
+
margin: 0 auto;
|
| 317 |
+
display: flex;
|
| 318 |
+
flex-direction: column;
|
| 319 |
+
align-items: center;
|
| 320 |
+
justify-content: center;
|
| 321 |
+
}
|
| 322 |
+
.footer-links {
|
| 323 |
+
display: flex;
|
| 324 |
+
flex-wrap: wrap;
|
| 325 |
+
justify-content: center;
|
| 326 |
+
font-size: 0.875rem;
|
| 327 |
+
color: #4a5568;
|
| 328 |
+
margin: 0;
|
| 329 |
+
padding: 0;
|
| 330 |
+
list-style-type: none;
|
| 331 |
+
}
|
| 332 |
+
.footer-links li {
|
| 333 |
+
margin-right: 1rem;
|
| 334 |
+
}
|
| 335 |
+
.footer-links a {
|
| 336 |
+
text-decoration: none;
|
| 337 |
+
color: inherit;
|
| 338 |
+
transition: color 0.3s ease;
|
| 339 |
+
}
|
| 340 |
+
.footer-divider {
|
| 341 |
+
margin-top: 1.5rem;
|
| 342 |
+
margin-bottom: 1.5rem;
|
| 343 |
+
border-color: #e2e8f0;
|
| 344 |
+
}
|
| 345 |
+
.footer-credit {
|
| 346 |
+
text-align: center;
|
| 347 |
+
font-size: 0.875rem;
|
| 348 |
+
color: #6b7280;
|
| 349 |
+
}
|
| 350 |
+
.footer-credit a {
|
| 351 |
+
text-decoration: none;
|
| 352 |
+
color: #4a5568;
|
| 353 |
+
}
|
| 354 |
+
|
| 355 |
+
/* Dark Mode Footer Styles */
|
| 356 |
+
body.dark .footer {
|
| 357 |
+
background-color: #333;
|
| 358 |
+
color: #f1f1f1;
|
| 359 |
+
}
|
| 360 |
+
body.dark .footer-links a {
|
| 361 |
+
color: #f1f1f1;
|
| 362 |
+
}
|
| 363 |
+
body.dark .footer-divider {
|
| 364 |
+
border-color: #555;
|
| 365 |
+
}
|
| 366 |
+
body.dark .footer-credit a {
|
| 367 |
+
color: #f1f1f1;
|
| 368 |
+
}
|
| 369 |
+
</style>
|
| 370 |
+
|
| 371 |
+
</body>
|
| 372 |
+
</html>
|
fruits_list/apple.html
ADDED
|
@@ -0,0 +1,365 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Apple Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
<script src="../script.js"></script>
|
| 17 |
+
</head>
|
| 18 |
+
<body>
|
| 19 |
+
<!-- Header & Navigation -->
|
| 20 |
+
<header>
|
| 21 |
+
<nav>
|
| 22 |
+
<div class="logo">
|
| 23 |
+
<a href="index.html">NatureCompare</a>
|
| 24 |
+
</div>
|
| 25 |
+
<div class="hamburger">
|
| 26 |
+
<span></span>
|
| 27 |
+
<span></span>
|
| 28 |
+
<span></span>
|
| 29 |
+
</div>
|
| 30 |
+
<ul class="nav-links">
|
| 31 |
+
<li><a href="../index.html">Home</a></li>
|
| 32 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 33 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 34 |
+
<li><a href="../about.html">About</a></li>
|
| 35 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 36 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 37 |
+
</ul>
|
| 38 |
+
</nav>
|
| 39 |
+
</header>
|
| 40 |
+
|
| 41 |
+
<!-- Main Content -->
|
| 42 |
+
<main>
|
| 43 |
+
<!-- Page Header -->
|
| 44 |
+
<section class="page-header">
|
| 45 |
+
<h1>Apple Varieties: Organic vs Hybrid</h1>
|
| 46 |
+
<p>Explore different apple varieties and their benefits.</p>
|
| 47 |
+
</section>
|
| 48 |
+
|
| 49 |
+
<!-- Organic Apples Section -->
|
| 50 |
+
<section class="fruits-section">
|
| 51 |
+
<h2>🍃 Organic Apples</h2>
|
| 52 |
+
<div class="card-container">
|
| 53 |
+
<a href="../fruits_variety_set/apple_varieties/ooty-apple.html" class="card">
|
| 54 |
+
<div class="card-image" style="background-image: url('https://5.imimg.com/data5/CE/SD/PH/ANDROID-34421612/product-jpeg.jpg');"></div>
|
| 55 |
+
<div class="card-content">
|
| 56 |
+
<h3>Ooty Apple</h3>
|
| 57 |
+
<p>Grown in high-altitude regions, rich in nutrients.</p>
|
| 58 |
+
</div>
|
| 59 |
+
</a>
|
| 60 |
+
<a href="../fruits_variety_set/apple_varieties/kinnaur-apple.html" class="card">
|
| 61 |
+
<div class="card-image" style="background-image: url('https://www.shutterstock.com/shutterstock/videos/1032125147/thumb/1.jpg?ip=x480');"></div>
|
| 62 |
+
<div class="card-content">
|
| 63 |
+
<h3>Kinnaur Apple</h3>
|
| 64 |
+
<p>Natural and crisp, sourced from the Kinnaur valley.</p>
|
| 65 |
+
</div>
|
| 66 |
+
</a>
|
| 67 |
+
<a href="../fruits_variety_set/apple_varieties/himachal-apple.html" class="card">
|
| 68 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/R.acf27fb962a6ec917726399eecc47e48?rik=KMhoVwrEcU%2f0Ww&riu=http%3a%2f%2fwww.infinitejourneys.in%2fblog%2fwp-content%2fuploads%2f2020%2f09%2fApples-in-Kinnaur-2-2-1024x576.jpg&ehk=w9mt0oPIQ0KjPJE7w0gIHO%2fLkjyJGULxjiK7mIJsdHo%3d&risl=&pid=ImgRaw&r=0');"></div>
|
| 69 |
+
<div class="card-content">
|
| 70 |
+
<h3>Himachal Apple</h3>
|
| 71 |
+
<p>Pure organic apples from Himachal orchards.</p>
|
| 72 |
+
</div>
|
| 73 |
+
</a>
|
| 74 |
+
</div>
|
| 75 |
+
</section>
|
| 76 |
+
|
| 77 |
+
<!-- Hybrid Apples Section -->
|
| 78 |
+
<section class="fruits-section">
|
| 79 |
+
<h2>🔬 Hybrid Apples</h2>
|
| 80 |
+
<div class="card-container">
|
| 81 |
+
<a href="../fruits_variety_set/apple_varieties/honeycrisp-apple.html" class="card">
|
| 82 |
+
<div class="card-image" style="background-image: url('https://cdn.shopify.com/s/files/1/2081/3263/products/honeycrisp_apple_tree_branch_fruit.jpg?v=1569129576');"></div>
|
| 83 |
+
<div class="card-content">
|
| 84 |
+
<h3>Honeycrisp</h3>
|
| 85 |
+
<p>Exceptionally crisp and sweet, loved worldwide.</p>
|
| 86 |
+
</div>
|
| 87 |
+
</a>
|
| 88 |
+
|
| 89 |
+
<a href="../fruits_variety_set/apple_varieties/fuji-apple.html" class="card">
|
| 90 |
+
<div class="card-image" style="background-image: url('https://cdn.shopify.com/s/files/1/0062/8532/8445/products/Fuji_Apple_3_940x.jpg?v=1596828580');"></div>
|
| 91 |
+
<div class="card-content">
|
| 92 |
+
<h3>Fuji Apple</h3>
|
| 93 |
+
<p>Fuji apples are hybrid apples, known for their crisp texture and sweet flavor.</p>
|
| 94 |
+
|
| 95 |
+
</div>
|
| 96 |
+
</a>
|
| 97 |
+
|
| 98 |
+
<a href="../fruits_variety_set/apple_varieties/jazz-apple.html" class="card">
|
| 99 |
+
<div class="card-image" style="background-image: url('https://cdn.freshfruitportal.com/2017/05/Jazz-Apples-on-trees.jpg');"></div>
|
| 100 |
+
<div class="card-content">
|
| 101 |
+
<h3>Jazz Apple</h3>
|
| 102 |
+
<p>A perfect balance of tangy and sweet flavors.</p>
|
| 103 |
+
</div>
|
| 104 |
+
</a>
|
| 105 |
+
<a href="../fruits_variety_set/apple_varieties/envy-apple.html" class="card">
|
| 106 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/R.30db495d3244c29b7061523c3221786f?rik=BDl7ZbXCowVZjA&riu=http%3a%2f%2fmomobud.sg%2fwp-content%2fuploads%2f2014%2f12%2fEnvy-apple-trees-in-New-Zealand.jpeg&ehk=QJQDNaKhilSpo7%2byqgdkLLeGyNGVyAJPs4E7YyXz5i4%3d&risl=&pid=ImgRaw&r=0');"></div>
|
| 107 |
+
<div class="card-content">
|
| 108 |
+
<h3>Envy Apple</h3>
|
| 109 |
+
<p>Slow to brown, with a rich, honeyed sweetness.</p>
|
| 110 |
+
</div>
|
| 111 |
+
</a>
|
| 112 |
+
</div>
|
| 113 |
+
</section>
|
| 114 |
+
</main>
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
|
| 133 |
+
|
| 134 |
+
|
| 135 |
+
|
| 136 |
+
|
| 137 |
+
<style>
|
| 138 |
+
/* Footer Styles */
|
| 139 |
+
.footer {
|
| 140 |
+
background-color: white;
|
| 141 |
+
border-radius: 0.5rem;
|
| 142 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 143 |
+
margin: 1rem;
|
| 144 |
+
padding: 1.5rem;
|
| 145 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 146 |
+
}
|
| 147 |
+
.footer-content {
|
| 148 |
+
width: 100%;
|
| 149 |
+
max-width: 1200px;
|
| 150 |
+
margin: 0 auto;
|
| 151 |
+
display: flex;
|
| 152 |
+
flex-direction: column;
|
| 153 |
+
align-items: center;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
}
|
| 156 |
+
.footer-links {
|
| 157 |
+
display: flex;
|
| 158 |
+
flex-wrap: wrap;
|
| 159 |
+
justify-content: center;
|
| 160 |
+
font-size: 0.875rem;
|
| 161 |
+
color: #4a5568;
|
| 162 |
+
margin: 0;
|
| 163 |
+
padding: 0;
|
| 164 |
+
list-style-type: none;
|
| 165 |
+
}
|
| 166 |
+
.footer-links li {
|
| 167 |
+
margin-right: 1rem;
|
| 168 |
+
}
|
| 169 |
+
.footer-links a {
|
| 170 |
+
text-decoration: none;
|
| 171 |
+
color: inherit;
|
| 172 |
+
transition: color 0.3s ease;
|
| 173 |
+
}
|
| 174 |
+
.footer-divider {
|
| 175 |
+
margin-top: 1.5rem;
|
| 176 |
+
margin-bottom: 1.5rem;
|
| 177 |
+
border-color: #e2e8f0;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit {
|
| 180 |
+
text-align: center;
|
| 181 |
+
font-size: 0.875rem;
|
| 182 |
+
color: #6b7280;
|
| 183 |
+
}
|
| 184 |
+
.footer-credit a {
|
| 185 |
+
text-decoration: none;
|
| 186 |
+
color: #4a5568;
|
| 187 |
+
}
|
| 188 |
+
|
| 189 |
+
/* Dark Mode Footer Styles */
|
| 190 |
+
body.dark .footer {
|
| 191 |
+
background-color: #333;
|
| 192 |
+
color: #f1f1f1;
|
| 193 |
+
}
|
| 194 |
+
body.dark .footer-links a {
|
| 195 |
+
color: #f1f1f1;
|
| 196 |
+
}
|
| 197 |
+
body.dark .footer-divider {
|
| 198 |
+
border-color: #555;
|
| 199 |
+
}
|
| 200 |
+
body.dark .footer-credit a {
|
| 201 |
+
color: #f1f1f1;
|
| 202 |
+
}
|
| 203 |
+
</style>
|
| 204 |
+
|
| 205 |
+
|
| 206 |
+
|
| 207 |
+
|
| 208 |
+
<style>
|
| 209 |
+
/* Footer Styles */
|
| 210 |
+
.footer {
|
| 211 |
+
background-color: white;
|
| 212 |
+
border-radius: 0.5rem;
|
| 213 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 214 |
+
margin: 1rem;
|
| 215 |
+
padding: 1.5rem;
|
| 216 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 217 |
+
}
|
| 218 |
+
.footer-content {
|
| 219 |
+
width: 100%;
|
| 220 |
+
max-width: 1200px;
|
| 221 |
+
margin: 0 auto;
|
| 222 |
+
display: flex;
|
| 223 |
+
flex-direction: column;
|
| 224 |
+
align-items: center;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
}
|
| 227 |
+
.footer-links {
|
| 228 |
+
display: flex;
|
| 229 |
+
flex-wrap: wrap;
|
| 230 |
+
justify-content: center;
|
| 231 |
+
font-size: 0.875rem;
|
| 232 |
+
color: #4a5568;
|
| 233 |
+
margin: 0;
|
| 234 |
+
padding: 0;
|
| 235 |
+
list-style-type: none;
|
| 236 |
+
}
|
| 237 |
+
.footer-links li {
|
| 238 |
+
margin-right: 1rem;
|
| 239 |
+
}
|
| 240 |
+
.footer-links a {
|
| 241 |
+
text-decoration: none;
|
| 242 |
+
color: inherit;
|
| 243 |
+
transition: color 0.3s ease;
|
| 244 |
+
}
|
| 245 |
+
.footer-divider {
|
| 246 |
+
margin-top: 1.5rem;
|
| 247 |
+
margin-bottom: 1.5rem;
|
| 248 |
+
border-color: #e2e8f0;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit {
|
| 251 |
+
text-align: center;
|
| 252 |
+
font-size: 0.875rem;
|
| 253 |
+
color: #6b7280;
|
| 254 |
+
}
|
| 255 |
+
.footer-credit a {
|
| 256 |
+
text-decoration: none;
|
| 257 |
+
color: #4a5568;
|
| 258 |
+
}
|
| 259 |
+
|
| 260 |
+
/* Dark Mode Footer Styles */
|
| 261 |
+
body.dark .footer {
|
| 262 |
+
background-color: #333;
|
| 263 |
+
color: #f1f1f1;
|
| 264 |
+
}
|
| 265 |
+
body.dark .footer-links a {
|
| 266 |
+
color: #f1f1f1;
|
| 267 |
+
}
|
| 268 |
+
body.dark .footer-divider {
|
| 269 |
+
border-color: #555;
|
| 270 |
+
}
|
| 271 |
+
body.dark .footer-credit a {
|
| 272 |
+
color: #f1f1f1;
|
| 273 |
+
}
|
| 274 |
+
</style>
|
| 275 |
+
|
| 276 |
+
|
| 277 |
+
|
| 278 |
+
|
| 279 |
+
|
| 280 |
+
<footer class="footer">
|
| 281 |
+
<div class="footer-content">
|
| 282 |
+
<ul class="footer-links">
|
| 283 |
+
<li><a href="../index.html">Home</a></li>
|
| 284 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 285 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 286 |
+
<li><a href="../about.html">About</a></li>
|
| 287 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 288 |
+
</ul>
|
| 289 |
+
</div>
|
| 290 |
+
<hr class="footer-divider" />
|
| 291 |
+
<div class="footer-credit">
|
| 292 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 293 |
+
</div>
|
| 294 |
+
</footer>
|
| 295 |
+
|
| 296 |
+
<style>
|
| 297 |
+
/* Footer Styles */
|
| 298 |
+
.footer {
|
| 299 |
+
background-color: white;
|
| 300 |
+
border-radius: 0.5rem;
|
| 301 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 302 |
+
margin: 1rem;
|
| 303 |
+
padding: 1.5rem;
|
| 304 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 305 |
+
}
|
| 306 |
+
.footer-content {
|
| 307 |
+
width: 100%;
|
| 308 |
+
max-width: 1200px;
|
| 309 |
+
margin: 0 auto;
|
| 310 |
+
display: flex;
|
| 311 |
+
flex-direction: column;
|
| 312 |
+
align-items: center;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
}
|
| 315 |
+
.footer-links {
|
| 316 |
+
display: flex;
|
| 317 |
+
flex-wrap: wrap;
|
| 318 |
+
justify-content: center;
|
| 319 |
+
font-size: 0.875rem;
|
| 320 |
+
color: #4a5568;
|
| 321 |
+
margin: 0;
|
| 322 |
+
padding: 0;
|
| 323 |
+
list-style-type: none;
|
| 324 |
+
}
|
| 325 |
+
.footer-links li {
|
| 326 |
+
margin-right: 1rem;
|
| 327 |
+
}
|
| 328 |
+
.footer-links a {
|
| 329 |
+
text-decoration: none;
|
| 330 |
+
color: inherit;
|
| 331 |
+
transition: color 0.3s ease;
|
| 332 |
+
}
|
| 333 |
+
.footer-divider {
|
| 334 |
+
margin-top: 1.5rem;
|
| 335 |
+
margin-bottom: 1.5rem;
|
| 336 |
+
border-color: #e2e8f0;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit {
|
| 339 |
+
text-align: center;
|
| 340 |
+
font-size: 0.875rem;
|
| 341 |
+
color: #6b7280;
|
| 342 |
+
}
|
| 343 |
+
.footer-credit a {
|
| 344 |
+
text-decoration: none;
|
| 345 |
+
color: #4a5568;
|
| 346 |
+
}
|
| 347 |
+
|
| 348 |
+
/* Dark Mode Footer Styles */
|
| 349 |
+
body.dark .footer {
|
| 350 |
+
background-color: #333;
|
| 351 |
+
color: #f1f1f1;
|
| 352 |
+
}
|
| 353 |
+
body.dark .footer-links a {
|
| 354 |
+
color: #f1f1f1;
|
| 355 |
+
}
|
| 356 |
+
body.dark .footer-divider {
|
| 357 |
+
border-color: #555;
|
| 358 |
+
}
|
| 359 |
+
body.dark .footer-credit a {
|
| 360 |
+
color: #f1f1f1;
|
| 361 |
+
}
|
| 362 |
+
</style>
|
| 363 |
+
|
| 364 |
+
</body>
|
| 365 |
+
</html>
|
fruits_list/banana.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Banana Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Banana Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different banana varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Bananas Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Bananas</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/banana_varities/yellakki-banana.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://thumbs.dreamstime.com/b/indian-yelakki-banana-fruit-bunch-isolated-white-background-closeup-238036218.jpg');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Yellakki Banana</h3>
|
| 63 |
+
<p>Small, sweet, and rich in flavor, sourced from South India.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/banana_varities/red-banana.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://images-prod.healthline.com/hlcmsresource/images/AN_images/red-bananas-1296x728-feature.jpg');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Red Banana</h3>
|
| 70 |
+
<p>Reddish skin, creamy texture, and high in antioxidants.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/banana_varities/hill-banana.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://www.thekodaichronicle.com/wp-content/uploads/2021/12/virupakshi_hill_banana-gi_tagged_palani_hills-hill_banana_federation_q7zn7z.jpg');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Hill Banana</h3>
|
| 77 |
+
<p>Grown in high-altitude regions, naturally organic.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Bananas Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Bananas</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<!-- <a href="grand-naine.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://i.pinimg.com/originals/89/3e/21/893e21b6a8af8edf2363a5c9535f85d0.jpg');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Grand Naine</h3>
|
| 91 |
+
<p>Popular commercial banana with high yield and sweet taste.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a> -->
|
| 94 |
+
<a href="../fruits_variety_set/banana_varities/g9-banana.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://img.21food.com/20110609/product/1306502236026.jpg');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>G9 Banana</h3>
|
| 98 |
+
<p>Hybrid variety known for its long shelf life and uniform shape.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/banana_varities/cavendish-banana.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://capitalbanana.so/wp-content/uploads/2021/06/shutterstock_391404361.0.jpg');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Cavendish Banana</h3>
|
| 105 |
+
<p>The most widely grown hybrid banana, soft and creamy.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_list/grapes.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Grape Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Grape Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different grape varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Grapes Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Grapes</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/grapes_varieties/concord-grape.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.a18w7RxP3qVC0FlynrlpdwHaHa?rs=1&pid=ImgDetMain');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Concord Grape</h3>
|
| 63 |
+
<p>Rich in flavor, used for juices and jams.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/grapes_varieties/muscat-grape.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.6PSqkUTTHv5-3acd8Y5M4QHaLG?rs=1&pid=ImgDetMain');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Muscat Grape</h3>
|
| 70 |
+
<p>Known for its fragrant aroma and sweetness.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/grapes_varieties/moon-drop-grape.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://www.tasteofhome.com/wp-content/uploads/2019/10/shutterstock_1136246546.jpg');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Moon Drop Grape</h3>
|
| 77 |
+
<p>Unique shape with a rich, juicy taste.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Grapes Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Grapes</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/grapes_varieties/cotton-candy-grape.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://minnetonkaorchards.com/wp-content/uploads/2020/08/Large-Batch-of-Cotton-Candy-Grapes.jpg');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Cotton Candy Grape</h3>
|
| 91 |
+
<p>Sweet hybrid grape with a candy-like taste.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/grapes_varieties/ruby-seedless-grape.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.k008cif6d863V1OSpxgwZAHaFj?rs=1&pid=ImgDetMain');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Ruby Seedless Grape</h3>
|
| 98 |
+
<p>Popular hybrid, perfect for snacking.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/grapes_varieties/black-cornith-grape.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.xOb0RIq2uV4VHTpMm9KpRgHaE8?rs=1&pid=ImgDetMain');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Black Corinth Grape</h3>
|
| 105 |
+
<p>Small, seedless, often used in raisins.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_list/mango.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Mango Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Mango Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different mango varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Mangoes Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Mangoes</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/mango_varieties/alphonso-mango.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.MIzeaUS-9Do55CugZ6kgrQHaHa?rs=1&pid=ImgDetMain');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Alphonso Mango</h3>
|
| 63 |
+
<p>Rich, creamy, and known as the "King of Mangoes."</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/mango_varieties/kesar-mango.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://kj1bcdn.b-cdn.net/media/48567/kesar-mangoes-source-tradeindia.jpg?width=1200');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Kesar Mango</h3>
|
| 70 |
+
<p>Sweet and fragrant, famous in India.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/mango_varieties/dasheri-mango.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://kj1bcdn.b-cdn.net/media/73203/texture-green-juicy-fresh-mango-fruit-group-fresh-green-mango-sell-thai-fruit-tropical-raw-mangoes-tropical-exotic-fruits_520119-1309.jpg');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Dasheri Mango</h3>
|
| 77 |
+
<p>Soft, juicy, and perfect for desserts.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Mangoes Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Mangoes</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/mango_varieties/tommy-atkins-mango.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://celgenbiotech.com/cdn/shop/files/B937BC52-6528-4A9F-BE58-27DE89114395.jpg?v=1712221750&width=1946');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Tommy Atkins Mango</h3>
|
| 91 |
+
<p>Firm texture, widely exported, and mildly sweet.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/mango_varieties/haden-mango.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.z22cy_v6HwNmTh3iS4kPnQHaHZ?rs=1&pid=ImgDetMain');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Haden Mango</h3>
|
| 98 |
+
<p>Vibrant red skin, fibrous, and aromatic.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/mango_varieties/palmer-mango.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/R.87d511740a4d11e7548a5852e2aad0df?rik=HvuXoHPm7xUOXg&riu=http%3a%2f%2fplantsender.com.au%2fwp-content%2fuploads%2f2022%2f07%2fmango-palmer.webp&ehk=fKncnwCkFWiD7ZPJPSFXrhRmohRyXn8hVM91e10VUsU%3d&risl=&pid=ImgRaw&r=0');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Palmer Mango</h3>
|
| 105 |
+
<p>Large, juicy, and with a mild sweetness.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_list/orange.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Orange Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Orange Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different orange varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Oranges Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Oranges</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/orange_varities/valencia-orange.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://www.specialtyproduce.com/sppics/121.png');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Valencia Orange</h3>
|
| 63 |
+
<p>Sweet and juicy, perfect for fresh orange juice.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/orange_varities/blood-orange.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://zaxrosenberg.com/wp-content/uploads/2015/08/orange.png');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Blood Orange</h3>
|
| 70 |
+
<p>Rich in antioxidants, known for its deep red flesh.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/orange_varities/navel-orange.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.yskT-TMx5C-vrcVwWB9FkAHaFM?rs=1&pid=ImgDetMain');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Navel Orange</h3>
|
| 77 |
+
<p>Seedless and easy to peel, perfect for snacking.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Oranges Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Oranges</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/orange_varities/tangelo-orange.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://static.libertyprim.com/files/familles/tangelo-large.jpg?1569495392');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Tangelo Orange</h3>
|
| 91 |
+
<p>A cross between tangerine and grapefruit, tangy and sweet.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/orange_varities/cara-cara-orange.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://cdn.shopify.com/s/files/1/0206/9470/files/Cara_Cara_Oranges-squared-1024.jpg?5854290015307909639');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Cara Cara Orange</h3>
|
| 98 |
+
<p>Pinkish-red flesh, extra sweet with low acidity.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/orange_varities/mandarin-orange.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://watermark.lovepik.com/photo/20211129/large/lovepik-mandarin-orange-picture_501200790.jpg');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Mandarin Orange</h3>
|
| 105 |
+
<p>Small, seedless, and easy to peel, rich in flavor.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_list/pineapple.html
ADDED
|
@@ -0,0 +1,361 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Pineapple Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Pineapple Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different pineapple varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Pineapples Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Pineapples</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/pineapple_varieties/red-spanish-pineapple.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://minnetonkaorchards.com/wp-content/uploads/2022/12/Red-Pineapple-SS-2143369733-1024x945.jpg');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Red Spanish Pineapple</h3>
|
| 63 |
+
<p>Known for its aromatic flavor and firm texture.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/pineapple_varieties/queen-pineapple.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.gTNR3b7rWXtofMr_ji3-BwHaFf?rs=1&pid=ImgDetMain');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Queen Pineapple</h3>
|
| 70 |
+
<p>Sweet and fragrant, commonly found in tropical regions.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/pineapple_varieties/perolera-pineapple.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://media.istockphoto.com/photos/fresh-ananas-comosus-picture-id1414143562?k=20&m=1414143562&s=612x612&w=0&h=gzR8cUPx1jfFSkQGOybWTN2T9-kemqG1tqg4PeLo360=');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Perolera Pineapple</h3>
|
| 77 |
+
<p>Rich in flavor with a soft, juicy texture.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Pineapples Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Pineapples</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/pineapple_varieties/md-2-pineapple.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.tpmuuQ_84ls4kMWTcoATWwHaFj?rs=1&pid=ImgDetMain');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>MD-2 Pineapple</h3>
|
| 91 |
+
<p>Golden, extra sweet, and low in acidity.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/pineapple_varieties/smooth-cayenne-pineapple.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://minnetonkaorchards.com/wp-content/uploads/2022/11/Fresh-half-of-smooth-cayenne.jpg');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Smooth Cayenne Pineapple</h3>
|
| 98 |
+
<p>Large and juicy with a perfect balance of sweetness.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/pineapple_varieties/golden-sweet-pineapple.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.MaQba4nnjvOZQEiBDn1K4gHaHb?rs=1&pid=ImgDetMain');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Golden Sweet Pineapple</h3>
|
| 105 |
+
<p>Bright yellow, extremely sweet, and fiber-free.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
| 361 |
+
|
fruits_list/strawberry.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Strawberry Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Strawberry Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different strawberry varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Strawberries Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Strawberries</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/strawberry_variety/alpine-strawberry.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://cdn.mos.cms.futurecdn.net/c9EBorPZnW5dKWjq8aKNAP.jpg');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Alpine Strawberry</h3>
|
| 63 |
+
<p>Small, flavorful, and packed with antioxidants.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/strawberry_variety/beach-strawberry.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://i.etsystatic.com/15717780/r/il/7370ee/2162143618/il_fullxfull.2162143618_eonz.jpg');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Beach Strawberry</h3>
|
| 70 |
+
<p>Wild variety, known for its rich taste and resilience.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/strawberry_variety/virginia-strawberry.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://www.friendsofeloisebutler.org/generaljpegs/Seasons/local/virgstrawberryfrt300.jpg');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Virginia Strawberry</h3>
|
| 77 |
+
<p>Native to North America, sweet and aromatic.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Strawberries Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Strawberries</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/strawberry_variety/garden-strawberry.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://thumbs.dreamstime.com/z/garden-strawberry-growing-seedbed-ground-vegetable-household-plot-dacha-60666169.jpg');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Garden Strawberry</h3>
|
| 91 |
+
<p>The most common variety, large and juicy.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/strawberry_variety/albion-strawberry.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.927uOVg78-nhKGN9hm6UEwHaHa?rs=1&pid=ImgDetMain');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Albion Strawberry</h3>
|
| 98 |
+
<p>Known for its sweetness and firm texture.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/strawberry_variety/seascape-strawberry.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.-0FfG-4U4OfW-gPCZ9u7iQHaHa?rs=1&pid=ImgDetMain');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Seascape Strawberry</h3>
|
| 105 |
+
<p>Hybrid with a balance of sweetness and tartness.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_list/watermelon.html
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Watermelon Varieties | Organic vs Hybrid</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/>
|
| 11 |
+
<link rel="stylesheet" href="../global-css-cards.css">
|
| 12 |
+
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
<script src="../script.js"></script>
|
| 28 |
+
</head>
|
| 29 |
+
<body>
|
| 30 |
+
<!-- Header & Navigation -->
|
| 31 |
+
<header>
|
| 32 |
+
<nav>
|
| 33 |
+
<div class="logo">
|
| 34 |
+
<a href="index.html">NatureCompare</a>
|
| 35 |
+
</div>
|
| 36 |
+
<ul class="nav-links">
|
| 37 |
+
<li><a href="../index.html">Home</a></li>
|
| 38 |
+
<li><a href="../fruits.html" class="active">Fruits</a></li>
|
| 39 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 40 |
+
<li><a href="../about.html">About</a></li>
|
| 41 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 42 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 43 |
+
</ul>
|
| 44 |
+
</nav>
|
| 45 |
+
</header>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main>
|
| 49 |
+
<!-- Page Header -->
|
| 50 |
+
<section class="page-header">
|
| 51 |
+
<h1>Watermelon Varieties: Organic vs Hybrid</h1>
|
| 52 |
+
<p>Explore different watermelon varieties and their benefits.</p>
|
| 53 |
+
</section>
|
| 54 |
+
|
| 55 |
+
<!-- Organic Watermelons Section -->
|
| 56 |
+
<section class="fruits-section">
|
| 57 |
+
<h2>🌱 Organic Watermelons</h2>
|
| 58 |
+
<div class="card-container">
|
| 59 |
+
<a href="../fruits_variety_set/watermelon-varieties/sugar-baby-watermelon.html" class="card">
|
| 60 |
+
<div class="card-image" style="background-image: url('https://www.gardeningknowhow.com/wp-content/uploads/2014/08/sugar-baby-1536x1152.jpg');"></div>
|
| 61 |
+
<div class="card-content">
|
| 62 |
+
<h3>Sugar Baby Watermelon</h3>
|
| 63 |
+
<p>Small and sweet with dark green skin.</p>
|
| 64 |
+
</div>
|
| 65 |
+
</a>
|
| 66 |
+
<a href="../fruits_variety_set/watermelon-varieties/moon-and-stars-watermelon.html" class="card">
|
| 67 |
+
<div class="card-image" style="background-image: url('https://www.ufseeds.com/on/demandware.static/-/Sites-master-urbanfarmer/default/dw61916b19/images/products/Organic%20Moon%20and%20Stars%20Watermelon.jpg');"></div>
|
| 68 |
+
<div class="card-content">
|
| 69 |
+
<h3>Moon & Stars Watermelon</h3>
|
| 70 |
+
<p>Unique yellow speckled rind with rich, sweet flavor.</p>
|
| 71 |
+
</div>
|
| 72 |
+
</a>
|
| 73 |
+
<a href="../fruits_variety_set/watermelon-varieties/crimson-sweet-watermelon.html" class="card">
|
| 74 |
+
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.LJ8U36k1Y0FzqySjSTvZlAHaHa?rs=1&pid=ImgDetMain');"></div>
|
| 75 |
+
<div class="card-content">
|
| 76 |
+
<h3>Crimson Sweet Watermelon</h3>
|
| 77 |
+
<p>Juicy, bright red flesh with excellent sweetness.</p>
|
| 78 |
+
</div>
|
| 79 |
+
</a>
|
| 80 |
+
</div>
|
| 81 |
+
</section>
|
| 82 |
+
|
| 83 |
+
<!-- Hybrid Watermelons Section -->
|
| 84 |
+
<section class="fruits-section">
|
| 85 |
+
<h2>🔬 Hybrid Watermelons</h2>
|
| 86 |
+
<div class="card-container">
|
| 87 |
+
<a href="../fruits_variety_set/watermelon-varieties/seedless-watermelon.html" class="card">
|
| 88 |
+
<div class="card-image" style="background-image: url('https://minnetonkaorchards.com/wp-content/uploads/2022/10/Red-Seedless-Watermelon-SS-215301571.jpg');"></div>
|
| 89 |
+
<div class="card-content">
|
| 90 |
+
<h3>Seedless Watermelon</h3>
|
| 91 |
+
<p>Convenient and sweet, perfect for easy eating.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</a>
|
| 94 |
+
<a href="../fruits_variety_set/watermelon-varieties/yellow-doll-watermelon.html" class="card">
|
| 95 |
+
<div class="card-image" style="background-image: url('https://cdn.shopify.com/s/files/1/1698/1675/products/Watermelon_Yellow_Doll.jpg?v=1557508452');"></div>
|
| 96 |
+
<div class="card-content">
|
| 97 |
+
<h3>Yellow Doll Watermelon</h3>
|
| 98 |
+
<p>Bright yellow flesh with a tropical taste.</p>
|
| 99 |
+
</div>
|
| 100 |
+
</a>
|
| 101 |
+
<a href="../fruits_variety_set/watermelon-varieties/jubilee-watermelon.html" class="card">
|
| 102 |
+
<div class="card-image" style="background-image: url('https://www.gardeningknowhow.com/wp-content/uploads/2021/07/jubilee-sweet-watermelon-1536x1152.jpg');"></div>
|
| 103 |
+
<div class="card-content">
|
| 104 |
+
<h3>Jubilee Watermelon</h3>
|
| 105 |
+
<p>Large, striped rind with high sugar content.</p>
|
| 106 |
+
</div>
|
| 107 |
+
</a>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
</main>
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
|
| 132 |
+
<style>
|
| 133 |
+
/* Footer Styles */
|
| 134 |
+
.footer {
|
| 135 |
+
background-color: white;
|
| 136 |
+
border-radius: 0.5rem;
|
| 137 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 138 |
+
margin: 1rem;
|
| 139 |
+
padding: 1.5rem;
|
| 140 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 141 |
+
}
|
| 142 |
+
.footer-content {
|
| 143 |
+
width: 100%;
|
| 144 |
+
max-width: 1200px;
|
| 145 |
+
margin: 0 auto;
|
| 146 |
+
display: flex;
|
| 147 |
+
flex-direction: column;
|
| 148 |
+
align-items: center;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
}
|
| 151 |
+
.footer-links {
|
| 152 |
+
display: flex;
|
| 153 |
+
flex-wrap: wrap;
|
| 154 |
+
justify-content: center;
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
color: #4a5568;
|
| 157 |
+
margin: 0;
|
| 158 |
+
padding: 0;
|
| 159 |
+
list-style-type: none;
|
| 160 |
+
}
|
| 161 |
+
.footer-links li {
|
| 162 |
+
margin-right: 1rem;
|
| 163 |
+
}
|
| 164 |
+
.footer-links a {
|
| 165 |
+
text-decoration: none;
|
| 166 |
+
color: inherit;
|
| 167 |
+
transition: color 0.3s ease;
|
| 168 |
+
}
|
| 169 |
+
.footer-divider {
|
| 170 |
+
margin-top: 1.5rem;
|
| 171 |
+
margin-bottom: 1.5rem;
|
| 172 |
+
border-color: #e2e8f0;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit {
|
| 175 |
+
text-align: center;
|
| 176 |
+
font-size: 0.875rem;
|
| 177 |
+
color: #6b7280;
|
| 178 |
+
}
|
| 179 |
+
.footer-credit a {
|
| 180 |
+
text-decoration: none;
|
| 181 |
+
color: #4a5568;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
/* Dark Mode Footer Styles */
|
| 185 |
+
body.dark .footer {
|
| 186 |
+
background-color: #333;
|
| 187 |
+
color: #f1f1f1;
|
| 188 |
+
}
|
| 189 |
+
body.dark .footer-links a {
|
| 190 |
+
color: #f1f1f1;
|
| 191 |
+
}
|
| 192 |
+
body.dark .footer-divider {
|
| 193 |
+
border-color: #555;
|
| 194 |
+
}
|
| 195 |
+
body.dark .footer-credit a {
|
| 196 |
+
color: #f1f1f1;
|
| 197 |
+
}
|
| 198 |
+
</style>
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
|
| 203 |
+
<style>
|
| 204 |
+
/* Footer Styles */
|
| 205 |
+
.footer {
|
| 206 |
+
background-color: white;
|
| 207 |
+
border-radius: 0.5rem;
|
| 208 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 209 |
+
margin: 1rem;
|
| 210 |
+
padding: 1.5rem;
|
| 211 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 212 |
+
}
|
| 213 |
+
.footer-content {
|
| 214 |
+
width: 100%;
|
| 215 |
+
max-width: 1200px;
|
| 216 |
+
margin: 0 auto;
|
| 217 |
+
display: flex;
|
| 218 |
+
flex-direction: column;
|
| 219 |
+
align-items: center;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
}
|
| 222 |
+
.footer-links {
|
| 223 |
+
display: flex;
|
| 224 |
+
flex-wrap: wrap;
|
| 225 |
+
justify-content: center;
|
| 226 |
+
font-size: 0.875rem;
|
| 227 |
+
color: #4a5568;
|
| 228 |
+
margin: 0;
|
| 229 |
+
padding: 0;
|
| 230 |
+
list-style-type: none;
|
| 231 |
+
}
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
.footer-links a {
|
| 236 |
+
text-decoration: none;
|
| 237 |
+
color: inherit;
|
| 238 |
+
transition: color 0.3s ease;
|
| 239 |
+
}
|
| 240 |
+
.footer-divider {
|
| 241 |
+
margin-top: 1.5rem;
|
| 242 |
+
margin-bottom: 1.5rem;
|
| 243 |
+
border-color: #e2e8f0;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit {
|
| 246 |
+
text-align: center;
|
| 247 |
+
font-size: 0.875rem;
|
| 248 |
+
color: #6b7280;
|
| 249 |
+
}
|
| 250 |
+
.footer-credit a {
|
| 251 |
+
text-decoration: none;
|
| 252 |
+
color: #4a5568;
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
/* Dark Mode Footer Styles */
|
| 256 |
+
body.dark .footer {
|
| 257 |
+
background-color: #333;
|
| 258 |
+
color: #f1f1f1;
|
| 259 |
+
}
|
| 260 |
+
body.dark .footer-links a {
|
| 261 |
+
color: #f1f1f1;
|
| 262 |
+
}
|
| 263 |
+
body.dark .footer-divider {
|
| 264 |
+
border-color: #555;
|
| 265 |
+
}
|
| 266 |
+
body.dark .footer-credit a {
|
| 267 |
+
color: #f1f1f1;
|
| 268 |
+
}
|
| 269 |
+
</style>
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
|
| 275 |
+
<footer class="footer">
|
| 276 |
+
<div class="footer-content">
|
| 277 |
+
<ul class="footer-links">
|
| 278 |
+
<li><a href="../index.html">Home</a></li>
|
| 279 |
+
<li><a href="../fruits.html">Fruits</a></li>
|
| 280 |
+
<li><a href="../vegetables.html">Vegetables</a></li>
|
| 281 |
+
<li><a href="../about.html">About</a></li>
|
| 282 |
+
<li><a href="../contact.html">Contact</a></li>
|
| 283 |
+
</ul>
|
| 284 |
+
</div>
|
| 285 |
+
<hr class="footer-divider" />
|
| 286 |
+
<div class="footer-credit">
|
| 287 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 288 |
+
</div>
|
| 289 |
+
</footer>
|
| 290 |
+
|
| 291 |
+
<style>
|
| 292 |
+
/* Footer Styles */
|
| 293 |
+
.footer {
|
| 294 |
+
background-color: white;
|
| 295 |
+
border-radius: 0.5rem;
|
| 296 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 297 |
+
margin: 1rem;
|
| 298 |
+
padding: 1.5rem;
|
| 299 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 300 |
+
}
|
| 301 |
+
.footer-content {
|
| 302 |
+
width: 100%;
|
| 303 |
+
max-width: 1200px;
|
| 304 |
+
margin: 0 auto;
|
| 305 |
+
display: flex;
|
| 306 |
+
flex-direction: column;
|
| 307 |
+
align-items: center;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
}
|
| 310 |
+
.footer-links {
|
| 311 |
+
display: flex;
|
| 312 |
+
flex-wrap: wrap;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
font-size: 0.875rem;
|
| 315 |
+
color: #4a5568;
|
| 316 |
+
margin: 0;
|
| 317 |
+
padding: 0;
|
| 318 |
+
list-style-type: none;
|
| 319 |
+
}
|
| 320 |
+
.footer-links li {
|
| 321 |
+
margin-right: 1rem;
|
| 322 |
+
}
|
| 323 |
+
.footer-links a {
|
| 324 |
+
text-decoration: none;
|
| 325 |
+
color: inherit;
|
| 326 |
+
transition: color 0.3s ease;
|
| 327 |
+
}
|
| 328 |
+
.footer-divider {
|
| 329 |
+
margin-top: 1.5rem;
|
| 330 |
+
margin-bottom: 1.5rem;
|
| 331 |
+
border-color: #e2e8f0;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit {
|
| 334 |
+
text-align: center;
|
| 335 |
+
font-size: 0.875rem;
|
| 336 |
+
color: #6b7280;
|
| 337 |
+
}
|
| 338 |
+
.footer-credit a {
|
| 339 |
+
text-decoration: none;
|
| 340 |
+
color: #4a5568;
|
| 341 |
+
}
|
| 342 |
+
|
| 343 |
+
/* Dark Mode Footer Styles */
|
| 344 |
+
body.dark .footer {
|
| 345 |
+
background-color: #333;
|
| 346 |
+
color: #f1f1f1;
|
| 347 |
+
}
|
| 348 |
+
body.dark .footer-links a {
|
| 349 |
+
color: #f1f1f1;
|
| 350 |
+
}
|
| 351 |
+
body.dark .footer-divider {
|
| 352 |
+
border-color: #555;
|
| 353 |
+
}
|
| 354 |
+
body.dark .footer-credit a {
|
| 355 |
+
color: #f1f1f1;
|
| 356 |
+
}
|
| 357 |
+
</style>
|
| 358 |
+
|
| 359 |
+
</body>
|
| 360 |
+
</html>
|
fruits_variety_set/apple_varieties/envy-apple.html
ADDED
|
@@ -0,0 +1,378 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
|
| 4 |
+
<head>
|
| 5 |
+
<meta charset="UTF-8" />
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 7 |
+
<title>Envy Apple | Health Benefits & Issues Solved</title>
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet" />
|
| 10 |
+
<link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero {
|
| 13 |
+
background: url('https://aliveplant.com/wp-content/uploads/2023/04/SW.jpeg') center/cover no-repeat;
|
| 14 |
+
}
|
| 15 |
+
</style>
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
<script src="../../script.js"></script>
|
| 29 |
+
</head>
|
| 30 |
+
|
| 31 |
+
<body>
|
| 32 |
+
<!-- Header and Navigation -->
|
| 33 |
+
<header>
|
| 34 |
+
<nav>
|
| 35 |
+
<div class="logo">
|
| 36 |
+
<a href="index.html">NatureCompare</a>
|
| 37 |
+
</div>
|
| 38 |
+
<div class="hamburger">
|
| 39 |
+
<span></span>
|
| 40 |
+
<span></span>
|
| 41 |
+
<span></span>
|
| 42 |
+
</div>
|
| 43 |
+
<ul class="nav-links">
|
| 44 |
+
<li><a href="../../index.html">Home</a></li>
|
| 45 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 46 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 47 |
+
<li><a href="about.html">About</a></li>
|
| 48 |
+
<li><a href="contact.html">Contact</a></li>
|
| 49 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 50 |
+
</ul>
|
| 51 |
+
</nav>
|
| 52 |
+
</header>
|
| 53 |
+
|
| 54 |
+
<!-- Hero Section -->
|
| 55 |
+
<section class="hero">
|
| 56 |
+
<div class="hero-content">
|
| 57 |
+
<h1>Envy Apple</h1>
|
| 58 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 59 |
+
</div>
|
| 60 |
+
</section>
|
| 61 |
+
|
| 62 |
+
<!-- Apple Page Header -->
|
| 63 |
+
<section class="variety-header">
|
| 64 |
+
<h1>Envy Apple</h1>
|
| 65 |
+
<p>Envy apples are known for their crisp texture, natural sweetness, and long-lasting freshness, making them a
|
| 66 |
+
popular choice among apple lovers.</p>
|
| 67 |
+
</section>
|
| 68 |
+
|
| 69 |
+
<!-- Apple Comparison/Card Section -->
|
| 70 |
+
<section class="variety-comparison" id="details">
|
| 71 |
+
<div class="variety-category">
|
| 72 |
+
<h2>Health Benefits</h2>
|
| 73 |
+
<div class="variety-list">
|
| 74 |
+
<div class="variety-item">
|
| 75 |
+
<p>Rich in fiber, aiding digestion and gut health.</p>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="variety-item">
|
| 78 |
+
<p>Packed with antioxidants that help protect against cell damage.</p>
|
| 79 |
+
</div>
|
| 80 |
+
<div class="variety-item">
|
| 81 |
+
<p>Supports heart health by regulating cholesterol levels.</p>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="variety-item">
|
| 84 |
+
<p>Provides essential vitamins to boost immune function.</p>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="variety-category">
|
| 89 |
+
<h2>Issues It Helps Solve</h2>
|
| 90 |
+
<div class="variety-list">
|
| 91 |
+
<div class="variety-item">
|
| 92 |
+
<p>Helps in weight management due to its high fiber and water content.</p>
|
| 93 |
+
</div>
|
| 94 |
+
<div class="variety-item">
|
| 95 |
+
<p>Promotes healthy skin with vitamin C and antioxidants.</p>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="variety-item">
|
| 98 |
+
<p>Reduces the risk of heart disease by improving circulation.</p>
|
| 99 |
+
</div>
|
| 100 |
+
<div class="variety-item">
|
| 101 |
+
<p>Regulates blood sugar levels, beneficial for diabetics.</p>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</section>
|
| 106 |
+
|
| 107 |
+
|
| 108 |
+
|
| 109 |
+
|
| 110 |
+
|
| 111 |
+
|
| 112 |
+
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
<style>
|
| 120 |
+
/* Footer Styles */
|
| 121 |
+
.footer {
|
| 122 |
+
background-color: white;
|
| 123 |
+
border-radius: 0.5rem;
|
| 124 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 125 |
+
margin: 1rem;
|
| 126 |
+
padding: 1.5rem;
|
| 127 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
.footer-content {
|
| 131 |
+
width: 100%;
|
| 132 |
+
max-width: 1200px;
|
| 133 |
+
margin: 0 auto;
|
| 134 |
+
display: flex;
|
| 135 |
+
flex-direction: column;
|
| 136 |
+
align-items: center;
|
| 137 |
+
justify-content: center;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.footer-links {
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-wrap: wrap;
|
| 143 |
+
justify-content: center;
|
| 144 |
+
font-size: 0.875rem;
|
| 145 |
+
color: #4a5568;
|
| 146 |
+
margin: 0;
|
| 147 |
+
padding: 0;
|
| 148 |
+
list-style-type: none;
|
| 149 |
+
}
|
| 150 |
+
|
| 151 |
+
.footer-links li {
|
| 152 |
+
margin-right: 1rem;
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
.footer-links a {
|
| 156 |
+
text-decoration: none;
|
| 157 |
+
color: inherit;
|
| 158 |
+
transition: color 0.3s ease;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
.footer-divider {
|
| 162 |
+
margin-top: 1.5rem;
|
| 163 |
+
margin-bottom: 1.5rem;
|
| 164 |
+
border-color: #e2e8f0;
|
| 165 |
+
}
|
| 166 |
+
|
| 167 |
+
.footer-credit {
|
| 168 |
+
text-align: center;
|
| 169 |
+
font-size: 0.875rem;
|
| 170 |
+
color: #6b7280;
|
| 171 |
+
}
|
| 172 |
+
|
| 173 |
+
.footer-credit a {
|
| 174 |
+
text-decoration: none;
|
| 175 |
+
color: #4a5568;
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
/* Dark Mode Footer Styles */
|
| 179 |
+
body.dark .footer {
|
| 180 |
+
background-color: #333;
|
| 181 |
+
color: #f1f1f1;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
body.dark .footer-divider {
|
| 189 |
+
border-color: #555;
|
| 190 |
+
}
|
| 191 |
+
|
| 192 |
+
body.dark .footer-credit a {
|
| 193 |
+
color: #f1f1f1;
|
| 194 |
+
}
|
| 195 |
+
</style>
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
|
| 199 |
+
|
| 200 |
+
<style>
|
| 201 |
+
/* Footer Styles */
|
| 202 |
+
.footer {
|
| 203 |
+
background-color: white;
|
| 204 |
+
border-radius: 0.5rem;
|
| 205 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 206 |
+
margin: 1rem;
|
| 207 |
+
padding: 1.5rem;
|
| 208 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 209 |
+
}
|
| 210 |
+
|
| 211 |
+
.footer-content {
|
| 212 |
+
width: 100%;
|
| 213 |
+
max-width: 1200px;
|
| 214 |
+
margin: 0 auto;
|
| 215 |
+
display: flex;
|
| 216 |
+
flex-direction: column;
|
| 217 |
+
align-items: center;
|
| 218 |
+
justify-content: center;
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
.footer-links {
|
| 222 |
+
display: flex;
|
| 223 |
+
flex-wrap: wrap;
|
| 224 |
+
justify-content: center;
|
| 225 |
+
font-size: 0.875rem;
|
| 226 |
+
color: #4a5568;
|
| 227 |
+
margin: 0;
|
| 228 |
+
padding: 0;
|
| 229 |
+
list-style-type: none;
|
| 230 |
+
}
|
| 231 |
+
|
| 232 |
+
.footer-links li {
|
| 233 |
+
margin-right: 1rem;
|
| 234 |
+
}
|
| 235 |
+
|
| 236 |
+
.footer-links a {
|
| 237 |
+
text-decoration: none;
|
| 238 |
+
color: inherit;
|
| 239 |
+
transition: color 0.3s ease;
|
| 240 |
+
}
|
| 241 |
+
|
| 242 |
+
.footer-divider {
|
| 243 |
+
margin-top: 1.5rem;
|
| 244 |
+
margin-bottom: 1.5rem;
|
| 245 |
+
border-color: #e2e8f0;
|
| 246 |
+
}
|
| 247 |
+
|
| 248 |
+
.footer-credit {
|
| 249 |
+
text-align: center;
|
| 250 |
+
font-size: 0.875rem;
|
| 251 |
+
color: #6b7280;
|
| 252 |
+
}
|
| 253 |
+
|
| 254 |
+
.footer-credit a {
|
| 255 |
+
text-decoration: none;
|
| 256 |
+
color: #4a5568;
|
| 257 |
+
}
|
| 258 |
+
|
| 259 |
+
/* Dark Mode Footer Styles */
|
| 260 |
+
body.dark .footer {
|
| 261 |
+
background-color: #333;
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
|
| 265 |
+
body.dark .footer-links a {
|
| 266 |
+
color: #f1f1f1;
|
| 267 |
+
}
|
| 268 |
+
|
| 269 |
+
body.dark .footer-divider {
|
| 270 |
+
border-color: #555;
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
body.dark .footer-credit a {
|
| 274 |
+
color: #f1f1f1;
|
| 275 |
+
}
|
| 276 |
+
</style>
|
| 277 |
+
|
| 278 |
+
|
| 279 |
+
|
| 280 |
+
|
| 281 |
+
|
| 282 |
+
<footer class="footer">
|
| 283 |
+
<div class="footer-content">
|
| 284 |
+
<ul class="footer-links">
|
| 285 |
+
<li><a href="../../index.html">Home</a></li>
|
| 286 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 287 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 288 |
+
<li><a href="../../about.html">About</a></li>
|
| 289 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 290 |
+
</ul>
|
| 291 |
+
</div>
|
| 292 |
+
<hr class="footer-divider" />
|
| 293 |
+
<div class="footer-credit">
|
| 294 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 295 |
+
</div>
|
| 296 |
+
</footer>
|
| 297 |
+
|
| 298 |
+
<style>
|
| 299 |
+
/* Footer Styles */
|
| 300 |
+
.footer {
|
| 301 |
+
background-color: white;
|
| 302 |
+
border-radius: 0.5rem;
|
| 303 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 304 |
+
margin: 1rem;
|
| 305 |
+
padding: 1.5rem;
|
| 306 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 307 |
+
}
|
| 308 |
+
|
| 309 |
+
.footer-content {
|
| 310 |
+
width: 100%;
|
| 311 |
+
max-width: 1200px;
|
| 312 |
+
margin: 0 auto;
|
| 313 |
+
display: flex;
|
| 314 |
+
flex-direction: column;
|
| 315 |
+
align-items: center;
|
| 316 |
+
justify-content: center;
|
| 317 |
+
}
|
| 318 |
+
|
| 319 |
+
.footer-links {
|
| 320 |
+
display: flex;
|
| 321 |
+
flex-wrap: wrap;
|
| 322 |
+
justify-content: center;
|
| 323 |
+
font-size: 0.875rem;
|
| 324 |
+
color: #4a5568;
|
| 325 |
+
margin: 0;
|
| 326 |
+
padding: 0;
|
| 327 |
+
list-style-type: none;
|
| 328 |
+
}
|
| 329 |
+
|
| 330 |
+
.footer-links li {
|
| 331 |
+
margin-right: 1rem;
|
| 332 |
+
}
|
| 333 |
+
|
| 334 |
+
.footer-links a {
|
| 335 |
+
text-decoration: none;
|
| 336 |
+
color: inherit;
|
| 337 |
+
transition: color 0.3s ease;
|
| 338 |
+
}
|
| 339 |
+
|
| 340 |
+
.footer-divider {
|
| 341 |
+
margin-top: 1.5rem;
|
| 342 |
+
margin-bottom: 1.5rem;
|
| 343 |
+
border-color: #e2e8f0;
|
| 344 |
+
}
|
| 345 |
+
|
| 346 |
+
.footer-credit {
|
| 347 |
+
text-align: center;
|
| 348 |
+
font-size: 0.875rem;
|
| 349 |
+
color: #6b7280;
|
| 350 |
+
}
|
| 351 |
+
|
| 352 |
+
.footer-credit a {
|
| 353 |
+
text-decoration: none;
|
| 354 |
+
color: #4a5568;
|
| 355 |
+
}
|
| 356 |
+
|
| 357 |
+
/* Dark Mode Footer Styles */
|
| 358 |
+
body.dark .footer {
|
| 359 |
+
background-color: #333;
|
| 360 |
+
color: #f1f1f1;
|
| 361 |
+
}
|
| 362 |
+
|
| 363 |
+
body.dark .footer-links a {
|
| 364 |
+
color: #f1f1f1;
|
| 365 |
+
}
|
| 366 |
+
|
| 367 |
+
body.dark .footer-divider {
|
| 368 |
+
border-color: #555;
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
body.dark .footer-credit a {
|
| 372 |
+
color: #f1f1f1;
|
| 373 |
+
}
|
| 374 |
+
</style>
|
| 375 |
+
|
| 376 |
+
</body>
|
| 377 |
+
|
| 378 |
+
</html>
|
fruits_variety_set/apple_varieties/fuji-apple.html
ADDED
|
@@ -0,0 +1,359 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Fuji Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://www.tripsavvy.com/thmb/uTHZEWwhrECctYt6mjheV4Hm_zc=/4288x2848/filters:no_upscale():max_bytes(150000):strip_icc()/close-up-of-fuji-apples-rippening-on-tree-185005240-5a9da23ba9d4f90037e4e9bc.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
|
| 38 |
+
|
| 39 |
+
<script src="../../script.js"></script>
|
| 40 |
+
</head>
|
| 41 |
+
<body>
|
| 42 |
+
<!-- Header and Navigation -->
|
| 43 |
+
<header>
|
| 44 |
+
<nav>
|
| 45 |
+
<div class="logo">
|
| 46 |
+
<a href="index.html">NatureCompare</a>
|
| 47 |
+
</div>
|
| 48 |
+
<div class="hamburger">
|
| 49 |
+
<span></span>
|
| 50 |
+
<span></span>
|
| 51 |
+
<span></span>
|
| 52 |
+
</div>
|
| 53 |
+
<ul class="nav-links">
|
| 54 |
+
<li><a href="../../index.html">Home</a></li>
|
| 55 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 56 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 57 |
+
<li><a href="../../about.html">About</a></li>
|
| 58 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 59 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 60 |
+
|
| 61 |
+
</ul>
|
| 62 |
+
</nav>
|
| 63 |
+
</header>
|
| 64 |
+
|
| 65 |
+
<!-- Hero Section -->
|
| 66 |
+
<section class="hero">
|
| 67 |
+
<div class="hero-content">
|
| 68 |
+
<h1>Fuji Apple</h1>
|
| 69 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 70 |
+
</div>
|
| 71 |
+
</section>
|
| 72 |
+
|
| 73 |
+
<!-- Apple Page Header -->
|
| 74 |
+
<section class="variety-header">
|
| 75 |
+
<h1>Fuji Apple</h1>
|
| 76 |
+
<p>Known for its crisp texture and sweet flavor, Fuji apples are rich in nutrients and health benefits.</p>
|
| 77 |
+
</section>
|
| 78 |
+
|
| 79 |
+
<!-- Apple Comparison/Card Section -->
|
| 80 |
+
<section class="variety-comparison" id="details">
|
| 81 |
+
<div class="variety-category">
|
| 82 |
+
<h2>Health Benefits</h2>
|
| 83 |
+
<div class="variety-list">
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in antioxidants, reducing the risk of chronic diseases.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by lowering cholesterol levels.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Promotes gut health with natural fiber content.</p>
|
| 92 |
+
</div>
|
| 93 |
+
<div class="variety-item">
|
| 94 |
+
<p>Boosts energy levels with natural sugars and vitamins.</p>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="variety-category">
|
| 99 |
+
<h2>Issues It Helps Solve</h2>
|
| 100 |
+
<div class="variety-list">
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps regulate blood sugar, beneficial for diabetes management.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Aids in weight control due to its low-calorie nature.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Improves digestion and prevents constipation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
<div class="variety-item">
|
| 111 |
+
<p>Supports skin health with essential vitamins and hydration.</p>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
</section>
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
<style>
|
| 132 |
+
/* Footer Styles */
|
| 133 |
+
.footer {
|
| 134 |
+
background-color: white;
|
| 135 |
+
border-radius: 0.5rem;
|
| 136 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 137 |
+
margin: 1rem;
|
| 138 |
+
padding: 1.5rem;
|
| 139 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 140 |
+
}
|
| 141 |
+
.footer-content {
|
| 142 |
+
width: 100%;
|
| 143 |
+
max-width: 1200px;
|
| 144 |
+
margin: 0 auto;
|
| 145 |
+
display: flex;
|
| 146 |
+
flex-direction: column;
|
| 147 |
+
align-items: center;
|
| 148 |
+
justify-content: center;
|
| 149 |
+
}
|
| 150 |
+
.footer-links {
|
| 151 |
+
display: flex;
|
| 152 |
+
flex-wrap: wrap;
|
| 153 |
+
justify-content: center;
|
| 154 |
+
font-size: 0.875rem;
|
| 155 |
+
color: #4a5568;
|
| 156 |
+
margin: 0;
|
| 157 |
+
padding: 0;
|
| 158 |
+
list-style-type: none;
|
| 159 |
+
}
|
| 160 |
+
.footer-links li {
|
| 161 |
+
margin-right: 1rem;
|
| 162 |
+
}
|
| 163 |
+
.footer-links a {
|
| 164 |
+
text-decoration: none;
|
| 165 |
+
color: inherit;
|
| 166 |
+
transition: color 0.3s ease;
|
| 167 |
+
}
|
| 168 |
+
.footer-divider {
|
| 169 |
+
margin-top: 1.5rem;
|
| 170 |
+
margin-bottom: 1.5rem;
|
| 171 |
+
border-color: #e2e8f0;
|
| 172 |
+
}
|
| 173 |
+
.footer-credit {
|
| 174 |
+
text-align: center;
|
| 175 |
+
font-size: 0.875rem;
|
| 176 |
+
color: #6b7280;
|
| 177 |
+
}
|
| 178 |
+
.footer-credit a {
|
| 179 |
+
text-decoration: none;
|
| 180 |
+
color: #4a5568;
|
| 181 |
+
}
|
| 182 |
+
|
| 183 |
+
/* Dark Mode Footer Styles */
|
| 184 |
+
body.dark .footer {
|
| 185 |
+
background-color: #333;
|
| 186 |
+
color: #f1f1f1;
|
| 187 |
+
}
|
| 188 |
+
body.dark .footer-links a {
|
| 189 |
+
color: #f1f1f1;
|
| 190 |
+
}
|
| 191 |
+
body.dark .footer-divider {
|
| 192 |
+
border-color: #555;
|
| 193 |
+
}
|
| 194 |
+
body.dark .footer-credit a {
|
| 195 |
+
color: #f1f1f1;
|
| 196 |
+
}
|
| 197 |
+
</style>
|
| 198 |
+
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
<style>
|
| 203 |
+
/* Footer Styles */
|
| 204 |
+
.footer {
|
| 205 |
+
background-color: white;
|
| 206 |
+
border-radius: 0.5rem;
|
| 207 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 208 |
+
margin: 1rem;
|
| 209 |
+
padding: 1.5rem;
|
| 210 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 211 |
+
}
|
| 212 |
+
.footer-content {
|
| 213 |
+
width: 100%;
|
| 214 |
+
max-width: 1200px;
|
| 215 |
+
margin: 0 auto;
|
| 216 |
+
display: flex;
|
| 217 |
+
flex-direction: column;
|
| 218 |
+
align-items: center;
|
| 219 |
+
justify-content: center;
|
| 220 |
+
}
|
| 221 |
+
.footer-links {
|
| 222 |
+
display: flex;
|
| 223 |
+
flex-wrap: wrap;
|
| 224 |
+
justify-content: center;
|
| 225 |
+
font-size: 0.875rem;
|
| 226 |
+
color: #4a5568;
|
| 227 |
+
margin: 0;
|
| 228 |
+
padding: 0;
|
| 229 |
+
list-style-type: none;
|
| 230 |
+
}
|
| 231 |
+
.footer-links li {
|
| 232 |
+
margin-right: 1rem;
|
| 233 |
+
}
|
| 234 |
+
.footer-links a {
|
| 235 |
+
text-decoration: none;
|
| 236 |
+
color: inherit;
|
| 237 |
+
transition: color 0.3s ease;
|
| 238 |
+
}
|
| 239 |
+
.footer-divider {
|
| 240 |
+
margin-top: 1.5rem;
|
| 241 |
+
margin-bottom: 1.5rem;
|
| 242 |
+
border-color: #e2e8f0;
|
| 243 |
+
}
|
| 244 |
+
.footer-credit {
|
| 245 |
+
text-align: center;
|
| 246 |
+
font-size: 0.875rem;
|
| 247 |
+
color: #6b7280;
|
| 248 |
+
}
|
| 249 |
+
.footer-credit a {
|
| 250 |
+
text-decoration: none;
|
| 251 |
+
color: #4a5568;
|
| 252 |
+
}
|
| 253 |
+
|
| 254 |
+
/* Dark Mode Footer Styles */
|
| 255 |
+
body.dark .footer {
|
| 256 |
+
background-color: #333;
|
| 257 |
+
color: #f1f1f1;
|
| 258 |
+
}
|
| 259 |
+
body.dark .footer-links a {
|
| 260 |
+
color: #f1f1f1;
|
| 261 |
+
}
|
| 262 |
+
body.dark .footer-divider {
|
| 263 |
+
border-color: #555;
|
| 264 |
+
}
|
| 265 |
+
body.dark .footer-credit a {
|
| 266 |
+
color: #f1f1f1;
|
| 267 |
+
}
|
| 268 |
+
</style>
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
<footer class="footer">
|
| 275 |
+
<div class="footer-content">
|
| 276 |
+
<ul class="footer-links">
|
| 277 |
+
<li><a href="../../index.html">Home</a></li>
|
| 278 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 279 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 280 |
+
<li><a href="../../about.html">About</a></li>
|
| 281 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 282 |
+
</ul>
|
| 283 |
+
</div>
|
| 284 |
+
<hr class="footer-divider" />
|
| 285 |
+
<div class="footer-credit">
|
| 286 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 287 |
+
</div>
|
| 288 |
+
</footer>
|
| 289 |
+
|
| 290 |
+
<style>
|
| 291 |
+
/* Footer Styles */
|
| 292 |
+
.footer {
|
| 293 |
+
background-color: white;
|
| 294 |
+
border-radius: 0.5rem;
|
| 295 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 296 |
+
margin: 1rem;
|
| 297 |
+
padding: 1.5rem;
|
| 298 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 299 |
+
}
|
| 300 |
+
.footer-content {
|
| 301 |
+
width: 100%;
|
| 302 |
+
max-width: 1200px;
|
| 303 |
+
margin: 0 auto;
|
| 304 |
+
display: flex;
|
| 305 |
+
flex-direction: column;
|
| 306 |
+
align-items: center;
|
| 307 |
+
justify-content: center;
|
| 308 |
+
}
|
| 309 |
+
.footer-links {
|
| 310 |
+
display: flex;
|
| 311 |
+
flex-wrap: wrap;
|
| 312 |
+
justify-content: center;
|
| 313 |
+
font-size: 0.875rem;
|
| 314 |
+
color: #4a5568;
|
| 315 |
+
margin: 0;
|
| 316 |
+
padding: 0;
|
| 317 |
+
list-style-type: none;
|
| 318 |
+
}
|
| 319 |
+
.footer-links li {
|
| 320 |
+
margin-right: 1rem;
|
| 321 |
+
}
|
| 322 |
+
.footer-links a {
|
| 323 |
+
text-decoration: none;
|
| 324 |
+
color: inherit;
|
| 325 |
+
transition: color 0.3s ease;
|
| 326 |
+
}
|
| 327 |
+
.footer-divider {
|
| 328 |
+
margin-top: 1.5rem;
|
| 329 |
+
margin-bottom: 1.5rem;
|
| 330 |
+
border-color: #e2e8f0;
|
| 331 |
+
}
|
| 332 |
+
.footer-credit {
|
| 333 |
+
text-align: center;
|
| 334 |
+
font-size: 0.875rem;
|
| 335 |
+
color: #6b7280;
|
| 336 |
+
}
|
| 337 |
+
.footer-credit a {
|
| 338 |
+
text-decoration: none;
|
| 339 |
+
color: #4a5568;
|
| 340 |
+
}
|
| 341 |
+
|
| 342 |
+
/* Dark Mode Footer Styles */
|
| 343 |
+
body.dark .footer {
|
| 344 |
+
background-color: #333;
|
| 345 |
+
color: #f1f1f1;
|
| 346 |
+
}
|
| 347 |
+
body.dark .footer-links a {
|
| 348 |
+
color: #f1f1f1;
|
| 349 |
+
}
|
| 350 |
+
body.dark .footer-divider {
|
| 351 |
+
border-color: #555;
|
| 352 |
+
}
|
| 353 |
+
body.dark .footer-credit a {
|
| 354 |
+
color: #f1f1f1;
|
| 355 |
+
}
|
| 356 |
+
</style>
|
| 357 |
+
|
| 358 |
+
</body>
|
| 359 |
+
</html>
|
fruits_variety_set/apple_varieties/himachal-apple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Himachal Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://resize.indiatvnews.com/en/resize/newbucket/715_-/2016/11/apple-1478446235.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
<script src="../../script.js"></script>
|
| 38 |
+
</head>
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Himachal Apple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Apple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Himachal Apple</h1>
|
| 73 |
+
<p>Himachal apples, grown in the pristine valleys of Himachal Pradesh, are renowned for their exceptional taste, crisp texture, and rich nutritional content.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Apple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in fiber, promoting digestive health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Loaded with antioxidants that protect against cell damage.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Enhances heart health by maintaining cholesterol levels.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Boosts immune function with essential vitamins.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in weight management due to its low calorie and high fiber content.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps reduce the risk of heart disease by improving blood circulation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Promotes glowing skin with its natural hydration and vitamin C.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps regulate blood sugar levels, beneficial for diabetics.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/apple_varieties/honeycrisp-apple.html
ADDED
|
@@ -0,0 +1,356 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Honeycrisp Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://www.trees.com/wp-content/uploads/2021/12/Honeycrisp-Apple-Tree-1-scaled.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
<script src="../../script.js"></script>
|
| 38 |
+
</head>
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Honeycrisp Apple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Apple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Honeycrisp Apple</h1>
|
| 73 |
+
<p>Honeycrisp apples are known for their perfect balance of sweetness and tartness, crisp texture, and juiciness, making them a favorite among apple lovers.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Apple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in fiber, aiding digestion and gut health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Packed with antioxidants to support a healthy immune system.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Rich in vitamin C, promoting glowing skin.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Helps maintain heart health by regulating blood pressure.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Supports weight loss due to its high water and fiber content.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps control blood sugar levels, reducing diabetes risk.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Strengthens bones with essential minerals like potassium.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Improves hydration and reduces fatigue with its high water content.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
<style>
|
| 129 |
+
/* Footer Styles */
|
| 130 |
+
.footer {
|
| 131 |
+
background-color: white;
|
| 132 |
+
border-radius: 0.5rem;
|
| 133 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 134 |
+
margin: 1rem;
|
| 135 |
+
padding: 1.5rem;
|
| 136 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 137 |
+
}
|
| 138 |
+
.footer-content {
|
| 139 |
+
width: 100%;
|
| 140 |
+
max-width: 1200px;
|
| 141 |
+
margin: 0 auto;
|
| 142 |
+
display: flex;
|
| 143 |
+
flex-direction: column;
|
| 144 |
+
align-items: center;
|
| 145 |
+
justify-content: center;
|
| 146 |
+
}
|
| 147 |
+
.footer-links {
|
| 148 |
+
display: flex;
|
| 149 |
+
flex-wrap: wrap;
|
| 150 |
+
justify-content: center;
|
| 151 |
+
font-size: 0.875rem;
|
| 152 |
+
color: #4a5568;
|
| 153 |
+
margin: 0;
|
| 154 |
+
padding: 0;
|
| 155 |
+
list-style-type: none;
|
| 156 |
+
}
|
| 157 |
+
.footer-links li {
|
| 158 |
+
margin-right: 1rem;
|
| 159 |
+
}
|
| 160 |
+
.footer-links a {
|
| 161 |
+
text-decoration: none;
|
| 162 |
+
color: inherit;
|
| 163 |
+
transition: color 0.3s ease;
|
| 164 |
+
}
|
| 165 |
+
.footer-divider {
|
| 166 |
+
margin-top: 1.5rem;
|
| 167 |
+
margin-bottom: 1.5rem;
|
| 168 |
+
border-color: #e2e8f0;
|
| 169 |
+
}
|
| 170 |
+
.footer-credit {
|
| 171 |
+
text-align: center;
|
| 172 |
+
font-size: 0.875rem;
|
| 173 |
+
color: #6b7280;
|
| 174 |
+
}
|
| 175 |
+
.footer-credit a {
|
| 176 |
+
text-decoration: none;
|
| 177 |
+
color: #4a5568;
|
| 178 |
+
}
|
| 179 |
+
|
| 180 |
+
/* Dark Mode Footer Styles */
|
| 181 |
+
body.dark .footer {
|
| 182 |
+
background-color: #333;
|
| 183 |
+
color: #f1f1f1;
|
| 184 |
+
}
|
| 185 |
+
body.dark .footer-links a {
|
| 186 |
+
color: #f1f1f1;
|
| 187 |
+
}
|
| 188 |
+
body.dark .footer-divider {
|
| 189 |
+
border-color: #555;
|
| 190 |
+
}
|
| 191 |
+
body.dark .footer-credit a {
|
| 192 |
+
color: #f1f1f1;
|
| 193 |
+
}
|
| 194 |
+
</style>
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
|
| 199 |
+
<style>
|
| 200 |
+
/* Footer Styles */
|
| 201 |
+
.footer {
|
| 202 |
+
background-color: white;
|
| 203 |
+
border-radius: 0.5rem;
|
| 204 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 205 |
+
margin: 1rem;
|
| 206 |
+
padding: 1.5rem;
|
| 207 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 208 |
+
}
|
| 209 |
+
.footer-content {
|
| 210 |
+
width: 100%;
|
| 211 |
+
max-width: 1200px;
|
| 212 |
+
margin: 0 auto;
|
| 213 |
+
display: flex;
|
| 214 |
+
flex-direction: column;
|
| 215 |
+
align-items: center;
|
| 216 |
+
justify-content: center;
|
| 217 |
+
}
|
| 218 |
+
.footer-links {
|
| 219 |
+
display: flex;
|
| 220 |
+
flex-wrap: wrap;
|
| 221 |
+
justify-content: center;
|
| 222 |
+
font-size: 0.875rem;
|
| 223 |
+
color: #4a5568;
|
| 224 |
+
margin: 0;
|
| 225 |
+
padding: 0;
|
| 226 |
+
list-style-type: none;
|
| 227 |
+
}
|
| 228 |
+
.footer-links li {
|
| 229 |
+
margin-right: 1rem;
|
| 230 |
+
}
|
| 231 |
+
.footer-links a {
|
| 232 |
+
text-decoration: none;
|
| 233 |
+
color: inherit;
|
| 234 |
+
transition: color 0.3s ease;
|
| 235 |
+
}
|
| 236 |
+
.footer-divider {
|
| 237 |
+
margin-top: 1.5rem;
|
| 238 |
+
margin-bottom: 1.5rem;
|
| 239 |
+
border-color: #e2e8f0;
|
| 240 |
+
}
|
| 241 |
+
.footer-credit {
|
| 242 |
+
text-align: center;
|
| 243 |
+
font-size: 0.875rem;
|
| 244 |
+
color: #6b7280;
|
| 245 |
+
}
|
| 246 |
+
.footer-credit a {
|
| 247 |
+
text-decoration: none;
|
| 248 |
+
color: #4a5568;
|
| 249 |
+
}
|
| 250 |
+
|
| 251 |
+
/* Dark Mode Footer Styles */
|
| 252 |
+
body.dark .footer {
|
| 253 |
+
background-color: #333;
|
| 254 |
+
color: #f1f1f1;
|
| 255 |
+
}
|
| 256 |
+
body.dark .footer-links a {
|
| 257 |
+
color: #f1f1f1;
|
| 258 |
+
}
|
| 259 |
+
body.dark .footer-divider {
|
| 260 |
+
border-color: #555;
|
| 261 |
+
}
|
| 262 |
+
body.dark .footer-credit a {
|
| 263 |
+
color: #f1f1f1;
|
| 264 |
+
}
|
| 265 |
+
</style>
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
<footer class="footer">
|
| 272 |
+
<div class="footer-content">
|
| 273 |
+
<ul class="footer-links">
|
| 274 |
+
<li><a href="../../index.html">Home</a></li>
|
| 275 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 276 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 277 |
+
<li><a href="../../about.html">About</a></li>
|
| 278 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 279 |
+
</ul>
|
| 280 |
+
</div>
|
| 281 |
+
<hr class="footer-divider" />
|
| 282 |
+
<div class="footer-credit">
|
| 283 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 284 |
+
</div>
|
| 285 |
+
</footer>
|
| 286 |
+
|
| 287 |
+
<style>
|
| 288 |
+
/* Footer Styles */
|
| 289 |
+
.footer {
|
| 290 |
+
background-color: white;
|
| 291 |
+
border-radius: 0.5rem;
|
| 292 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 293 |
+
margin: 1rem;
|
| 294 |
+
padding: 1.5rem;
|
| 295 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 296 |
+
}
|
| 297 |
+
.footer-content {
|
| 298 |
+
width: 100%;
|
| 299 |
+
max-width: 1200px;
|
| 300 |
+
margin: 0 auto;
|
| 301 |
+
display: flex;
|
| 302 |
+
flex-direction: column;
|
| 303 |
+
align-items: center;
|
| 304 |
+
justify-content: center;
|
| 305 |
+
}
|
| 306 |
+
.footer-links {
|
| 307 |
+
display: flex;
|
| 308 |
+
flex-wrap: wrap;
|
| 309 |
+
justify-content: center;
|
| 310 |
+
font-size: 0.875rem;
|
| 311 |
+
color: #4a5568;
|
| 312 |
+
margin: 0;
|
| 313 |
+
padding: 0;
|
| 314 |
+
list-style-type: none;
|
| 315 |
+
}
|
| 316 |
+
.footer-links li {
|
| 317 |
+
margin-right: 1rem;
|
| 318 |
+
}
|
| 319 |
+
.footer-links a {
|
| 320 |
+
text-decoration: none;
|
| 321 |
+
color: inherit;
|
| 322 |
+
transition: color 0.3s ease;
|
| 323 |
+
}
|
| 324 |
+
.footer-divider {
|
| 325 |
+
margin-top: 1.5rem;
|
| 326 |
+
margin-bottom: 1.5rem;
|
| 327 |
+
border-color: #e2e8f0;
|
| 328 |
+
}
|
| 329 |
+
.footer-credit {
|
| 330 |
+
text-align: center;
|
| 331 |
+
font-size: 0.875rem;
|
| 332 |
+
color: #6b7280;
|
| 333 |
+
}
|
| 334 |
+
.footer-credit a {
|
| 335 |
+
text-decoration: none;
|
| 336 |
+
color: #4a5568;
|
| 337 |
+
}
|
| 338 |
+
|
| 339 |
+
/* Dark Mode Footer Styles */
|
| 340 |
+
body.dark .footer {
|
| 341 |
+
background-color: #333;
|
| 342 |
+
color: #f1f1f1;
|
| 343 |
+
}
|
| 344 |
+
body.dark .footer-links a {
|
| 345 |
+
color: #f1f1f1;
|
| 346 |
+
}
|
| 347 |
+
body.dark .footer-divider {
|
| 348 |
+
border-color: #555;
|
| 349 |
+
}
|
| 350 |
+
body.dark .footer-credit a {
|
| 351 |
+
color: #f1f1f1;
|
| 352 |
+
}
|
| 353 |
+
</style>
|
| 354 |
+
|
| 355 |
+
</body>
|
| 356 |
+
</html>
|
fruits_variety_set/apple_varieties/jazz-apple.html
ADDED
|
@@ -0,0 +1,358 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Jazz Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.r-NFptYcn4c1UbI3jhcrOgHaHa?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
<script src="../../script.js"></script>
|
| 38 |
+
</head>
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Jazz Apple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Apple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Jazz Apple</h1>
|
| 73 |
+
<p>Jazz apples are known for their crisp, dense texture and balanced sweet-tart flavor, making them a popular choice for snacking and cooking.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Apple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Good source of fiber, supporting digestive health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in antioxidants that combat oxidative stress.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Contains vitamin C, promoting skin and immune health.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports heart health by aiding cholesterol regulation.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in weight management due to high fiber and low calories.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps maintain steady blood sugar levels.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces risk of cardiovascular diseases with its nutrient profile.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Promotes hydration and reduces fatigue with its high water content.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
<!-- Footer -->
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
<style>
|
| 131 |
+
/* Footer Styles */
|
| 132 |
+
.footer {
|
| 133 |
+
background-color: white;
|
| 134 |
+
border-radius: 0.5rem;
|
| 135 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 136 |
+
margin: 1rem;
|
| 137 |
+
padding: 1.5rem;
|
| 138 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 139 |
+
}
|
| 140 |
+
.footer-content {
|
| 141 |
+
width: 100%;
|
| 142 |
+
max-width: 1200px;
|
| 143 |
+
margin: 0 auto;
|
| 144 |
+
display: flex;
|
| 145 |
+
flex-direction: column;
|
| 146 |
+
align-items: center;
|
| 147 |
+
justify-content: center;
|
| 148 |
+
}
|
| 149 |
+
.footer-links {
|
| 150 |
+
display: flex;
|
| 151 |
+
flex-wrap: wrap;
|
| 152 |
+
justify-content: center;
|
| 153 |
+
font-size: 0.875rem;
|
| 154 |
+
color: #4a5568;
|
| 155 |
+
margin: 0;
|
| 156 |
+
padding: 0;
|
| 157 |
+
list-style-type: none;
|
| 158 |
+
}
|
| 159 |
+
.footer-links li {
|
| 160 |
+
margin-right: 1rem;
|
| 161 |
+
}
|
| 162 |
+
.footer-links a {
|
| 163 |
+
text-decoration: none;
|
| 164 |
+
color: inherit;
|
| 165 |
+
transition: color 0.3s ease;
|
| 166 |
+
}
|
| 167 |
+
.footer-divider {
|
| 168 |
+
margin-top: 1.5rem;
|
| 169 |
+
margin-bottom: 1.5rem;
|
| 170 |
+
border-color: #e2e8f0;
|
| 171 |
+
}
|
| 172 |
+
.footer-credit {
|
| 173 |
+
text-align: center;
|
| 174 |
+
font-size: 0.875rem;
|
| 175 |
+
color: #6b7280;
|
| 176 |
+
}
|
| 177 |
+
.footer-credit a {
|
| 178 |
+
text-decoration: none;
|
| 179 |
+
color: #4a5568;
|
| 180 |
+
}
|
| 181 |
+
|
| 182 |
+
/* Dark Mode Footer Styles */
|
| 183 |
+
body.dark .footer {
|
| 184 |
+
background-color: #333;
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-links a {
|
| 188 |
+
color: #f1f1f1;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-divider {
|
| 191 |
+
border-color: #555;
|
| 192 |
+
}
|
| 193 |
+
body.dark .footer-credit a {
|
| 194 |
+
color: #f1f1f1;
|
| 195 |
+
}
|
| 196 |
+
</style>
|
| 197 |
+
|
| 198 |
+
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
<style>
|
| 202 |
+
/* Footer Styles */
|
| 203 |
+
.footer {
|
| 204 |
+
background-color: white;
|
| 205 |
+
border-radius: 0.5rem;
|
| 206 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 207 |
+
margin: 1rem;
|
| 208 |
+
padding: 1.5rem;
|
| 209 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 210 |
+
}
|
| 211 |
+
.footer-content {
|
| 212 |
+
width: 100%;
|
| 213 |
+
max-width: 1200px;
|
| 214 |
+
margin: 0 auto;
|
| 215 |
+
display: flex;
|
| 216 |
+
flex-direction: column;
|
| 217 |
+
align-items: center;
|
| 218 |
+
justify-content: center;
|
| 219 |
+
}
|
| 220 |
+
.footer-links {
|
| 221 |
+
display: flex;
|
| 222 |
+
flex-wrap: wrap;
|
| 223 |
+
justify-content: center;
|
| 224 |
+
font-size: 0.875rem;
|
| 225 |
+
color: #4a5568;
|
| 226 |
+
margin: 0;
|
| 227 |
+
padding: 0;
|
| 228 |
+
list-style-type: none;
|
| 229 |
+
}
|
| 230 |
+
.footer-links li {
|
| 231 |
+
margin-right: 1rem;
|
| 232 |
+
}
|
| 233 |
+
.footer-links a {
|
| 234 |
+
text-decoration: none;
|
| 235 |
+
color: inherit;
|
| 236 |
+
transition: color 0.3s ease;
|
| 237 |
+
}
|
| 238 |
+
.footer-divider {
|
| 239 |
+
margin-top: 1.5rem;
|
| 240 |
+
margin-bottom: 1.5rem;
|
| 241 |
+
border-color: #e2e8f0;
|
| 242 |
+
}
|
| 243 |
+
.footer-credit {
|
| 244 |
+
text-align: center;
|
| 245 |
+
font-size: 0.875rem;
|
| 246 |
+
color: #6b7280;
|
| 247 |
+
}
|
| 248 |
+
.footer-credit a {
|
| 249 |
+
text-decoration: none;
|
| 250 |
+
color: #4a5568;
|
| 251 |
+
}
|
| 252 |
+
|
| 253 |
+
/* Dark Mode Footer Styles */
|
| 254 |
+
body.dark .footer {
|
| 255 |
+
background-color: #333;
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-links a {
|
| 259 |
+
color: #f1f1f1;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-divider {
|
| 262 |
+
border-color: #555;
|
| 263 |
+
}
|
| 264 |
+
body.dark .footer-credit a {
|
| 265 |
+
color: #f1f1f1;
|
| 266 |
+
}
|
| 267 |
+
</style>
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
<footer class="footer">
|
| 274 |
+
<div class="footer-content">
|
| 275 |
+
<ul class="footer-links">
|
| 276 |
+
<li><a href="../../index.html">Home</a></li>
|
| 277 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 278 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 279 |
+
<li><a href="../../about.html">About</a></li>
|
| 280 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 281 |
+
</ul>
|
| 282 |
+
</div>
|
| 283 |
+
<hr class="footer-divider" />
|
| 284 |
+
<div class="footer-credit">
|
| 285 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 286 |
+
</div>
|
| 287 |
+
</footer>
|
| 288 |
+
|
| 289 |
+
<style>
|
| 290 |
+
/* Footer Styles */
|
| 291 |
+
.footer {
|
| 292 |
+
background-color: white;
|
| 293 |
+
border-radius: 0.5rem;
|
| 294 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 295 |
+
margin: 1rem;
|
| 296 |
+
padding: 1.5rem;
|
| 297 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 298 |
+
}
|
| 299 |
+
.footer-content {
|
| 300 |
+
width: 100%;
|
| 301 |
+
max-width: 1200px;
|
| 302 |
+
margin: 0 auto;
|
| 303 |
+
display: flex;
|
| 304 |
+
flex-direction: column;
|
| 305 |
+
align-items: center;
|
| 306 |
+
justify-content: center;
|
| 307 |
+
}
|
| 308 |
+
.footer-links {
|
| 309 |
+
display: flex;
|
| 310 |
+
flex-wrap: wrap;
|
| 311 |
+
justify-content: center;
|
| 312 |
+
font-size: 0.875rem;
|
| 313 |
+
color: #4a5568;
|
| 314 |
+
margin: 0;
|
| 315 |
+
padding: 0;
|
| 316 |
+
list-style-type: none;
|
| 317 |
+
}
|
| 318 |
+
.footer-links li {
|
| 319 |
+
margin-right: 1rem;
|
| 320 |
+
}
|
| 321 |
+
.footer-links a {
|
| 322 |
+
text-decoration: none;
|
| 323 |
+
color: inherit;
|
| 324 |
+
transition: color 0.3s ease;
|
| 325 |
+
}
|
| 326 |
+
.footer-divider {
|
| 327 |
+
margin-top: 1.5rem;
|
| 328 |
+
margin-bottom: 1.5rem;
|
| 329 |
+
border-color: #e2e8f0;
|
| 330 |
+
}
|
| 331 |
+
.footer-credit {
|
| 332 |
+
text-align: center;
|
| 333 |
+
font-size: 0.875rem;
|
| 334 |
+
color: #6b7280;
|
| 335 |
+
}
|
| 336 |
+
.footer-credit a {
|
| 337 |
+
text-decoration: none;
|
| 338 |
+
color: #4a5568;
|
| 339 |
+
}
|
| 340 |
+
|
| 341 |
+
/* Dark Mode Footer Styles */
|
| 342 |
+
body.dark .footer {
|
| 343 |
+
background-color: #333;
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-links a {
|
| 347 |
+
color: #f1f1f1;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-divider {
|
| 350 |
+
border-color: #555;
|
| 351 |
+
}
|
| 352 |
+
body.dark .footer-credit a {
|
| 353 |
+
color: #f1f1f1;
|
| 354 |
+
}
|
| 355 |
+
</style>
|
| 356 |
+
|
| 357 |
+
</body>
|
| 358 |
+
</html>
|
fruits_variety_set/apple_varieties/kinnaur-apple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Kinnaur Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://minnetonkaorchards.com/wp-content/uploads/2022/02/Red-Apples-SS1932175964.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
<script src="../../script.js"></script>
|
| 38 |
+
</head>
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Kinnaur Apple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Apple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Kinnaur Apple</h1>
|
| 73 |
+
<p>Grown in the high altitudes of Himachal Pradesh, Kinnaur apples are known for their natural sweetness, crisp texture, and superior quality.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Apple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in dietary fiber, aiding in digestion and gut health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Packed with vitamin C, boosting immunity.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by maintaining blood pressure levels.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides sustained energy with its natural sugars.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps in weight management due to its high fiber and low-calorie content.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Reduces the risk of heart diseases by lowering bad cholesterol.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Promotes healthy skin with its antioxidant properties.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Assists in maintaining stable blood sugar levels.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/apple_varieties/ooty-apple.html
ADDED
|
@@ -0,0 +1,359 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Ooty Apple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<link
|
| 12 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 13 |
+
rel="stylesheet"
|
| 14 |
+
/>
|
| 15 |
+
|
| 16 |
+
<style>
|
| 17 |
+
.hero{
|
| 18 |
+
background: url('https://greenridgemarket.com/wp-content/uploads/apples_6405_v1.jpg')
|
| 19 |
+
center/cover no-repeat;
|
| 20 |
+
}
|
| 21 |
+
</style>
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
|
| 37 |
+
|
| 38 |
+
|
| 39 |
+
|
| 40 |
+
|
| 41 |
+
|
| 42 |
+
<script src="../../script.js"></script>
|
| 43 |
+
</head>
|
| 44 |
+
<body>
|
| 45 |
+
<!-- Header and Navigation -->
|
| 46 |
+
<header>
|
| 47 |
+
<nav>
|
| 48 |
+
<div class="logo">
|
| 49 |
+
<a href="index.html">NatureCompare</a>
|
| 50 |
+
</div>
|
| 51 |
+
<div class="hamburger">
|
| 52 |
+
<span></span>
|
| 53 |
+
<span></span>
|
| 54 |
+
<span></span>
|
| 55 |
+
</div>
|
| 56 |
+
<ul class="nav-links">
|
| 57 |
+
<li><a href="../../index.html">Home</a></li>
|
| 58 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 59 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 60 |
+
<li><a href="../../about.html">About</a></li>
|
| 61 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 62 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 63 |
+
</ul>
|
| 64 |
+
</nav>
|
| 65 |
+
</header>
|
| 66 |
+
|
| 67 |
+
<!-- Hero Section -->
|
| 68 |
+
<section class="hero">
|
| 69 |
+
<div class="hero-content">
|
| 70 |
+
<h1>Ooty Apple</h1>
|
| 71 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 72 |
+
</div>
|
| 73 |
+
</section>
|
| 74 |
+
|
| 75 |
+
<!-- Apple Page Header -->
|
| 76 |
+
<section class="variety-header">
|
| 77 |
+
<h1>Ooty Apple</h1>
|
| 78 |
+
<p>Grown in high-altitude regions, Ooty apples offer a unique taste and numerous health benefits.</p>
|
| 79 |
+
</section>
|
| 80 |
+
|
| 81 |
+
<!-- Apple Comparison/Card Section -->
|
| 82 |
+
<section class="variety-comparison" id="details">
|
| 83 |
+
<div class="variety-category">
|
| 84 |
+
<h2>Health Benefits</h2>
|
| 85 |
+
<div class="variety-list">
|
| 86 |
+
<div class="variety-item">
|
| 87 |
+
<p>Packed with antioxidants that boost immunity and protect cells.</p>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="variety-item">
|
| 90 |
+
<p>Supports cardiovascular health by helping lower cholesterol levels.</p>
|
| 91 |
+
</div>
|
| 92 |
+
<div class="variety-item">
|
| 93 |
+
<p>Aids digestion with high dietary fiber, promoting gut health.</p>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-item">
|
| 96 |
+
<p>Enhances cognitive function and improves memory retention.</p>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
<div class="variety-category">
|
| 101 |
+
<h2>Issues It Helps Solve</h2>
|
| 102 |
+
<div class="variety-list">
|
| 103 |
+
<div class="variety-item">
|
| 104 |
+
<p>Helps regulate blood sugar levels, reducing the risk of diabetes.</p>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="variety-item">
|
| 107 |
+
<p>Assists in weight management with low-calorie, nutrient-rich properties.</p>
|
| 108 |
+
</div>
|
| 109 |
+
<div class="variety-item">
|
| 110 |
+
<p>Improves digestive health and helps prevent constipation.</p>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="variety-item">
|
| 113 |
+
<p>Provides essential vitamins to maintain youthful, healthy skin.</p>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
</section>
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
|
| 131 |
+
<style>
|
| 132 |
+
/* Footer Styles */
|
| 133 |
+
.footer {
|
| 134 |
+
background-color: white;
|
| 135 |
+
border-radius: 0.5rem;
|
| 136 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 137 |
+
margin: 1rem;
|
| 138 |
+
padding: 1.5rem;
|
| 139 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 140 |
+
}
|
| 141 |
+
.footer-content {
|
| 142 |
+
width: 100%;
|
| 143 |
+
max-width: 1200px;
|
| 144 |
+
margin: 0 auto;
|
| 145 |
+
display: flex;
|
| 146 |
+
flex-direction: column;
|
| 147 |
+
align-items: center;
|
| 148 |
+
justify-content: center;
|
| 149 |
+
}
|
| 150 |
+
.footer-links {
|
| 151 |
+
display: flex;
|
| 152 |
+
flex-wrap: wrap;
|
| 153 |
+
justify-content: center;
|
| 154 |
+
font-size: 0.875rem;
|
| 155 |
+
color: #4a5568;
|
| 156 |
+
margin: 0;
|
| 157 |
+
padding: 0;
|
| 158 |
+
list-style-type: none;
|
| 159 |
+
}
|
| 160 |
+
.footer-links li {
|
| 161 |
+
margin-right: 1rem;
|
| 162 |
+
}
|
| 163 |
+
.footer-links a {
|
| 164 |
+
text-decoration: none;
|
| 165 |
+
color: inherit;
|
| 166 |
+
transition: color 0.3s ease;
|
| 167 |
+
}
|
| 168 |
+
.footer-divider {
|
| 169 |
+
margin-top: 1.5rem;
|
| 170 |
+
margin-bottom: 1.5rem;
|
| 171 |
+
border-color: #e2e8f0;
|
| 172 |
+
}
|
| 173 |
+
.footer-credit {
|
| 174 |
+
text-align: center;
|
| 175 |
+
font-size: 0.875rem;
|
| 176 |
+
color: #6b7280;
|
| 177 |
+
}
|
| 178 |
+
.footer-credit a {
|
| 179 |
+
text-decoration: none;
|
| 180 |
+
color: #4a5568;
|
| 181 |
+
}
|
| 182 |
+
|
| 183 |
+
/* Dark Mode Footer Styles */
|
| 184 |
+
body.dark .footer {
|
| 185 |
+
background-color: #333;
|
| 186 |
+
color: #f1f1f1;
|
| 187 |
+
}
|
| 188 |
+
body.dark .footer-links a {
|
| 189 |
+
color: #f1f1f1;
|
| 190 |
+
}
|
| 191 |
+
body.dark .footer-divider {
|
| 192 |
+
border-color: #555;
|
| 193 |
+
}
|
| 194 |
+
body.dark .footer-credit a {
|
| 195 |
+
color: #f1f1f1;
|
| 196 |
+
}
|
| 197 |
+
</style>
|
| 198 |
+
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
|
| 202 |
+
<style>
|
| 203 |
+
/* Footer Styles */
|
| 204 |
+
.footer {
|
| 205 |
+
background-color: white;
|
| 206 |
+
border-radius: 0.5rem;
|
| 207 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 208 |
+
margin: 1rem;
|
| 209 |
+
padding: 1.5rem;
|
| 210 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 211 |
+
}
|
| 212 |
+
.footer-content {
|
| 213 |
+
width: 100%;
|
| 214 |
+
max-width: 1200px;
|
| 215 |
+
margin: 0 auto;
|
| 216 |
+
display: flex;
|
| 217 |
+
flex-direction: column;
|
| 218 |
+
align-items: center;
|
| 219 |
+
justify-content: center;
|
| 220 |
+
}
|
| 221 |
+
.footer-links {
|
| 222 |
+
display: flex;
|
| 223 |
+
flex-wrap: wrap;
|
| 224 |
+
justify-content: center;
|
| 225 |
+
font-size: 0.875rem;
|
| 226 |
+
color: #4a5568;
|
| 227 |
+
margin: 0;
|
| 228 |
+
padding: 0;
|
| 229 |
+
list-style-type: none;
|
| 230 |
+
}
|
| 231 |
+
.footer-links li {
|
| 232 |
+
margin-right: 1rem;
|
| 233 |
+
}
|
| 234 |
+
.footer-links a {
|
| 235 |
+
text-decoration: none;
|
| 236 |
+
color: inherit;
|
| 237 |
+
transition: color 0.3s ease;
|
| 238 |
+
}
|
| 239 |
+
.footer-divider {
|
| 240 |
+
margin-top: 1.5rem;
|
| 241 |
+
margin-bottom: 1.5rem;
|
| 242 |
+
border-color: #e2e8f0;
|
| 243 |
+
}
|
| 244 |
+
.footer-credit {
|
| 245 |
+
text-align: center;
|
| 246 |
+
font-size: 0.875rem;
|
| 247 |
+
color: #6b7280;
|
| 248 |
+
}
|
| 249 |
+
.footer-credit a {
|
| 250 |
+
text-decoration: none;
|
| 251 |
+
color: #4a5568;
|
| 252 |
+
}
|
| 253 |
+
|
| 254 |
+
/* Dark Mode Footer Styles */
|
| 255 |
+
body.dark .footer {
|
| 256 |
+
background-color: #333;
|
| 257 |
+
color: #f1f1f1;
|
| 258 |
+
}
|
| 259 |
+
body.dark .footer-links a {
|
| 260 |
+
color: #f1f1f1;
|
| 261 |
+
}
|
| 262 |
+
body.dark .footer-divider {
|
| 263 |
+
border-color: #555;
|
| 264 |
+
}
|
| 265 |
+
body.dark .footer-credit a {
|
| 266 |
+
color: #f1f1f1;
|
| 267 |
+
}
|
| 268 |
+
</style>
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
|
| 274 |
+
<footer class="footer">
|
| 275 |
+
<div class="footer-content">
|
| 276 |
+
<ul class="footer-links">
|
| 277 |
+
<li><a href="../../index.html">Home</a></li>
|
| 278 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 279 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 280 |
+
<li><a href="../../about.html">About</a></li>
|
| 281 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 282 |
+
</ul>
|
| 283 |
+
</div>
|
| 284 |
+
<hr class="footer-divider" />
|
| 285 |
+
<div class="footer-credit">
|
| 286 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 287 |
+
</div>
|
| 288 |
+
</footer>
|
| 289 |
+
|
| 290 |
+
<style>
|
| 291 |
+
/* Footer Styles */
|
| 292 |
+
.footer {
|
| 293 |
+
background-color: white;
|
| 294 |
+
border-radius: 0.5rem;
|
| 295 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 296 |
+
margin: 1rem;
|
| 297 |
+
padding: 1.5rem;
|
| 298 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 299 |
+
}
|
| 300 |
+
.footer-content {
|
| 301 |
+
width: 100%;
|
| 302 |
+
max-width: 1200px;
|
| 303 |
+
margin: 0 auto;
|
| 304 |
+
display: flex;
|
| 305 |
+
flex-direction: column;
|
| 306 |
+
align-items: center;
|
| 307 |
+
justify-content: center;
|
| 308 |
+
}
|
| 309 |
+
.footer-links {
|
| 310 |
+
display: flex;
|
| 311 |
+
flex-wrap: wrap;
|
| 312 |
+
justify-content: center;
|
| 313 |
+
font-size: 0.875rem;
|
| 314 |
+
color: #4a5568;
|
| 315 |
+
margin: 0;
|
| 316 |
+
padding: 0;
|
| 317 |
+
list-style-type: none;
|
| 318 |
+
}
|
| 319 |
+
.footer-links li {
|
| 320 |
+
margin-right: 1rem;
|
| 321 |
+
}
|
| 322 |
+
.footer-links a {
|
| 323 |
+
text-decoration: none;
|
| 324 |
+
color: inherit;
|
| 325 |
+
transition: color 0.3s ease;
|
| 326 |
+
}
|
| 327 |
+
.footer-divider {
|
| 328 |
+
margin-top: 1.5rem;
|
| 329 |
+
margin-bottom: 1.5rem;
|
| 330 |
+
border-color: #e2e8f0;
|
| 331 |
+
}
|
| 332 |
+
.footer-credit {
|
| 333 |
+
text-align: center;
|
| 334 |
+
font-size: 0.875rem;
|
| 335 |
+
color: #6b7280;
|
| 336 |
+
}
|
| 337 |
+
.footer-credit a {
|
| 338 |
+
text-decoration: none;
|
| 339 |
+
color: #4a5568;
|
| 340 |
+
}
|
| 341 |
+
|
| 342 |
+
/* Dark Mode Footer Styles */
|
| 343 |
+
body.dark .footer {
|
| 344 |
+
background-color: #333;
|
| 345 |
+
color: #f1f1f1;
|
| 346 |
+
}
|
| 347 |
+
body.dark .footer-links a {
|
| 348 |
+
color: #f1f1f1;
|
| 349 |
+
}
|
| 350 |
+
body.dark .footer-divider {
|
| 351 |
+
border-color: #555;
|
| 352 |
+
}
|
| 353 |
+
body.dark .footer-credit a {
|
| 354 |
+
color: #f1f1f1;
|
| 355 |
+
}
|
| 356 |
+
</style>
|
| 357 |
+
|
| 358 |
+
</body>
|
| 359 |
+
</html>
|
fruits_variety_set/banana_varities/cavendish-banana.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Cavendish Banana | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://static.vecteezy.com/system/resources/previews/034/454/761/non_2x/cavendish-bananas-are-available-in-many-varieties-and-are-nutritionally-rich-in-nutrients-the-fruit-turns-golden-yellow-when-ripe-the-flesh-is-milky-white-it-has-a-sweet-smell-and-taste-photo.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Cavendish Banana</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Banana Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Cavendish Banana</h1>
|
| 73 |
+
<p>Cavendish Bananas are the most widely consumed variety globally, known for their mild sweetness and creamy texture.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Banana Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in potassium, promoting heart health and muscle function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Excellent source of dietary fiber for improved digestion.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>High in natural sugars, providing an instant energy boost.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Packed with vitamins and minerals for overall well-being.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Regulates blood pressure due to its potassium content.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts digestion and prevents constipation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Provides a natural energy source for athletes and active individuals.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports mental health by aiding serotonin production.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/banana_varities/g9-banana.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>G9 Banana | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://www.agrifarming.in/wp-content/uploads/Grand-Nain-G9-Banana-Farming-in-India-1-768x514.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>G9 Banana</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Banana Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>G9 Banana</h1>
|
| 73 |
+
<p>G9 Bananas are a high-yield variety, known for their uniform shape, sweet taste, and long shelf life.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Banana Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in potassium, promoting heart health and muscle function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Excellent source of dietary fiber for improved digestion.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>High in natural sugars, providing an instant energy boost.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Packed with vitamins and minerals for overall well-being.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Regulates blood pressure due to its potassium content.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts digestion and prevents constipation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Provides a natural energy source for athletes and active individuals.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports mental health by aiding serotonin production.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/banana_varities/hill-banana.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Hill Banana | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.lFvQWTbYW68MDYHDNmZKRwHaDt?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Hill Banana</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Banana Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Hill Banana</h1>
|
| 73 |
+
<p>Hill Bananas are cultivated in hilly regions, known for their unique taste, firm texture, and rich nutrient content.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Banana Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in fiber, supporting healthy digestion.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in essential vitamins like B6 and C for overall well-being.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Contains antioxidants that help reduce inflammation.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Boosts energy levels naturally with healthy carbohydrates.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Regulates blood sugar levels, beneficial for diabetics.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports heart health with its potassium and fiber content.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps in weight management by promoting satiety.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Strengthens immunity with its vitamin-rich composition.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/banana_varities/red-banana.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Red Banana | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://images-prod.healthline.com/hlcmsresource/images/AN_images/red-bananas-1296x728-feature.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Red Banana</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Banana Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Red Banana</h1>
|
| 73 |
+
<p>Red Bananas are sweeter and softer than regular bananas, packed with antioxidants and essential nutrients.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Banana Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in antioxidants, promoting overall health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in potassium, supporting heart health and blood pressure regulation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Boosts immune function with high vitamin C content.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Aids digestion and promotes gut health with dietary fiber.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps reduce blood pressure levels due to high potassium.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports digestive health and relieves constipation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Provides a natural energy boost for active lifestyles.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps combat anemia with high iron content.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/banana_varities/yellakki-banana.html
ADDED
|
@@ -0,0 +1,358 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Yellakki Banana | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://www.agrifarming.in/wp-content/uploads/Yelakki-Banana-Farming-in-India-1-768x512.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
|
| 59 |
+
|
| 60 |
+
</ul>
|
| 61 |
+
</nav>
|
| 62 |
+
</header>
|
| 63 |
+
|
| 64 |
+
<!-- Hero Section -->
|
| 65 |
+
<section class="hero">
|
| 66 |
+
<div class="hero-content">
|
| 67 |
+
<h1>Yellakki Banana</h1>
|
| 68 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 69 |
+
</div>
|
| 70 |
+
</section>
|
| 71 |
+
|
| 72 |
+
<!-- Banana Page Header -->
|
| 73 |
+
<section class="variety-header">
|
| 74 |
+
<h1>Yellakki Banana</h1>
|
| 75 |
+
<p>Yellakki Bananas are small, sweet, and highly nutritious, making them a favorite choice for daily consumption.</p>
|
| 76 |
+
</section>
|
| 77 |
+
|
| 78 |
+
<!-- Banana Comparison/Card Section -->
|
| 79 |
+
<section class="variety-comparison" id="details">
|
| 80 |
+
<div class="variety-category">
|
| 81 |
+
<h2>Health Benefits</h2>
|
| 82 |
+
<div class="variety-list">
|
| 83 |
+
<div class="variety-item">
|
| 84 |
+
<p>Rich in potassium, supporting heart health and muscle function.</p>
|
| 85 |
+
</div>
|
| 86 |
+
<div class="variety-item">
|
| 87 |
+
<p>High in fiber, aiding digestion and promoting gut health.</p>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="variety-item">
|
| 90 |
+
<p>Contains natural sugars for instant energy boost.</p>
|
| 91 |
+
</div>
|
| 92 |
+
<div class="variety-item">
|
| 93 |
+
<p>Packed with vitamins and minerals that support overall well-being.</p>
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="variety-category">
|
| 98 |
+
<h2>Issues It Helps Solve</h2>
|
| 99 |
+
<div class="variety-list">
|
| 100 |
+
<div class="variety-item">
|
| 101 |
+
<p>Helps maintain blood pressure levels due to its high potassium content.</p>
|
| 102 |
+
</div>
|
| 103 |
+
<div class="variety-item">
|
| 104 |
+
<p>Boosts digestion and helps in relieving constipation.</p>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="variety-item">
|
| 107 |
+
<p>Provides a natural source of energy for athletes and active individuals.</p>
|
| 108 |
+
</div>
|
| 109 |
+
<div class="variety-item">
|
| 110 |
+
<p>Supports mental health by aiding serotonin production.</p>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</section>
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
|
| 129 |
+
|
| 130 |
+
<style>
|
| 131 |
+
/* Footer Styles */
|
| 132 |
+
.footer {
|
| 133 |
+
background-color: white;
|
| 134 |
+
border-radius: 0.5rem;
|
| 135 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 136 |
+
margin: 1rem;
|
| 137 |
+
padding: 1.5rem;
|
| 138 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 139 |
+
}
|
| 140 |
+
.footer-content {
|
| 141 |
+
width: 100%;
|
| 142 |
+
max-width: 1200px;
|
| 143 |
+
margin: 0 auto;
|
| 144 |
+
display: flex;
|
| 145 |
+
flex-direction: column;
|
| 146 |
+
align-items: center;
|
| 147 |
+
justify-content: center;
|
| 148 |
+
}
|
| 149 |
+
.footer-links {
|
| 150 |
+
display: flex;
|
| 151 |
+
flex-wrap: wrap;
|
| 152 |
+
justify-content: center;
|
| 153 |
+
font-size: 0.875rem;
|
| 154 |
+
color: #4a5568;
|
| 155 |
+
margin: 0;
|
| 156 |
+
padding: 0;
|
| 157 |
+
list-style-type: none;
|
| 158 |
+
}
|
| 159 |
+
.footer-links li {
|
| 160 |
+
margin-right: 1rem;
|
| 161 |
+
}
|
| 162 |
+
.footer-links a {
|
| 163 |
+
text-decoration: none;
|
| 164 |
+
color: inherit;
|
| 165 |
+
transition: color 0.3s ease;
|
| 166 |
+
}
|
| 167 |
+
.footer-divider {
|
| 168 |
+
margin-top: 1.5rem;
|
| 169 |
+
margin-bottom: 1.5rem;
|
| 170 |
+
border-color: #e2e8f0;
|
| 171 |
+
}
|
| 172 |
+
.footer-credit {
|
| 173 |
+
text-align: center;
|
| 174 |
+
font-size: 0.875rem;
|
| 175 |
+
color: #6b7280;
|
| 176 |
+
}
|
| 177 |
+
.footer-credit a {
|
| 178 |
+
text-decoration: none;
|
| 179 |
+
color: #4a5568;
|
| 180 |
+
}
|
| 181 |
+
|
| 182 |
+
/* Dark Mode Footer Styles */
|
| 183 |
+
body.dark .footer {
|
| 184 |
+
background-color: #333;
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-links a {
|
| 188 |
+
color: #f1f1f1;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-divider {
|
| 191 |
+
border-color: #555;
|
| 192 |
+
}
|
| 193 |
+
body.dark .footer-credit a {
|
| 194 |
+
color: #f1f1f1;
|
| 195 |
+
}
|
| 196 |
+
</style>
|
| 197 |
+
|
| 198 |
+
|
| 199 |
+
|
| 200 |
+
|
| 201 |
+
<style>
|
| 202 |
+
/* Footer Styles */
|
| 203 |
+
.footer {
|
| 204 |
+
background-color: white;
|
| 205 |
+
border-radius: 0.5rem;
|
| 206 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 207 |
+
margin: 1rem;
|
| 208 |
+
padding: 1.5rem;
|
| 209 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 210 |
+
}
|
| 211 |
+
.footer-content {
|
| 212 |
+
width: 100%;
|
| 213 |
+
max-width: 1200px;
|
| 214 |
+
margin: 0 auto;
|
| 215 |
+
display: flex;
|
| 216 |
+
flex-direction: column;
|
| 217 |
+
align-items: center;
|
| 218 |
+
justify-content: center;
|
| 219 |
+
}
|
| 220 |
+
.footer-links {
|
| 221 |
+
display: flex;
|
| 222 |
+
flex-wrap: wrap;
|
| 223 |
+
justify-content: center;
|
| 224 |
+
font-size: 0.875rem;
|
| 225 |
+
color: #4a5568;
|
| 226 |
+
margin: 0;
|
| 227 |
+
padding: 0;
|
| 228 |
+
list-style-type: none;
|
| 229 |
+
}
|
| 230 |
+
.footer-links li {
|
| 231 |
+
margin-right: 1rem;
|
| 232 |
+
}
|
| 233 |
+
.footer-links a {
|
| 234 |
+
text-decoration: none;
|
| 235 |
+
color: inherit;
|
| 236 |
+
transition: color 0.3s ease;
|
| 237 |
+
}
|
| 238 |
+
.footer-divider {
|
| 239 |
+
margin-top: 1.5rem;
|
| 240 |
+
margin-bottom: 1.5rem;
|
| 241 |
+
border-color: #e2e8f0;
|
| 242 |
+
}
|
| 243 |
+
.footer-credit {
|
| 244 |
+
text-align: center;
|
| 245 |
+
font-size: 0.875rem;
|
| 246 |
+
color: #6b7280;
|
| 247 |
+
}
|
| 248 |
+
.footer-credit a {
|
| 249 |
+
text-decoration: none;
|
| 250 |
+
color: #4a5568;
|
| 251 |
+
}
|
| 252 |
+
|
| 253 |
+
/* Dark Mode Footer Styles */
|
| 254 |
+
body.dark .footer {
|
| 255 |
+
background-color: #333;
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-links a {
|
| 259 |
+
color: #f1f1f1;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-divider {
|
| 262 |
+
border-color: #555;
|
| 263 |
+
}
|
| 264 |
+
body.dark .footer-credit a {
|
| 265 |
+
color: #f1f1f1;
|
| 266 |
+
}
|
| 267 |
+
</style>
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
|
| 272 |
+
|
| 273 |
+
<footer class="footer">
|
| 274 |
+
<div class="footer-content">
|
| 275 |
+
<ul class="footer-links">
|
| 276 |
+
<li><a href="../../index.html">Home</a></li>
|
| 277 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 278 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 279 |
+
<li><a href="../../about.html">About</a></li>
|
| 280 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 281 |
+
</ul>
|
| 282 |
+
</div>
|
| 283 |
+
<hr class="footer-divider" />
|
| 284 |
+
<div class="footer-credit">
|
| 285 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 286 |
+
</div>
|
| 287 |
+
</footer>
|
| 288 |
+
|
| 289 |
+
<style>
|
| 290 |
+
/* Footer Styles */
|
| 291 |
+
.footer {
|
| 292 |
+
background-color: white;
|
| 293 |
+
border-radius: 0.5rem;
|
| 294 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 295 |
+
margin: 1rem;
|
| 296 |
+
padding: 1.5rem;
|
| 297 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 298 |
+
}
|
| 299 |
+
.footer-content {
|
| 300 |
+
width: 100%;
|
| 301 |
+
max-width: 1200px;
|
| 302 |
+
margin: 0 auto;
|
| 303 |
+
display: flex;
|
| 304 |
+
flex-direction: column;
|
| 305 |
+
align-items: center;
|
| 306 |
+
justify-content: center;
|
| 307 |
+
}
|
| 308 |
+
.footer-links {
|
| 309 |
+
display: flex;
|
| 310 |
+
flex-wrap: wrap;
|
| 311 |
+
justify-content: center;
|
| 312 |
+
font-size: 0.875rem;
|
| 313 |
+
color: #4a5568;
|
| 314 |
+
margin: 0;
|
| 315 |
+
padding: 0;
|
| 316 |
+
list-style-type: none;
|
| 317 |
+
}
|
| 318 |
+
.footer-links li {
|
| 319 |
+
margin-right: 1rem;
|
| 320 |
+
}
|
| 321 |
+
.footer-links a {
|
| 322 |
+
text-decoration: none;
|
| 323 |
+
color: inherit;
|
| 324 |
+
transition: color 0.3s ease;
|
| 325 |
+
}
|
| 326 |
+
.footer-divider {
|
| 327 |
+
margin-top: 1.5rem;
|
| 328 |
+
margin-bottom: 1.5rem;
|
| 329 |
+
border-color: #e2e8f0;
|
| 330 |
+
}
|
| 331 |
+
.footer-credit {
|
| 332 |
+
text-align: center;
|
| 333 |
+
font-size: 0.875rem;
|
| 334 |
+
color: #6b7280;
|
| 335 |
+
}
|
| 336 |
+
.footer-credit a {
|
| 337 |
+
text-decoration: none;
|
| 338 |
+
color: #4a5568;
|
| 339 |
+
}
|
| 340 |
+
|
| 341 |
+
/* Dark Mode Footer Styles */
|
| 342 |
+
body.dark .footer {
|
| 343 |
+
background-color: #333;
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-links a {
|
| 347 |
+
color: #f1f1f1;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-divider {
|
| 350 |
+
border-color: #555;
|
| 351 |
+
}
|
| 352 |
+
body.dark .footer-credit a {
|
| 353 |
+
color: #f1f1f1;
|
| 354 |
+
}
|
| 355 |
+
</style>
|
| 356 |
+
|
| 357 |
+
</body>
|
| 358 |
+
</html>
|
fruits_variety_set/grapes_varieties/black-cornith-grape.html
ADDED
|
@@ -0,0 +1,356 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Black Corinth Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://www.thetreecenter.com/c/uploads/2023/02/Fredonia_Grape_2-copy-jpg-webp.webp')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
|
| 59 |
+
</ul>
|
| 60 |
+
</nav>
|
| 61 |
+
</header>
|
| 62 |
+
|
| 63 |
+
<!-- Hero Section -->
|
| 64 |
+
<section class="hero">
|
| 65 |
+
<div class="hero-content">
|
| 66 |
+
<h1>Black Corinth Grape</h1>
|
| 67 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 68 |
+
</div>
|
| 69 |
+
</section>
|
| 70 |
+
|
| 71 |
+
<!-- Grape Page Header -->
|
| 72 |
+
<section class="variety-header">
|
| 73 |
+
<h1>Black Corinth Grape</h1>
|
| 74 |
+
<p>Black Corinth Grapes are small, seedless, and known for their intense sweetness, often used in dried currants.</p>
|
| 75 |
+
</section>
|
| 76 |
+
|
| 77 |
+
<!-- Grape Comparison/Card Section -->
|
| 78 |
+
<section class="variety-comparison" id="details">
|
| 79 |
+
<div class="variety-category">
|
| 80 |
+
<h2>Health Benefits</h2>
|
| 81 |
+
<div class="variety-list">
|
| 82 |
+
<div class="variety-item">
|
| 83 |
+
<p>Rich in antioxidants, promoting cellular health.</p>
|
| 84 |
+
</div>
|
| 85 |
+
<div class="variety-item">
|
| 86 |
+
<p>Supports cardiovascular health with polyphenols.</p>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="variety-item">
|
| 89 |
+
<p>High in dietary fiber for improved digestion.</p>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="variety-item">
|
| 92 |
+
<p>Contains natural sugars for a quick energy boost.</p>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
<div class="variety-category">
|
| 97 |
+
<h2>Issues It Helps Solve</h2>
|
| 98 |
+
<div class="variety-list">
|
| 99 |
+
<div class="variety-item">
|
| 100 |
+
<p>Aids in maintaining stable blood sugar levels.</p>
|
| 101 |
+
</div>
|
| 102 |
+
<div class="variety-item">
|
| 103 |
+
<p>Provides hydration and essential nutrients.</p>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="variety-item">
|
| 106 |
+
<p>Reduces inflammation and oxidative stress.</p>
|
| 107 |
+
</div>
|
| 108 |
+
<div class="variety-item">
|
| 109 |
+
<p>Enhances gut health with prebiotic fiber.</p>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</section>
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
|
| 128 |
+
<style>
|
| 129 |
+
/* Footer Styles */
|
| 130 |
+
.footer {
|
| 131 |
+
background-color: white;
|
| 132 |
+
border-radius: 0.5rem;
|
| 133 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 134 |
+
margin: 1rem;
|
| 135 |
+
padding: 1.5rem;
|
| 136 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 137 |
+
}
|
| 138 |
+
.footer-content {
|
| 139 |
+
width: 100%;
|
| 140 |
+
max-width: 1200px;
|
| 141 |
+
margin: 0 auto;
|
| 142 |
+
display: flex;
|
| 143 |
+
flex-direction: column;
|
| 144 |
+
align-items: center;
|
| 145 |
+
justify-content: center;
|
| 146 |
+
}
|
| 147 |
+
.footer-links {
|
| 148 |
+
display: flex;
|
| 149 |
+
flex-wrap: wrap;
|
| 150 |
+
justify-content: center;
|
| 151 |
+
font-size: 0.875rem;
|
| 152 |
+
color: #4a5568;
|
| 153 |
+
margin: 0;
|
| 154 |
+
padding: 0;
|
| 155 |
+
list-style-type: none;
|
| 156 |
+
}
|
| 157 |
+
.footer-links li {
|
| 158 |
+
margin-right: 1rem;
|
| 159 |
+
}
|
| 160 |
+
.footer-links a {
|
| 161 |
+
text-decoration: none;
|
| 162 |
+
color: inherit;
|
| 163 |
+
transition: color 0.3s ease;
|
| 164 |
+
}
|
| 165 |
+
.footer-divider {
|
| 166 |
+
margin-top: 1.5rem;
|
| 167 |
+
margin-bottom: 1.5rem;
|
| 168 |
+
border-color: #e2e8f0;
|
| 169 |
+
}
|
| 170 |
+
.footer-credit {
|
| 171 |
+
text-align: center;
|
| 172 |
+
font-size: 0.875rem;
|
| 173 |
+
color: #6b7280;
|
| 174 |
+
}
|
| 175 |
+
.footer-credit a {
|
| 176 |
+
text-decoration: none;
|
| 177 |
+
color: #4a5568;
|
| 178 |
+
}
|
| 179 |
+
|
| 180 |
+
/* Dark Mode Footer Styles */
|
| 181 |
+
body.dark .footer {
|
| 182 |
+
background-color: #333;
|
| 183 |
+
color: #f1f1f1;
|
| 184 |
+
}
|
| 185 |
+
body.dark .footer-links a {
|
| 186 |
+
color: #f1f1f1;
|
| 187 |
+
}
|
| 188 |
+
body.dark .footer-divider {
|
| 189 |
+
border-color: #555;
|
| 190 |
+
}
|
| 191 |
+
body.dark .footer-credit a {
|
| 192 |
+
color: #f1f1f1;
|
| 193 |
+
}
|
| 194 |
+
</style>
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
|
| 199 |
+
<style>
|
| 200 |
+
/* Footer Styles */
|
| 201 |
+
.footer {
|
| 202 |
+
background-color: white;
|
| 203 |
+
border-radius: 0.5rem;
|
| 204 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 205 |
+
margin: 1rem;
|
| 206 |
+
padding: 1.5rem;
|
| 207 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 208 |
+
}
|
| 209 |
+
.footer-content {
|
| 210 |
+
width: 100%;
|
| 211 |
+
max-width: 1200px;
|
| 212 |
+
margin: 0 auto;
|
| 213 |
+
display: flex;
|
| 214 |
+
flex-direction: column;
|
| 215 |
+
align-items: center;
|
| 216 |
+
justify-content: center;
|
| 217 |
+
}
|
| 218 |
+
.footer-links {
|
| 219 |
+
display: flex;
|
| 220 |
+
flex-wrap: wrap;
|
| 221 |
+
justify-content: center;
|
| 222 |
+
font-size: 0.875rem;
|
| 223 |
+
color: #4a5568;
|
| 224 |
+
margin: 0;
|
| 225 |
+
padding: 0;
|
| 226 |
+
list-style-type: none;
|
| 227 |
+
}
|
| 228 |
+
.footer-links li {
|
| 229 |
+
margin-right: 1rem;
|
| 230 |
+
}
|
| 231 |
+
.footer-links a {
|
| 232 |
+
text-decoration: none;
|
| 233 |
+
color: inherit;
|
| 234 |
+
transition: color 0.3s ease;
|
| 235 |
+
}
|
| 236 |
+
.footer-divider {
|
| 237 |
+
margin-top: 1.5rem;
|
| 238 |
+
margin-bottom: 1.5rem;
|
| 239 |
+
border-color: #e2e8f0;
|
| 240 |
+
}
|
| 241 |
+
.footer-credit {
|
| 242 |
+
text-align: center;
|
| 243 |
+
font-size: 0.875rem;
|
| 244 |
+
color: #6b7280;
|
| 245 |
+
}
|
| 246 |
+
.footer-credit a {
|
| 247 |
+
text-decoration: none;
|
| 248 |
+
color: #4a5568;
|
| 249 |
+
}
|
| 250 |
+
|
| 251 |
+
/* Dark Mode Footer Styles */
|
| 252 |
+
body.dark .footer {
|
| 253 |
+
background-color: #333;
|
| 254 |
+
color: #f1f1f1;
|
| 255 |
+
}
|
| 256 |
+
body.dark .footer-links a {
|
| 257 |
+
color: #f1f1f1;
|
| 258 |
+
}
|
| 259 |
+
body.dark .footer-divider {
|
| 260 |
+
border-color: #555;
|
| 261 |
+
}
|
| 262 |
+
body.dark .footer-credit a {
|
| 263 |
+
color: #f1f1f1;
|
| 264 |
+
}
|
| 265 |
+
</style>
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
|
| 271 |
+
<footer class="footer">
|
| 272 |
+
<div class="footer-content">
|
| 273 |
+
<ul class="footer-links">
|
| 274 |
+
<li><a href="../../index.html">Home</a></li>
|
| 275 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 276 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 277 |
+
<li><a href="../../about.html">About</a></li>
|
| 278 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 279 |
+
</ul>
|
| 280 |
+
</div>
|
| 281 |
+
<hr class="footer-divider" />
|
| 282 |
+
<div class="footer-credit">
|
| 283 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 284 |
+
</div>
|
| 285 |
+
</footer>
|
| 286 |
+
|
| 287 |
+
<style>
|
| 288 |
+
/* Footer Styles */
|
| 289 |
+
.footer {
|
| 290 |
+
background-color: white;
|
| 291 |
+
border-radius: 0.5rem;
|
| 292 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 293 |
+
margin: 1rem;
|
| 294 |
+
padding: 1.5rem;
|
| 295 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 296 |
+
}
|
| 297 |
+
.footer-content {
|
| 298 |
+
width: 100%;
|
| 299 |
+
max-width: 1200px;
|
| 300 |
+
margin: 0 auto;
|
| 301 |
+
display: flex;
|
| 302 |
+
flex-direction: column;
|
| 303 |
+
align-items: center;
|
| 304 |
+
justify-content: center;
|
| 305 |
+
}
|
| 306 |
+
.footer-links {
|
| 307 |
+
display: flex;
|
| 308 |
+
flex-wrap: wrap;
|
| 309 |
+
justify-content: center;
|
| 310 |
+
font-size: 0.875rem;
|
| 311 |
+
color: #4a5568;
|
| 312 |
+
margin: 0;
|
| 313 |
+
padding: 0;
|
| 314 |
+
list-style-type: none;
|
| 315 |
+
}
|
| 316 |
+
.footer-links li {
|
| 317 |
+
margin-right: 1rem;
|
| 318 |
+
}
|
| 319 |
+
.footer-links a {
|
| 320 |
+
text-decoration: none;
|
| 321 |
+
color: inherit;
|
| 322 |
+
transition: color 0.3s ease;
|
| 323 |
+
}
|
| 324 |
+
.footer-divider {
|
| 325 |
+
margin-top: 1.5rem;
|
| 326 |
+
margin-bottom: 1.5rem;
|
| 327 |
+
border-color: #e2e8f0;
|
| 328 |
+
}
|
| 329 |
+
.footer-credit {
|
| 330 |
+
text-align: center;
|
| 331 |
+
font-size: 0.875rem;
|
| 332 |
+
color: #6b7280;
|
| 333 |
+
}
|
| 334 |
+
.footer-credit a {
|
| 335 |
+
text-decoration: none;
|
| 336 |
+
color: #4a5568;
|
| 337 |
+
}
|
| 338 |
+
|
| 339 |
+
/* Dark Mode Footer Styles */
|
| 340 |
+
body.dark .footer {
|
| 341 |
+
background-color: #333;
|
| 342 |
+
color: #f1f1f1;
|
| 343 |
+
}
|
| 344 |
+
body.dark .footer-links a {
|
| 345 |
+
color: #f1f1f1;
|
| 346 |
+
}
|
| 347 |
+
body.dark .footer-divider {
|
| 348 |
+
border-color: #555;
|
| 349 |
+
}
|
| 350 |
+
body.dark .footer-credit a {
|
| 351 |
+
color: #f1f1f1;
|
| 352 |
+
}
|
| 353 |
+
</style>
|
| 354 |
+
|
| 355 |
+
</body>
|
| 356 |
+
</html>
|
fruits_variety_set/grapes_varieties/concord-grape.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Concord Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.KmTvEUqzT0zEIFqFzjZ8wwHaE3?w=960&h=630&rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Concord Grape</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Grape Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Concord Grape</h1>
|
| 73 |
+
<p>Concord Grapes are known for their bold flavor, deep purple color, and high antioxidant content.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Grape Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in antioxidants, supporting heart health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Boosts immune function with vitamin C.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Promotes healthy skin due to its high resveratrol content.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports brain function and cognitive health.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps lower blood pressure and improves circulation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Reduces inflammation and supports joint health.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Aids in digestion and promotes gut health.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Provides natural energy and reduces fatigue.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/grapes_varieties/cotton-candy-grape.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Cotton Candy Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.FaD5yZm3uPa3oQroX35bmwHaEI?w=1024&h=572&rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Cotton Candy Grape</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Grape Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Cotton Candy Grape</h1>
|
| 73 |
+
<p>Cotton Candy Grapes are known for their incredibly sweet flavor, resembling cotton candy, making them a unique treat.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Grape Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in antioxidants, supporting immune health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains polyphenols that promote heart health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>High in water content, aiding hydration.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Good source of vitamins C and K for overall wellness.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps in reducing oxidative stress and aging effects.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports digestion with its fiber content.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Boosts energy levels naturally.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps maintain healthy blood sugar levels.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/grapes_varieties/moon-drop-grape.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Moon Drop Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.4tzdDkJrrHhQwSGfkwnrMAHaE8?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Moon Drop Grape</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Grape Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Moon Drop Grape</h1>
|
| 73 |
+
<p>Moon Drop Grapes are unique, elongated, and known for their deep flavor and crisp texture.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Grape Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in polyphenols, aiding in anti-inflammatory properties.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Boosts cardiovascular health by improving circulation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>High in fiber, supporting digestive health.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Packed with antioxidants to protect cells from damage.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps regulate blood sugar levels.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports brain function and reduces cognitive decline.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces inflammation and joint pain.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Boosts energy and fights fatigue naturally.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/grapes_varieties/muscat-grape.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Muscat Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/R.62215af71e2a1efc59e24479154ae999?rik=M%2bzp8J3clkSydg&riu=http%3a%2f%2friversidegardencentre.com%2fuserfiles%2fproduct%2f5d49410398405-grapevine-muscat-of-alexandria.jpg&ehk=9IWqBRHjVwFm%2f0CWhybDS4KI3I3JMGrHfM3YUeaAvkk%3d&risl=&pid=ImgRaw&r=0')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Muscat Grape</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Grape Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Muscat Grape</h1>
|
| 73 |
+
<p>Muscat Grapes are renowned for their intense sweetness, fragrant aroma, and high nutrient content.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Grape Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in antioxidants, promoting overall health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Boosts immune function with vitamins C and K.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by reducing bad cholesterol.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Promotes skin health and reduces signs of aging.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in digestion and promotes gut health.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps regulate blood pressure levels.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Provides natural energy and reduces fatigue.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports cognitive function and brain health.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/grapes_varieties/ruby-seedless-grape.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Ruby Seedless Grape | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.k008cif6d863V1OSpxgwZAHaFj?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Ruby Seedless Grape</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Grape Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Ruby Seedless Grape</h1>
|
| 73 |
+
<p>Ruby Seedless Grapes are known for their juicy, sweet flavor and are a great snack option for a healthy diet.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Grape Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in antioxidants that support immune function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Promotes heart health with its polyphenol content.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>High in fiber, aiding digestion.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports healthy skin and reduces signs of aging.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps regulate blood sugar levels.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts energy levels naturally.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces oxidative stress and inflammation.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Enhances hydration due to high water content.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/alphonso-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Alphonso Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.nhRYhTdGHdze0-VT0dGSgwHaE9?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Alphonso Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Alphonso Mango</h1>
|
| 73 |
+
<p>Alphonso Mango, known as the "King of Mangoes," is loved for its rich flavor, smooth texture, and delightful aroma.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamins A and C, boosting immune health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains antioxidants that help fight free radicals.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports healthy digestion with natural enzymes.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides energy with its natural sugars and nutrients.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps improve vision and skin health.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts digestion and aids in gut health.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Enhances hydration and prevents heatstroke.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports heart health by regulating cholesterol levels.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/dasheri-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Dasheri Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://m.media-amazon.com/images/I/71rfJfJo4tL._SL1440_.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Dasheri Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Dasheri Mango</h1>
|
| 73 |
+
<p>Dasheri Mango is a popular variety known for its sweet and aromatic flavor, smooth texture, and juicy pulp, making it a favorite in India and beyond.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin C, boosting immunity and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in dietary fiber, promoting digestive health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Loaded with antioxidants to fight free radicals.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports eye health due to its high vitamin A content.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps improve digestion and prevent constipation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports a healthy heart by regulating cholesterol levels.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Boosts energy levels naturally with its natural sugars.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Promotes glowing skin and reduces signs of aging.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/haden-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Haden Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.nkm7v_enVEdC70D9H2TPYwHaFj?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Haden Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Haden Mango</h1>
|
| 73 |
+
<p>Haden Mango is known for its rich flavor, vibrant red and yellow skin, and smooth texture, making it a favorite among mango enthusiasts.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C to support immune function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains fiber that promotes healthy digestion.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Rich in antioxidants that protect against cellular damage.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides natural sugars for sustained energy.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Supports digestive health and helps prevent constipation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Promotes heart health by reducing cholesterol levels.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Boosts skin health and helps maintain a youthful glow.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Enhances mood and reduces stress levels naturally.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/kesar-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Kesar Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.nL1BJ_EcAting0QLcbG6QQAAAA?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Kesar Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Kesar Mango</h1>
|
| 73 |
+
<p>Kesar Mango, known for its bright orange pulp and sweet aroma, is a delicious variety widely grown in India.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin C and A, boosting immunity.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains fiber to aid digestion and gut health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Loaded with antioxidants that promote skin health.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides a natural source of energy.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Improves digestion and prevents constipation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Enhances skin glow and prevents acne.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces stress and promotes overall well-being.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports heart health by regulating cholesterol.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/palmer-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Palmer Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://i.etsystatic.com/33390240/r/il/6e0638/3594110559/il_fullxfull.3594110559_c650.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Palmer Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Palmer Mango</h1>
|
| 73 |
+
<p>Palmer Mango is known for its elongated shape, sweet yet mildly tart flavor, and deep red blush when ripe, making it a unique choice for mango lovers.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin A for better vision and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in fiber, aiding digestion and gut health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Loaded with antioxidants that support overall immunity.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Natural sugars provide a quick energy boost.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps maintain a healthy digestive system.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Promotes cardiovascular health by regulating cholesterol.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Supports glowing skin and reduces signs of aging.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Improves mood and reduces stress naturally.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/mango_varieties/tommy-atkins-mango.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Tommy Atkins Mango | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.Z5D8sbtCTow_z7K07Ton5wHaFj?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Tommy Atkins Mango</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Mango Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Tommy Atkins Mango</h1>
|
| 73 |
+
<p>Tommy Atkins Mango is known for its vibrant color, firm texture, and mild sweetness, making it a popular choice for commercial distribution.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Mango Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamins A and C for enhanced immunity.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Supports digestion with its high fiber content.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Good source of antioxidants for overall health.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides natural sugars for a quick energy boost.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids digestion and helps relieve constipation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Supports heart health by maintaining cholesterol balance.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Boosts skin health and promotes a youthful glow.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Enhances mood and reduces stress levels.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/blood-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Blood Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.NOCDdJ9k0GWQqJI70Hg4IgHaE7?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Blood Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Blood Orange</h1>
|
| 73 |
+
<p>Blood Oranges have a deep red flesh and a rich, berry-like flavor, packed with antioxidants and vitamin C.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, supporting immunity and collagen production.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in anthocyanins, powerful antioxidants that reduce inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by improving blood circulation.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Boosts skin health and helps fight oxidative stress.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Reduces risk of heart disease by lowering cholesterol levels.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts immune function to fight infections.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Improves digestion with its fiber content.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps maintain healthy skin and reduces signs of aging.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/cara-cara-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Cara Cara Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://cdn.shopify.com/s/files/1/0059/8835/2052/files/Cara_Cara_Orange_6_FGT_7e81ea25-f7c6-47a3-8190-81de7198adf4.jpg?v=1707160095')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Cara Cara Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Cara Cara Orange</h1>
|
| 73 |
+
<p>Cara Cara Oranges have a pinkish-red flesh with a sweet, low-acid flavor, making them a delicious and nutritious citrus choice.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immune health and collagen production.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in lycopene, an antioxidant that supports heart health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Promotes eye health with vitamin A and carotenoids.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports digestion and gut health with natural fiber.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Reduces risk of heart disease by lowering oxidative stress.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Enhances skin health by reducing free radical damage.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Aids in maintaining blood sugar levels.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps improve digestion and prevents constipation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/mandarin-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Mandarin Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://cdn.mos.cms.futurecdn.net/biD3D4FXVHTTwjqWw5N3iR-1200-80.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Mandarin Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Mandarin Orange</h1>
|
| 73 |
+
<p>Mandarin Oranges are small, sweet, and easy to peel, making them a favorite citrus fruit packed with essential nutrients.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, supporting a strong immune system.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in antioxidants that help fight free radicals.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports skin health by promoting collagen production.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides dietary fiber for better digestion.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Reduces inflammation and supports heart health.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Helps in regulating blood pressure levels.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Enhances hydration with its high water content.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Boosts energy levels with natural sugars.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/navel-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Navel Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://eyouagro.com/wp-content/uploads/2022/02/orange-fruit-tree-5707945.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Navel Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Navel Orange</h1>
|
| 73 |
+
<p>Navel Oranges are seedless, easy to peel, and have a sweet, refreshing taste, making them a popular citrus fruit.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immunity and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in fiber, supporting digestion and gut health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Loaded with antioxidants that help reduce inflammation.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Promotes heart health by regulating blood pressure and cholesterol.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Strengthens the immune system, reducing susceptibility to colds and flu.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Aids digestion and prevents constipation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Provides hydration and replenishes electrolytes.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Enhances skin health, reducing dryness and signs of aging.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/tangelo-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Tangelo Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://thumbs.dreamstime.com/b/tangelo-citrus-fruit-orange-minnelola-minnelola-tangelo-citrus-fruit-orange-101575208.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html" >Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Tangelo Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Tangelo Orange</h1>
|
| 73 |
+
<p>Tangelo Oranges are a hybrid citrus fruit known for their juicy, tangy-sweet flavor and easy-to-peel skin.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin C, helping boost immunity and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>High in fiber, aiding digestion and gut health.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Contains antioxidants that help reduce inflammation and oxidative stress.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports heart health by improving blood circulation and lowering cholesterol.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Boosts the immune system, reducing the risk of infections.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Promotes digestive health and prevents constipation.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Hydrates the body due to its high water content.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Helps maintain glowing skin and reduces signs of aging.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/orange_varities/valencia-orange.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Valencia Orange | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.z-PsU4ry-EfQUS2jvhi40wHaHa?w=2048&h=2048&rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Valencia Orange</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Orange Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Valencia Orange</h1>
|
| 73 |
+
<p>Valencia Oranges are known for their juicy, sweet flavor and are widely used for fresh juice extraction.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Orange Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immunity and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in antioxidants, reducing inflammation and cell damage.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by lowering blood pressure and cholesterol.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Provides natural hydration with its high water content.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Strengthens the immune system to fight infections.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Aids in digestion and promotes gut health.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps maintain healthy skin and prevent aging signs.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Reduces the risk of chronic diseases with its nutrient-rich profile.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/golden-sweet-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Golden Sweet Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://upload.wikimedia.org/wikipedia/commons/3/3d/Golden_Sweet_Pineapple.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Golden Sweet Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Golden Sweet Pineapple</h1>
|
| 73 |
+
<p>Golden Sweet Pineapples are prized for their vibrant yellow flesh, exceptionally sweet flavor, and juicy texture, making them a favorite tropical fruit.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immunity and skin health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in bromelain, aiding digestion and reducing inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports strong bones with its manganese content.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Helps in hydration and provides essential antioxidants.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids digestion and reduces bloating.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Provides a natural energy boost with its high sugar content.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces inflammation and supports joint health.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Promotes heart health and improves circulation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/md-2-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>MD-2 Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/R.5f22ce69795c968a5827014951ebdb6b?rik=BHSZ64M6Fva6Yw&riu=http%3a%2f%2fcruzeto.com%2fmedia%2franchocruzeto%2fproducts%2f72%2fIMG_1898.JPG&ehk=PidWWGQKgAlI%2bV2CUXG9Zyd8ccbNLIwo1IrayD6a3G4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>MD-2 Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>MD-2 Pineapple</h1>
|
| 73 |
+
<p>MD-2 Pineapples are known for their perfect balance of sweetness and acidity, high vitamin C content, and long shelf life, making them one of the most popular commercial pineapple varieties.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immune health.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains bromelain, aiding digestion and reducing inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Rich in antioxidants, promoting overall well-being.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Supports hydration and aids in detoxification.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in digestion and helps prevent constipation.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts energy levels with natural sugars and nutrients.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps reduce inflammation and improve joint health.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports cardiovascular health by promoting circulation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/perolera-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Perolera Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.4u_wB2Otx5vs9HhOKdNahgHaE8?w=1600&h=1067&rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Perolera Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Perolera Pineapple</h1>
|
| 73 |
+
<p>Perolera Pineapples are known for their juicy texture, high sugar content, and delightful tropical flavor, making them a popular choice for fresh consumption and juices.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Excellent source of vitamin C for immune support.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains bromelain, which aids digestion and reduces inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Rich in antioxidants, helping to combat free radicals.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Promotes hydration and supports overall wellness.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in digestion and helps prevent bloating.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Provides a natural energy boost with its natural sugars.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps to reduce inflammation and improve joint health.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Supports heart health by improving circulation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/queen-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Queen Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.gTNR3b7rWXtofMr_ji3-BwHaFf?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Queen Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Queen Pineapple</h1>
|
| 73 |
+
<p>Queen Pineapples are prized for their golden-yellow flesh, rich aroma, and exceptionally sweet taste, making them a favorite tropical fruit variety.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, strengthening the immune system.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Rich in bromelain, supporting digestion and reducing inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Boosts metabolism and aids in weight management.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Promotes healthy skin and collagen production.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Supports digestion and reduces bloating.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Provides a natural source of hydration and energy.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps reduce inflammation and joint pain.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Improves blood circulation and heart health.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/red-spanish-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Red Spanish Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://minnetonkaorchards.com/wp-content/uploads/2022/12/Red-Pineapple-SS-2202843551-1024x576.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Red Spanish Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Red Spanish Pineapple</h1>
|
| 73 |
+
<p>Red Spanish Pineapples are known for their vibrant red outer skin and sweet yet slightly tart flavor, making them a popular choice for fresh consumption and juices.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin C, boosting immunity.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains bromelain, aiding digestion and reducing inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports eye health with beta-carotene.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Hydrating and refreshing, perfect for tropical climates.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Supports digestion and alleviates bloating.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Provides a natural energy boost with natural sugars.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Helps reduce inflammation and joint pain.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Promotes healthy skin and collagen production.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/pineapple_varieties/smooth-cayenne-pineapple.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Smooth Cayenne Pineapple | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://upload.wikimedia.org/wikipedia/commons/3/3d/Smooth_Cayenne_Pineapple.jpg')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Smooth Cayenne Pineapple</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Pineapple Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Smooth Cayenne Pineapple</h1>
|
| 73 |
+
<p>Smooth Cayenne Pineapples are known for their juicy flesh, moderate acidity, and high sugar content, making them a preferred choice for fresh consumption and canning.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Pineapple Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>Rich in vitamin C, enhancing immune function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains bromelain, aiding digestion and reducing inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports bone health due to its manganese content.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Helps in hydration and detoxification.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Aids in digestion and helps prevent bloating.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Boosts energy levels with natural sugars.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Reduces inflammation and supports joint health.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Promotes cardiovascular health by improving circulation.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|
fruits_variety_set/strawberry_variety/albion-strawberry.html
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Albion Strawberry | Health Benefits & Issues Solved</title>
|
| 7 |
+
<link
|
| 8 |
+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| 9 |
+
rel="stylesheet"
|
| 10 |
+
/> <link rel="stylesheet" href="../../varity-css.css" />
|
| 11 |
+
<style>
|
| 12 |
+
.hero{
|
| 13 |
+
background: url('https://th.bing.com/th/id/OIP.5qCBWWWqCtAb4anbSjOVpAHaE8?rs=1&pid=ImgDetMain')
|
| 14 |
+
center/cover no-repeat;
|
| 15 |
+
}
|
| 16 |
+
</style>
|
| 17 |
+
|
| 18 |
+
|
| 19 |
+
|
| 20 |
+
|
| 21 |
+
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
<script src="../../script.js"></script>
|
| 37 |
+
</head>
|
| 38 |
+
|
| 39 |
+
<body>
|
| 40 |
+
<!-- Header and Navigation -->
|
| 41 |
+
<header>
|
| 42 |
+
<nav>
|
| 43 |
+
<div class="logo">
|
| 44 |
+
<a href="index.html">NatureCompare</a>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="hamburger">
|
| 47 |
+
<span></span>
|
| 48 |
+
<span></span>
|
| 49 |
+
<span></span>
|
| 50 |
+
</div>
|
| 51 |
+
<ul class="nav-links">
|
| 52 |
+
<li><a href="../../index.html">Home</a></li>
|
| 53 |
+
<li><a href="../..//fruits.html" class="active">Fruits</a></li>
|
| 54 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 55 |
+
<li><a href="../../about.html">About</a></li>
|
| 56 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 57 |
+
<li><button id="theme-toggle">🌓</button></li>
|
| 58 |
+
</ul>
|
| 59 |
+
</nav>
|
| 60 |
+
</header>
|
| 61 |
+
|
| 62 |
+
<!-- Hero Section -->
|
| 63 |
+
<section class="hero">
|
| 64 |
+
<div class="hero-content">
|
| 65 |
+
<h1>Albion Strawberry</h1>
|
| 66 |
+
<a href="#details" class="btn">Explore Details</a>
|
| 67 |
+
</div>
|
| 68 |
+
</section>
|
| 69 |
+
|
| 70 |
+
<!-- Strawberry Page Header -->
|
| 71 |
+
<section class="variety-header">
|
| 72 |
+
<h1>Albion Strawberry</h1>
|
| 73 |
+
<p>Albion Strawberries are known for their deep red color, high sugar content, and long shelf life.</p>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- Strawberry Comparison/Card Section -->
|
| 77 |
+
<section class="variety-comparison" id="details">
|
| 78 |
+
<div class="variety-category">
|
| 79 |
+
<h2>Health Benefits</h2>
|
| 80 |
+
<div class="variety-list">
|
| 81 |
+
<div class="variety-item">
|
| 82 |
+
<p>High in vitamin C, boosting immune function.</p>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="variety-item">
|
| 85 |
+
<p>Contains antioxidants that help reduce inflammation.</p>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="variety-item">
|
| 88 |
+
<p>Supports heart health by lowering bad cholesterol.</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="variety-item">
|
| 91 |
+
<p>Rich in fiber, aiding digestion and gut health.</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="variety-category">
|
| 96 |
+
<h2>Issues It Helps Solve</h2>
|
| 97 |
+
<div class="variety-list">
|
| 98 |
+
<div class="variety-item">
|
| 99 |
+
<p>Helps regulate blood sugar levels for diabetics.</p>
|
| 100 |
+
</div>
|
| 101 |
+
<div class="variety-item">
|
| 102 |
+
<p>Improves skin health with its rich vitamin C content.</p>
|
| 103 |
+
</div>
|
| 104 |
+
<div class="variety-item">
|
| 105 |
+
<p>Aids in weight management with its low-calorie content.</p>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="variety-item">
|
| 108 |
+
<p>Boosts metabolism and energy levels naturally.</p>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
</section>
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
|
| 116 |
+
|
| 117 |
+
|
| 118 |
+
|
| 119 |
+
|
| 120 |
+
|
| 121 |
+
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
|
| 126 |
+
|
| 127 |
+
<style>
|
| 128 |
+
/* Footer Styles */
|
| 129 |
+
.footer {
|
| 130 |
+
background-color: white;
|
| 131 |
+
border-radius: 0.5rem;
|
| 132 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 133 |
+
margin: 1rem;
|
| 134 |
+
padding: 1.5rem;
|
| 135 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 136 |
+
}
|
| 137 |
+
.footer-content {
|
| 138 |
+
width: 100%;
|
| 139 |
+
max-width: 1200px;
|
| 140 |
+
margin: 0 auto;
|
| 141 |
+
display: flex;
|
| 142 |
+
flex-direction: column;
|
| 143 |
+
align-items: center;
|
| 144 |
+
justify-content: center;
|
| 145 |
+
}
|
| 146 |
+
.footer-links {
|
| 147 |
+
display: flex;
|
| 148 |
+
flex-wrap: wrap;
|
| 149 |
+
justify-content: center;
|
| 150 |
+
font-size: 0.875rem;
|
| 151 |
+
color: #4a5568;
|
| 152 |
+
margin: 0;
|
| 153 |
+
padding: 0;
|
| 154 |
+
list-style-type: none;
|
| 155 |
+
}
|
| 156 |
+
.footer-links li {
|
| 157 |
+
margin-right: 1rem;
|
| 158 |
+
}
|
| 159 |
+
.footer-links a {
|
| 160 |
+
text-decoration: none;
|
| 161 |
+
color: inherit;
|
| 162 |
+
transition: color 0.3s ease;
|
| 163 |
+
}
|
| 164 |
+
.footer-divider {
|
| 165 |
+
margin-top: 1.5rem;
|
| 166 |
+
margin-bottom: 1.5rem;
|
| 167 |
+
border-color: #e2e8f0;
|
| 168 |
+
}
|
| 169 |
+
.footer-credit {
|
| 170 |
+
text-align: center;
|
| 171 |
+
font-size: 0.875rem;
|
| 172 |
+
color: #6b7280;
|
| 173 |
+
}
|
| 174 |
+
.footer-credit a {
|
| 175 |
+
text-decoration: none;
|
| 176 |
+
color: #4a5568;
|
| 177 |
+
}
|
| 178 |
+
|
| 179 |
+
/* Dark Mode Footer Styles */
|
| 180 |
+
body.dark .footer {
|
| 181 |
+
background-color: #333;
|
| 182 |
+
color: #f1f1f1;
|
| 183 |
+
}
|
| 184 |
+
body.dark .footer-links a {
|
| 185 |
+
color: #f1f1f1;
|
| 186 |
+
}
|
| 187 |
+
body.dark .footer-divider {
|
| 188 |
+
border-color: #555;
|
| 189 |
+
}
|
| 190 |
+
body.dark .footer-credit a {
|
| 191 |
+
color: #f1f1f1;
|
| 192 |
+
}
|
| 193 |
+
</style>
|
| 194 |
+
|
| 195 |
+
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
<style>
|
| 199 |
+
/* Footer Styles */
|
| 200 |
+
.footer {
|
| 201 |
+
background-color: white;
|
| 202 |
+
border-radius: 0.5rem;
|
| 203 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 204 |
+
margin: 1rem;
|
| 205 |
+
padding: 1.5rem;
|
| 206 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 207 |
+
}
|
| 208 |
+
.footer-content {
|
| 209 |
+
width: 100%;
|
| 210 |
+
max-width: 1200px;
|
| 211 |
+
margin: 0 auto;
|
| 212 |
+
display: flex;
|
| 213 |
+
flex-direction: column;
|
| 214 |
+
align-items: center;
|
| 215 |
+
justify-content: center;
|
| 216 |
+
}
|
| 217 |
+
.footer-links {
|
| 218 |
+
display: flex;
|
| 219 |
+
flex-wrap: wrap;
|
| 220 |
+
justify-content: center;
|
| 221 |
+
font-size: 0.875rem;
|
| 222 |
+
color: #4a5568;
|
| 223 |
+
margin: 0;
|
| 224 |
+
padding: 0;
|
| 225 |
+
list-style-type: none;
|
| 226 |
+
}
|
| 227 |
+
.footer-links li {
|
| 228 |
+
margin-right: 1rem;
|
| 229 |
+
}
|
| 230 |
+
.footer-links a {
|
| 231 |
+
text-decoration: none;
|
| 232 |
+
color: inherit;
|
| 233 |
+
transition: color 0.3s ease;
|
| 234 |
+
}
|
| 235 |
+
.footer-divider {
|
| 236 |
+
margin-top: 1.5rem;
|
| 237 |
+
margin-bottom: 1.5rem;
|
| 238 |
+
border-color: #e2e8f0;
|
| 239 |
+
}
|
| 240 |
+
.footer-credit {
|
| 241 |
+
text-align: center;
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
color: #6b7280;
|
| 244 |
+
}
|
| 245 |
+
.footer-credit a {
|
| 246 |
+
text-decoration: none;
|
| 247 |
+
color: #4a5568;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
/* Dark Mode Footer Styles */
|
| 251 |
+
body.dark .footer {
|
| 252 |
+
background-color: #333;
|
| 253 |
+
color: #f1f1f1;
|
| 254 |
+
}
|
| 255 |
+
body.dark .footer-links a {
|
| 256 |
+
color: #f1f1f1;
|
| 257 |
+
}
|
| 258 |
+
body.dark .footer-divider {
|
| 259 |
+
border-color: #555;
|
| 260 |
+
}
|
| 261 |
+
body.dark .footer-credit a {
|
| 262 |
+
color: #f1f1f1;
|
| 263 |
+
}
|
| 264 |
+
</style>
|
| 265 |
+
|
| 266 |
+
|
| 267 |
+
|
| 268 |
+
|
| 269 |
+
|
| 270 |
+
<footer class="footer">
|
| 271 |
+
<div class="footer-content">
|
| 272 |
+
<ul class="footer-links">
|
| 273 |
+
<li><a href="../../index.html">Home</a></li>
|
| 274 |
+
<li><a href="../../fruits.html">Fruits</a></li>
|
| 275 |
+
<li><a href="../../vegetables.html">Vegetables</a></li>
|
| 276 |
+
<li><a href="../../about.html">About</a></li>
|
| 277 |
+
<li><a href="../../contact.html">Contact</a></li>
|
| 278 |
+
</ul>
|
| 279 |
+
</div>
|
| 280 |
+
<hr class="footer-divider" />
|
| 281 |
+
<div class="footer-credit">
|
| 282 |
+
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
|
| 283 |
+
</div>
|
| 284 |
+
</footer>
|
| 285 |
+
|
| 286 |
+
<style>
|
| 287 |
+
/* Footer Styles */
|
| 288 |
+
.footer {
|
| 289 |
+
background-color: white;
|
| 290 |
+
border-radius: 0.5rem;
|
| 291 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 292 |
+
margin: 1rem;
|
| 293 |
+
padding: 1.5rem;
|
| 294 |
+
transition: background-color 0.3s ease, color 0.3s ease;
|
| 295 |
+
}
|
| 296 |
+
.footer-content {
|
| 297 |
+
width: 100%;
|
| 298 |
+
max-width: 1200px;
|
| 299 |
+
margin: 0 auto;
|
| 300 |
+
display: flex;
|
| 301 |
+
flex-direction: column;
|
| 302 |
+
align-items: center;
|
| 303 |
+
justify-content: center;
|
| 304 |
+
}
|
| 305 |
+
.footer-links {
|
| 306 |
+
display: flex;
|
| 307 |
+
flex-wrap: wrap;
|
| 308 |
+
justify-content: center;
|
| 309 |
+
font-size: 0.875rem;
|
| 310 |
+
color: #4a5568;
|
| 311 |
+
margin: 0;
|
| 312 |
+
padding: 0;
|
| 313 |
+
list-style-type: none;
|
| 314 |
+
}
|
| 315 |
+
.footer-links li {
|
| 316 |
+
margin-right: 1rem;
|
| 317 |
+
}
|
| 318 |
+
.footer-links a {
|
| 319 |
+
text-decoration: none;
|
| 320 |
+
color: inherit;
|
| 321 |
+
transition: color 0.3s ease;
|
| 322 |
+
}
|
| 323 |
+
.footer-divider {
|
| 324 |
+
margin-top: 1.5rem;
|
| 325 |
+
margin-bottom: 1.5rem;
|
| 326 |
+
border-color: #e2e8f0;
|
| 327 |
+
}
|
| 328 |
+
.footer-credit {
|
| 329 |
+
text-align: center;
|
| 330 |
+
font-size: 0.875rem;
|
| 331 |
+
color: #6b7280;
|
| 332 |
+
}
|
| 333 |
+
.footer-credit a {
|
| 334 |
+
text-decoration: none;
|
| 335 |
+
color: #4a5568;
|
| 336 |
+
}
|
| 337 |
+
|
| 338 |
+
/* Dark Mode Footer Styles */
|
| 339 |
+
body.dark .footer {
|
| 340 |
+
background-color: #333;
|
| 341 |
+
color: #f1f1f1;
|
| 342 |
+
}
|
| 343 |
+
body.dark .footer-links a {
|
| 344 |
+
color: #f1f1f1;
|
| 345 |
+
}
|
| 346 |
+
body.dark .footer-divider {
|
| 347 |
+
border-color: #555;
|
| 348 |
+
}
|
| 349 |
+
body.dark .footer-credit a {
|
| 350 |
+
color: #f1f1f1;
|
| 351 |
+
}
|
| 352 |
+
</style>
|
| 353 |
+
|
| 354 |
+
</body>
|
| 355 |
+
</html>
|