Compare commits
3 Commits
601ff81c62
...
c5fd50bd35
| Author | SHA1 | Date | |
|---|---|---|---|
|
c5fd50bd35 | ||
|
|
80c6d8866d | ||
|
|
20e2569ad9 |
@@ -1,31 +1,3 @@
|
||||
/**
|
||||
* @fileoverview This file contains the product data for
|
||||
* all items in the store demo. The data is structured
|
||||
* to be the single source of truth for all
|
||||
* product-related information, including IDs, pricing,
|
||||
* and descriptions.
|
||||
*/
|
||||
|
||||
/* **Unit Template**
|
||||
{
|
||||
productNumber: "",
|
||||
imageFile: "",
|
||||
skuID: "",
|
||||
catNumber: "",
|
||||
productName: "",
|
||||
category: "",
|
||||
price: ,
|
||||
altText: "",
|
||||
shortDescription: "",
|
||||
longDescription: "",
|
||||
ratings: {
|
||||
count: ,
|
||||
score:
|
||||
},
|
||||
isFeatured: ,
|
||||
}
|
||||
*/
|
||||
|
||||
const INVENTORY = [
|
||||
{
|
||||
"productNumber": "001",
|
||||
@@ -36,8 +8,8 @@ const INVENTORY = [
|
||||
"category": "accessories",
|
||||
"price": 12.99,
|
||||
"altText": "A pink handcrafted wooden bird house",
|
||||
"shortDescription": "A handcrafted wooden bird house in pink.",
|
||||
"longDescription": "A beautifully handcrafted wooden bird house in a gentle pink finish, built by a local carpenter from the Bloom Valley community. Designed with a classic aesthetic and durable, weather-resistant materials, this bird house provides a cozy and safe home for small songbirds. It's a charming accent for any garden or tree and a perfect way to invite nature into your outdoor space.",
|
||||
"shortDescription": "Handcrafted wooden bird house in pink.",
|
||||
"longDescription": "Handcrafted pink bird house, durable and weather-resistant, perfect for small songbirds and a charming garden accent.",
|
||||
"ratings": {
|
||||
"count": 38,
|
||||
"score": 4.7
|
||||
@@ -53,8 +25,8 @@ const INVENTORY = [
|
||||
"category": "accessories",
|
||||
"price": 9.99,
|
||||
"altText": "A set of three traditional terra-cotta gardening pots of varying sizes.",
|
||||
"shortDescription": "A classic set of three terra-cotta gardening pots.",
|
||||
"longDescription": "Crafted from porous, natural clay, this set of terra-cotta pots is a timeless choice for any gardener. The material's ability to absorb excess water helps prevent root rot, making it an ideal home for a wide variety of plants. The set includes three different sizes, perfect for potting new seedlings or housing larger plants.",
|
||||
"shortDescription": "Set of three classic terra-cotta garden pots.",
|
||||
"longDescription": "Set of three terra-cotta pots in different sizes, ideal for seedlings or larger plants and perfect for any gardener.",
|
||||
"ratings": {
|
||||
"count": 150,
|
||||
"score": 4.5
|
||||
@@ -70,8 +42,8 @@ const INVENTORY = [
|
||||
"category": "accessories",
|
||||
"price": 19.99,
|
||||
"altText": "A modern, metal watering can with a long spout.",
|
||||
"shortDescription": "A stylish and functional metal watering can.",
|
||||
"longDescription": "This sleek and durable metal watering can features a long, narrow spout for precise watering, perfect for both indoor and outdoor plants. Its comfortable handle provides a balanced grip, and the sturdy construction ensures it will be a reliable tool for years to come.",
|
||||
"shortDescription": "Stylish and functional metal watering can.",
|
||||
"longDescription": "Sleek metal watering can with long spout and comfortable handle for precise watering indoors or outdoors.",
|
||||
"ratings": {
|
||||
"count": 85,
|
||||
"score": 4.8
|
||||
@@ -87,8 +59,8 @@ const INVENTORY = [
|
||||
"category": "indoor",
|
||||
"price": 14.99,
|
||||
"altText": "A lush spider plant with long, variegated green and white leaves.",
|
||||
"shortDescription": "An easy-to-care-for spider plant, perfect for beginners.",
|
||||
"longDescription": "The spider plant (Chlorophytum comosum) is one of the most popular and easiest houseplants to grow. Known for its distinctive arching, variegated leaves, it thrives in a variety of conditions and is a great choice for hanging baskets. It's also a highly effective air purifier.",
|
||||
"shortDescription": "Easy-care spider plant, great for beginners.",
|
||||
"longDescription": "The spider plant thrives in many conditions, is easy to care for, and makes a great air-purifying houseplant.",
|
||||
"ratings": {
|
||||
"count": 210,
|
||||
"score": 4.9
|
||||
@@ -104,8 +76,8 @@ const INVENTORY = [
|
||||
"category": "indoor",
|
||||
"price": 16.99,
|
||||
"altText": "A cascading string-of-pearls plant with small, spherical green leaves.",
|
||||
"shortDescription": "A unique succulent with cascading, pearl-like foliage.",
|
||||
"longDescription": "The string-of-pearls (Senecio rowleyanus) is a striking succulent known for its long, trailing stems dotted with small, bead-like leaves. It's a fantastic plant for a sunny spot on a shelf or in a hanging planter, creating a beautiful, flowing green display. Like most succulents, it requires minimal watering.",
|
||||
"shortDescription": "Succulent with cascading, pearl-like foliage.",
|
||||
"longDescription": "String-of-pearls succulent with trailing bead-like stems, ideal for shelves or hanging planters with minimal watering needs.",
|
||||
"ratings": {
|
||||
"count": 95,
|
||||
"score": 4.6
|
||||
@@ -121,8 +93,8 @@ const INVENTORY = [
|
||||
"category": "indoor",
|
||||
"price": 18.99,
|
||||
"altText": "A vibrant zebra plant with deep green leaves and prominent white veins.",
|
||||
"shortDescription": "A striking houseplant with bold, striped leaves.",
|
||||
"longDescription": "The zebra plant (Aphelandra squarrosa) is named for its eye-catching foliage—deep green leaves with stark, contrasting white or yellow veins. This plant adds a tropical feel to any room and, with the right care, can also produce brilliant yellow flower bracts. It prefers bright, indirect light and high humidity.",
|
||||
"shortDescription": "Striking houseplant with bold, striped leaves.",
|
||||
"longDescription": "Zebra plant with bold green leaves and white veins, adding a tropical feel; blooms bright yellow with proper care.",
|
||||
"ratings": {
|
||||
"count": 72,
|
||||
"score": 4.4
|
||||
@@ -138,8 +110,8 @@ const INVENTORY = [
|
||||
"category": "landscaping",
|
||||
"price": 8.99,
|
||||
"altText": "A 25lb bag of natural pine bark mulch.",
|
||||
"shortDescription": "A 25lb bag of premium pine bark mulch for landscaping.",
|
||||
"longDescription": "Pine bark mulch is a top choice for gardeners and landscapers. It helps suppress weeds, retain soil moisture, and moderate soil temperature, which is essential for healthy plant growth. As it decomposes, it adds valuable organic matter to the soil. The rich, dark color also provides an attractive finish to garden beds and pathways.",
|
||||
"shortDescription": "25lb bag of premium pine bark mulch.",
|
||||
"longDescription": "Pine bark mulch helps suppress weeds, retain moisture, and enrich soil, adding a dark, polished look to gardens.",
|
||||
"ratings": {
|
||||
"count": 305,
|
||||
"score": 4.8
|
||||
@@ -155,8 +127,8 @@ const INVENTORY = [
|
||||
"category": "landscaping",
|
||||
"price": 11.99,
|
||||
"altText": "A 25lb bag of smooth, rounded pea gravel.",
|
||||
"shortDescription": "A 25lb bag of decorative pea gravel for landscaping.",
|
||||
"longDescription": "Pea gravel consists of small, smooth, rounded stones, typically in a mix of neutral colors. It's an excellent choice for creating walkways, patios, and decorative ground cover. The smooth texture is comfortable to walk on, and it provides effective drainage and a clean, finished look to any landscape design.",
|
||||
"shortDescription": "25lb bag of decorative pea gravel.",
|
||||
"longDescription": "Pea gravel is smooth, rounded stones perfect for walkways, patios, and decorative ground cover, providing drainage and a clean finish.",
|
||||
"ratings": {
|
||||
"count": 185,
|
||||
"score": 4.7
|
||||
@@ -172,8 +144,8 @@ const INVENTORY = [
|
||||
"category": "landscaping",
|
||||
"price": 4.50,
|
||||
"altText": "A single rectangular gray stone paver.",
|
||||
"shortDescription": "A durable, single stone paver for creating paths and patios.",
|
||||
"longDescription": "Our stone pavers are made from high-quality concrete and are perfect for building durable, long-lasting patios, walkways, and driveways. The classic rectangular shape and neutral gray color make them versatile for a wide range of landscape designs. Sold individually, allowing you to purchase the exact quantity you need for your project.",
|
||||
"shortDescription": "Durable stone paver for patios and paths.",
|
||||
"longDescription": "High-quality stone pavers, perfect for patios, paths, and driveways. Sold individually for precise quantity needs.",
|
||||
"ratings": {
|
||||
"count": 255,
|
||||
"score": 4.6
|
||||
@@ -189,8 +161,8 @@ const INVENTORY = [
|
||||
"category": "patio",
|
||||
"price": 129.99,
|
||||
"altText": "A round, black metal fire-pit with a mesh lid.",
|
||||
"shortDescription": "A sturdy and stylish metal fire-pit for outdoor gatherings.",
|
||||
"longDescription": "Create a warm and inviting atmosphere on your patio with this durable metal fire-pit. Constructed from heat-resistant steel, it features a classic bowl design and includes a mesh lid for safety. Perfect for cool evenings, it's a great centerpiece for entertaining and enjoying the outdoors with friends and family.",
|
||||
"shortDescription": "Stylish metal fire-pit for outdoor gatherings.",
|
||||
"longDescription": "Metal fire-pit with mesh lid, heat-resistant and durable, perfect for outdoor gatherings and cozy evenings.",
|
||||
"ratings": {
|
||||
"count": 55,
|
||||
"score": 4.9
|
||||
@@ -206,8 +178,8 @@ const INVENTORY = [
|
||||
"category": "patio",
|
||||
"price": 24.99,
|
||||
"altText": "A string of warm white LED lights hanging outdoors.",
|
||||
"shortDescription": "A set of energy-efficient LED string lights for ambient lighting.",
|
||||
"longDescription": "Add a touch of magic to your outdoor space with these energy-efficient LED string lights. The warm white glow creates a soft, inviting ambiance, perfect for backyard dinners, parties, or simply relaxing on your patio. The bulbs are shatterproof and weather-resistant, making them ideal for year-round outdoor use.",
|
||||
"shortDescription": "Energy-efficient LED string lights for outdoors.",
|
||||
"longDescription": "LED string lights with warm glow, shatterproof and weather-resistant, ideal for outdoor ambiance year-round.",
|
||||
"ratings": {
|
||||
"count": 175,
|
||||
"score": 4.7
|
||||
@@ -223,8 +195,8 @@ const INVENTORY = [
|
||||
"category": "patio",
|
||||
"price": 22.99,
|
||||
"altText": "A small, potted parlor palm with feathery green fronds.",
|
||||
"shortDescription": "An elegant and low-maintenance palm for patios and decks.",
|
||||
"longDescription": "The parlor palm (Chamaedorea elegans) is a classic choice for adding a tropical flair to a covered patio, deck, or indoor space. Known for its graceful, feathery fronds, it's a resilient and slow-growing plant that thrives in low light conditions. It's a great way to bring a lush, green aesthetic to your outdoor living area.",
|
||||
"shortDescription": "Elegant, low-maintenance palm for patios.",
|
||||
"longDescription": "Parlor palm with graceful fronds, resilient in low light, adding a tropical flair to patios or indoor spaces.",
|
||||
"ratings": {
|
||||
"count": 88,
|
||||
"score": 4.6
|
||||
@@ -240,8 +212,8 @@ const INVENTORY = [
|
||||
"category": "shrubs",
|
||||
"price": 25.99,
|
||||
"altText": "A vibrant cluster of pink and purple hydrangea flowers.",
|
||||
"shortDescription": "A beautiful hydrangea bush (Hydrangea macrophylla), known for its large, colorful blooms.",
|
||||
"longDescription": "Hydrangeas are a quintessential garden shrub, celebrated for their large, showy flower heads. Depending on the soil's pH, the blooms can change color, ranging from deep blues and purples to bright pinks. They are perfect for adding a splash of color to borders, foundations, or as a standalone focal point in the garden.",
|
||||
"shortDescription": "Hydrangea bush with large, colorful blooms.",
|
||||
"longDescription": "Hydrangeas with large, colorful blooms, ideal for borders, foundations, or as a standalone garden focal point.",
|
||||
"ratings": {
|
||||
"count": 190,
|
||||
"score": 4.9
|
||||
@@ -257,8 +229,8 @@ const INVENTORY = [
|
||||
"category": "shrubs",
|
||||
"price": 28.99,
|
||||
"altText": "A crepe myrtle bush with clusters of bright pink flowers.",
|
||||
"shortDescription": "A small crepe myrtle tree, prized for its long-lasting summer blooms.",
|
||||
"longDescription": "The crepe myrtle (Lagerstroemia) is a beloved small tree or shrub, famous for its crepe-paper-like blossoms that last all summer long. Its smooth, multi-hued bark and vibrant fall foliage also add year-round interest to the landscape. This fast-growing plant thrives in sunny locations and requires minimal care.",
|
||||
"shortDescription": "Crepe myrtle with vibrant summer blooms.",
|
||||
"longDescription": "Crepe myrtle with vibrant, long-lasting summer blooms and smooth multi-hued bark, adding seasonal interest to your garden.",
|
||||
"ratings": {
|
||||
"count": 115,
|
||||
"score": 4.7
|
||||
@@ -274,8 +246,8 @@ const INVENTORY = [
|
||||
"category": "shrubs",
|
||||
"price": 21.99,
|
||||
"altText": "A holly bush with deep green leaves and bright red berries.",
|
||||
"shortDescription": "A classic evergreen holly bush with traditional red berries.",
|
||||
"longDescription": "Holly (Ilex) is a traditional favorite for its glossy, evergreen leaves and bright red berries that provide winter interest. It's an excellent choice for creating hedges, screens, or as a structural plant in the garden. This hardy shrub is a staple for year-round beauty and can attract birds with its berries.",
|
||||
"shortDescription": "Evergreen holly bush with bright red berries.",
|
||||
"longDescription": "Holly with glossy evergreen leaves and bright red berries, perfect for hedges, screens, or year-round garden interest.",
|
||||
"ratings": {
|
||||
"count": 130,
|
||||
"score": 4.8
|
||||
@@ -284,15 +256,15 @@ const INVENTORY = [
|
||||
},
|
||||
{
|
||||
"productNumber": "001",
|
||||
"imageFile": "gardening-tool.jpg",
|
||||
"imageFile": "gardening-tools.jpg",
|
||||
"skuID": "TLS",
|
||||
"catNumber": "06",
|
||||
"productName": "Gardening Tool Set",
|
||||
"category": "tools",
|
||||
"price": 34.99,
|
||||
"altText": "A set of three gardening tools: a trowel, a cultivator, and a transplanter.",
|
||||
"shortDescription": "A three-piece set of essential gardening tools.",
|
||||
"longDescription": "This durable gardening tool set includes a trowel for planting, a cultivator for aerating soil, and a transplanter for moving seedlings. Each tool features a comfortable handle and a sturdy, rust-resistant head. It's the perfect starter set for anyone looking to get their hands dirty in the garden.",
|
||||
"shortDescription": "Three-piece set of essential gardening tools.",
|
||||
"longDescription": "Gardening tool set includes trowel, cultivator, and transplanter with sturdy, rust-resistant heads and comfortable handles.",
|
||||
"ratings": {
|
||||
"count": 200,
|
||||
"score": 4.7
|
||||
@@ -301,15 +273,15 @@ const INVENTORY = [
|
||||
},
|
||||
{
|
||||
"productNumber": "002",
|
||||
"imageFile": "gardening-hose.jpg",
|
||||
"imageFile": "garden-hose.jpg",
|
||||
"skuID": "TLS",
|
||||
"catNumber": "06",
|
||||
"productName": "Gardening Hose",
|
||||
"category": "tools",
|
||||
"price": 49.99,
|
||||
"altText": "A coiled green gardening hose.",
|
||||
"shortDescription": "A kink-resistant and durable gardening hose.",
|
||||
"longDescription": "Our premium gardening hose is made from a high-quality, flexible material that resists kinking and tangling. It's lightweight yet incredibly durable, making watering your garden a breeze. The hose comes with solid brass couplings for a secure, leak-free connection to your spigot.",
|
||||
"shortDescription": "Durable, kink-resistant gardening hose.",
|
||||
"longDescription": "Durable, flexible garden hose resists kinks, lightweight yet sturdy, with brass couplings for secure connections.",
|
||||
"ratings": {
|
||||
"count": 110,
|
||||
"score": 4.5
|
||||
@@ -325,8 +297,8 @@ const INVENTORY = [
|
||||
"category": "tools",
|
||||
"price": 99.99,
|
||||
"altText": "A sturdy single-wheeled wheelbarrow with a metal basin.",
|
||||
"shortDescription": "A heavy-duty wheelbarrow for all your hauling needs.",
|
||||
"longDescription": "This robust wheelbarrow is an essential tool for any serious gardener or landscaper. It features a deep, heavy-duty steel basin and a strong single wheel for easy maneuverability, even on uneven terrain. Perfect for transporting soil, mulch, stones, and other heavy materials around your yard.",
|
||||
"shortDescription": "Heavy-duty wheelbarrow for hauling tasks.",
|
||||
"longDescription": "Heavy-duty single-wheel wheelbarrow with steel basin, ideal for transporting soil, mulch, stones, or other heavy materials.",
|
||||
"ratings": {
|
||||
"count": 65,
|
||||
"score": 4.9
|
||||
@@ -342,8 +314,8 @@ const INVENTORY = [
|
||||
"category": "trees",
|
||||
"price": 45.99,
|
||||
"altText": "A young Honeycrisp apple tree in a pot.",
|
||||
"shortDescription": "A young Honeycrisp apple tree (Malus domestica), known for its crisp and sweet fruit.",
|
||||
"longDescription": "The Honeycrisp apple tree is a popular choice for home orchards, celebrated for its exceptionally crisp texture and deliciously sweet flavor. This semi-dwarf tree is relatively easy to care for and produces a bountiful harvest of apples in the late summer and early fall. Plant it in a sunny spot to ensure a great yield.",
|
||||
"shortDescription": "Honeycrisp apple tree with crisp, sweet fruit.",
|
||||
"longDescription": "Honeycrisp apple tree produces crisp, sweet apples and is easy to care for in a sunny home orchard.",
|
||||
"ratings": {
|
||||
"count": 140,
|
||||
"score": 4.8
|
||||
@@ -359,8 +331,8 @@ const INVENTORY = [
|
||||
"category": "trees",
|
||||
"price": 39.99,
|
||||
"altText": "A young silver birch tree with smooth, white bark.",
|
||||
"shortDescription": "A graceful silver birch tree, known for its iconic white bark.",
|
||||
"longDescription": "The silver birch (Betula pendula) is a stunning ornamental tree prized for its peeling, silvery-white bark and elegant, pendulous branches. It provides year-round visual interest and is an excellent choice for a focal point in your yard. This hardy tree is fast-growing and adds a touch of classic beauty to any landscape.",
|
||||
"shortDescription": "Graceful silver birch with iconic white bark.",
|
||||
"longDescription": "Silver birch with elegant, pendulous branches and silvery-white bark, adding year-round beauty and a classic focal point.",
|
||||
"ratings": {
|
||||
"count": 95,
|
||||
"score": 4.6
|
||||
@@ -376,8 +348,8 @@ const INVENTORY = [
|
||||
"category": "trees",
|
||||
"price": 55.99,
|
||||
"altText": "A young Japanese Maple tree with lobed red and orange leaves.",
|
||||
"shortDescription": "A Japanese Maple tree, famous for its vibrant fall colors.",
|
||||
"longDescription": "Japanese Maple trees (Acer palmatum) are a native of landscapes in northeastern Asia, cherished for their beautiful, lobed leaves and spectacular fall foliage. This young tree will grow into a stunning accent to your garden, providing a vibrant backdrop and a brilliant display of reds, oranges, and yellows in the autumn. It's a robust and long-living addition to any property.",
|
||||
"shortDescription": "Japanese Maple tree with vibrant fall colors.",
|
||||
"longDescription": "Japanese Maple with lobed red-orange leaves, adding vibrant autumn color and a stunning accent to any garden.",
|
||||
"ratings": {
|
||||
"count": 220,
|
||||
"score": 4.9
|
||||
@@ -388,4 +360,4 @@ const INVENTORY = [
|
||||
|
||||
module.exports = {
|
||||
INVENTORY
|
||||
};
|
||||
};
|
||||
|
||||
18
src/_includes/category-nav.njk
Normal file
18
src/_includes/category-nav.njk
Normal file
@@ -0,0 +1,18 @@
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -1,58 +1,61 @@
|
||||
<!-- Footer Section -->
|
||||
<footer role="contentinfo">
|
||||
<div id="newsletter-container">
|
||||
<div class="footer-container">
|
||||
<div id="newsletter-container">
|
||||
|
||||
<form id="newsletter-form">
|
||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email-input"
|
||||
|
||||
placeholder="Subscribe@BloomValleyNursery.com"
|
||||
/>
|
||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||
Subscribe Now!
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="footer-nav-links">
|
||||
<nav id="footer-nav">
|
||||
<ul>
|
||||
<li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
|
||||
<li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
|
||||
<li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
|
||||
<li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<form id="newsletter-form">
|
||||
<label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email-input"
|
||||
|
||||
placeholder="Subscribe@BloomValleyNursery.com"
|
||||
/>
|
||||
<button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
|
||||
Subscribe Now!
|
||||
</button>
|
||||
</form>
|
||||
<div id="social-media">
|
||||
<h3>Check us out on social media!</h3>
|
||||
<ul class="social-icons">
|
||||
<li id="pinterest">
|
||||
<a href="#" aria-label="Follow us on Pinterest"
|
||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||
<li id="facebook">
|
||||
<a href="#" aria-label="Follow us on Facebook"
|
||||
><i class="fa-brands fa-facebook fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="instagram">
|
||||
<a href="#" aria-label="Follow us on Instagram"
|
||||
><i class="fa-brands fa-instagram fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="twitter">
|
||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="youtube">
|
||||
<a href="#" aria-label="View our Youtube channel"
|
||||
><i class="fa-brands fa-youtube fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="copyright">© 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
|
||||
</div>
|
||||
|
||||
<nav id="footer-nav">
|
||||
<ul>
|
||||
<li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
|
||||
<li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
|
||||
<li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
|
||||
<li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="social-media">
|
||||
<h3>Check us out on social media!</h3>
|
||||
<ul class="social-icons">
|
||||
<li id="pinterest">
|
||||
<a href="#" aria-label="Follow us on Pinterest"
|
||||
><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
|
||||
<li id="facebook">
|
||||
<a href="#" aria-label="Follow us on Facebook"
|
||||
><i class="fa-brands fa-facebook fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="instagram">
|
||||
<a href="#" aria-label="Follow us on Instagram"
|
||||
><i class="fa-brands fa-instagram fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="twitter">
|
||||
<a href="#" aria-label="Follow us on X (Twitter)"
|
||||
><i class="fa-brands fa-square-x-twitter fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
<li id="youtube">
|
||||
<a href="#" aria-label="View our Youtube channel"
|
||||
><i class="fa-brands fa-youtube fa-lg"></i
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="copyright">© 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
|
||||
</footer>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<i class="fa-solid fa-bars fa-2xl"></i>
|
||||
</button>
|
||||
<button id="shopping-cart" aria-label="Shopping Cart">
|
||||
<i class="fa-solid fa-cart-shopping"></i>
|
||||
<i class="fa-solid fa-cart-shopping fa-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,7 @@ stylesheet:
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/gallery.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modals.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
@@ -41,24 +42,11 @@ pageScripts:
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<aside id="right-aside">
|
||||
<div id="category-nav-container" aria-label="Available Product Categories">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="gallery-bottom">
|
||||
<button id="cart-details">View Shopping Cart</button>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
{% include "category-nav.njk" %}
|
||||
|
||||
</div>
|
||||
<div id="gallery-bottom">
|
||||
<button id="cart-details">View Shopping Cart</button>
|
||||
</div>
|
||||
117
src/index.njk
117
src/index.njk
@@ -8,6 +8,7 @@ stylesheet:
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/index.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modal.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
@@ -19,71 +20,57 @@ pageScripts:
|
||||
---
|
||||
|
||||
<!-- Main Content Section -->
|
||||
<div id="left-side">
|
||||
|
||||
<!-- Promo Feature -->
|
||||
<section id="promos-container">
|
||||
<h2 id="promos-heading">Shopper Promos</h2>
|
||||
{% for promo in promotions.PROMOS %}
|
||||
<div id="{{ promo.id }}" class="promo-item">
|
||||
<h3 class="promo-title">{{ promo.title }}</h3>
|
||||
<p class="promo-description">{{ promo.description }}</p>
|
||||
<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Feature -->
|
||||
<section id="testimonials-container">
|
||||
<h2 id="testimonials-heading">What Others Say</h2>
|
||||
{% for item in testimonials.TESTIMONIALS %}
|
||||
<div id="{{ id }}" class="testimonial-item">
|
||||
<h3 class="client-name">{{ item.clientName }} said<h3>
|
||||
<p class="client-quote">"{{ item.testimonial }}"</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="center">
|
||||
<section id="featured-container">
|
||||
<h2 class="featured-heading">Featured Items</h2>
|
||||
<ul id="featured-list">
|
||||
{% for item in inventory.INVENTORY %}
|
||||
{% if item.isFeatured %}
|
||||
<li>
|
||||
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
|
||||
<a href="/gallery/">
|
||||
<h3 class="product-name">{{ item.productName }}</h3>
|
||||
<figure>
|
||||
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
|
||||
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
|
||||
</figure>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
<div class="main-content-container">
|
||||
<div id="left-side">
|
||||
|
||||
<!-- Promo Feature -->
|
||||
<section id="promos-container">
|
||||
<h2 id="promos-heading">Shopper Promos</h2>
|
||||
{% for promo in promotions.PROMOS %}
|
||||
<div id="{{ promo.id }}" class="promo-item">
|
||||
<h3 class="promo-title">{{ promo.title }}</h3>
|
||||
<p class="promo-description">{{ promo.description }}</p>
|
||||
<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Testimonials Feature -->
|
||||
<section id="testimonials-container">
|
||||
<h2 id="testimonials-heading">What Others Say</h2>
|
||||
{% for item in testimonials.TESTIMONIALS %}
|
||||
<div id="{{ id }}" class="testimonial-item">
|
||||
<h3 class="client-name">{{ item.clientName }} said<h3>
|
||||
<p class="client-quote">"{{ item.testimonial }}"</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="center">
|
||||
<section id="featured-container">
|
||||
<h2 class="featured-heading">Featured Items</h2>
|
||||
<ul id="featured-list">
|
||||
{% for item in inventory.INVENTORY %}
|
||||
{% if item.isFeatured %}
|
||||
<li>
|
||||
<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
|
||||
<a href="/gallery/">
|
||||
<h3 class="product-name">{{ item.productName }}</h3>
|
||||
<figure>
|
||||
<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
|
||||
<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
|
||||
</figure>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include "category-nav.njk" %}
|
||||
|
||||
</div>
|
||||
|
||||
5
src/inventory.json.njk
Normal file
5
src/inventory.json.njk
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
permalink: "/data/inventory.json"
|
||||
---
|
||||
|
||||
{{ inventory.INVENTORY | dump | safe }}
|
||||
@@ -1,130 +1,132 @@
|
||||
// Gallery Carousel .js
|
||||
const products = {
|
||||
trees: [
|
||||
{ id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" },
|
||||
{ id: 2, name: "Silver Birch Tree", description: "Sturdy Silver Birch tree.", price: 45.00, image: "images/trees/silver-birch.jpg" },
|
||||
{ id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/apple-tree.jpg" },
|
||||
{ id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" }
|
||||
],
|
||||
indoor: [
|
||||
{ id: 5, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/aloe-plant.jpg" },
|
||||
{ id: 6, name: "Peperonia Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/peperonia.jpg" },
|
||||
{ id: 7, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/string-of-pearls.jpg" },
|
||||
{ id: 12, name: "Venus Fly Trap", description: "Perfect for young botanists or your fly problem!", price: 12.50, image: "images/indoor/venus-fly-trap.jpg"}
|
||||
],
|
||||
tools: [
|
||||
{ id: 8, name: "Watering Cans", description: "Galvanized aluminum watering cans (x2).", price: 25.00, image: "images/tools/watering-cans.jpg" },
|
||||
{ id: 9, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/tools/potting-soil.png" },
|
||||
{ id: 10, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/tools/birdhouse.jpg" },
|
||||
{ id: 11, name: "Gardening Tools", description: "Wooden handled gardening tools.", price: 20.00, image: "images/tools/gardening-tools.jpg"}
|
||||
]
|
||||
// --- Carousel State ---
|
||||
let allProducts = [];
|
||||
let selectedProducts = [];
|
||||
let currentIndex = 0;
|
||||
|
||||
// --- Helpers ---
|
||||
const getProductId = (product) => {
|
||||
return `${product.skuID}-${product.catNumber}-${product.productNumber}`;
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
|
||||
|
||||
const productCarousel = document.getElementById('product-carousel');
|
||||
const scrollLeftButton = document.getElementById('scroll-left');
|
||||
const scrollRightButton = document.getElementById('scroll-right');
|
||||
const categoryButtons = document.querySelectorAll('.cat-btn');
|
||||
|
||||
// Scroll button functionality
|
||||
scrollLeftButton.addEventListener('click', () => {
|
||||
productCarousel.scrollBy({ left: -300, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
scrollRightButton.addEventListener('click', () => {
|
||||
productCarousel.scrollBy({ left: 300, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
// Map buttons to categories
|
||||
categoryButtons.forEach(button => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault(); // Prevent default navigation
|
||||
const url = new URL(button.href); // Parse the URL
|
||||
const category = url.searchParams.get('category'); // Get category from the query parameter
|
||||
updateProductList(category); // Update the product list
|
||||
});
|
||||
});
|
||||
|
||||
// Load default category or the one from the current URL
|
||||
const currentUrl = new URL(window.location.href);
|
||||
const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
|
||||
updateProductList(defaultCategory);
|
||||
});
|
||||
|
||||
function updateScrollButtons() {
|
||||
const scrollLeftButton = document.getElementById('scroll-left');
|
||||
const scrollRightButton = document.getElementById('scroll-right');
|
||||
const productCarousel = document.getElementById('product-carousel');
|
||||
|
||||
scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block';
|
||||
scrollRightButton.style.display =
|
||||
productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft
|
||||
? 'none'
|
||||
: 'block';
|
||||
}
|
||||
|
||||
function updateProductList(category) {
|
||||
// --- Render the three visible items ---
|
||||
const renderCarousel = () => {
|
||||
const productList = document.getElementById("product-list");
|
||||
if (!productList) {
|
||||
console.error("Element with ID 'product-list' not found in the DOM.");
|
||||
productList.innerHTML = "";
|
||||
|
||||
if (selectedProducts.length === 0) return;
|
||||
|
||||
// Calculate indexes for left, center, right
|
||||
const leftIndex = (currentIndex - 1 + selectedProducts.length) % selectedProducts.length;
|
||||
const centerIndex = currentIndex;
|
||||
const rightIndex = (currentIndex + 1) % selectedProducts.length;
|
||||
|
||||
const visibleIndexes = [leftIndex, centerIndex, rightIndex];
|
||||
|
||||
visibleIndexes.forEach((idx, position) => {
|
||||
const product = selectedProducts[idx];
|
||||
const productId = getProductId(product);
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "product-card";
|
||||
if (position === 1) card.classList.add("is-centered");
|
||||
|
||||
card.dataset.productId = productId;
|
||||
card.innerHTML = `
|
||||
<img src="../images/_s-thumbs/${product.category}/${product.imageFile}" alt="${product.altText}">
|
||||
<h3>${product.productName}</h3>
|
||||
<p class="description">${position === 1 ? product.longDescription : product.shortDescription}</p>
|
||||
<p>$${product.price}</p>
|
||||
<button class="add-to-cart-btn" data-product-id="${productId}">Add to Cart</button>
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
card.querySelector('.add-to-cart-btn')
|
||||
.addEventListener('click', () => addToCart(productId, allProducts));
|
||||
|
||||
card.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (position === 0) prevProduct(); // left → move backward
|
||||
if (position === 2) nextProduct(); // right → move forward
|
||||
});
|
||||
|
||||
productList.appendChild(card);
|
||||
});
|
||||
};
|
||||
|
||||
// --- Navigation ---
|
||||
const nextProduct = () => {
|
||||
currentIndex = (currentIndex + 1) % selectedProducts.length;
|
||||
renderCarousel();
|
||||
};
|
||||
|
||||
const prevProduct = () => {
|
||||
currentIndex = (currentIndex - 1 + selectedProducts.length) % selectedProducts.length;
|
||||
renderCarousel();
|
||||
};
|
||||
|
||||
// --- Category Update ---
|
||||
const updateProductList = (category) => {
|
||||
const productList = document.getElementById("product-list");
|
||||
if (!productList) return console.error("Element with ID 'product-list' not found.");
|
||||
|
||||
selectedProducts = allProducts.filter(product => product.category === category);
|
||||
currentIndex = 0;
|
||||
|
||||
if (selectedProducts.length === 0) {
|
||||
console.error(`No products found for category: ${category}`);
|
||||
productList.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
productList.innerHTML = ""; // Clear existing products
|
||||
console.log(`Updating product list for category: ${category}`); // Debugging line
|
||||
renderCarousel();
|
||||
};
|
||||
|
||||
const selectedProducts = products[category];
|
||||
// --- Cart ---
|
||||
const addToCart = (productId, products) => {
|
||||
const product = products.find(p => getProductId(p) === productId);
|
||||
if (!product) return;
|
||||
|
||||
if (selectedProducts) {
|
||||
selectedProducts.forEach(product => {
|
||||
const productCard = document.createElement("div");
|
||||
productCard.className = "product-card";
|
||||
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
||||
const existing = cart.find(item => getProductId(item) === productId);
|
||||
|
||||
console.log(`Creating product card for: ${product.name}`); // Debugging line
|
||||
|
||||
productCard.innerHTML = `
|
||||
<img src="${product.image}" alt="${product.name}">
|
||||
<h3>${product.name}</h3>
|
||||
<p>${product.description}</p>
|
||||
<p>$${product.price}</p>
|
||||
<button class="add-to-cart-btn" data-product-id="${product.id}">Add to Cart</button>
|
||||
`;
|
||||
productList.appendChild(productCard);
|
||||
|
||||
// Add event listener for "Add to Cart" button
|
||||
const addToCartButton = productCard.querySelector('.add-to-cart-btn');
|
||||
addToCartButton.addEventListener('click', () => {
|
||||
addToCart(product.id);
|
||||
});
|
||||
});
|
||||
if (existing) {
|
||||
existing.quantity++;
|
||||
} else {
|
||||
console.error(`No products found for category: ${category}`);
|
||||
cart.push({ ...product, quantity: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
function addToCart(productId) {
|
||||
const product = findProductById(productId);
|
||||
if (product) {
|
||||
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
|
||||
const existingProduct = cart.find(item => item.id === productId);
|
||||
sessionStorage.setItem('cart', JSON.stringify(cart));
|
||||
alert(`${product.productName} has been added to your cart!`);
|
||||
};
|
||||
|
||||
if (existingProduct) {
|
||||
existingProduct.quantity++;
|
||||
} else {
|
||||
cart.push({ ...product, quantity: 1 });
|
||||
}
|
||||
// --- Init ---
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetch("../data/inventory.json")
|
||||
.then(r => r.json())
|
||||
.then(products => {
|
||||
allProducts = products;
|
||||
|
||||
sessionStorage.setItem('cart', JSON.stringify(cart));
|
||||
alert(`${product.name} has been added to your cart!`);
|
||||
}
|
||||
}
|
||||
const scrollLeftButton = document.getElementById('scroll-left');
|
||||
const scrollRightButton = document.getElementById('scroll-right');
|
||||
const categoryButtons = document.querySelectorAll(".cat-btn");
|
||||
|
||||
function findProductById(productId) {
|
||||
for (let category in products) {
|
||||
const product = products[category].find(item => item.id === productId);
|
||||
if (product) return product;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
scrollLeftButton.addEventListener('click', prevProduct);
|
||||
scrollRightButton.addEventListener('click', nextProduct);
|
||||
|
||||
categoryButtons.forEach(button => {
|
||||
button.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
const url = new URL(button.href);
|
||||
const category = url.searchParams.get('category');
|
||||
updateProductList(category);
|
||||
});
|
||||
});
|
||||
|
||||
const currentUrl = new URL(window.location.href);
|
||||
const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
|
||||
updateProductList(defaultCategory);
|
||||
})
|
||||
.catch(err => console.error('Problem fetching products:', err));
|
||||
});
|
||||
|
||||
81
src/styles/category-nav.css
Normal file
81
src/styles/category-nav.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* --- CATEGORY NAVIGATION --- */
|
||||
#right-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#category-nav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--color-soft-golden);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
max-width: 325px;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#category-nav-container {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#category-nav h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.categories ul li {
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
min-width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.categories ul li:hover {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.categories ul li a:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -1,8 +1,17 @@
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#footer-nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul, #footer-nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,8 +13,15 @@
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#product-carousel-feature {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#product-carousel-feature h2 {
|
||||
font-size: 1.875rem;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-shadow-layered);
|
||||
color: var(--color-destin-sand);
|
||||
@@ -35,42 +42,69 @@
|
||||
}
|
||||
|
||||
#product-carousel {
|
||||
display: flex; /* Flexbox layout for horizontal row */
|
||||
display: flex;
|
||||
flex-direction: row; /* Flexbox layout for horizontal row */
|
||||
gap: 20px; /* Space between product cards */
|
||||
overflow-x: auto; /* Enable horizontal scrolling */
|
||||
overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
|
||||
scroll-behavior: smooth; /* Smooth scrolling for buttons */
|
||||
padding: 10px; /* Optional padding inside the carousel */
|
||||
white-space: nowrap; /* Prevent wrapping to a new row */
|
||||
transform: translateX(4vw);
|
||||
min-height: 600px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: inline-block; /* Ensure cards stay in a row */
|
||||
min-width: 150px; /* Set the card size */
|
||||
max-width: 200px;
|
||||
max-height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
max-height: 350px;
|
||||
flex: 0 0 auto; /* Prevent resizing of cards */
|
||||
border: 1px solid #ddd; /* Optional border */
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
margin-left: 20px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: wrap;
|
||||
background-color: var(--color-destin-sand); /* Optional background */
|
||||
background-color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: all 0.5s ease-in-out; /* Added for smooth transitions */
|
||||
}
|
||||
|
||||
.product-card h3,
|
||||
.product-card .description,
|
||||
.product-card p,
|
||||
.product-card button {
|
||||
margin-top: 5px; /* reduce vertical spacing */
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
margin-bottom: 5px; /* space between image and title */
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* New style for the centered card */
|
||||
.product-card.is-centered {
|
||||
width: 340px;
|
||||
transform: scale(1.4);
|
||||
box-shadow: var(--shadow-strong);
|
||||
background-color: var(--color-destin-sand);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#scroll-left, #scroll-right {
|
||||
cursor: pointer; /* Show pointer to indicate clickable buttons */
|
||||
background-color: var(--color-dark-green); /* Dark green background */
|
||||
cursor: pointer;
|
||||
background-color: var(--color-dark-green);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
@@ -90,81 +124,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#main-gallery #right-aside {
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
#main-gallery #right-aside h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#main-gallery .categories ul {
|
||||
#product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#main-gallery .categories ul li {
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
margin-right: 35px;
|
||||
min-width: 100%;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#main-gallery .categories a {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
button#cart-details {
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 15px;
|
||||
color: var(--color-dark-green);
|
||||
font-weight: bold;
|
||||
font-size: 1.4em;
|
||||
text-align: center; /* Align text horizontally */
|
||||
height: 30px; /* Adjust height to fit text comfortably */
|
||||
padding: 0 15px; /* Horizontal padding for spacing */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transform: translateX(-15vw) translateY(-5vh);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
display: flex; /* Flexbox ensures content alignment */
|
||||
align-items: center; /* Center text vertically */
|
||||
justify-content: center; /* Center text horizontally */
|
||||
}
|
||||
|
||||
button#cart-details:hover {
|
||||
background-color: var(--color-dark-green);
|
||||
color: var(--color-destin-sand);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
flex-direction: row;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.add-to-cart-btn {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid 1px var(--color-dark-green);
|
||||
color: var(--color-dark-green);
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
@@ -173,10 +142,25 @@ button#cart-details:hover {
|
||||
}
|
||||
|
||||
.add-to-cart-btn:hover {
|
||||
background-color: var(--color-dark-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-destin-sand);
|
||||
border: solid var(--color-dark-green);
|
||||
color: var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#cart-details {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
#cart-details:hover {
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-destin-sand);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
|
||||
@@ -94,7 +94,7 @@ header .logo img {
|
||||
color: var(--color-dark-green); /* Dark green for the title */
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-outline-heading);
|
||||
text-shadow: var(--text-outline-business);
|
||||
}
|
||||
|
||||
header p.tagline {
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
/* Stylesheet for index.html */
|
||||
.main-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.promo-item,
|
||||
.testimonial-item,
|
||||
@@ -15,6 +22,7 @@
|
||||
#category-nav {
|
||||
flex: 1;
|
||||
box-shadow: var(--shadow-strong);
|
||||
max-width: 325px;
|
||||
}
|
||||
|
||||
#left-side {
|
||||
@@ -24,6 +32,7 @@
|
||||
border: solid var(--color-destin-sand);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -51,9 +60,9 @@
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 175px;
|
||||
min-height: 175px;
|
||||
max-width: 400px;
|
||||
max-height: 200px;
|
||||
min-height: 200px;
|
||||
max-width: 350px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -65,6 +74,39 @@
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
/* --- TESTIMONIALS --- */
|
||||
|
||||
#testimonials-container{
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
white-space: normal;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#testimonials-container h2 {
|
||||
font-size: 1.675rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-item {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 200px;
|
||||
max-width: 350px;
|
||||
min-height: 200px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* FEATURED ITEMS */
|
||||
#featured-container {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
@@ -77,16 +119,16 @@
|
||||
}
|
||||
|
||||
#featured-container h2 {
|
||||
font-size: 1.875rem;
|
||||
font-size: 2.675rem;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-shadow-layered);
|
||||
color: var(--color-destin-sand);
|
||||
background-color: var(--color-mid-green);
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
margin-left: 30px;
|
||||
width: fit-content;
|
||||
padding: 0 20px;
|
||||
padding: 0 50px;
|
||||
margin: 0px;
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
@@ -96,11 +138,14 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#featured-list {
|
||||
border: solid var(--color-mid-green);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -108,7 +153,7 @@
|
||||
color: var(--color-dark-green);
|
||||
background-color: var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
padding: 0px 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
@@ -134,6 +179,22 @@
|
||||
height: auto; /* Let the height adapt to content */
|
||||
}
|
||||
|
||||
.featured-card h3,
|
||||
.featured-card p,
|
||||
.feature-card figure,
|
||||
.featured-card figcaption {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.featured-card h3.product-name {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.featured-card p.price {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -159,112 +220,4 @@ p.short-description {
|
||||
|
||||
#featured-container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* --- TESTIMONIALS --- */
|
||||
|
||||
#testimonials-container{
|
||||
background-color: var(--color-mid-green);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
white-space: normal;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#testimonials-container h2 {
|
||||
font-size: 1.675rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-item {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
white-space: normal;
|
||||
max-height: 175px;
|
||||
max-width: 400px;
|
||||
min-height: 175px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* --- CATEGORY NAVIGATION --- */
|
||||
#category-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--color-soft-gold);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#category-nav-container {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#category-nav h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.categories ul li {
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
min-width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.categories ul li:hover {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.categories ul li a:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -19,6 +19,12 @@
|
||||
-0.5px 0.5px 1px var(--color-dark-green),
|
||||
0.5px -0.5px 1px var(--color-dark-green);
|
||||
|
||||
--text-outline-business:
|
||||
0.5px 0.5px 1px var(--color-destin-sand),
|
||||
-0.5px -0.5px 1px var(--color-destin-sand),
|
||||
-0.5px 0.5px 1px var(--color-destin-sand),
|
||||
0.5px -0.5px 1px var(--color-destin-sand);
|
||||
|
||||
/* Layered Text Shadow */
|
||||
--text-shadow-layered:
|
||||
0.5px 0.5px 1px var(--color-dark-green),
|
||||
|
||||
Reference in New Issue
Block a user