Hugging Face's logo

Spaces:
Baskar2005
/
fruits-veggies-ui
Running

App Files Community
fruits-veggies-ui / vegetables_list /broccoli.html
Baskar2005's picture
Baskar2005
Upload 143 files
44b5a6f verified
raw
history blame contribute delete
9.27 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Broccoli Varieties | Organic vs Hybrid</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../global-css-cards.css">
<script src="../script.js"></script>
</head>
<body>
<!-- Header & Navigation -->
<header>
<nav>
<div class="logo">
<a href="../index.html">NatureCompare</a>
</div>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../fruits.html">Fruits</a></li>
<li><a href="../vegetables.html" class="active">Vegetables</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
<li><button id="theme-toggle">🌓</button></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Page Header -->
<section class="page-header">
<h1>Broccoli Varieties: Organic vs Hybrid</h1>
<p>Explore different broccoli varieties and their benefits.</p>
</section>
<!-- Organic Broccoli Section -->
<section class="vegetables-section">
<h2>🌱 Organic Broccoli</h2>
<div class="card-container">
<a href="../vegetables_varity_set/broccoli-variety/calabrese-broccoli.html" class="card">
<div class="card-image" style="background-image: url('https://cdn.mos.cms.futurecdn.net/nKLHEVorF7WApKVeKUrr7C.jpg');"></div>
<div class="card-content">
<h3>Calabrese Broccoli</h3>
<p>Classic broccoli variety, rich in nutrients.</p>
</div>
</a>
<a href="../vegetables_varity_set/broccoli-variety/purple-sprouting-broccoli.html" class="card">
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.yN7URVk5BaaRVdoMvCyToAHaE7?rs=1&pid=ImgDetMain');"></div>
<div class="card-content">
<h3>Purple Sprouting Broccoli</h3>
<p>Vibrant purple florets, packed with antioxidants.</p>
</div>
</a>
<a href="../vegetables_varity_set/broccoli-variety/romanescobroccoli.html" class="card">
<div class="card-image" style="background-image: url('https://www.thespruceeats.com/thmb/sharsBb2uhFv3gEKVlm9TRNgwto=/1500x1000/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-186469951-4503d028c6fd43e38ada45082f37cd17.jpg');"></div>
<div class="card-content">
<h3>Romanesco Broccoli</h3>
<p>Beautiful fractal shape with a mild nutty flavor.</p>
</div>
</a>
</div>
</section>
<!-- Hybrid Broccoli Section -->
<section class="vegetables-section">
<h2>🔬 Hybrid Broccoli</h2>
<div class="card-container">
<a href="../vegetables_varity_set/broccoli-variety/belstar-broccoli.html" class="card">
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.ur1oa8NNFqOizTc1C4J_aQHaHa?rs=1&pid=ImgDetMain');"></div>
<div class="card-content">
<h3>Belstar Broccoli</h3>
<p>Heat-tolerant hybrid with firm heads.</p>
</div>
</a>
<a href="../vegetables_varity_set/broccoli-variety/marathon-broccoli.html" class="card">
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/R.753b451d04b26ee440751fb113792d3a?rik=QbQ3s5zKy3vTMA&riu=http%3a%2f%2fcdn.shopify.com%2fs%2ffiles%2f1%2f0083%2f4602%2fproducts%2fmarathonbroccoli-1_600x.jpg%3fv%3d1640007364&ehk=2jYANOg6iAjreisChMH3w364y5UkVS3Hw8A1rkOWZK4%3d&risl=&pid=ImgRaw&r=0');"></div>
<div class="card-content">
<h3>Marathon Broccoli</h3>
<p>Dense and cold-resistant hybrid variety.</p>
</div>
</a>
<a href="../vegetables_varity_set/broccoli-variety/green-magic-broccoli.html" class="card">
<div class="card-image" style="background-image: url('https://th.bing.com/th/id/OIP.Xbr-7P4eqr2IvTJPfcnNXQHaE7?rs=1&pid=ImgDetMain');"></div>
<div class="card-content">
<h3>Green Magic Broccoli</h3>
<p>Fast-growing hybrid with a smooth texture.</p>
</div>
</a>
</div>
</section>
</main>
<style>
/* Footer Styles */
.footer {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 1rem;
padding: 1.5rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0.875rem;
color: #4a5568;
margin: 0;
padding: 0;
list-style-type: none;
}
.footer-links li {
margin-right: 1rem;
}
.footer-links a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.footer-divider {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-color: #e2e8f0;
}
.footer-credit {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
}
.footer-credit a {
text-decoration: none;
color: #4a5568;
}
/* Dark Mode Footer Styles */
body.dark .footer {
background-color: #333;
color: #f1f1f1;
}
body.dark .footer-links a {
color: #f1f1f1;
}
body.dark .footer-divider {
border-color: #555;
}
body.dark .footer-credit a {
color: #f1f1f1;
}
</style>
<style>
/* Footer Styles */
.footer {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 1rem;
padding: 1.5rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0.875rem;
color: #4a5568;
margin: 0;
padding: 0;
list-style-type: none;
}
.footer-links li {
margin-right: 1rem;
}
.footer-links a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.footer-divider {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-color: #e2e8f0;
}
.footer-credit {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
}
.footer-credit a {
text-decoration: none;
color: #4a5568;
}
/* Dark Mode Footer Styles */
body.dark .footer {
background-color: #333;
color: #f1f1f1;
}
body.dark .footer-links a {
color: #f1f1f1;
}
body.dark .footer-divider {
border-color: #555;
}
body.dark .footer-credit a {
color: #f1f1f1;
}
</style>
<footer class="footer">
<div class="footer-content">
<ul class="footer-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../fruits.html">Fruits</a></li>
<li><a href="../vegetables.html">Vegetables</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<hr class="footer-divider" />
<div class="footer-credit">
<span>© 2025 <a href="#">NatureCompare</a>. All Rights Reserved.</span>
</div>
</footer>
<style>
/* Footer Styles */
.footer {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 1rem;
padding: 1.5rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0.875rem;
color: #4a5568;
margin: 0;
padding: 0;
list-style-type: none;
}
.footer-links li {
margin-right: 1rem;
}
.footer-links a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.footer-divider {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-color: #e2e8f0;
}
.footer-credit {
text-align: center;
font-size: 0.875rem;
color: #6b7280;
}
.footer-credit a {
text-decoration: none;
color: #4a5568;
}
/* Dark Mode Footer Styles */
body.dark .footer {
background-color: #333;
color: #f1f1f1;
}
body.dark .footer-links a {
color: #f1f1f1;
}
body.dark .footer-divider {
border-color: #555;
}
body.dark .footer-credit a {
color: #f1f1f1;
}
</style>
</body>
</html>